基于視覺注意機制的B端產品用戶體驗設計研究

賈軒

編者按：為了解決B端產品在信息結構、頁面布局以及視覺元素設計的難點，提升B端產品在信息傳達上的效率，這篇文章將視覺注意機制與界面設計相結合，根據視覺感知、視覺搜索、視覺生理基礎以及視覺認知流程，結合數字產品的結構層、范圍層、表現層的特點，分析出B端產品界面設計在不同階段需要思考以及遵循的信息可視化策略。

概述

B 端產品面向企業或組織提供服務，幫助企業或組織下的各類角色協同辦公，解決企業經營管理或業務問題。B 端產品具備業務復雜度高、用戶角色多的特點。不同的企業或組織經營的方式各有差別，不同量級的公司所遇到的具體的業務場景也不盡相同。場景的龐雜，意味著系統包含龐大且種類繁多的信息，這些信息相互關聯影響，在不同的系統結構中進行信息交換[1]。薛澄岐指出，復雜信息系統具有開放性、復雜性、層次性與多樣性的特點。設計師在進行信息設計的過程中，將系統抽象信息轉化為用戶易識別、易理解的信息的困難程度也大大提高。

學界站在視覺注意機制的角度上對交互設計的探討比較豐富。王寧等人將視覺注意的計算方法引入人機交互界面設計過程中，提出了一種考慮用戶視覺注意機制的人機交互界面設計方法[2]。吳曉莉等人通過眼動追蹤技術獲取被試者在數字化監控界面上的視覺注意分配的數據，以此指導界面設計的改良[3]。金昱潼等人為改善虛擬交互界面的操作效率，將人視覺注意機制融入 VR 考試系統的交互界面中，提出一種基于視覺注意機制的虛擬環境交互界面優化模型[4]。盡管如此，現有的交互設計的方法無法完全適用于 B 端復雜、多層級結構的產品系統，因此需要分析個體獲取、理解、認知信息的過程與機制，從而建立新的信息可視化策略。從人機交互界面設計出發，借助認知心理學、人機交互、設計學科的理論知識與方法，基于人的感覺、視知覺、記憶和注意力等認知資源在數字界面中的信息處理機制和認知特性，構建 B 端信息系統等界面設計方法。通過研究視覺信息要素，從信息編碼、信息元素、信息結構可視化、頁面布局、信息顯示方式等方面，尋求數字界面設計等優化策略。

B 端產品交互設計的難點

B 端產品的信息交互設計，可劃分為信息結構層的導航設計，框架層的控件、布局設計以及對色彩、圖標等視覺元素的設計。

信息結構的難點

常見導航包括主導航、局部導航、菜單導航、分步導航、樹狀導航、Tab 導航、選項卡導航等，以此構建高效易用的導航系統。導航始終貫穿界面始終，告訴用戶“現在的位置、從哪里來、可以去到哪里、如何去往”，引導用戶完成任務及目標。導航需要在用戶操作后，給予反饋，讓用戶清晰地知道界面的位置，對界面的方向路徑有所預知，操作后的行為可撤銷。同時，B 端系統的信息層級較多，用戶容易在信息中迷失，因此在設計時需要考慮增強用戶的位置感知，時刻提示用戶當前頁面在系統中的位置，同時提供快速返回的操作，提高用戶的操作效率，減少認知負荷。但導航設計也存在難度。一方面，導航的廣度和深度難于平衡，增加導航廣度，能夠提升用戶的瀏覽效率，但過于廣的導航會讓用戶難以選擇，反之，導航深度越深，層級越多，用戶的操作效率也就越低，故廣度和深度的層級都不宜過多，另一方面，導航對用戶心智的契合度難以琢磨。導航為用戶指引方向，需要符合用戶對任務的理解，幫助用戶完成目標，以用戶理解的信息結構呈現。

數字界面布局難點

框架層的難點主要在控件的設計與布局設計兩個方面。用戶通過控件輸入數據或指令，與軟件交互。控件的類別很多，包括窗口、菜單、滾動條、標簽、文本框、列表框、單選按鈕、復選框等。由于信息龐大且交叉節點多， B 端產品的控件也有種類繁雜且綜合性強的特點，可能會出現一個對話框包含多個其他類型的組件的情況。這也就需要在設計過程中對信息結構進行分析梳理，控制組件的邏輯層級，來凸顯信息邏輯，使其在界面上合理呈現。對于頁面布局而言，也存在以下兩個難點：（1）信息元素較多時，容易出現信息呈現不均衡的情況。按照用戶目標、緊急程度以及操作頻率平衡好三者的關系，在界面上有序排布，疏密有度地呈現。（2）布局需要注重可讀性和可操作性。需要貼合視覺感知，符合視覺流程和用戶的關注點。

視覺元素設計難點

色彩在數字界面中常用于劃分信息區域，面對龐大的信息時，通過色彩編碼可以快速將信息進行區分，用戶只需要花費少量的認知成本就能夠快速得到信息。其次，色彩用來突出重要信息。通過協調和對比的手法，在視覺感知上對用戶進行信息刺激，提高信息的接收效率。例如，在大多數 B 端產品中，紅色表示錯誤，橙色表示警示。并且，色彩有助于樹立品牌形象，產品通過色彩的信息傳達，可以讓用戶對產品乃至企業、組織樹立起某種印象。設計師在進行色彩設計時，需要考慮到選擇的色彩是否會造成用戶視覺疲勞，對用戶的操作造成干擾。此外，產品的使用環境，在明暗環境下是否能夠有效進行信息傳達也是需要考慮的內容之一。

圖標設計也是表現層的一大難點。而 B 端產品由于業務場景復雜，會出現大量罕見、具有業務領域相關語義的圖標。一般用戶不具有特有行業屬性和知識，這也就要求設計師需要深入了解行業知識以及行業角色的用戶認知習慣，在業務的場景語義下理解任務，對語義進行拆分。B 端場景的語義信息復雜，一個圖標可能包含多個語義信息，因此將語義進行拆分融合時，拆分的語義需要清晰明確，又能夠統一到一個圖標中，這也為設計師提出了挑戰。最后，圖標設計也需要考慮到產品的使用場景，減緩用戶的使用疲勞。

基于視覺注意機制對用戶體驗設計的指導

視覺注意機制的研究

1.視覺的生理機制

人眼中也分布著 600 萬個視錐細胞和 1.2 億個視桿細胞，視錐細胞集中分布在中央凹區，對色彩變化敏感度高。每一個視錐細胞連接著一個雙極細胞和一個神經節細胞，因此對于信息的捕捉和獲取會更加精準清晰。中央凹周圍分布著視桿細胞，三個視桿細胞對應一個雙極細胞和一個神經節細胞，視桿細胞對光線的變化比較敏感，信息在進入視網膜的那一刻就開始了自動篩選。大腦處理信息的資源有限，這也使人眼的感光細胞在演化過程中并非平均分布，在視網膜上呈現出中央集中，周邊稀疏的分布規律。而這樣的分布結果，也導致人眼獲取信息時，呈現出中央清晰，周邊模糊的效果。由此，大腦可以優先分配注意資源對捕獲到的信息進行加工，減少資源消耗。中央凹的感光細胞足夠豐富，能夠清晰準確地獲取信息，但周圍視野的感知能力則非常糟糕。這樣的結構，可以保證周圍的物體被看到，但是并非意味著個體對其分配注意資源。當視野中出現運動的物體時，視覺信息在傳遞給神經節細胞時，會有一部分進入大腦的上丘，上丘對運動的信息會產生相應的反應，進而引起眼動。上丘激活眼部肌肉，使眼球運動，眼球的視錐細胞則代替視桿細胞，視桿細胞形成的邊緣視覺退居其后，以此形成注意轉移。

2.數字界面的視覺感知

視覺感知是人獲取并解釋處理周圍環境信息的能力。視知覺分成兩個階段，早期階段視知覺主要是對關注的信息進行獲取。在眼睛視網膜上獲取周圍環境的光學成像，并由視桿細胞和視錐細胞進行接收，這些細胞對光線以及色彩信息極其敏感。光線通過玻璃體產生輕微散射，落在視網膜背面。視知覺的晚期階段則是對物體和圖像進行識別，并將識別圖像的特征進行抓取分析，和已有的認知圖式進行匹配，來描述和解釋視覺刺激對象。在整個視覺信息加工的過程中，人眼接收到的視覺刺激可以分離出空間、色彩、形狀、動態四種信息。視覺感知是一個復雜的過程，人眼尋找、分辨、識別、確定與記憶搜索，以此作出判斷。

數字界面上有豐富復雜的視覺信息，例如明度信息、色彩信息、文本信息、圖形圖像信息、布局信息等。從設計的角度看，結合人眼視覺感知習慣，當需要突出某一信息時，通過空間上前置、明度上對比、色彩對比等方式輔助界面設計。人眼對空間的感知來源于物體的深度信息，從靜態圖像、運動、生理以及雙目立體視覺四個方面獲取深度信息。在界面設計中，通過蒙層、遮擋、動態效果、三維立體圖標等手段，突出界面縱深信息。亮度在界面設計中占據著重要地位，用戶從界面的明暗關系中識別有關目標的信息。臺灣學者 Yun-Ying Yeh 等人研究表明在數字化界面上，可感知的亮度范圍最少控制在 1：3，最好是 1：7（Yun-Ying Yeh ，2011）。色彩對比也是設計中常用的手段，色彩冷暖、通用色彩使用規則都是幫助 B 端產品進行界面色彩設計的維度。人眼對色彩的感知中，暖色調向前突出，冷色調向后退，通過色彩冷暖對比拉開頁面縱向空間，突出信息層級。并且，色彩使用也需要符合人的色彩認知，例如，紅色表示錯誤;黃色表示警告、注意;綠色表示成功、完成，B 端產品有關狀態的場景出現較多，對色彩的運用需要貼合狀態的語義表達。

3.數字界面注意搜索

數字界面的信息紛繁復雜，而人的大腦處理信息的資源是有限的，因此對信息的選擇顯得至關重要。人們在尋找自己關注的信息時，需要對其他非相關信息進行抑制，保證個體專注到當前任務。注意篩選受到兩個方面的影響，一是當前任務，二是外界信息的性質。第一種是當個體認為所搜尋的刺激信息對完成任務目標非常重要時，就會以主觀意圖控制注意選擇，這種以目標導向的注意選擇機制被稱為內源性注意，也叫自上而下的注意。第二種是視線中的某個刺激區別于其他刺激而突出出來，注意會被顯著刺激捕獲，而不管當前任務目標或者主觀動機是什么，這種自下而上的注意被稱為刺激驅動的注意或外源性注意。在實際情況中，兩種注意是相互作用、共同影響視覺加工過程的。但外界的刺激因素會制約個體的目標導向注意，個體很難忽略掉視域中的信息刺激，尤其是特征顯著的刺激信息，這也導致以目標導向的注意會因為顯著的外源性信息而發生注意轉移到外界刺激信息上的情況，這一現象說明了信息的主動性以及視覺的被動性。

在視覺搜索行為中，注意捕獲是人在信息加工過程中非常重要的一個環節。根據注意捕獲的規律，突出的信息會被優先注意到，而注意捕獲程度低的信息會被弱化。在對 B 端產品的界面進行信息編碼的過程中，設計者在構建復雜信息之間的層次結構時，要分析和判斷出哪一些信息是需要被用戶立即注意和理解的，哪些次之，以此在信息傳遞中構建信息的主次關系。從設計手段上講，常用的「對比」，通過區分位置、形狀、尺寸、顏色等手段與周圍環境信息形成顯著差別，來優先吸引用戶的注意。

用戶體驗設計策略

1.一般性設計原則

（1）信息顯示可見、可辨、可知。信息通過感官通道被用戶獲取時，用戶能夠直接感知到數字界面所表達的信息，進行一定時長的注意分配。當目標信息需要和其他信息相互區分時，信息編碼手段也需要相互區分，增加編碼之間的差別，確保足夠可分辨。最后，編碼手段需要被用戶理解，保持產品內部和行業的一致性，減少學習成本，并且契合人的經驗和理解范圍，符合用戶心理模型。

（2）遵循信息歸類原則，了解目標用戶的知識體系和理解邏輯，按照特征、任務、功能、順序對信息進行分類歸納。考慮用戶操作頻率，將高頻信息放在視野最優區域，減少操作時間與成本。根據任務的重要性，對信息進行優先級排序。

（3）交互上保證用戶在感知能力、理解能力、操作能力、工作環境、任務需求、操作能力、工作環境、任務需求上能力水平。交互上需要及時反饋，對用戶的每一次操作告知結果，明確告知用戶當前所在產品的位置。用戶操作上，要迎合用戶的喜好，符合用戶的操作習慣，為用戶提供充分的選擇和操作的自由度。保障用戶的私密信息，提供密碼等保護機制;幫助用戶減少記憶與操作負擔;防止用戶出錯，減少用戶多次操作的時間和生理成本。

2.結構層設計策略

信息框架在設計過程中，應按照邏輯框架對整體進行劃分，以此減少信息完全鋪開所帶來的信息密度過高的問題。將產品所涉及的不同模塊進行整合，把關聯度較高的內容歸納到一起，這部分內容體現在產品的主導航中。同時需要考慮到用戶的操作頻率和重要程度，常見產品主導航的信息結構有樹狀結構等，對復雜信息進行分類分層，體現出信息的父子級關系。其他導航結構還有分步層級結構、地圖層級結構、字母索引結構等。其次是針對界面中的信息層級的劃分。設計師需要了解清楚用戶在具體頁面中的場景，構建清晰的結構化的版式。研究表明，人在瀏覽網頁時的注意分布熱區是按照從左至右依次遞減，從上至下依次遞減的規律，呈現出「F」的視覺瀏覽路徑。因此，在設計過程中，可以將重要的信息按照用戶的注意熱區進行布局來提升瀏覽效率。

3.框架層設計策略

對于 B 端產品而言，產品的易用性大于產品的美觀程度。用戶在執行任務時，是否能夠高效及時地完成相關任務流程和操作，是判斷 B 端產品數字界面的重要指標。數字界面的信息布局影響著用戶瀏覽路徑以及瀏覽效率。因此需要將信息按照重要性進行分層，呈現與用戶任務相關的信息，避免與任務無關的元素干擾用戶完成任務。將重要信息突出，以顯著的刺激特征來吸引用戶注意力，并且按照信息層級排布元素。注重元素之間的平衡、大小、比例、間距、留白等，取得視覺均衡，提高用戶完成任務的滿意度。

4.視覺表現層設計策略

B 端產品的視覺表現層可拆分成圖形、色彩、文字三個方面。

（1） 產品圖標需要做到用戶易懂，貼合具體使用場景，體現出產品語義。由于信息的層級較多，對圖標進行設計需要考慮到不同場景下不同尺寸的圖標的可識別性。并且，設計師在制作時，需要使用一致的設計語言，以保證視覺風格一致，提高圖標的美觀度以及符合設計趨勢。

（2） 色彩相比圖形與文字，能夠更快的被注意捕獲，是提高信息獲取效率的重要手段。在使用過程中也需要符合具體的場景語義，表意清晰，不違反用戶已有色彩的認知。有學者做過顏色的心理感受實驗，一組實驗材料是紅色的「紅」字和藍色的「藍」字，與另一組實驗材料中藍色的「紅」字和紅色的「藍」字做對比，發現與顏色心理感受相沖突的文字的識別的效率遠遠低于與語義一致的顏色材料。在顏色使用上，也需要符合用戶對顏色的心理感受，并且，色彩數量不多于 7 種，過多的色彩會導致用戶注意分散，增加操作者的認知難度和認知負荷。

（3）文字的使用需要保證易認、易讀、易理解。不同的字形在電子屏中顯示的清晰程度有所不同，需要選擇易于辨認的字體。同時，也需要根據信息層級、閱讀順序、視覺路徑、使用環境，選擇不同的字號字重、字距行距、文本段落、對齊方式等。國外學者Alan Cooper提出，文本設計需要精簡信息，減少用戶的閱讀量，用少量的文本傳達準確的含義，減少用戶閱讀的時間和理解的認知成本[5]。

結語

本文在視覺注意機制理論的基礎上，結合 B 端產品交互設計的特點與難點，給出對應的設計策略。通過對視覺感知、視覺注意搜索以及視覺生理機制的分析，形成對用戶體驗設計中的結構層、框架層以及視覺表現層的設計策略，希望能為 B 端產品設計實踐提供新的理論依據和設計思路。

參考文獻：

[1]仝牧.服務設計理念在復雜信息系統界面設計中的應用策略[J].設計，2018（20）：96-98.

[2]王寧，余隋懷，周憲，等.人機交互界面中形狀特征的視覺顯著度計算[J].圖學學報，2016，37（04）：514-518.

[3]吳曉莉，薛澄岐，Gedeon Tom，等.數字化監控任務界面中信息特征的視覺搜索實驗[J].東南大學學報（自然科學版），2018，48（05）：807-814.

[4]金昱潼，呂健，潘偉杰，等.基于視覺注意機制虛擬交互界面布局優化[J].計算機工程與設計，2020，41（03）：763-769.

[5]Alan Cooper，Robert Reimann，Dacid Cronim.2012.About Face 4：交互設計精髓[M].劉松濤，等譯.北京：電子工業出版社，2015.