液壓支架遠(yuǎn)程控制系統(tǒng)界面優(yōu)化設(shè)計研究

薛夢穎， 賀孝梅

（中國礦業(yè)大學(xué)建筑與設(shè)計學(xué)院， 江蘇徐州 221116）

0 引言

國家礦山安全監(jiān)察局發(fā)布的《“十四五”礦山安全生產(chǎn)規(guī)劃》中明確提出了實施礦山智能化發(fā)展的行動計劃。各類礦山安全生產(chǎn)綜合信息系統(tǒng)的應(yīng)用加速了煤礦行業(yè)的智能化建設(shè)。界面作為用戶控制系統(tǒng)的媒介，其信息呈現(xiàn)方式影響著用戶的操作， 如何提高用戶的信息搜索效率是此類界面設(shè)計的重中之重。 以液壓支架操作系統(tǒng)界面為例， 通過結(jié)合人的視覺加工方式和視覺搜索的兩種效應(yīng)對其進(jìn)行優(yōu)化設(shè)計，探索這類界面的新的設(shè)計思路，對于我國煤炭行業(yè)的智能化發(fā)展有著推動作用。

1 視覺加工的方式

視覺是人類獲取信息最主要的途徑， 視網(wǎng)膜接受外界輸入的視覺信息，經(jīng)過大腦的加工處理，輸出為視覺判斷和運(yùn)動決策，進(jìn)而支配人的行為[1]，這個過程就是視覺信息加工的過程，也就是視覺認(rèn)知過程，它包含了自下而上和自上而下兩種信息處理機(jī)制[2]。

1.1 自下而上的加工方式

自下而上的視覺加工也叫數(shù)據(jù)驅(qū)動加工， 是一種由低水平到高水平的加工方式， 它強(qiáng)調(diào)信息刺激的基本特征在識別物體時的重要性。 例如，當(dāng)我們將視線轉(zhuǎn)移到桌子上的某一物體時，大腦首先注意到的是物體的顏色、大小、形狀等基本特征，在此基礎(chǔ)上再進(jìn)行更復(fù)雜更高級的加工。 自下而上的加工方式是認(rèn)知的第一步，對于基本特征的識別有助于我們認(rèn)識一些更復(fù)雜完整的事物。

1.2 自上而下的加工方式

當(dāng)我們完成對物體基本特征的識別后， 自上而下的加工緊接著就開始了， 由于自下而上的加工是在很短的時間內(nèi)完成的，所以這兩種加工方式幾乎是同時發(fā)生的，但自上而下的加工方式耗時更長。 自上而下的加工是一種高水平的心理加工，也叫概念驅(qū)動加工，它強(qiáng)調(diào)的是個體已經(jīng)形成的概念和經(jīng)驗等對物體識別的影響[3]。 例如，當(dāng)我們發(fā)現(xiàn)一塊顯示屏幕時， 會下意識想要用手指去點(diǎn)擊或者滑動，這就是一種自上而下的加工方式。對于復(fù)雜物體的認(rèn)知， 自下而上和自上而下的加工方式都是不可或缺的。

2 視覺搜索的兩種效應(yīng)

視覺搜索是人在復(fù)雜的環(huán)境中獲取信息的重要途徑，是一項復(fù)雜的認(rèn)知過程，它需要觀察者從眾多干擾項中精準(zhǔn)找到觀察目標(biāo)[4]，有較強(qiáng)的目的性。 視覺搜索包含五個重要的要素，分別是搜索目標(biāo)、搜索區(qū)域、搜索背景、搜索任務(wù)和搜索者， 其中搜索目標(biāo)是視覺搜索中最重要的元素；這五個要素都影響著視覺搜索的效果，在這里我們著重討論與搜索目標(biāo)和搜索背景密切相關(guān)的兩個刺激變量——我們的搜索目標(biāo)是有著單一獨(dú)立的特征還是聯(lián)合特征，以及，我們的搜索目標(biāo)是否有呈現(xiàn)出來的特征。即單一特征/聯(lián)合特征效應(yīng)和特征呈現(xiàn)/特征不呈現(xiàn)效應(yīng)對于視覺搜索的影響[5]。

2.1 單一特征/聯(lián)合特征效應(yīng)

據(jù)研究， 當(dāng)觀察目標(biāo)與其他目標(biāo)僅有一項單一特征（如顏色）不相同時，觀察者會更容易搜索到目標(biāo)對象。現(xiàn)有任務(wù)1 如下，在圖1 的（a）部分和（b）部分中分別搜索紅色正方形并比較檢索時間。 經(jīng)過對比，不難發(fā)現(xiàn)（a）部分的檢索時間比（b）部分更短，且不論（a）中的藍(lán)色正方形是只有5 個還是多達(dá)50 個，紅色正方形都很“凸出”以至于幾乎瞬間就可以觀察到。而在（b）部分中搜索紅色正方形就要困難許多， 且隨著干擾項的增加搜索時間也會明顯增加。 這是因為（a）部分的搜索目標(biāo)只有顏色這個單一特征有所不同，沒有其他特征分散我們的注意力，也就更容易被我們搜索到；相反地，（b）部分多了紅色圓形這一干擾項， 迫使我們把注意力放了每一個項目中來與搜索目標(biāo)的特征進(jìn)行逐一對比，也就是說，（b）部分中增加的“形狀”這一特征分散了我們的搜索注意力，這無疑會增加大量的搜索時間。

圖1 任務(wù)1（來源：作者自繪）

2.2 特征呈現(xiàn)/特征不呈現(xiàn)效應(yīng)

當(dāng)人們在進(jìn)行視覺加工時， 對積極信息的處理效果比消極信息要好，而在視覺搜索中，特征呈現(xiàn)的信息可以看作是積極信息， 消極信息則指的是特征沒有呈現(xiàn)的信息。 因此，一般情況下，人們搜索呈現(xiàn)特征比不呈現(xiàn)特征要快。現(xiàn)有任務(wù)2 如下，在圖2（a）部分搜索帶線段的正方形（特征呈現(xiàn)），在（b）部分搜索不帶線段的正方形（特征不呈現(xiàn)），并比較搜索時間。結(jié)果與任務(wù)1 相同，原因是在搜索（b）部分中不帶線段的正方形時，我們需要將注意力分散給每一個項目，這大大降低了我們的搜索效率。

圖2 任務(wù)2（來源：作者自繪）

通過對比，學(xué)者發(fā)現(xiàn)，圖1 和圖2 中的（a）部分搜索任務(wù)都是一種自下而上的加工方式，有著“自發(fā)性”，幾乎是瞬間完成的，因此用時要短得多；而（b）部分任務(wù)需要逐個檢查每一個項目來與自己腦海中已經(jīng)形成的搜索目標(biāo)的概念進(jìn)行對比， 用到了自下而上和自上而下相結(jié)合的加工方式，是非瞬時的，所以兩個任務(wù)都是（b）部分消耗更多的時間。 因此，在進(jìn)行設(shè)計實踐時，要使用戶更多地運(yùn)用自下而上的視覺加工方式， 而盡量減少用到自上而下的視覺加工方式；對于界面中的重要信息，其表現(xiàn)形式可以從單一特征和特征呈現(xiàn)入手，以提高用戶的搜索效率。

3 液壓支架遠(yuǎn)程控制系統(tǒng)界面要素提取與分析

在界面中，色彩、文字和按鈕一般都是其重要的構(gòu)成要素， 圖3 所示為某公司液壓支架遠(yuǎn)程控制系統(tǒng)優(yōu)化前的界面之一，下面將以此為例，對界面中色彩、文字和按鈕這三個構(gòu)成要素進(jìn)行提取與分析， 并結(jié)合前文內(nèi)容構(gòu)建優(yōu)化策略。

圖3 優(yōu)化前界面

3.1 色彩

色彩是界面設(shè)計中具有最強(qiáng)視覺沖擊力的要素[6]。 在界面中，色彩更多地用來傳遞如下信息： 反饋信息——通過不同的顏色給予用戶信息反饋，如綠色代表成功信息，紅色代表錯誤信息；突出層級——通過色彩對界面內(nèi)容進(jìn)行分層展示，可以提高用戶讀取信息的效率，如在導(dǎo)航欄中，父級菜單與子級菜單的色彩通常有所區(qū)別， 以此來區(qū)分層級關(guān)系； 表明狀態(tài)——通過顏色來區(qū)分某個事物處于何種狀態(tài)， 如對于文字按鈕來說，藍(lán)色和灰色表示不同狀態(tài)等。 因此良好的色彩設(shè)計對于界面信息的呈現(xiàn)以及用戶對界面的理解都起著十分重要的作用。

圖3 所示界面在色彩上大量運(yùn)用色相接近的藍(lán)色，且色階偏低，給人一種視覺上的模糊感；且部分白色文字和文字背景色之間的對比不明顯，不僅無法突出文字信息，甚至使文字不易識別，給用戶造成極大的視覺負(fù)擔(dān)；當(dāng)用戶有操作行為，液壓支架狀態(tài)發(fā)生變化時，界面中的文字色彩會發(fā)生變化——由白色變?yōu)榧t色，雖然這種變化形式可以對用戶起到提示作用，但在色彩心理模型中，界面中的紅色文字往往與“禁止”、 “危險”等含義聯(lián)系在一起，而本界面中狀態(tài)變化只是為了展示用戶在操作液壓支架時的數(shù)據(jù)變化，是一種正常的操作行為，不適合用紅色來展示。

在對界面的色彩進(jìn)行設(shè)計時，首先要根據(jù)公司基因確定主色；然后充分運(yùn)用人們對色彩的心理模型，來幫助用戶提高識別效率；接著在文字分割線、邊框等場景中大量運(yùn)用中性色，避免色彩過于繁雜給用戶造成視覺疲勞。 在此基礎(chǔ)上保證信息能夠清晰地呈現(xiàn)在用戶眼前，對于界面中的重要信息內(nèi)容，可運(yùn)用色彩這一單一特征對重要信息進(jìn)行強(qiáng)調(diào)，即采取與別的信息內(nèi)容及背景色形成對比的反差色來突出展示，以此來提高用戶識別信息的效率。

3.2 文字

在界面設(shè)計中， 文字信息不可或缺， 它一般起著提醒、按鍵功能、解釋以及輔助操作等作用。 好的文字信息設(shè)計不僅可以為用戶展示必要的界面信息， 幫助用戶理解界面，合適的圖文結(jié)構(gòu)還能起到美化界面的作用，為用戶提供良好的視覺效果[7]。 相反地，如果界面文字設(shè)計不合理，不僅無法發(fā)揮上述作用，甚者還會對界面理解起著反向作用，降低用戶的使用感受和使用效率。

圖3 所示界面中的文字包括標(biāo)題、控件文字、提示信息以及日期時間等信息。其中，“護(hù)幫”、“支架號88888”等是最重要的文字信息， 可以顯示操作過程中實時的狀態(tài)及數(shù)據(jù)變化；“遠(yuǎn)程授權(quán)”等為控件文字，表明了控件所鏈接著的下一級界面內(nèi)容。

本界面在文字方面雖然有一定功能分區(qū)， 但字號無明顯差異，存在著主次不分的問題，不能突出界面中的重點(diǎn)功能和信息， 同時文字信息無規(guī)律的擺放方式又進(jìn)一步降低了用戶的搜索效率。 改進(jìn)方案可以從文字尺寸和顏色這兩個單一特征入手， 通過字號的大小對比來突出重點(diǎn)， 通過顏色對比提示信息變化， 也可以增加呈現(xiàn)特征，如增加下劃線來強(qiáng)調(diào)重要信息及其變化；當(dāng)然也要注意文字信息的布局，使之井然有序。

3.3 按鈕

按鈕是界面中最基礎(chǔ)的元素之一， 每個按鈕代表著一個操作指令，可以響應(yīng)用戶的各種操作行為。合理的按鈕設(shè)計及排布方式可以引導(dǎo)用戶采取你希望他們采取的行動，同時能夠幫助用戶避免犯錯[8]。 界面中的按鈕可以大致分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕5 類。 其中次按鈕是界面中最常規(guī)的按鈕。

對于圖3 所示界面， 一共有右上角所示的 “遠(yuǎn)程授權(quán)”等4 個次按鈕，起著導(dǎo)航的作用，屬于同一層級，沒有主次之分。 圖中所示的“護(hù)幫”等為顯示操作變化的提示信息，但在形式上做成了類似控件的模樣，容易讓操作者產(chǎn)生困惑。除此之外，控件的表現(xiàn)形式偏向復(fù)雜的三維設(shè)計，容易增加用戶的視覺負(fù)擔(dān)，同時也與目前市面上扁平化的審美趨勢不符。

改進(jìn)方案應(yīng)該以扁平化設(shè)計為主， 因為四個按鈕沒有層級區(qū)別，所以其表現(xiàn)形式應(yīng)當(dāng)保持一致，否則會造成層級混亂，不易于用戶理解；此外，按鈕的視覺表現(xiàn)形式應(yīng)該與“護(hù)幫”等提示信息有明顯的區(qū)別，可以從呈現(xiàn)特征入手對兩者進(jìn)行區(qū)分。 同時注意功能區(qū)域的劃分。

3.4 設(shè)計策略映射關(guān)系建立

結(jié)合前文對視覺搜索效應(yīng)以及界面構(gòu)成要素的分析，現(xiàn)將二者結(jié)合建立如下設(shè)計策略映射關(guān)系（圖4）。

圖4 設(shè)計策略映射關(guān)系（來源：作者自繪）

對于界面的優(yōu)化設(shè)計， 一方面從單一特征的色彩和尺寸對比入手， 對于重要信息采取尺寸放大和色彩對比的措施，讓其在界面之中給人一種“凸出來”的感覺；另一方面，為重要信息增加單一特征，比如線框或下劃線，進(jìn)一步強(qiáng)調(diào)信息的重要性。根據(jù)識別需求，對重要信息合理選擇其中一種或綜合運(yùn)用兩種設(shè)計策略， 以保證信息的視覺呈現(xiàn)效果最佳，提高用戶的識別效率。

4 改進(jìn)方案及用戶評價

根據(jù)映射關(guān)系對圖3 所示的液壓支架遠(yuǎn)程操控系統(tǒng)界面進(jìn)行如下優(yōu)化設(shè)計，見圖5。

圖5 優(yōu)化方案（來源：作者自繪）

圖6 界面優(yōu)化前后對比雷達(dá)圖

4.1 單一特征——色彩

在單一特征色彩上，采取如圖7 所示的搭配方案，整體色彩效果和諧統(tǒng)一，信息呈現(xiàn)清晰明了。主色為深藍(lán)色（#237CF2）， 輔色為白色 （#FFFFFF）， 點(diǎn)綴色為藍(lán)綠色（#00D5FF）以及紅色（#AD0D0D）。

圖7 剩余界面優(yōu)化方案（來源：作者自繪）

當(dāng)無信息變化時，文字為白色。 當(dāng)信息發(fā)生變化時，文字顏色變?yōu)樗{(lán)綠色以凸顯變化。 與優(yōu)化前的界面最大的不同是，優(yōu)化前界面的“護(hù)幫”等通過文字顏色的變化來顯示操作狀態(tài)的變化，例如，當(dāng)“護(hù)幫”這兩個字的文字顏色發(fā)生變化時，表示操作人員正在操作液壓支架中“護(hù)幫”這一部位；而優(yōu)化后的界面將“護(hù)幫”等文字融入了液壓支架的模型剪影中，當(dāng)操作液壓支架的某部件時，其模型剪影的相應(yīng)位置會發(fā)生顏色變化， 這樣可視化的表現(xiàn)形式更易于識別，不僅降低了用戶的理解成本，避免了界面因過多的文字而導(dǎo)致的雜亂感， 同時保持了色調(diào)的一致性，給人一種和諧統(tǒng)一的感覺。

4.2 單一特征——尺寸

在單一特征尺寸上，加大了字號的差異。 如“前立柱壓力88888”，“前立柱壓力”表示了數(shù)據(jù)含義，而重要的是數(shù)據(jù)本身，所以將前者字號縮小，后者字號放大，突出數(shù)據(jù)的視覺效果；且在操作后數(shù)據(jù)發(fā)生變化時字號會進(jìn)一步放大，進(jìn)一步對其進(jìn)行強(qiáng)調(diào)，讓用戶第一時間捕捉到數(shù)據(jù)的變化。

4.3 特征呈現(xiàn)

在特征呈現(xiàn)上， 在實時變化的數(shù)據(jù)下方加以橫線強(qiáng)調(diào)。在圖5（a）中，當(dāng)信息未變化時，數(shù)據(jù)為初始狀態(tài)，在操作后數(shù)據(jù)開始變化時， 此數(shù)據(jù)下方會出現(xiàn)橫線用以突出數(shù)據(jù)，且給橫線加以漸變效果，可以很好的將用戶視線聚焦，如圖5（b）所示；與此同時，對按鈕形狀加以描邊效果來強(qiáng)調(diào)按鈕的控件屬性， 且在表現(xiàn)形式上與其他顯示操作變化的信息相區(qū)別，避免了給用戶造成誤解和困擾。

將優(yōu)化前和優(yōu)化后的界面對比，從可識別性/可用性/易用性/美觀性/滿意度五個維度出發(fā)， 邀請專家打分，得到如下結(jié)果（見表1、表2）：

表1 優(yōu)化前界面評價

表2 優(yōu)化后界面評價

由對比結(jié)果可得，優(yōu)化后的界面在可識別性/可用性/易用性/美觀性/滿意度這五個維度上均優(yōu)于優(yōu)化前的界面， 所以利用單一特征和特征呈現(xiàn)這兩種視覺搜索效應(yīng)對界面進(jìn)行優(yōu)化設(shè)計是可行的， 將剩下的界面也按照同樣的思路進(jìn)行優(yōu)化，優(yōu)化結(jié)果如圖7 所示。

5 結(jié)論

對于類似液壓支架遠(yuǎn)程操作系統(tǒng)這種工業(yè)領(lǐng)域的界面，由于數(shù)據(jù)較多，往往會讓界面變得復(fù)雜，導(dǎo)致用戶難以第一時間觀察到數(shù)據(jù)變化。對于重要數(shù)據(jù)，要使用戶更多地運(yùn)用自下而上的視覺加工方式——增加醒目的單一特征， 如對于重要信息，在顏色上進(jìn)行對比設(shè)計，或適當(dāng)放大信息尺寸；又或者增加呈現(xiàn)特征，如為重要信息增加下劃線。在設(shè)計中運(yùn)用一種或綜合運(yùn)用多種方式， 可以有效提高用戶的識別搜索效率。當(dāng)然這種優(yōu)化策略不一定是最優(yōu)策略，但是可以為同類型產(chǎn)品的優(yōu)化設(shè)計提供一種思路。