圖標設計風格對用戶感知的影響研究

引言

圖標作為視覺信息的主要載體，是數字界面中不可或缺的重要組成部分[1]，在人機交互過程中發揮著關鍵作用。圖標能夠幫助用戶快速而準確地獲取信息。已有研究表明，在界面設計中合理使用圖標具有降低學習成本、減輕認知負荷、提高視覺搜索效率和識別性能等優勢[2]。因此，設計師在用戶界面設計中常使用圖標來傳達視覺信息[3]。

當前，擬物化和扁平化是最為流行的兩種圖標設計風格[4]。擬物化風格的圖標（如 iOS 6 系統界面中的相機圖標，如圖1-a）通過模擬真實物體的形狀與紋理，甚至適當夸張與變形，重現用戶熟悉的現實物體。此類圖標認知難度較低，學習成本較小，使用戶更容易正確理解其功能。然而，擬物化設計在實際應用中并非總是最優選擇，尤其當界面中包含大量擬物化圖標時，圖標豐富的細節可能增加用戶的視覺區分成本，從而降低識別效率[5]。相比之下，扁平化風格圖標隨著用戶界面的更新迭代逐漸受到青睞。扁平化設計摒棄了漸變、高光等視覺效果（如 iOS 7 的相機圖標，如圖1-b，以及三星 ONE UI 的相機圖標，如圖1-c），通過簡化圖標外觀，減少視覺干擾，使用戶能夠更加專注于內容本身，從而顯著提升了用戶體驗[6]。

隨著扁平化設計的不斷發展與普及，扁平化圖標進一步細化為兩種主要類型：線性圖標和面性圖標。線性圖標（如圖2-a）以線條為主要視覺元素，通過簡潔的輪廓和線性構造展現圖標的形態特征。相比之下，面性圖標（如圖2-b）則以大色塊為核心設計元素，注重整體形狀的填充與顏色的呈現，以強化圖標的視覺識別度和信息傳達效果。盡管已有研究分別探討了影響線性圖標或面性圖標視覺搜索性能的關鍵因素，但在實際界面設計中，關于如何依據應用場景選擇適合的圖標樣式的文獻仍然鮮有相關的深入研究。此外，圖形界面的人機交互過程不僅涉及圖標的視覺搜索，還包括對圖形符號的語義識別[7]。同樣的，線性圖標與面性圖標這兩種扁平化設計風格是否會對人機交互中的認知過程產生影響也值得進一步研究。

因此，本研究嘗試通過一項語義- 圖標識別任務來探究不同扁平化圖標風格在認知過程中的作用。實驗涉及3 個自變量：（a）圖標熟悉度（熟悉與不熟悉）、（b）圖標設計風格（線性圖標與面性圖標）以及（c）圖標具象性（抽象與具象）。被試需完成語義- 圖標識別任務，并通過回憶準確定位與所展示文字語義相符的目標圖標，以探討圖標設計風格、具象性和熟悉度對圖形識別性能的綜合影響。

一、文獻探討與實驗假設

（一）圖標的外部特征

圖標作為用戶與圖形界面之間的重要橋梁，其設計質量直接影響用戶體驗。圖標的外部設計特征在提高視覺搜索效率方面起著至關重要的作用。研究表明，圖標的視覺顯著性顯著影響視覺搜索效率[8]。合理的圖標外部特征（如形狀、大小和極性）能夠增強視覺顯著性，從而使用戶更輕松地理解圖標所代表的含義。宮勇等人的研究表明，圖標的形狀對用戶的視覺搜索績效有顯著影響。簡單且規則的形狀（如正方形、圓形或圓角方形）在觸摸屏界面中表現出更優的視覺搜索性能[9]。此外，圖標的外邊框和形狀影響其與其他圖標之間的視覺隔離度。趙敏君等人[7] 的研究探討了圖標顏色與邊框形狀對視覺搜索效率和用戶體驗的影響。基于眼動追蹤的實驗結果顯示，顏色多樣化的圖標具有最高的視覺搜索效率；而圓角方形邊框能夠顯著提升視覺搜索性能，同時降低認知負擔并改善用戶體驗。

（二）圖標的內部特征

圖標的外部特征主要影響視覺搜索過程，而圖標的內部特征（如語義距離、視覺復雜度、熟悉度和具象性等）則顯著影響的是用戶的認知過程[10]。這些內部特征與認知過程關系密切，決定了用戶如何理解圖標的含義。語義距離是指圖標設計與其實際含義之間的匹配程度，直接影響用戶將圖標與其語義聯系的難易度。語義距離較大的圖標通常需要更多的認知資源進行解釋，導致響應時間延長，同時降低視覺搜索和記憶任務的準確性。然而，隨著用戶對圖標含義的逐步熟悉，語義距離對任務表現的負面影響可能顯著減弱。視覺復雜度是指圖標設計中細節的復雜程度。復雜的圖標往往會增加用戶的認知負荷，導致理解速度變慢。研究顯示，包含大量線條或形狀的復雜圖標可能干擾視覺搜索，增加認知負擔[11]。相比之下，簡潔的圖標設計更易于識別和記憶，尤其在認知負荷較高的任務場景中表現更優。熟悉度是圖標設計中的關鍵因素，反映了圖標的使用頻率及用戶的過往經驗。熟悉的圖標更容易被用戶回憶，從而提高了任務處理效率。尤其在需要分配有限工作記憶資源的復雜認知任務中，熟悉度優勢尤為顯著。具象性則指圖標在視覺表達上的具象程度。盡管已有研究表明，具象性對視覺搜索的準確性影響不顯著，但用戶通常對抽象圖標的反應速度較快。此外，具象性帶來的優勢可能會隨著用戶熟悉度的提升而逐漸減弱。

（三）實驗假設

先前對圖標外部設計特征的研究表明，用戶在使用中更喜歡簡單規則的圖標形狀。面性圖標通過色塊進行視覺表現，因此形狀相較于由線條構成的線性圖標而言通常更為簡潔。因此，我們提出假設 1：在視覺搜索效率上，面性圖標比線性圖標更有優勢。此外，先前對圖標內部設計特征的研究表明，越是熟悉的圖標用戶識別所需的時間越短。因此，我們提出假設 2：隨著圖標熟悉度的提高，用戶對面性圖標和線性圖標的識別績效都將提升。然而，面性圖標的優勢將由于邊際效應的存在而逐漸減弱。

二、實驗過程與數據分析

（一）實驗設計

1. 實驗對象

本實驗已通過江南大學機構審查委員會的倫理審批，并獲得所有被試的知情同意。共有 27 名大學生參與實驗，其中男生 13 名，女生 14 名，年齡范圍為 18 至 25 歲（平均年齡 = 21.8 歲，標準差 =1.6）。所有被試均視力正常或矯正至正常，無色盲或色弱史。在參與本研究之前，被試均未參與過類似實驗。每位被試完成實驗后均獲得 100 元人民幣的報酬。

2. 實驗設備

實驗在江南大學人體工程學實驗室進行，使用 23.8 英寸 LCD顯示器（ 型號：DELL U2414H） 作為視覺呈現設備， 分辨率為1920×1080，刷新率為 60Hz。實驗程序基于 Unity 開發，用于任務的呈現及數據收集（包括反應時和正確率）。被試與顯示屏的距離保持約 50 厘米，以確保視覺呈現的一致性。

3. 實驗材料

我們從電腦、手機、智能駕駛等系統中選取并繪制了120 個面性圖標。根據 Jenkins（2008）提出的相關設計指南[12]，為每個面性圖標設計了對應的線性版本（如圖 3）。在實驗開始前，27 名被試被要求對所有 120 個面性圖標的熟悉度（1 = 非常不熟悉，5 = 非常熟悉）和具象性（1 = 非常抽象，5 = 非常具象）進行 5 分制評分，以確保實驗素材符合研究需求。

以往的實驗通常直接計算被試的平均值來構建實驗素材庫。然而，在被試數量較少的情況下，每個被試的個體經驗可能會造成干擾。因此，本研究對每位被試的量表評分數據進行了單獨分析，并為每位被試定制了專屬的圖標素材庫。接著，我們為每位被試剔除了過于熟悉或過于陌生的圖標，以保證素材的適用性。接著，根據圖標的具象性評分，我們從所有圖標中分別選取了 20 個抽象圖標和20 個具象圖標。所有選中的圖標均進行了脫色處理，以消除顏色對視覺搜索和識別任務的潛在干擾。最終，我們將 40 個選中的圖標分為4 組：（1）具象的面性圖標、（2）具象的線性圖標、（3）抽象的面性圖標、（4）抽象的線性圖標。

4. 實驗流程

（1）預實驗：熟悉度訓練任務

預實驗的目的是通過控制圖標出現的頻率，培養被試對不同圖標之間熟悉度的差異。對于每位被試，圖標素材庫中的一半抽象圖標和一半具象圖標將隨機分配到高頻（熟悉）圖標組，其余圖標則分配到低頻（不熟悉）圖標組。實驗設計確保高頻和低頻圖標的比例為 15：1，具體為 300 次高頻圖標和 20 次低頻圖標，總計 320 個試次。圖 4（a）展示了預實驗的試次順序。

實驗開始時，屏幕中央會顯示一個固定的十字注視點，被試按下任意按鈕以啟動實驗。接下來，屏幕會隨機展示一對圖標，并隨后呈現一個語義信息。被試需判斷所展示的語義信息與圖標是否匹配。在作出判斷后，被試按下“F”鍵表示“錯誤”，按下“J”鍵表示“正確”。每次回答后，系統會通過聽覺反饋提示被試回答是否正確。

（2）正式實驗：語義- 圖標識別任務

正式實驗包括3 個自變量：（a）圖標設計風格（面性圖標與線性圖標）、（b）圖標具象性（具象與抽象）和（c）熟悉度（熟悉與不熟悉）。被試需完成語義- 圖標識別任務，以探討圖標設計風格、具象性和熟悉度對圖標識別的影響。圖 4（b）展示了正式實驗的試次順序。

實驗開始時，屏幕中央會顯示一個十字注視點，持續 1000 毫秒。隨后，屏幕上會呈現一個隨機的語義信息，持續 3000 毫秒。接下來，被試需再次注視屏幕中央的注視點，持續 1000 毫秒。然后，被試需要回憶并判斷與目標語義信息相關的圖標是否出現在一個圓形圖標陣列中。如果目標圖標出現在陣列中，被試需移動鼠標并選擇該圖標；如果目標圖標未出現在陣列內，則按下鍵盤上的“SPACE”鍵表示目標圖標缺失。在整個語義- 圖標識別任務中，實驗過程中不會提供任何聽覺反饋。整個正式實驗大約需時 30 分鐘。

（二）實驗結果

1. 預實驗：熟悉度訓練任務數據分析

表1 展示了預實驗中正確率和反應時間的均值及標準差。熟悉度設有兩個水平（熟悉與不熟悉），分別包含16200 和1080 個試次。圖標風格和訓練階段各有兩個水平，每個水平包含8640 個試次。每位被試共進行17280 個試次。在反應時間分析中，僅考慮了正確試次（正確率為93.5%），并剔除了超過中位數絕對偏差（MAD）3 倍的異常試次（剔除比例為8.1%）

（1）預實驗主效應分析：熟悉度

圖5 顯示，熟悉度訓練任務中熟悉度顯著影響了被試的任務績效。具體而言，隨著訓練輪次的增加，被試的任務正確率（ΔAIC =-64.2，LLR χ2（1）= 66.2，p lt; .001） 和反應速度ΔAIC = -235，LLR χ2（1）= 236.5，p lt; .001）均有所提高。被試對熟悉圖標的識別更準確ΔAIC = -199.9，LLR χ2（1）= 201.9，p lt; .001），反應更快（ΔAIC = -260，LLR χ2（1）= 261.8，p lt; .001），而對不熟悉圖標的識別績效較差。此外，面性圖標的反應速度明顯快于線性圖標（ΔAIC = -6，LLR χ2（1）= 7.6，p lt; .01）。

（2）預實驗交互效應分析：熟悉度與圖標設計風格

我們觀察到，熟悉度與圖標設計風格對反應時存在顯著交互作用（ΔAIC = -22.8，LLR χ2（1）= 24.8，p lt; .001）。在圖標不熟悉時，面性圖標反應速度較線性圖標更快，但隨著熟悉度增加，反應時差距逐漸減小并最終消失。圖6 展示了不同熟悉度水平下面性圖標和線性圖標的平均表現。

2. 正式實驗：語義- 圖標識別任務數據分析

表2 展示了正式實驗中正確率和反應時間的均值及標準差。熟悉度、圖標設計風格和具象性3 個自變量各有兩個水平，每個水平包含4，320 個試次，共進行8，640 個試次。反應時分析僅考慮正確試次（正確率為92.7%），并剔除了超過中位數絕對偏差（MAD）3 倍的異常試次（剔除比例為2.6%）。

（1）正式實驗主效應分析：熟悉度、具象性與圖標設計風格

圖7 展示了被試在語義- 圖標識別任務試次中的平均表現。相較于不熟悉的圖標，被試面對熟悉的圖標時語義信息識別更準確（ΔAIC = -36.9，LLR χ2（1）= 38.9，p lt; .001），反應更快（ΔAIC= -119.5，LLR χ2（1）= 121.5，p lt; .001）。此外，具象圖標的識別正確率顯著高于抽象圖標，這說明圖標的具象性對正確率有顯著影響（ΔAIC = -61，LLR χ2（1）= 63，p lt; .001）。同樣，具象圖標的識別反應時低于抽象圖標，這表明具象性對反應時也存在顯著影響（ΔAIC = -3.9，LLR χ2（1）= 5.9，p lt; .05）。此外，圖標設計風格對識別正確率（ΔAIC = -11.6，LLR χ2（1）= 13.6，p lt; .001）和反應時（ΔAIC = -133.3，LLR χ2（1）= 135.2，p lt; .001）也有顯著影響。具體而言，面性圖標的正確率更高，反應時更短（符合假設1 的預測）。

（2）正式實驗交互效應分析：熟悉度與圖標設計風格

此外，我們還觀察到顯著的交互效應。圖8 顯示了不同熟悉度水平下，面性圖標和線性圖標在語義- 圖標識別任務中的平均表現。正如假設2 的預測，熟悉度與圖標設計風格對正確率（ΔAIC =-54.4，LLR χ2（1）= 58.4，p lt; .001） 和反應時（ΔAIC = -54.4，LLR χ2（1）= 58.4，p lt; .001）均產生顯著交互作用。具體而言，面對不熟悉圖標時，面性圖標的正確率高于線性圖標（ΔAIC = -30.4，LLR χ2（1）= 32.4，p lt; .001），且反應時更短（ΔAIC = -125.1，LLR χ2（1）= 127，p lt; .001）。

三、討論

（一）預實驗：熟悉度訓練任務結果討論

預實驗的目的是通過控制圖標呈現的頻率，模擬被試對圖標的不同熟悉程度。相較于以往研究中實驗材料準備方法，本研究采用了更合理的實驗設計。首先，先前多數關于圖標熟悉度影響的研究通常根據被試的對圖標的平均打分進行熟悉度分組，但被試較少時，個體對不同圖標的熟悉度差異顯著，可能導致潛在誤差。因此，在本實驗中，我們單獨處理每位被試的數據，為每位被試建立個性化的圖標庫，并開展定制化的熟悉度訓練任務。結果表明，與不熟悉的圖標相比，熟悉的圖標在熟悉度訓練任務中的正確率更高，反應時更短。因此，通過熟悉度訓練任務，我們成功控制了實驗圖標的熟悉度，為后續實驗提供了必要條件。

（二）正式實驗：語義- 圖標識別任務結果討論

語義- 圖標識別任務的實驗結果表明，圖標的設計風格確實影響了圖標識別，正如假設1 的預測，面性圖標的表現明顯優于線性圖標。以往的研究者認為，如果個體試圖在記憶保存大量信息，復雜細節可能導致信息干擾，如信息混淆或特征重疊，從而阻礙認知進程[13]。也就是說，信息檢索的速度受到圖標視覺復雜性的影響。如果圖標的視覺復雜性較低，圖標之間相互干擾的概率也會降低，從而使得信息檢索過程更順暢。因此我們推測，簡潔的面性圖標視覺復雜性較低，干擾較少，有助于提高信息檢索效率，而線性圖標的高復雜性則可能引發特征間干擾，降低識別效率。

此外，也有研究者認為，影響信息檢索效率的原因并非信息之間的干擾，而是工作記憶中信息隨時間衰退的現象[14]。未能及時激活的信息會快速衰退，導致無法有效檢索。從這一角度來看，工作記憶受到信息激活頻率和衰退速率的限制。如果信息能夠更容易、更頻繁地被重新激活，就可能防止其衰退或顯著降低衰退速率。在本實驗中，熟悉圖標的表現顯著優于不熟悉圖標，可能是因為不熟悉的圖標更難以重新激活，相關語義信息衰退更快，影響了識別表現，這解釋了出現假設2 中描述現象出現的原因。

最后，實驗結果還表明，具象性也是影響認知任務表現的關鍵因素，具象圖標的識別速度顯著高于抽象圖標。已有研究表明，個體的經驗可能會影響對圖標語義距離的感知[15]。而具象圖標通常更符合日常經驗，其語義距離較短，易于編碼。具象圖標通常描繪現實世界中的物體或人物，經過多次無意識學習后，更易于被認知和回憶，從而提高了識別效率。

結論

本研究將圖標語義- 圖標識別任務與熟悉度訓練任務相結合，探索圖標設計風格對用戶識別的影響。結果表明，被試在識別面性圖標時的表現更好，尤其是在他們不熟悉圖標的情況下。然而，這種優勢隨著熟悉度的提高而下降。本研究的發現為圖標設計和評價提供了重要指導。為了保證設計的可用性和易用性，界面設計師應堅持以下原則：（1）考慮到新用戶可能對圖標不熟悉，因此在設計中應盡可能使用面性圖標，以增強用戶體驗。（2）如果必須使用線性圖標，則選擇用戶熟悉或代表生活中常見物品的圖標進行設計，避免過于抽象或不熟悉的圖標語義。（3）提前讓用戶熟悉具有特殊含義的圖標，讓用戶更容易理解和使用界面。這些指導原則有助于確保圖標設計滿足用戶的期望和需求，從而提高了整體的用戶體驗。