基于移動端界面的信息圖標(biāo)設(shè)計路徑研究

◇謝麗娟

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

信息圖標(biāo)是移動端界面的重要組成部分，是傳遞信息的視覺符號。信息圖標(biāo)設(shè)計是視覺符號的構(gòu)成，可實現(xiàn)信息語義向符號意象的轉(zhuǎn)換。由于界面信息圖標(biāo)設(shè)計所具有的用戶體驗特性及內(nèi)容創(chuàng)新性，其需要符合當(dāng)前信息傳播的視覺品質(zhì)標(biāo)準(zhǔn)，這樣用戶才能充分認(rèn)知、接受和反饋，實現(xiàn)信息的交流互動。

一、用戶體驗在移動端界面信息圖標(biāo)設(shè)計中的重要性

以網(wǎng)絡(luò)為特征的數(shù)字化，改變了我們的生活方式、工作方式，也改變了設(shè)計的思維形式和形態(tài)?；谝苿佣私缑娴男畔D標(biāo)設(shè)計是信息發(fā)送者向接收者傳遞信息，并通過媒介的不斷進(jìn)步，產(chǎn)生信息互動的過程，從而在設(shè)計中不斷營造良好的用戶體驗氛圍。

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

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

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

隨著通信技術(shù)以及計算機(jī)技術(shù)的發(fā)展，移動端電子產(chǎn)品已然成為我們?nèi)粘Ｉ钪胁豢苫蛉钡耐ㄐ排c交流的工具與手段，與其他非移動界面平臺相比較，其特點(diǎn)是可以隨身攜帶，在任何環(huán)境下都方便人們使用。一般來講，移動端電子產(chǎn)品體積、顯示區(qū)域相對較小，便于攜帶，同時又具有復(fù)雜的展示效果。界面信息圖標(biāo)的本質(zhì)是傳達(dá)信息的視覺符號，是為了將信息更直觀、更準(zhǔn)確地傳達(dá)給受眾，而面對內(nèi)容與形式多樣的信息圖標(biāo)，人們會根據(jù)不同的需求作出選擇，為需要的圖標(biāo)投入更多的注意力。優(yōu)化移動端界面視覺識別的選擇性注意力，需要在圖標(biāo)的設(shè)計上準(zhǔn)確有效地傳遞信息。

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

二、移動端界面信息圖標(biāo)的視覺識別方式

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

（一）視覺經(jīng)驗的 “圖形化”

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

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

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

（三）視覺符號的獨(dú)特性

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

三、移動端界面信息圖標(biāo)符號的創(chuàng)意思路

在移動端界面明確表達(dá)信息時，通常會借助圖標(biāo)把抽象的概念視覺化。在前期調(diào)研后，需要對信息圖標(biāo)進(jìn)行具體設(shè)計。圖標(biāo)最終的呈現(xiàn)效果需要在最開始就進(jìn)行創(chuàng)意構(gòu)思。具象型、意象型和抽象型是信息圖標(biāo)符號創(chuàng)意思路的大體方向。

（一）具象型

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

（二）意象型

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

（三）抽象型

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

四、基于移動端界面的信息圖標(biāo)設(shè)計方法

（一）移動端界面信息圖標(biāo)類型設(shè)定

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

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

（二）移動端界面信息圖標(biāo)符號形態(tài)要素

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

（三）移動端界面信息圖標(biāo)的表現(xiàn)方式

1.簡捷性

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

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

2.對比性

移動端界面信息圖標(biāo)是直觀的視覺標(biāo)識，可以對信息進(jìn)行補(bǔ)充與強(qiáng)調(diào)，也可以對信息進(jìn)行直接表意。每個圖標(biāo)都有一套對應(yīng)的圖像，其根據(jù)不同的功能、不同的狀態(tài)會產(chǎn)生相應(yīng)的變化。它們各自具有不同的大小、顏色和圖像格式，這些格式對應(yīng)不同的屬性。

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

3.整體性

整體性是表現(xiàn)移動端界面設(shè)計獨(dú)特風(fēng)格的有效方式。信息圖標(biāo)的統(tǒng)一風(fēng)格，不僅能體現(xiàn)品牌或產(chǎn)品自身的特點(diǎn)，塑造產(chǎn)品的整體識別性，增加信息的辨識度，還能加強(qiáng)用戶對產(chǎn)品文化以及界面操作的理解。

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

4.規(guī)范性

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

五、強(qiáng)調(diào)用戶體驗的界面信息圖標(biāo)質(zhì)感塑造

移動端界面信息圖標(biāo)的表意可以由質(zhì)感來體現(xiàn)。具有相同表達(dá)意思的圖標(biāo)，其設(shè)計風(fēng)格會有所不同。界面圖標(biāo)的質(zhì)感是對信息圖標(biāo)設(shè)計的錦上添花，質(zhì)感用得恰當(dāng)，加得合理，會營造出更好的使用環(huán)境，給用戶帶來良好的體驗感。移動端界面設(shè)計在不斷變化，界面圖標(biāo)的質(zhì)感選擇也在不斷更新?lián)Q代。

（一）扁平化與視覺深度設(shè)計

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

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

（二）擬物化氛圍營造

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

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

（三）動效化視覺表現(xiàn)

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

動態(tài)效果在不同的移動端界面平臺的設(shè)計方法及規(guī)范略有區(qū)別，這需要符合我們平時使用多媒體設(shè)備的經(jīng)驗習(xí)慣。動態(tài)設(shè)計要考慮實現(xiàn)成本，在設(shè)計中要以功能為主、動畫為輔，在實現(xiàn)功能的基礎(chǔ)上，再去添加動畫，進(jìn)而完善設(shè)計。

六、結(jié)語

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