薛夢(mèng)穎， 賀孝梅

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

0 引言

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

1 視覺(jué)加工的方式

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

1.1 自下而上的加工方式

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

1.2 自上而下的加工方式

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 色彩

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

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

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

3.2 文字

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

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

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

3.3 按鈕

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

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

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

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

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

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

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

4 改進(jìn)方案及用戶(hù)評(píng)價(jià)

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

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

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

4.1 單一特征——色彩

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

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

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

4.2 單一特征——尺寸

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

4.3 特征呈現(xiàn)

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

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

表1 優(yōu)化前界面評(píng)價(jià)

表2 優(yōu)化后界面評(píng)價(jià)

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

5 結(jié)論

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