基于移動端界面的信息圖標設計路徑研究

◇謝麗娟

隨著數字化時代的到來，數字技術助力設計的創新發展，衍生出新的設計形式，既為當下和未來人們的物質和精神生活提供了嶄新的審美方式和審美體驗，也為社會生活的新需求和新問題提供了新的設計方案。信息已成為人類生活最基本的交換物，手機等移動端電子產品除了在外觀上的變化，網絡更是賦予其便攜的特點，是人們當下普遍采用的信息獲取媒介，其顛覆了傳統傳播媒介的信息傳播方式，極大地豐富了參與者的熱情和視聽體驗，使相關設計創作充滿了新的可能性和更廣闊的創意空間。因此，界面信息圖標設計無疑成為新形勢下移動端人機良好交互溝通的重要環節。

信息圖標是移動端界面的重要組成部分，是傳遞信息的視覺符號。信息圖標設計是視覺符號的構成，可實現信息語義向符號意象的轉換。由于界面信息圖標設計所具有的用戶體驗特性及內容創新性，其需要符合當前信息傳播的視覺品質標準，這樣用戶才能充分認知、接受和反饋，實現信息的交流互動。

一、用戶體驗在移動端界面信息圖標設計中的重要性

以網絡為特征的數字化，改變了我們的生活方式、工作方式，也改變了設計的思維形式和形態。基于移動端界面的信息圖標設計是信息發送者向接收者傳遞信息，并通過媒介的不斷進步，產生信息互動的過程，從而在設計中不斷營造良好的用戶體驗氛圍。

用戶體驗是用戶在使用設計對象或服務的過程中，建立起來的主觀心理感受，能夠使用戶進入設計者所營造的情感環境中，其帶有一定的不確定性因素。用戶在設計體驗過程中，受環境和個人因素的影響，可以產生功能性、可用性、愉悅性三個方面的體驗維度，其中愉悅性是體驗的最高維度。

界面信息圖標是傳遞信息的視覺符號，是與其他界面鏈接以及讓其他界面鏈接的標志。圖標能使受眾便于選擇信息。其中，“圖”包括最基本的符號與底圖的形態；“標”，即標示、標準，是特定信息的視覺符號；界面即特定視覺空間，是圖標與背景底圖構成的視覺形式。

界面信息圖標不僅僅存在于某個界面平臺，在不同的交互平臺都有信息圖標的設計。根據平臺特性的不同，有移動和非移動端界面平臺的區別，移動端界面平臺主要指隨身電子產品，如手機、平板電腦、筆記本電腦等；非移動端界面平臺主要有車載電子設備、空間交互設備、個人電腦平臺等。我們需要充分了解平臺特性，以便設計出符合用戶使用習慣和平臺要求的界面信息圖標。

隨著通信技術以及計算機技術的發展，移動端電子產品已然成為我們日常生活中不可或缺的通信與交流的工具與手段，與其他非移動界面平臺相比較，其特點是可以隨身攜帶，在任何環境下都方便人們使用。一般來講，移動端電子產品體積、顯示區域相對較小，便于攜帶，同時又具有復雜的展示效果。界面信息圖標的本質是傳達信息的視覺符號，是為了將信息更直觀、更準確地傳達給受眾，而面對內容與形式多樣的信息圖標，人們會根據不同的需求作出選擇，為需要的圖標投入更多的注意力。優化移動端界面視覺識別的選擇性注意力，需要在圖標的設計上準確有效地傳遞信息。

移動端界面信息圖標設計的用戶體驗不是低維度的信息對稱，而是將實用、便利、愉悅、趣味、娛樂等因素綜合考慮的創造，目的是達到高維度的精神交流。不同的人有不同的愛好，只有對群體進行情感分析，才能使設計達到對個體主體性的共通情感表達，完成信息圖標在造型與界面上的形式表現，達到接受情感信息的共鳴狀態。這就需要重視設計的調研、實踐、成果和檢驗環節，進行符合用戶心理特征、行為特征、生活環境的信息圖標設計，讓受眾在追求各異的網絡時代，享受設計帶來的愉悅感體驗，使受眾達到對信息的認知和理解。因此，移動端界面圖標設計，在用戶獲取信息體驗過程中顯得尤為重要。移動端操作主要依賴手指，所以交互層次不能設計得太多，交互過程不可太復雜，設計上應該簡潔明晰，要考慮選擇通用的圖形圖像、聲音、動畫等，讓用戶能更好地體驗界面的操控感，以便用戶在移動使用過程中更加準確地獲取信息。

二、移動端界面信息圖標的視覺識別方式

移動端界面信息圖標的視覺識別方式，反映了受眾對信息圖標進行識別時的心理反應，視覺經驗的“圖形化”、視覺界面的空間力場及視覺符號的獨特性都影響著人們對于信息圖標的視覺識別方式。

（一）視覺經驗的 “圖形化”

移動端界面信息圖標設計需要我們研究如何更快速、更強烈地觸動人們的視覺感知，其設計結果必須依賴于人的視覺經驗。就我們的視覺經驗而言，相同或相似于自然形態的圖像或圖形，較易引發人類本能的情感。由點、線、面、色構成的相同或相似于自然事物的圖形符號容易被人的視覺感知，它往往成為界面圖標設計的主體要素，而圖形化的文字也比較符合人的視覺及情感規律。故而，根據視覺經驗，將概念信息“圖形化”是吸引視覺注意力的一個重要設計規律，由信息的概念意義到符號系統的意象呈現，再到人的知覺和心理接受，需要在信息圖標視覺設計過程中，不斷使用概念信息詞義與實際視覺效果的交互印證，來準確完成視覺形式或符號的表意傳達。

（二）視覺界面的空間力場

“視覺中心”是設計的重要規律與技能，中心即傳遞給讀圖者的重要信息，是吸引視覺的焦點，為視覺信息指引明確的符號存在性。在任何觀看過程中，視覺會自動調控，使我們的視覺焦點停留在相對舒服的位置，當我們的眼睛同時面對各種復雜的視覺信息時，它會選擇性地注意自身最感興趣的信息圖標。在我們日常的視覺經驗中，各式各樣的移動端界面信息圖標之所以能被感知，是因為我們的視覺自然而然地確定了“圖”與“底”的概念對比關系，在這種關系中，信息交流互動得以實現。

（三）視覺符號的獨特性

有規律、有秩序的圖形易被我們的視覺接受，易產生視覺美感，但它們往往不耐看、呆板、單調，并且缺乏活力。而恰到好處的中斷、轉折、交叉、過渡、對比會形成較為集中的視覺興奮點，會更大限度地吸引人們的視覺注意力。貢布里希認為：“眼睛在快速掃描環境時并不向大腦提供任何信息，只有當他處于相對靜止的狀態時才能提供信息?！倍@種相對靜止的狀態只有在視覺感知到圖形中斷、轉折時才更容易形成。因此，中斷對眼睛是一種磁鐵，眼睛在本能尋找中斷，而中斷也代表設計的獨特性。移動端界面信息圖標設計之所以需要在規律中含變化、簡約中寓豐富、對稱中存在不對稱、平衡中包含不平衡，其原因即在于此。

三、移動端界面信息圖標符號的創意思路

在移動端界面明確表達信息時，通常會借助圖標把抽象的概念視覺化。在前期調研后，需要對信息圖標進行具體設計。圖標最終的呈現效果需要在最開始就進行創意構思。具象型、意象型和抽象型是信息圖標符號創意思路的大體方向。

（一）具象型

具象型的表達方式是指信息圖標符號的表現方式為較為具體化的視覺形象，表達的是視覺的真實性和典型性，給用戶的心理感受是直觀的呈現。信息的直接化表述，形象上一般較為復雜，質感上較為豐富。在越來越簡潔的移動端界面圖標設計中，這種表現方式相對較少，但符合人們視覺心理的具象型圖標設計有時會帶給受眾不一樣的感覺。

（二）意象型

意象型在信息圖標設計中較為常見，意象型的表現不是完全描摹客觀形象，而是運用了變形、夸張、重組的表現手法。這就需要用準確、貼切、通俗、易懂的語言、比喻手法來表現，有些卡通形象的圖標，就是意象型的一種表現方法。移動端界面信息圖標的意象型表現可以使用戶有一定的想象空間，通過變形的手法能更加符合其審美需求。

（三）抽象型

抽象的表現方法是以具體形象為依據，把具體形象提煉到超脫自然之外的幾何形或自然形，以簡約、規范、嚴謹、明確、秩序和有共識的形象，引起人們心理上、邏輯上的聯想。抽象雖然沒有具象表現那么直觀，但具有強烈的現代感和形式美，有鮮明的視覺效果。信息圖標有單純以文字為視覺形象來表現的，這也是一種抽象型的表現方式。移動端界面抽象型的信息圖標可以給予用戶充分的想象空間，簡潔的幾何形式能簡潔、明了、快速傳達信息，符合簡潔化的界面信息圖標設計趨勢。

四、基于移動端界面的信息圖標設計方法

（一）移動端界面信息圖標類型設定

信息圖標是具有明確指代含義的圖形符號，具有便于記憶和高度濃縮并快捷傳達信息的特征。它在移動端界面中可以是功能標識、程序標識、數據標識、命令選擇、模式信號、切換開關或者狀態指示等。

移動端界面的視覺流程可分為觀、看、讀三個層次。在這一特定的視覺界面空間中，信息是分級傳達的，呈現不同信息含量的視覺符號設計，因此信息圖標對應觀、看、讀的視覺意義，分別以多義、復義、直義的符號設計來分級表現，通常為一、二、三級圖標設計。一級信息圖標，即多義圖標，需包含多種信息概念；二級信息圖標，屬于復義圖標，需要由兩個信息概念的視覺意象符號構成，設計以兩詞中選擇關鍵詞為主形式意象，構成“一形兩意”的圖標創意符號；三級信息圖標，屬于直義圖標，設計以一個信息詞對應的視覺意象構成，圖標符號要求簡約明確，通俗易識別。

（二）移動端界面信息圖標符號形態要素

信息圖標符號形態要素包括以下四個方面：其一，造型，即形狀（曲直性與開閉性形狀）、色彩（色相、明度、彩度）、肌理（視覺肌理、觸覺肌理）；其二，條件，包含數量（大小、粗細、體積）、方位（垂直、水平、傾斜、位置）、動靜以及光線；其三，空間限定，即點、線、面、體、實虛；其四，關系，即無形的信息要素，形象的新奇、情感的運動、意義的合成。移動端界面信息圖標需要將各形態要素綜合考慮，以實現信息語義向符號意象的轉換。

（三）移動端界面信息圖標的表現方式

1.簡捷性

界面設計傳達的信息方式應是簡化、方便記憶和易操作的，信息圖標設計亦是如此。設計移動端界面圖標時應堅持以用戶體驗為中心的設計原則，全面考慮目標用戶對圖標的認知程度，在界面和用戶理解的現實參照之間建立起一種對應關系，以便讓顯示的信息與用戶關注信息的期望相符，使用戶在使用時不會因為信息的誤讀而造成錯誤操作或判斷。

信息圖標體現直觀、簡潔，操作方便快捷，用戶接觸界面后通過對信息圖標的識別可理解相應的功能，進而方便使用本應用系統。圖標符號和色彩使信息的含義明確，用戶不必再參考其他信息源。在進行圖標設計時還需要充分考慮界面布局的合理化，遵循用戶從左向右、自上而下的瀏覽操作習慣，避免用戶在使用過程中移動距離過長。設計上要多做“減法”，圍繞用戶的目的和行為來設計，遵循已經成型的用戶習慣，使用戶更加易于理解和操作，專注于主要業務操作流程，提高信息圖標的易用性及可用性。

2.對比性

移動端界面信息圖標是直觀的視覺標識，可以對信息進行補充與強調，也可以對信息進行直接表意。每個圖標都有一套對應的圖像，其根據不同的功能、不同的狀態會產生相應的變化。它們各自具有不同的大小、顏色和圖像格式，這些格式對應不同的屬性。

差異是在刺激物之間的對比中顯示出來的，傳播內容的安排如果具有強烈的對比和矛盾沖突，就容易引起受眾的注意和重視。對比是強調突出信息視覺化表現的方法之一，適宜、良好的對比度會更易于讀者辨識和接受。移動端界面信息圖標設計運用對比的方法有很多，可以通過形態要素中圖標的色彩、圖形、質感、空間等達成對比效果。使用對比的關鍵是突出重點內容，以吸引讀者瀏覽。

3.整體性

整體性是表現移動端界面設計獨特風格的有效方式。信息圖標的統一風格，不僅能體現品牌或產品自身的特點，塑造產品的整體識別性，增加信息的辨識度，還能加強用戶對產品文化以及界面操作的理解。

對于移動端信息圖標的整合設計，可以有助于更好地進行界面的視覺管理，有效地整合與歸納信息，避免產生視覺上的混亂感，抓住用戶焦點，增強移動端各平臺之間信息圖標的統一性。界面圖標整體風格表現要以用戶的信息傳達為首要目標，信息圖標往往由多個部分組成，一套信息圖標應該有相同的設計風格，保持這些圖標以及圖標中設計元素中色彩、大小比例、材質、風格等方面的一致性，是讓產品顯得整體和諧的關鍵所在。

4.規范性

在界面圖標前期設計過程中，要針對目標用戶規范分析設計角色，獲取最終用戶和直接用戶的需求。要考慮到目標用戶不同，所引起的交互重點和信息分級形式也不同，如對于專業用戶和對于入門用戶的設計重點就不同。界面圖標視覺設計中存在多個組成部分（組件、要素），不同組成部分之間的交互設計目標需要一致，無論是圖標的造型，還是色彩布局和風格，都需遵循各移動端平臺的標準與規范。

五、強調用戶體驗的界面信息圖標質感塑造

移動端界面信息圖標的表意可以由質感來體現。具有相同表達意思的圖標，其設計風格會有所不同。界面圖標的質感是對信息圖標設計的錦上添花，質感用得恰當，加得合理，會營造出更好的使用環境，給用戶帶來良好的體驗感。移動端界面設計在不斷變化，界面圖標的質感選擇也在不斷更新換代。

（一）扁平化與視覺深度設計

扁平化是指避免所有的裝飾，例如陰影、紋理等，強調減弱質感的影響，使界面變得更加簡潔。扁平化設計不僅僅是表示視覺元素上的扁平，它也意味著產品結構上的扁平，盡可能讓界面操作流程更加便捷。移動端界面圖標的扁平化視覺設計可以通過單純的形象和簡潔的色彩來實現。醒目明亮的扁平化配色能夠增強信息圖標視覺元素的趣味性，其設計重點是在色彩的飽和度、明暗上下功夫，使信息色彩具有醒目感和有序感。

營造視覺深度可豐富界面信息圖標設計的視覺效果。扁平化設計雖然有簡潔感，但有時會缺乏細膩的情感溝通，而增強視覺深度，可以豐富界面的整體層次，使視覺效果變得更具深度和更加立體，讓信息通過豐富的界面圖標設計準確地傳達出來。圖標的視覺深度營造可通過投影、漸變、透明、光炫、3D效果等方式來實現。

（二）擬物化氛圍營造

移動端界面圖標質感塑造少不了擬物化設計。擬物化主要是利用一些特殊手法達到圖標質感在視覺上與真實物體的相似性，例如陰影、玻璃質感、透明感、金屬感等效果。擬物化設計需要在不影響整體風格的情況下，對圖標的不同屬性進行強調，豐富設計細節，使用戶在使用時豐富視覺效果與觸覺感受，讓設計更加富有情感，符合界面空間氛圍。

目前移動端界面信息圖標設計整體雖然是扁平化趨勢，但是在細節上使用擬物化營造，會使得界面整體形象更具特色。

（三）動效化視覺表現

移動端界面圖標如果擁有恰到好處甚至令人驚喜的動畫效果，可以讓屏幕中的虛擬世界變得生動，讓操作變得有趣。動態效果可以通過閃爍發光、動畫、音效配合等設計方式實現，使設計變得更加豐富，并且讓用戶在使用時達到信息的良好溝通與交流。

動態效果在不同的移動端界面平臺的設計方法及規范略有區別，這需要符合我們平時使用多媒體設備的經驗習慣。動態設計要考慮實現成本，在設計中要以功能為主、動畫為輔，在實現功能的基礎上，再去添加動畫，進而完善設計。

六、結語

界面信息圖標是用戶在使用移動端電子產品時重要的信息獲取媒介元素，可以提高人們使用電子產品的效率。用戶瀏覽移動端屏幕中的信息是通過掃視和凝視相結合的方式進行的，從圖標中獲取的所有信息，都是從信息圖標本身以及其他相關知識中推斷得到的，這就使得界面信息圖標的設計要表意明確。在大多數情況下，手機、平板電腦、筆記本電腦等移動端電子產品，界面信息圖標的設計有相似之處。本文對信息圖標設計路徑進行研究，力求在設計中創造良好的用戶體驗。移動端平臺的不斷更新，使設計路徑值得進一步討論和研究。