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

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

    咨詢客戶的品牌方針

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

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

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

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

    工具推薦:?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ì)用戶界面也是一樣的。第一步就是設(shè)定一個(gè)基本的整體規(guī)劃。如果只是簡(jiǎn)單地在頁(yè)面上放置按鈕而不考慮整體的布局，就會(huì)導(dǎo)致界面很混亂。因此預(yù)先做好規(guī)劃很重要。先列出最終用戶需要的每個(gè)功能，然后可以用您的思路來進(jìn)行規(guī)劃。如果您想做一個(gè)可以允許用戶進(jìn)入子頁(yè)的單一主頁(yè)，那么就可能是圖1那個(gè)樣子�；蛘吣�更希望用戶通過在菜單中導(dǎo)航來訪問各頁(yè)面（圖2）。但無(wú)論您選擇哪種方法，提前做好規(guī)劃能夠確保您可以創(chuàng)建出一個(gè)簡(jiǎn)單易用的用戶界面。

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

自動(dòng)化UCI

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

    使用CSS

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

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

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

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

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

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