張燁

用戶界面和系統(tǒng)交互設(shè)計(jì)

用戶界面我們每天都在接觸，不論是安卓還是iPhone手機(jī)，都屬于用戶界面。在中控系統(tǒng)中比較特殊，每個(gè)界面都是獨(dú)一無二的，或者說是度身定制的，我們這里會(huì)討論什么樣的界面是好的界面，另外在設(shè)計(jì)用戶界面的時(shí)候，有哪些地方需要注意。

做系統(tǒng)配置或編程時(shí)，通常工程師也會(huì)負(fù)責(zé)做界面的設(shè)計(jì)，工程師邏輯思維能力比較強(qiáng)，但是美感上會(huì)稍有欠缺，這時(shí)就會(huì)出現(xiàn)一些問題。圖一中的三個(gè)界面，其本身的背景圖都是非常漂亮的，但是和按鈕做了不太合適的搭配之后，就顯得有些拙劣。所以，對(duì)于系統(tǒng)設(shè)計(jì)師來說，可視化的元素非常重要，它不應(yīng)該在實(shí)施的時(shí)候才被考慮，而是應(yīng)該在先期就和客戶做一些溝通。

如何來做一個(gè)好的界面？Visual Basic之父Alan Cooper曾說過：“無論你的界面看起來有多酷，如果能少那么一點(diǎn)花哨會(huì)更好?！币馑际俏覀冏鱿到y(tǒng)交互的時(shí)候一定要非常合理，非常有效。他講到了三個(gè)方法，一個(gè)是要看目標(biāo)受眾是誰，有的人只是以消遣為目的；二是要有強(qiáng)大的功能和目標(biāo)，這里的使用者通常是系統(tǒng)的維護(hù)和操作人員，他希望大部分的功能都可以通過圖形化的界面來實(shí)現(xiàn)；第三是演講者，其使用的場(chǎng)景通常是固定的，比如說很多酒店會(huì)有清掃模式、宴會(huì)模式、演講模式等所謂的場(chǎng)景。Cooper認(rèn)為一定要把交互式設(shè)計(jì)放在前面，然后再去設(shè)計(jì)程序，他把用戶的困難都?xì)w罪于拙劣的軟件設(shè)計(jì)。

要改進(jìn)用戶界面，有以下的一些方法：

1. 一致性，設(shè)計(jì)最重要的準(zhǔn)則是一致。用戶希望在同一組織不同的會(huì)議室里都能輕松操作，這就需要為他們提供一致性的界面。對(duì)于集成商來說，如果經(jīng)常做一致性的界面，顏色、形狀、尺寸、字體、標(biāo)簽、位置等元素在每個(gè)項(xiàng)目中都保持一致，對(duì)于實(shí)施項(xiàng)目非常有利，不需要每次為了修改某個(gè)按鈕的顏色或形狀去花很多時(shí)間。一致性不管是對(duì)最終用戶還是集成商來說，都可以從中獲益。

2. 功能要清晰可見，一個(gè)組件要能提供用戶執(zhí)行操作的線索，用戶需要很自然地和觸摸屏界面的組件進(jìn)行交互，并確定：哪個(gè)組件是可以被按下的？哪個(gè)區(qū)域需要輸入？哪個(gè)區(qū)域能提供反饋？這就需要為按鈕設(shè)計(jì)可按的屬性，如圖二，左邊的按鈕可以被視為標(biāo)簽或者按鈕，因?yàn)樗鼪]有明顯的屬性顯示它是可以按的，右邊的按鈕表現(xiàn)出一些層次感，有光的效果以及陰影的效果，這就是提示用戶，這里是可以按下去的。另外，按鈕按下去至少要有兩種狀態(tài)，一個(gè)是未按的狀態(tài)，一個(gè)是按下去的狀態(tài)，例如高亮的效果，這就是非常好的用戶反饋。

實(shí)現(xiàn)功能清晰可見，有很多小技巧：

·按鈕寬高比的黃金比例：Phi=1 1.62。

·按鈕的尺寸：觸摸屏上按鈕理想尺寸是1.25cm的正方形，采用黃金比例的按鈕尺寸應(yīng)該為1.9×3.1cm（屏幕尺寸≥12”），如果屏幕尺寸小于12”的話，可以用0.75÷1.62，得出按鈕尺寸為0.75”×0.45”。這些數(shù)據(jù)可以作為設(shè)計(jì)按鈕時(shí)的參考，但并不是說一定要那么精確地去執(zhí)行。

·因?yàn)轱@示屏幕用像素概念來定義，每個(gè)屏幕的點(diǎn)距是不同的。那么設(shè)計(jì)時(shí)需遵循以下步驟：

第一. 查詢屏幕的水平分辨率，在觸摸屏的產(chǎn)品參數(shù)上找到其分辨率是多少。

第二. 測(cè)量屏幕的橫向尺寸。

第三. 用像素?cái)?shù)除以屏幕尺寸：例如，800pixels/6”= 每英寸133個(gè)像素。

第四、用理想按鈕的尺寸乘以每英寸的像素?cái)?shù)：例如，寬：133dpi×0.75”=100像素；高： 133dpi×0.45”=60像素。

·按鈕間隔：按鈕間適當(dāng)?shù)拈g隔會(huì)方便操作。

·經(jīng)驗(yàn)法則：小于72個(gè)像素的按鈕間隔為5至10像素。

·保持按鈕水平和垂直間隔的統(tǒng)一：為按鈕提供功能提示，盡可能使用按鈕和圖標(biāo)的組合。

·圖標(biāo)可能有多重含義，因此要使用文字明確功能含義。

·按鈕使用簡(jiǎn)潔圖標(biāo)更容易識(shí)別和理解。圖標(biāo)使功能更容易理解。

·按鈕的方向：讓用戶更容易識(shí)別按鈕的功能，有指向性的按鈕必須和實(shí)際方向一致。

·按鈕分區(qū)：遵循功能分區(qū)的原則，分區(qū)不明確會(huì)給用戶帶來困擾。通過給不同功能區(qū)加邊框，可以幫助用戶快速找到。

3. 有技巧地使用信息映射

是將大量的信息分成小模塊，從而便于管理的方法。

圖三是固定按鈕的面板，非常明確地告訴用戶哪里是控制顯示器、控制音量和控制信號(hào)源的區(qū)域。而不同的人做出的觸摸屏界面是千差萬別的，我們要充分利用各個(gè)廠家提供的模板，這其中有的模板是花哨為主，有些模板是實(shí)用為主，在系統(tǒng)設(shè)計(jì)時(shí)要做比較好的取舍。

4. 美觀和功能性

另外還要在功能和美觀上做一些平衡，功能強(qiáng)大的音視頻系統(tǒng)強(qiáng)調(diào)交互，顏色、形狀和空間必須有機(jī)融合，功能和外觀需要做到平衡。

按鈕鍵盤：10鍵數(shù)字鍵盤——電腦的數(shù)字鍵盤，不建議在用戶界面設(shè)計(jì)中使用。電話鍵盤——用于數(shù)字輸入的通用鍵盤，很多日常設(shè)備上都有這樣的鍵盤，如ATM機(jī)、導(dǎo)航系統(tǒng)、復(fù)印機(jī)、紅外遙控器，建議在用戶界面中使用這樣的鍵盤。

5. 恰當(dāng)?shù)厥褂蒙?/p>

設(shè)計(jì)配色方案是設(shè)計(jì)一個(gè)吸引眼球的觸摸屏界面的核心，不同的人對(duì)色彩會(huì)有不同的感覺，有些色彩的組合是很美觀的，有些色彩的組合則會(huì)讓用戶感到混亂。音視頻工程師需要了解如何混合不同的顏色以及不同顏色的關(guān)系，協(xié)助設(shè)計(jì)師選擇匹配用戶界面的顏色。

顏色搭配得好不單單是為了好看，以圖四為例，左邊的圖普通人是可以識(shí)別的，但對(duì)顏色識(shí)別有障礙的人看就是一團(tuán)黑，因此灰度單色識(shí)別功能可以很好地確定有顏色識(shí)別障礙的人是否能夠看清界面的內(nèi)容。我們?cè)谠O(shè)計(jì)時(shí)不單是為普通人設(shè)計(jì)，而是要確保所有人都能清楚識(shí)別所有內(nèi)容。

最后，還需要清晰地定義靜態(tài)和動(dòng)態(tài)區(qū)域。

中控系統(tǒng)調(diào)試技巧

實(shí)用的工具1：GUI項(xiàng)目報(bào)告

如何保證最終完成的中控系統(tǒng)能夠體現(xiàn)設(shè)計(jì)的初衷呢？最重要的是讓系統(tǒng)設(shè)計(jì)師和項(xiàng)目經(jīng)理有效溝通。

系統(tǒng)設(shè)計(jì)師Vs項(xiàng)目經(jīng)理，誰更理解整個(gè)音視頻系統(tǒng)將要實(shí)現(xiàn)的功能？顯然是設(shè)計(jì)師。

系統(tǒng)設(shè)計(jì)師Vs項(xiàng)目經(jīng)理，誰對(duì)項(xiàng)目最終的實(shí)現(xiàn)效果起更重要的作用？一般是項(xiàng)目經(jīng)理，當(dāng)然在小項(xiàng)目中這兩者有可能是同一個(gè)人。

很多GUI軟件里都有一個(gè)生成項(xiàng)目報(bào)告的工具如圖五，報(bào)告的內(nèi)容里會(huì)把界面的截圖貼在文檔上，同時(shí)針對(duì)按鍵的功能生成一個(gè)表格。系統(tǒng)設(shè)計(jì)師在設(shè)計(jì)好系統(tǒng)之后，由工程師或者界面設(shè)計(jì)人員設(shè)計(jì)好界面并生成文檔，然后設(shè)計(jì)師在報(bào)告的表格中寫明每個(gè)按鈕實(shí)現(xiàn)什么功能。項(xiàng)目經(jīng)理可以借助這個(gè)報(bào)告在現(xiàn)場(chǎng)進(jìn)行驗(yàn)收。項(xiàng)目經(jīng)理并不一定要會(huì)調(diào)試這個(gè)系統(tǒng)，他只需要清楚地知道最終實(shí)現(xiàn)的效果是怎樣的。

實(shí)用的工具2：串口/網(wǎng)絡(luò)調(diào)試工具

很多時(shí)候中控的產(chǎn)品并不一定能夠及時(shí)到現(xiàn)場(chǎng)交付使用，但是我們需要提前到現(xiàn)場(chǎng)去對(duì)系統(tǒng)進(jìn)行調(diào)試，調(diào)試的目的是看現(xiàn)場(chǎng)的接線是否正確，這個(gè)時(shí)候就可以利用串口或者網(wǎng)絡(luò)調(diào)試工具，直接發(fā)送代碼給受控設(shè)備，看是否能夠受控。

判斷是否能夠受控，中間有個(gè)關(guān)鍵節(jié)點(diǎn)，就是串行線纜的連接問題。很多人一說到串行線纜的測(cè)試就會(huì)想到萬用表，但實(shí)際上我們可以充分利用中控前面板的LED燈。例如圖六中這些燈是指串口的COM口，如果發(fā)送指令就看TX燈是否亮，如果受控設(shè)備接收到，就會(huì)有一個(gè)反饋碼，通過這種方式就可以判斷線纜連接是否正確。不單是串口的LED燈，還可以采用這樣的方法看它的電源、紅外。

講到調(diào)試工具，傳統(tǒng)意義上的中控都有串口，但是現(xiàn)在市場(chǎng)上已經(jīng)很難有帶串口的筆記本了，很多人會(huì)用USB的方式將其轉(zhuǎn)成串口線。但是會(huì)遇到很多問題，第一是驅(qū)動(dòng)的問題，因?yàn)檫@個(gè)驅(qū)動(dòng)不是Windows本身自帶的驅(qū)動(dòng)，通常要用驅(qū)動(dòng)光盤。另外，端口號(hào)是頻繁更改的，很多人并不知道去哪里改端口號(hào)。第三是穩(wěn)定性問題，15元的轉(zhuǎn)接線與70元的可能存在很大差別。更好的方法是，利用中控的PASS-THROUGH貫通功能，即計(jì)算機(jī)和中控系統(tǒng)采用網(wǎng)絡(luò)方式連接貫通，讓其某一個(gè)串口或者COM口發(fā)送指令給受控設(shè)備，好處就是電腦不必配備RS-232端口或USB轉(zhuǎn)串口的線。

對(duì)中控調(diào)試人員來說，還需要學(xué)習(xí)網(wǎng)絡(luò)知識(shí)，為AV/IT整合做準(zhǔn)備。特別是需要了解IT方面的語言，比如：常用網(wǎng)絡(luò)協(xié)議、端口，排除簡(jiǎn)單網(wǎng)絡(luò)故障的方法，要能夠用IT的語言和IT工程師溝通。

iPad在中控領(lǐng)域的應(yīng)用

最后來談?wù)刬Pad在中控領(lǐng)域的應(yīng)用，近年來，隨著iPad的普及，它也經(jīng)常被用作中控系統(tǒng)觸摸屏。其優(yōu)點(diǎn)在于，無線的方式操作更靈活，同時(shí)價(jià)格遠(yuǎn)低于中控觸摸屏。但也有潛在的問題，如電池沒電，App被誤刪，Wi-Fi穩(wěn)定性受到路由器、網(wǎng)絡(luò)環(huán)境等很多因素影響，iOS操作系統(tǒng)升級(jí)后可能無法兼容原來的軟件，設(shè)備丟失等。因此，我們建議把iPad作為輔助的控制方式，不要作為主要的操作平臺(tái)，以保證系統(tǒng)隨時(shí)隨地有效運(yùn)行。