界面視覺設計干擾子對搜索效率的影響機制研究

李娟，李思原

【視覺傳達設計】

界面視覺設計干擾子對搜索效率的影響機制研究

李娟，李思原

（西華大學 美術與設計學院，成都 610039）

探討移動應用界面中視覺設計干擾子對搜索效率的影響機制，為提高視覺界面搜索效率提供搜索界面設計策略和方法。通過文獻研究，梳理視覺搜索理論及行為模型，并在此基礎上探究視覺信息搜索思維邏輯。并基于某大學圖書館研修室預約系統，設計制作7組界面視覺干擾子實驗樣本，通過動態界面交互眼動實驗研究，探明界面視覺設計干擾子對搜索效率的影響機制。在界面結構、功能布局、交互方式、信息表現、信息層級、色彩搭配與UI動效7組不同界面視覺設計干擾子樣本中，用戶目標任務的搜索效率都有顯著差異。搜索類型界面設計應使界面結構清晰，主次功能分布合理，嘗試靈活多樣的交互方式，盡量減少信息層級以及進行適當的信息可視化，給用戶舒適的色彩對比度以及恰當的UI動效引導。

界面視覺設計；干擾子；信息加工；搜索效率

搜索效率是影響搜索類信息界面設計的可用性及用戶體驗的重要指標，現有文獻關于視覺搜索效率的研究側重于界面結構背景與搜索目標之間的關系對搜索效率的影響，如：侯文軍等[1]對手機界面的典型結構視覺瀏覽差異展開了研究；姜婷婷等[2]基于不同任務類型探究分面搜索對高校用戶體驗及搜索效率的影響；方浩等[3]等實驗對比分析了移動端新聞平臺中信息密度、圖文結構和文字粗細3個設計要素對視覺搜索效率的影響機制；楊海波等[4]研究了消費者在電商APP的搜索效率與界面背景及圖片特征的關系；孔雪利[5]詳細分析了手機懸浮球界面圖標搜索效率的影響因素。搜索任務效率的干擾子包括環境因素、任務類型、用戶認知、視覺設計、搜索內容等，視覺設計因素在引導用戶搜索行為中起到重要作用。用戶進行視覺搜索和信息加工時的認知邏輯具有一定規律，多種視覺設計因素都會受制于這一規律，基于設計優劣成為引導項或干擾項從而影響其搜索行為及效率。因此探討交互界面搜索效率的視覺設計因素，找出引導項與干擾項的共性特征，對界面視覺設計提高搜索效率具有參考價值。

1 視覺信息搜索思維邏輯

1.1 搜索任務類型

用戶在進行信息搜尋時會涉及多種搜索任務，根據難易程度、目標明確程度、搜尋過程的動態性或開放程度等多個屬性維度可以劃分為常見的簡單任務、復雜任務、已知任務、探尋式任務、開放式任務和封閉式任務。其中已知任務搜索目標明確，搜索范圍集中，分析重點在于用戶達到目標的路徑與任務完成時間。探尋式任務較為自由開放，其基本特征是: 不熟悉目標領域，不清楚搜索目標，不確定達到目標的路徑[2]。用戶在該任務情境下進行信息搜索的行為具有迭代性、機遇性和探索性。探尋式任務持續時間更久，可以發現更多已知任務表現不出來的搜索行為特點。

1.2 信息搜索思維

信息搜索是一個認知加工過程，包含信息感知、信息處理和行為3個基本階段。在視覺信息搜索中，視覺搜索與信息加工同時進行[6]。針對有關人的視覺搜索行為研究，許多學者提出了不同的理論，包括特征整合理論[7]，引導搜索理論[8]、相似性理論[9]和動態控制理論等[10]。這些理論相互補充相互延伸，綜合來說，用戶在進行視覺搜索時思維分為兩個階段：平行加工和系列加工。在前一階段，視覺系統對視野中刺激信息的基本特征進行平行式加工。后一階段則把這些特征進行提取整合形成一個完整的知覺對象，在特征地圖上隨機采用系列方式進行逐個掃描，通過產生一個暫時的客體表征來實現對信息的加工和識別。優化平行加工對系列加工的引導，降低目標與干擾子的相似度，同時增加干擾子之間的相似度，以及提高目標與搜索任務匹配度等途徑可以使加工更多地表現為平行方式，提高視覺搜索效率。

WICKENS在1984年提出，信息加工模型包括注意資源、感覺存儲、知覺、記憶、決策、執行、反饋[11]。知覺系統有自上而下和自下而上2種路徑加工模式?；赪ICKENS的信息加工模型理論構建交互界面信息加工模型，見圖1。從人的知識背景體系出發直接對界面刺激信息進行匹配并加工處理是自上而下式，常存在于人熟悉的信息領域。經知覺系統加工處理后決策系統再進行判斷，無需決策的信息進入工作記憶或長時記憶，最后融為知識經驗。需要決策的信息通過指令效應器產生交互行為，若交互中產生知識背景體系外的新信息，則進入自下而上式加工模式，形成加工閉環。自下而上式往往存在于人較為陌生的信息領域，界面刺激信息先通過感覺系統編碼，進入短時記憶再傳輸給知覺系統進行一系列決策行為。

1.3 搜索行為邏輯

BATES于1989年提出信息搜索視覺行為采莓模型[12]：用戶的信息搜索行為如同采莓，始于一個“點”，在初期隨機并逐步按照一定視覺軌跡進行跳躍來尋找目標信息，在整個搜索過程的各個階段中用戶可以隨時發現需要的信息片段及新的搜索方向，并在干擾子間不斷游移進行篩選，游離初始目標[13]。在進行搜索任務時，用戶的行為表現出整體性、交互性和動態性的非線性特征?！胺蔷€性”強調思維層面的動態復雜性分析[14]，指綜合用戶認知、任務情境以及交互系統等主要因素的共同影響，是在動態、復雜的非線性思維指導下描述的信息搜尋行為。綜合視覺信息搜索思維和Forster非線性搜尋行為模型[15]，構建非線性用戶界面搜索行為邏輯模型，如圖2。界面信息包含搜索任務的目標與其他干擾子，經過用戶認知思維進行平行加工與系列加工，由決策系統發出指令循著搜索任務進行一系列交互行為形成閉環，直至完成搜索任務，整個搜索過程受目標清晰度、任務與目標的匹配度以及平行加工對系列加工的引導優劣影響，整體呈現復雜的非線性。

圖1 交互界面信息加工模型

圖2 界面搜索行為邏輯模型

2 界面視覺設計干擾子

根據界面搜索思維邏輯模型，在搜索界面中，各個設計因素都可能會成為干擾子，影響搜索目標清晰度，從而左右平行加工對系列加工的引導優劣，進而影響搜索效率。在界面設計發展的過程中，無論是功能架構、交互方式還是UI風格等等諸多因素都在不斷更新迭代，但迭代目標都指向提升用戶體驗。當交互過程涉及到信息搜索時，為了用戶能夠更快更準確地搜尋到自己想要的信息，提升界面搜索效率就顯得尤為重要。

2.1 搜索應用類型界面特征

廣義來說，所有的界面都涉及到視覺搜索，只要用戶使用眼睛去瀏覽界面就會產生視覺搜索。如果在視覺搜索下加入信息搜索，就會涉及到視覺信息搜索認知邏輯。常見的搜索應用類型依據搜索的信息種類可分為生活類、資訊類和綜合類共3大類。生活類應用主要包含的典型信息搜索行為是購物、出行和娛樂；資訊類應用主要包含的典型信息搜索行為是獲取訊息和數字資源；綜合類應用主要包含的典型信息搜索行為是綜合式搜索。3大類各自代表的搜索界面案例如圖3。

圖3 搜索應用類型

總結分析以上搜索應用界面發現，導航界面結構上標簽與宮格并存，頂或底部標簽加宮格的結構居多。信息往往直接呈現在首頁，并且占據大幅版面，信息的分布方式依信息類別而變化。以文字信息居多的應用會選擇將內容垂直堆疊為列表型，如知乎。圖片信息居多的應用會將內容以卡片式左右錯落分布?？ㄆ鳛橄乱粚蛹壍娜肟?，同時可以承載文字、圖片、音頻等元素，保證功能性的同時兼顧畫面的美觀[16]，如小紅書?；蛘咭杂镜佬问捷嗭@，如貓眼電影首頁。部分應用甚至會將一些信息可視化，如貓眼電影選座界面。搜索界面承載信息類別繁雜時往往伴有搜索框，當出現需要信息選擇的情況時，部分應用會提供篩選功能，如預訂酒店時的日期和時間篩選功能模塊。交互手勢點擊和上下滑動居多，動效往往是反饋型，如小紅書點贊動效，帶有功能引導含義的動效較少。背景多為純色或簡單幾何圖形，重點文字會通過改變字體、字號、粗細、色彩等達到凸顯和區分的目的。

2.2 界面視覺設計干擾子與搜索效率

侯文軍在基于眼動瀏覽規律的手機典型界面結構研究中提出[1]，手機界面的交互結構類型對注視點數目、注視時間和搜索總距離的影響顯著，且推薦效率型應用選擇宮格式、標簽式框架。在布局上，視覺注意會受到畫面平衡的影響[17]，功能布局還應考慮到主要功能的畫面占比與凸顯度。與此同時，同個搜索功能會在迭代中出現不同的交互方式，例如2020年蘋果系統更新為iOS14時鬧鐘的時間設置方式變為了鍵盤輸入，在后續的更新中又改回上下滾動模式。信息表現在界面中指具有一定含義的多類型數據信息的表現形式，主要體現在信息可視化設計上。好的可視化可以讓受眾迅速、高效地對有關圖形信息進行識別和處理，獲得對信息的認知[18]。針對不同級別的信息層級要掌握視覺的秩序，把握信息層級本身的可理解性與視覺元素潛在的邏輯性基礎[19]。運用不同的視覺秩序可能會對搜索效率產生影響。色彩搭配涉及到色相與明度、飽和度等，界面的色彩搭配可能會對功能凸顯度造成影響，是影響搜索效率的重要因素。根據HUANG和SHIEH等[20-21]人的研究發現，背景與目標圖形之間顏色的對比度較高時搜索較快。在眾多色彩搭配中，黑色與黃色組合在搜索效率、用戶體驗等方面都高于其他組合。袁泳凡[22]指出黃色的圖標在深色的背景下具有更高的視覺識別度。另外，適當的提示引導對新手用戶非常重要[23]，以動利導可以通過動效為用戶提供引導，幫助用戶更快地掌握界面的操作以及功能的方向位置。朱田牧[24]研究發現在多目標視覺搜索任務中，當區分目標重要程度時，動態突顯相對于全部同等凸顯的傳統凸顯方式績效較高。朱奧等[25]指出無論目標還是背景區域的圖像，都是越復雜越不利于視覺搜索。根據調研現大多數搜索應用界面的背景都較簡潔，搜索效率影響主要來自于目標本身的復雜度。復雜目標的搜索界面條件較簡單目標的搜索效率低，當界面背景與搜索目標對比度較大時搜索效率較高[4]。移動界面選用字體的結構規律性要求共性大于個性，閱讀性能高[26]，文字顯示趨近標準化，以信息傳遞為主。綜合以上研究，搜索界面的9個主要效率影響視覺設計干擾子見圖4，除去研究較為充分的界面復雜度與文字，本文主要探究界面結構、功能布局、交互方式、信息表現、信息層級、色彩搭配和UI動效7個干擾子對搜索效率的影響機制。

圖4 影響搜索效率的界面視覺設計干擾子

3 視覺設計干擾子對搜索效率的影響機制

3.1 實驗方案及實施

根據已確定的7個界面視覺設計干擾子，選擇某大學圖書館研修室預約系統作為研究媒介，該系統為典型的資源類搜索界面，預約過程中主要涉及已知任務和探尋式任務。界面設計要素包括首頁導航、時間、研修室與樓層篩選功能的實現與布局、研修室與主題的信息表現、層級關系、整體色彩搭配和動效引導。分別針對每個影響因素設計多個界面，每個界面或功能模塊的差異符合設計要求和原則。使用Axure RP9軟件制作界面交互原型，模擬用戶真實的操作環境和預約流程。為每一個影響因素設定已知或探尋式任務，任務設定簡短、自然，符合用戶正常操作情境且能夠達到目標實驗數據。任務重復優勢理論認為任務設置在執行后的一段時間內持續存在，并對隨后的任務產生影響[27]。為消除受試者因任務重復而產生的對實驗結果的影響，實驗方案將給不同的受試者隨機實驗組順序。實驗設備采用眼動儀，眼動數據采集軟件Eyevision Studio，使用屏幕錄制的眼動采集方法，最后分析實驗數據。

為了降低眼動設備匹配電腦顯色度不強帶來的視覺影響，增強實驗效果，綜合前期的研究結果與當前大學生審美，界面配色采用黃色系圖標與深紫色背景組合，風格采用扁平式，保持樣本主體文字、色彩搭配及界面復雜度基本一致。方案模擬真實預約系統，用戶可以上下滑動查看更多信息，實驗方案界面設計見表1。

表1 實驗方案界面設計

Tab.1 Interface design of experiment scheme

7組實驗方案分別對應7個干擾子。

1）一組界面結構采用標簽式與宮格式的對比，其中標簽式為原預約系統界面形式。預約系統的第二層級主要功能有日期選擇、時間選擇、研修室類型篩選和研修室樓層篩選。

2）二組針對多個功能設計3種布局并搭配不同的篩選方式。2-a為原預約系統分布及篩選形式；2-b將重要功能凸顯并使用響應式抽屜篩選；2-c則全部顯示。

3）三組對時間預約功能給出上下滾動式、手動輸入式和左右滑動式3種交互方式進行對比實驗。

4）四組共對研修室設計了6種可視化類型，同時關注時間、研修室名稱、類型的合理表達并兼顧趣味性。其中細條式為原預約系統界面形式。原系統共有89個研修室，實驗簡化為40個，共5個樓層，每個樓層分別有3個單人研修室，2個3人研修室，2個6人研修室和1個互動研修室。每一組中研修室的空余時間段隨機排列，不同組隨機時間相同。

5）五組提交信息頁面涉及研修室主題的選擇，給出3種選擇形式：5-a為原系統形式，進入下一層級頁面進行羅列式點選；5-b為全部顯示；5-c是可視化后滾動選擇。

6）六組色彩搭配6-a與6-b對比相同明度功能模塊色相與背景差異。6-b與6-c對比相同色相功能模塊明度與背景差異的情況下用戶的搜索效率。

7）七組UI動效對時間、樓層及研修室篩選功能模塊添加跳動、旋轉和縮放等基礎動態形式，在選擇研修室主題模塊中，采用動態凸顯的形式。

將手機交互原型放置在電腦上，鼠標代替手指模擬操作。在受試者進行交互時，實驗人員間歇語音播報任務內容，見表2。在受試者遇到困惑的界面停留過長時間（實驗結果已經顯著）時，實驗人員予以適當提示讓受試者完成當前任務。實驗共進行10人，其中有效9人。

表2 任務內容

Tab.2 Task content

3.2 實驗結果分析

3.2.1 視覺搜索關注區域

視覺熱點圖與焦點圖的價值在于呈現用戶對圖片中感興趣或視覺集中的部分，因此對于第4組信息表現即研修室可視化方式的設計形式使用焦點圖分析較有意義，見圖5。綜合9名被試的實驗結果，對比原系統的細條式與其他可視化的信息表現形式，將研修室類型信息可視化后，受試者的視覺焦點從文字轉移到了圖形。對比純色化前后的矩形式與圓弧式，將無效時間純色化后，被試在無效的灰色與粉色時間條上的注視點明顯減少，視線焦點集中在研修室名稱與有效的綠色時間條上。

3.2.2 視覺搜索效率分析

根據采集的眼動軌跡視頻實驗數據，從眾多分析指標中選取3個最符合本實驗研究的指標，分別是首次注視時間、回視型眼跳和掃描持續時間，其指標意義見表3。實驗綜合方差齊性檢驗和配對t檢驗兩種分析方法檢驗數據有效性，對7個視覺設計干擾子在用戶視覺搜索過程中的影響進行探討，以首次注視時間、掃描持續時間來衡量被試的視覺搜索效率，以回視型眼跳為參考，并結合主觀滿意度對被試視覺搜索行為進行分析。

1）第一組界面結構，經過方差齊性檢驗發現兩種不同的界面結構在搜索效率上存在顯著差異，見表4。宮格式的預約研修室功能模塊平均首次注視時間（2.219 s）短于標簽式（6.386 s），差異顯著（=8.881，<0.01）。從掃描持續時間看，宮格式的任務完成時間（3.590 s）相比標簽式（9.511 s）效率提升164.9%，且差異顯著（=12.123，<0.01），回視型眼跳次數也顯著少于標簽式。綜合分析表明在功能分類導航的信息搜索界面，采用宮格式的界面結構會比標簽式更加合理，用戶搜索效率更高。

圖5 信息表現典型焦點圖

表3 軌跡圖指標及意義

Tab.3 Index and significance of track chart

表4 界面結構方差分析結果

Tab.4 ANOVA results of interface structure

注：**表示差異非常顯著，*表示差異顯著。

2）第二組功能布局，經過方差齊性檢驗，3種不同的功能布局和篩選方式在掃描持續時間上存在顯著差異（=23.426，<0.001），羅列式點選用時最長（23.994 s），其次是響應式抽屜（11.062 s），全部顯示方式的用時最短（6.652 s）。在篩選條件較少時，將篩選內容全部顯示在二級界面上會有效降低用戶的總篩選時間。對于兩種不同的主次功能設計界面，篩選按鈕的首次注視時間2-b（0.989 s）比2-a（13.031 s）更短，差異顯著（=16.704，<0.001），且回視型眼跳也顯示篩選按鈕設計的影響差異顯著，2-a比2-b平均多出1個回視型眼跳，說明主功能模塊增大顯示面積并放置界面中心位置能夠提高用戶視覺搜索效率。目標篩選區任務中，2-a和2-b需要點擊按鈕觸發篩選區域，2-c則直接顯示在第一頁面層級，因此在首次注視時間上全部顯示快于前兩者，但在搜索效率上的差異并不顯著（=1.490，>0.05），見表5。

3）第三組交互方式的掃描持續時間為從被試開始對時間模塊進行操作到時間篩選完成，經過方差齊性檢驗發現3種不同的交互方式在搜索效率上有顯著差異（=9.115，=0.001<0.01）。受電腦交互原型滾輪操作不便的影響，上下滾動式真實平均時長應略短于實驗結果（17.300 s），高于左右滑動式（7.886 s）和直接輸入（7.706 s）。

4）第四組信息表現的掃描持續時間為從被試開始搜尋任務目標研修室到被試結束該可視化形式下的篩選動作。任務正確結果分別是103、106、206、207、307、406、502、503，共8個，任務完成情況分為找到完成目標研修室數量、正確數量、錯誤數量、完成率（正確數量/8）與掃描持續時間5個指標來分析，經過方差齊性檢驗，6種不同的可視化形式的5個指標均有顯著差異（<0.05），掃描持續時間從高到低排序為細條式>矩形式>表盤式>圓弧式>圓弧純色化>矩形純色化。完成數量上表盤式最多，由于存在一定錯誤數量，因此完成率不同，錯誤數最低的為圓弧式，最高的為矩形式。完成率表盤式最高（87.5%），矩形式最低（47.2%），見表6。另對4-b與4-c、4-d與4-e兩組進行純色化變量的實驗組進行配對t檢驗，分析結果顯示在矩形式的可視化形式中，錯誤數指標差異顯著（=3.411，=0.009<0.01），將無效時間純色化可以降低被試搜索的錯誤率，掃描持續時間結果也具有顯著性（=2.670，=0.028<0.05），矩形純色化的形式任務完成時間更短。在信息顯示可視化過程中，精簡信息呈現有助于提高搜索效率，但圓弧式的對比組差異不明顯，說明不同的可視化方式對信息表現的搜索效率存在影響。

表5 功能布局方差分析結果

Tab.5 ANOVA results of function layout variance

注：表中**表示差異非常顯著，*表示差異顯著。

表6 信息表現方差分析結果

Tab.6 ANOVA results of information performance

注：**表示差異非常顯著，*表示差異顯著。

5）第五組信息層級，被試的視覺軌跡在羅列式中為從上向下的直線順序型，全部顯示中呈隨機跳動型，可視化滾動中為持續N字型。經過方差齊性檢驗發現3組不同的信息提交設計形式的首次注視時間和掃描持續時間都有顯著差異，羅列式的首次注視時間最短，但相比另外兩組多一個頁面層級，因此總任務時長更長。全部顯示形式的總任務完成時長最短，但隨機跳動的視覺搜索延長了首次注視的時間，增加了回視型眼跳的次數?？梢暬瘽L動的搜索形式速度較慢，但會減少回視型眼跳次數，見表7。

表7 信息層級方差分析結果

Tab.7 ANOVA results of information level

注：**表示差異非常顯著，*表示差異顯著。

6）第六組色彩搭配，經過方差齊性檢驗，3組設計方案效率指標上差異不顯著（>0.05）。分別對比6-a/6-b與6-b/6-c的平均值發現功能模塊與背景色相相近或明度相近會使首次注視功能模塊時間變長，會在一定程度上削弱信息凸顯度，降低搜索效率。

7）第七組UI動效的實驗將6-a與樣本7進行對比，經過配對檢驗，效率指標差異顯著（<0.05），見表8。首次注視時間為從界面進入視線開始到被試注視點分別首次到達篩選模塊、篩選后的研修室、小組討論主題模塊的時間。根據分析結果，有UI動效引導的平均首次注視時間（0.298 s）比無UI動效引導（0.876 s）更短，效率提升194.0%。有UI動效的任務完成時間（30.954 s）比無UI動效（46.093 s）也更短，效率提升48.9%，為關鍵模塊添加引導動效可以有效提升被試搜索效率。

表8 UI動效檢驗結果

Tab.8 T-test results of UI dynamic effect

注：表中**表示差異非常顯著，*表示差異顯著。

3.2.3 用戶滿意度訪談

在受試者完成了全部搜索任務后，對受試者進行滿意度訪談，內容包括：調查受試者在每個搜索界面中的偏好；發現受試者在搜索過程中遇到的問題；評估搜索過程中影響受試者到達目標的干擾子特征。絕大部分受試者傾向于宮格式的導航界面布局，更喜歡放大后的篩選按鈕和全部顯示的功能布局。但全部顯示的信息偏多，剛進入界面的時候會有些不知所措。抽屜點選的篩選方式最不受歡迎，時間篩選方式上多偏向于左右滑動。對于研修室可視化形式，喜歡矩形式的居多，且有88.9%的受試者都更傾向于將無效時間純色化。表盤式因占據太大空間，在研修室過多的時候翻找會形成負擔。對比文字更多的細條式，受試者更喜歡研修室和人數可視化成圖形。在信息提交頁面，77.8%的受試者喜歡全部顯示，不喜歡將信息藏在滑動模塊里。多數用戶覺得在篩選后的研修室和研修室主題選擇的標簽上添加了UI動效之后有引導作用，但其他功能模塊上的多個動效沒有任何幫助。

4 結語

從視覺信息搜索認知邏輯角度出發，基于某圖書館研修室預約系統設計并進行搜索效率實驗，分析得出影響搜索效率的界面設計要素，并基于此提出設計策略。在對搜索類型界面進行設計時，要注意減少信息層級、分布方式合理、信息可視化，選擇恰當的交互方式，色彩搭配合理及給用戶適當的UI動效引導。

信息及功能布局應注意歸類準確、表現合理、主次關系清晰。當文字信息較少時宜在界面分塊展示，如導航界面適合宮格式；較多時，可以采取列表式；同時具有圖片信息時，合理分配兩者之間的關系。盡量避免讓用戶閱讀繁瑣的文字信息，在界面設計中可進行多種嘗試選擇恰當的信息可視化形式，并減少干擾子以減輕用戶信息加工的負擔，同時注意多信息的布局。減少不必要的層級，能在一個頁面中完成的搜索/篩選動作盡量不要放到下一級頁面中，增加層級會顯著增加用戶搜索時間，降低效率。注意信息層級對視覺秩序的影響，可以明顯展示給用戶的信息或功能最好不要隱藏在功能模塊中，在保證界面簡潔的前提下將可以全部顯示的信息顯示出來，但不同信息的種類不宜超過4種，過多的信息呈現會增加用戶平行加工負擔。

羅列式的篩選應注意信息呈現方式，并考慮更多交互可能——將信息放在模塊里讓用戶滾動選擇、或是滑動選擇等，避免采用響應式的彈出抽屜。在區域選擇型的信息篩選上，例如時間、分數等的選擇可以采用左右滑動、或捏合等更加符合用戶對區域的范圍把控習慣的交互方式，也更加自然有趣。利用界面布局、色彩搭配和動效為用戶制造視覺引導和體驗，可以根據人的閱讀習慣進行引導式的界面布局，制造視覺搜索軌跡傾向，讓用戶遵循設計的視覺軌跡來進行交互。功能模塊與背景的色彩搭配明度和色相不宜太過相近，同時注意對比度與美觀度。UI動效可以有效提升用戶的視覺捕捉效率，但同一界面添加過多動效會造成用戶視覺混亂，應在恰當的時候選擇適宜的動效形式，如對同一界面多個同級信息可以采用動態凸顯逐漸顯示。舒適的視覺引導可以讓用戶更高效地完成搜索任務，同時提升搜索體驗。

[1] 侯文軍, 秦源. 基于眼動瀏覽規律的手機典型界面結構研究[J]. 北京郵電大學學報(社會科學版), 2014, 16(1): 25-30. HOU Wen-jun, QIN Yuan. Mobile Typical Interface Structure Based on Eye-Tracking Browsing Rules[J]. Journal of Beijing University of Posts and Telecommunications (Social Sciences Edition), 2014, 16(1): 25-30.

[2] 姜婷婷, 范水香, 王昊. 高校圖書館OPAC中的分面搜索對用戶體驗的影響——基于不同任務的對比實驗分析[J]. 圖書情報工作, 2015, 59(4): 114-121. JIANG Ting-ting, FAN Shui-xiang, WANG Hao. Impact of Faceted Search in Academic Library OPAC on the User Experience: Based on the Comparison of the Experimental Analysis[J]. Library and Information Service, 2015, 59(4): 114-121.

[3] 方浩, 陳印超, 趙瑩, 等. 移動端新聞平臺信息設計要素對視覺搜索效率的影響機制[J]. 圖書情報工作, 2019, 63(22): 58-67. FANG Hao, CHEN Yin-chao, ZHAO Ying, et al. The Influencing Mechanism of Information Design Elements of Mobile News Platform on Visual Search Efficiency[J]. Library and Information Service, 2019, 63(22): 58-67.

[4] 楊海波, 汪洋, 張磊. 電商手機APP界面背景和圖片特征對消費者搜索效率影響的研究[J]. 包裝工程, 2016, 37(20): 45-49. YANG Hai-bo, WANG Yang, ZHANG Lei. Influence of the Background and Picture Features of the Mobile APP Interface on the Consumer Search Efficiency[J]. Packaging Engineering, 2016, 37(20): 45-49.

[5] 孔雪利. 背景模式及圖標呈現方式對手機懸浮球用戶界面圖標搜索效率的影響[D]. 天津: 天津師范大學, 2021. KONG Xue-li. Influence of Background Mode and Icon Presentation Mode on Icon Search Efficiency of Mobile Phone Levitation Ball User Interface[D]. Tianjin: Tianjin Normal University, 2021.

[6] 徐夢怡. 80-8神經類型與視覺搜索能力的關系研究[D]. 蘇州: 蘇州大學, 2016. XU Meng-yi. Study on the Relationship between 80-8 Nerve Types and Visual Search Ability[D].Suzhou: Soochow University, 2016.

[7] TREISMAN A M, GELADE G. A Feature-Integration Theory of Attention[J]. Cognitive Psychology, 1980, 12(1): 97-136.

[8] CAVE K R, WOLFE J M. Modeling the Role of Parallel Processing in Visual Search[J]. Cognitive Psychology, 1990, 22(2): 225-271.

[9] NOTHDURFT H C. Feature Analysis and the Role of Similarity in Preattentive Vision[J]. Perception & Psychophysics, 1992, 52(4): 355-375.

[10] POIESE P, SPALEK T M, DILOLLO V. Attentional Capture by a Salient Distractor in Visual Search: The Effect of Target-Distractor Similarity[J]. Canadian Journal of Experimental Psychology, 2008, 62(4): 233-236.

[11] WICKENS C D,HELTON W S, HOLLANDS J G, et al. Engineering Psychology and Human Performance[M]. New York: Routledge, 2021.

[12] BATES M J.The Design of Browsing and Berrypicking Techniques for the Online Search Interface[J]. Online Information Review, 1989, 13: 407-424.

[13] 喬歡. 信息行為學[M]. 北京: 北京師范大學出版社, 2010. QIAO Huan. Information Behavior[M]. Beijing: Beijing Normal University Press, 2010.

[14] 周曉英, 張璐. 基于活動理論的非線性信息搜尋行為模型研究[J]. 圖書情報知識, 2018(1): 4-15. ZHOU Xiao-ying, ZHANG Lu. A Research on the Non- Linear Information Seeking Behavior Model Based on Activity Theory[J]. Document, Informaiton & Knowledge, 2018(1): 4-15.

[15] FOSTER A. A Nonlinear Model of Information-Seeking Behavior[J]. Journal of the American Society for Information Science and Technology, 2004, 55(3): 228-237.

[16] 馮波. 基于用戶體驗下的App界面設計中版式設計的探索——以妙讀App為例[J]. 裝飾, 2021(7): 134-135. FENG Bo. Exploration of Layout Design in App Interface Design Based on User Experience: Taking Miaodu App as an Example[J]. Art & Design, 2021(7): 134-135.

[17] 戴濛濛. 不同畫面平衡狀態下大學生視覺注意行為的眼動實驗研究[D]. 蕪湖: 安徽師范大學, 2020. DAI Meng-meng. Experimental Study on the Visual Attention Behavior of College Students under Different Picture Balance[D]. Wuhu: Anhui Normal University, 2020.

[18] 劉歡. 探討手機APP界面中信息圖形的設計[J]. 信息記錄材料, 2021, 22(6): 223-224. LIU Huan. Discussion on the Design of Information Graphics in the Interface of Mobile APP[J]. Information Recording Materials, 2021, 22(6): 223-224.

[19] 黃穎宜. 手機界面信息層級可視化設計的秩序[J]. 包裝工程, 2018, 39(4): 59-64. HUANG Ying-yi. Visual Design Order of Mobile Interface Information Hierarchy[J]. Packaging Engineering, 2018, 39(4): 59-64.

[20] HUANG K C. Effects of Computer Icons and Figure/ Background Area Ratios and Color Combinations on Visual Search Performance on an LCD Monitor[J]. Displays, 2008, 29(3): 237-242.

[21] SHIEH K K, KO Y H. Effects of Display Characteristics and Individual Differences on Preferences of VDT Icon Design[J]. Perceptual and Motor Skills, 2005, 100(2): 305-318.

[22] 袁泳凡. 對手機界面圖標識別度研究[D]. 北京: 北京交通大學, 2016. YUAN Yong-fan. Research on Recognition Degree of Mobile Phone Interface Icons[D]. Beijing: Beijing Jiaotong University, 2016.

[23] 奚柯. 動效設計在手機APP界面中的應用研究[D]. 南京: 東南大學, 2018. XI Ke. Research on Application of Motion Design in Mobile App Interface[D]. Southeast University, 2018.

[24] 朱田牧. 動態突顯對視覺搜索績效的影響及其影響因素研究[D]. 杭州: 浙江理工大學, 2020. ZHU Tian-mu. The Effect of Dynamic Highlighting on the Performance of Visual Search and Its Effective Factors[D]. Hangzhou: Zhejiang Sci-Tech University, 2020.

[25] 朱奧, 王曉彬, 李曉鶴, 等. 復雜信息界面視覺搜索效能量化評估方法與模型[J]. 空軍工程大學學報, 2022, 23(6): 84-90. ZHU Ao, WANG Xiao-bin, LI Xiao-he, et al. Quantitative Evaluation Method and Model of Visual Search Efficiency in Complex Information Interface[J]. Journal of Air Force Engineering University, 2022, 23(6): 84-90.

[26] 黃穎宜. 基于信息層級的移動端界面文字量化設計模型[J]. 裝飾, 2019(2): 138-139. HUANG Ying-yi. A Quantitative Design Model of Mobile Interface Text Based on Information Hierarchy[J]. Art & Design, 2019(2): 138-139.

[27] 袁旦, 張智君. 任務轉換加工機制的研究述評[J]. 應用心理學, 2009, 15(3): 236-244. YUAN Dan, ZHANG Zhi-jun. Review on the Mechanism of the Task Switching Process[J]. Chinese Journal of Applied Psychology, 2009, 15(3): 236-244.

Influence Mechanism of Interface Visual Design Distractors on Search Efficiency

LI Juan, LI Si-yuan

(School of Art and Design, Xihua University, Chengdu 610039, China)

The work aims to explore the influence mechanism of visual design distractors on search efficiency in mobile application interface, and propose design strategies and methods to improve the search efficiency of visual interface. Literature research, visual search theories and behavioral models were sorted out. And on this basis, visual information search thinking logic was explored. Based on the study room reservation system of a university library, 7 sets of experimental samples of interface visual distractors were designed. Through dynamic interface interaction experimental research on eye movement, the mechanism of influence of interface visual design distractors on search efficiency was ascertained. Among the 7 sets of different interface visual design distractors in interface structure, functional layout, interaction mode, information presentation, information hierarchy, color matching and UI animation guide, the search efficiency of user target tasks was significantly different. Search type interface design should make the interface structure clear and the distribution of primary and secondary functions reasonable. It is required to be more flexible in interaction, minimize information hierarchy and visualize information appropriately, and give users comfortable color contrast and appropriate UI motion guidance.KEY WORDS: interface visual design; distractors; information processing; search efficiency

J525.2

A

1001-3563(2023)14-0235-09

10.19554/j.cnki.1001-3563.2023.14.025

2023–02–12

四川省教育廳人文社科重點研究基地—氣象災害預測預警與應急管理研究中心項目（ZHYJ22-YB05）；四川省哲學社會科學重點研究基地現代設計與文化研究中心項目（MD22E032）；四川省高校哲學社會科學重點研究基地工業設計產業研究中心項目（GYSJ2022-06）

李娟（1985—），女，博士，講師，主要研究方向為信息交互設計及人機工程學。

李思原（1998—），女，碩士研究生，主攻信息交互與用戶體驗。

責任編輯：藍英僑