關(guān)于使用Q-SYS制作用戶(hù)界面時(shí)的幾個(gè)建議

    AV市場(chǎng)一直不斷地在提高給終端用戶(hù)提供的用戶(hù)界面標(biāo)準(zhǔn)，因此用戶(hù)的期望值也越來(lái)越高了。許多大型公司都有一個(gè)由平面設(shè)計(jì)，營(yíng)銷(xiāo)顧問(wèn)和品牌冠軍所組成的全職團(tuán)隊(duì)來(lái)評(píng)估和改進(jìn)端到端的使用體驗(yàn)，因?yàn)榻K端用戶(hù)想要的是他們每天都要使用的界面能夠直觀且有著簡(jiǎn)潔主義的美感。然而當(dāng)你試圖在一個(gè)7英寸的觸摸面板上控制整個(gè)系統(tǒng)時(shí)，達(dá)成簡(jiǎn)單的目標(biāo)并不容易，但AV行業(yè)與其它軟件行業(yè)一樣還是要盡量滿(mǎn)足這個(gè)需求。

    雖然沒(méi)有一個(gè)最佳的解決方案，但是在設(shè)計(jì)用戶(hù)界面時(shí)仍然有些很好的規(guī)律可以參考，讓我們來(lái)列舉其中一些。

    咨詢(xún)客戶(hù)的品牌方針

    大多數(shù)的客戶(hù)都有一些自己的品牌形象宣傳方針來(lái)讓我們參考。一般包含規(guī)定使用的顏色、字體和Logo使用規(guī)則。從這幾個(gè)點(diǎn)入手來(lái)開(kāi)始您的用戶(hù)界面設(shè)計(jì)可以節(jié)省很多時(shí)間和精力。如果客戶(hù)沒(méi)有自己的品牌宣傳規(guī)則，可以去看看他們的官網(wǎng)使用的是什么樣的顏色，字體，標(biāo)識(shí)和Logo來(lái)作為參考。

    工具推薦:?Image ColorPicker,?What the Font

    設(shè)定一個(gè)整體規(guī)劃

    當(dāng)我們?cè)O(shè)計(jì)系統(tǒng)時(shí)，我們會(huì)去思考如何將一個(gè)個(gè)設(shè)備連接在一起。設(shè)計(jì)用戶(hù)界面也是一樣的。第一步就是設(shè)定一個(gè)基本的整體規(guī)劃。如果只是簡(jiǎn)單地在頁(yè)面上放置按鈕而不考慮整體的布局，就會(huì)導(dǎo)致界面很混亂。因此預(yù)先做好規(guī)劃很重要。先列出最終用戶(hù)需要的每個(gè)功能，然后可以用您的思路來(lái)進(jìn)行規(guī)劃。如果您想做一個(gè)可以允許用戶(hù)進(jìn)入子頁(yè)的單一主頁(yè)，那么就可能是圖1那個(gè)樣子�；蛘吣�更希望用戶(hù)通過(guò)在菜單中導(dǎo)航來(lái)訪問(wèn)各頁(yè)面（圖2）。但無(wú)論您選擇哪種方法，提前做好規(guī)劃能夠確保您可以創(chuàng)建出一個(gè)簡(jiǎn)單易用的用戶(hù)界面。

    工具推薦:?Adobe XD, Figma, a flow chart creator of some type

    設(shè)定一個(gè)整體規(guī)劃

    當(dāng)我們?cè)O(shè)計(jì)系統(tǒng)時(shí)，我們會(huì)去思考如何將一個(gè)個(gè)設(shè)備連接在一起。設(shè)計(jì)用戶(hù)界面也是一樣的。第一步就是設(shè)定一個(gè)基本的整體規(guī)劃。如果只是簡(jiǎn)單地在頁(yè)面上放置按鈕而不考慮整體的布局，就會(huì)導(dǎo)致界面很混亂。因此預(yù)先做好規(guī)劃很重要。先列出最終用戶(hù)需要的每個(gè)功能，然后可以用您的思路來(lái)進(jìn)行規(guī)劃。如果您想做一個(gè)可以允許用戶(hù)進(jìn)入子頁(yè)的單一主頁(yè)，那么就可能是圖1那個(gè)樣子�；蛘吣�更希望用戶(hù)通過(guò)在菜單中導(dǎo)航來(lái)訪問(wèn)各頁(yè)面（圖2）。但無(wú)論您選擇哪種方法，提前做好規(guī)劃能夠確保您可以創(chuàng)建出一個(gè)簡(jiǎn)單易用的用戶(hù)界面。

    工具推薦:?Adobe XD, Figma, a flow chart creator of some type

自動(dòng)化UCI

    UCI很容易就會(huì)被設(shè)計(jì)得過(guò)于復(fù)雜，特別是應(yīng)對(duì)大型系統(tǒng)時(shí)。通常，保持其盡量精簡(jiǎn)的最佳方法是根據(jù)用戶(hù)利用空間的方式來(lái)對(duì)系統(tǒng)進(jìn)行控制。自動(dòng)顯示和隱藏某些基于用戶(hù)需求的頁(yè)面可以帶來(lái)一種“智能化”的用戶(hù)體驗(yàn)。例如，如果用戶(hù)正在通話(huà)，請(qǐng)創(chuàng)建一個(gè)通話(huà)頁(yè)面，其中只包含圍繞通話(huà)功能所需的所有控制，即攝像頭控制、呼叫音量和靜音按鈕。能夠基于使用邏輯來(lái)快速訪問(wèn)特定的控件可以極大地改善用戶(hù)體驗(yàn)，并保持UCI的精簡(jiǎn)和高效。

    使用CSS

    層疊樣式表(CSS)允許您為每個(gè)控件類(lèi)型、文本對(duì)象、橫幅、圖標(biāo)等創(chuàng)建一個(gè)分類(lèi)�；�點(diǎn)時(shí)間來(lái)為您的客戶(hù)品牌創(chuàng)建一個(gè)風(fēng)格庫(kù)將讓你可以更快的擴(kuò)展和模塊化該客戶(hù)的UCI。QSC對(duì)微軟Teams Room的設(shè)計(jì)樣本就是很好的CSS的例子，您可以在資產(chǎn)管理器中找到這個(gè)設(shè)計(jì)樣本。該示例設(shè)計(jì)中的用戶(hù)界面正是對(duì)按鍵、文本對(duì)象、圖標(biāo)等使用了CSS分類(lèi)。我建議您趕快開(kāi)始使用stylesheet，您可以在資產(chǎn)管理器中安裝它。這將是您系統(tǒng)設(shè)計(jì)的一個(gè)里程碑！

    工具推薦:?Q-SYS HelpGuide (UCI Styles), Visual Studio Code

    學(xué)習(xí)一種設(shè)計(jì)框架

    設(shè)計(jì)框架能夠?yàn)楦纳朴脩?hù)界面提供新高度。例如谷歌打造了一個(gè)優(yōu)秀的設(shè)計(jì)系統(tǒng)，Material Design，它在從按鍵樣式，字體大小，縮放等沒(méi)一個(gè)點(diǎn)上都提供了指導(dǎo)方針。但無(wú)論您選擇哪個(gè)框架，設(shè)計(jì)框架都是優(yōu)秀的資源，能夠幫助您加快現(xiàn)代界面設(shè)計(jì)的速度。我強(qiáng)烈建議您找到一個(gè)適合的框架來(lái)使用。

    工具推薦:?Material.IO,?MaterialTheme Builder

    在Q-SYS中設(shè)計(jì)UCI是很有趣的。最后祝大家玩得開(kāi)心！