液壓支架遠程控制系統界面優化設計研究

薛夢穎， 賀孝梅

（中國礦業大學建筑與設計學院， 江蘇徐州 221116）

0 引言

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

1 視覺加工的方式

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

1.1 自下而上的加工方式

自下而上的視覺加工也叫數據驅動加工， 是一種由低水平到高水平的加工方式， 它強調信息刺激的基本特征在識別物體時的重要性。 例如，當我們將視線轉移到桌子上的某一物體時，大腦首先注意到的是物體的顏色、大小、形狀等基本特征，在此基礎上再進行更復雜更高級的加工。 自下而上的加工方式是認知的第一步，對于基本特征的識別有助于我們認識一些更復雜完整的事物。

1.2 自上而下的加工方式

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

2 視覺搜索的兩種效應

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

2.1 單一特征/聯合特征效應

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

圖1 任務1（來源：作者自繪）

2.2 特征呈現/特征不呈現效應

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

圖2 任務2（來源：作者自繪）

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

3 液壓支架遠程控制系統界面要素提取與分析

在界面中，色彩、文字和按鈕一般都是其重要的構成要素， 圖3 所示為某公司液壓支架遠程控制系統優化前的界面之一，下面將以此為例，對界面中色彩、文字和按鈕這三個構成要素進行提取與分析， 并結合前文內容構建優化策略。

圖3 優化前界面

3.1 色彩

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

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

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

3.2 文字

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

圖3 所示界面中的文字包括標題、控件文字、提示信息以及日期時間等信息。其中，“護幫”、“支架號88888”等是最重要的文字信息， 可以顯示操作過程中實時的狀態及數據變化；“遠程授權”等為控件文字，表明了控件所鏈接著的下一級界面內容。

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

3.3 按鈕

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

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

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

3.4 設計策略映射關系建立

結合前文對視覺搜索效應以及界面構成要素的分析，現將二者結合建立如下設計策略映射關系（圖4）。

圖4 設計策略映射關系（來源：作者自繪）

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

4 改進方案及用戶評價

根據映射關系對圖3 所示的液壓支架遠程操控系統界面進行如下優化設計，見圖5。

圖5 優化方案（來源：作者自繪）

圖6 界面優化前后對比雷達圖

4.1 單一特征——色彩

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

圖7 剩余界面優化方案（來源：作者自繪）

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

4.2 單一特征——尺寸

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

4.3 特征呈現

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

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

表1 優化前界面評價

表2 優化后界面評價

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

5 結論

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