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

引言

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

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

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

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

一、文獻探討與實驗假設(shè)

（一）圖標的外部特征

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

（二）圖標的內(nèi)部特征

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

（三）實驗假設(shè)

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

二、實驗過程與數(shù)據(jù)分析

（一）實驗設(shè)計

1. 實驗對象

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

2. 實驗設(shè)備

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

3. 實驗材料

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

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

4. 實驗流程

（1）預(yù)實驗：熟悉度訓(xùn)練任務(wù)

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

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

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

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

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

（二）實驗結(jié)果

1. 預(yù)實驗：熟悉度訓(xùn)練任務(wù)數(shù)據(jù)分析

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

（1）預(yù)實驗主效應(yīng)分析：熟悉度

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

（2）預(yù)實驗交互效應(yīng)分析：熟悉度與圖標設(shè)計風格

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

2. 正式實驗：語義- 圖標識別任務(wù)數(shù)據(jù)分析

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

（1）正式實驗主效應(yīng)分析：熟悉度、具象性與圖標設(shè)計風格

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

（2）正式實驗交互效應(yīng)分析：熟悉度與圖標設(shè)計風格

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

三、討論

（一）預(yù)實驗：熟悉度訓(xùn)練任務(wù)結(jié)果討論

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

（二）正式實驗：語義- 圖標識別任務(wù)結(jié)果討論

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

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

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

結(jié)論

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