丁男 時慧嫻

【摘 要】在手機(jī)界面中圖標(biāo)是引導(dǎo)用戶操作最重要的視覺符號，設(shè)計師在手機(jī)圖標(biāo)設(shè)計過程中，參考具有普遍指導(dǎo)意義的手機(jī)界面圖標(biāo)通用原則是設(shè)計出優(yōu)秀圖標(biāo)的必要流程和規(guī)范。

【關(guān)鍵詞】數(shù)字媒體藝術(shù);圖標(biāo)設(shè)計;手機(jī)界面

中圖分類號：TB472? 文獻(xiàn)標(biāo)志碼：A ? ? ? ? ? ? ?文章編號：1007-0125（2019）21-0140-02

圖標(biāo)是手機(jī)界面最重要的視覺元素之一，是應(yīng)用產(chǎn)品內(nèi)涵最直接的傳達(dá)。我們打開手機(jī)第一件事就是通過點(diǎn)擊圖標(biāo)來進(jìn)入想要使用的應(yīng)用，進(jìn)入應(yīng)用后，往往也是通過圖標(biāo)來打開需要的功能界面。這就要求設(shè)計師在手機(jī)界面設(shè)計的過程中，始終要把圖標(biāo)設(shè)計放在重要位置，并建立具有普遍指導(dǎo)意義的手機(jī)界面圖標(biāo)通用原則。

優(yōu)秀的圖標(biāo)設(shè)計在視覺風(fēng)格上各不相同，但一般來說會有一些相同點(diǎn)，即統(tǒng)一性原則、識別性原則、差異性原則。

一、統(tǒng)一性原則

評價圖標(biāo)設(shè)計優(yōu)劣的重要標(biāo)準(zhǔn)就是圖標(biāo)的視覺風(fēng)格是否統(tǒng)一。統(tǒng)一的圖標(biāo)視覺風(fēng)格可以使手機(jī)界面布局整齊合理，降低用戶的交互操作難度，增強(qiáng)界面產(chǎn)品易用性。將系統(tǒng)圖標(biāo)統(tǒng)一有很多種方法，如圖標(biāo)色彩統(tǒng)一、圖標(biāo)圖形風(fēng)格統(tǒng)一、圖標(biāo)圖形透視關(guān)系統(tǒng)一、圖標(biāo)視覺尺寸統(tǒng)一等。

（一）色彩統(tǒng)一。圖標(biāo)的色彩統(tǒng)一需要在圖形統(tǒng)一的基礎(chǔ)上進(jìn)行，只有統(tǒng)一的色彩而沒有統(tǒng)一的圖形風(fēng)格，無法達(dá)到圖標(biāo)的統(tǒng)一性，沒有圖形風(fēng)格的圖標(biāo)看上去整體性較差，視覺混亂，對用戶快速理解圖標(biāo)信息不利，是圖標(biāo)設(shè)計中的禁忌。實現(xiàn)圖標(biāo)色彩的統(tǒng)一性原則一般有兩種方法。一是色彩絕對統(tǒng)一，將圖標(biāo)圖形本身賦予相同的顏色，或者將圖標(biāo)背景色調(diào)整成相同顏色，這種色彩統(tǒng)一方法常用于扁平化圖標(biāo)中的線性圖標(biāo)或色塊圖標(biāo)，統(tǒng)一的色彩會給人以整齊劃一的秩序感與統(tǒng)一感，讓用戶盡可能忽略圖標(biāo)本身的視覺沖擊，降低圖標(biāo)色彩給用戶帶來的視覺干擾，強(qiáng)調(diào)圖標(biāo)本身的功能性。二是色彩相對統(tǒng)一，將圖標(biāo)賦予不同的色彩，但每個圖標(biāo)會有一個色彩基調(diào)，同時保證每個圖標(biāo)的色調(diào)在純度、明度、飽和度方面高度一致，使整套圖標(biāo)色彩在一個和諧的色彩調(diào)性系統(tǒng)中。此類色彩統(tǒng)一方法常用在擬物化圖標(biāo)或輕擬物圖標(biāo)的色彩表達(dá)，豐富的色彩可以讓圖標(biāo)呈現(xiàn)出真實的質(zhì)感、厚重的體積感以及高精度的細(xì)節(jié)與漸變，讓圖標(biāo)成為增強(qiáng)畫面視覺效果的重要因素。

（二）圖形風(fēng)格統(tǒng)一。圖形風(fēng)格的統(tǒng)一是圖標(biāo)統(tǒng)一性中最重要的視覺設(shè)計原則。圖形風(fēng)格的統(tǒng)一可以通過在各個圖標(biāo)中添加相同視覺元素來實現(xiàn)。如，為所有圖標(biāo)添加圓角，通過為圖形所有的直角或斜角添加統(tǒng)一直徑的外圓角和內(nèi)圓角，可以使各個圖標(biāo)在視覺上有了聯(lián)系因素，即使設(shè)計的是不同的事物也會呈現(xiàn)出統(tǒng)一的視覺風(fēng)格。以相同粗細(xì)的線條表現(xiàn)圖形也可以增強(qiáng)圖形的統(tǒng)一性，當(dāng)然在實際設(shè)計中可能還有更多的設(shè)計元素需要統(tǒng)一，只要遵循這個統(tǒng)一的原則就一定能設(shè)計出一套有品質(zhì)保證的圖標(biāo)。圖形視覺風(fēng)格的統(tǒng)一帶來良好的視覺體驗。除了圖形風(fēng)格統(tǒng)一之外，我們還需要考慮圖標(biāo)系統(tǒng)置于整個界面中在視覺風(fēng)格上是否統(tǒng)一，界面整體的視覺風(fēng)格統(tǒng)一是衡量圖形界面優(yōu)劣的重要評價標(biāo)準(zhǔn)。

（三）透視角度統(tǒng)一。圖標(biāo)設(shè)計的透視角度是設(shè)計師經(jīng)常忽略的因素，一般來講我們都會選擇水平正視的角度進(jìn)行圖標(biāo)的圖形設(shè)計，這個角度的圖標(biāo)圖形會呈現(xiàn)出事物最常見的輪廓狀態(tài)，同時在設(shè)計時因為沒有透視因素，可以提高設(shè)計師的工作效率，更加簡潔概括的設(shè)計圖標(biāo)圖形。有些情況下，我們會選取一定透視角度下的物體形態(tài)作為圖表設(shè)計的參照，此時就需要我們注意多個圖標(biāo)透視角度的統(tǒng)一性設(shè)計，避免多個圖標(biāo)呈現(xiàn)出各個不同視角下的錯亂的透視關(guān)系，這樣的圖標(biāo)設(shè)計會給人空間關(guān)系不清晰，看著別扭難受的視覺感受。同時，在扁平化設(shè)計趨勢下，我們也應(yīng)當(dāng)盡量避免非常規(guī)透視角度的圖標(biāo)圖形設(shè)計，也當(dāng)避免不同透視角度圖標(biāo)在同一個界面中出現(xiàn)。

（四）視覺尺寸統(tǒng)一。圖標(biāo)之間的大小統(tǒng)一需要通過視覺尺寸的統(tǒng)一性完成。這個視覺尺寸與我們通常意義上的物理尺寸有一定區(qū)別。如，正方形的長寬與圓形的直徑相等，在物理尺寸上它們應(yīng)該具有統(tǒng)一性，但是顯然正方形要比圓形看上去更大。一方面因為它們的面積不相等，導(dǎo)致方形的視覺重量感更重，使畫面向左傾斜。所以在手機(jī)圖標(biāo)設(shè)計中，我們通常將圓形圖標(biāo)增加一部分的直徑，使圓形圖標(biāo)和正方形圖標(biāo)在視覺上達(dá)到平衡和統(tǒng)一。界面和圖標(biāo)始終是給人使用的，多個圖標(biāo)最終要實現(xiàn)視覺尺寸的統(tǒng)一而非物理尺寸的統(tǒng)一。

二、識別性原則

設(shè)計師在圖標(biāo)設(shè)計的過程中經(jīng)常會過度裝飾或者過于注重視覺形式而忽略了圖標(biāo)本身的功能指代，最終導(dǎo)致圖標(biāo)難以被識別，這種做法無疑是本末倒置，也打破了圖標(biāo)最重要的功能屬性，即傳達(dá)信息并指代功能的意義，這樣的圖標(biāo)視覺效果再好也無濟(jì)于事。圖標(biāo)是功能的視覺呈現(xiàn)，如果用戶無法通過理解圖標(biāo)指代操作，圖標(biāo)就立刻失去了價值，還會成為界面中的視覺干擾因素。這就要求我們在圖標(biāo)設(shè)計過程中，時刻謹(jǐn)記圖標(biāo)存在的最重要的意義——識別性。圖標(biāo)的識別性可以通過以下幾種方式進(jìn)行強(qiáng)化，達(dá)到讓用戶快速識別并指引交互操作的作用。

（一）保持簡單而直接的傳遞信息。圖標(biāo)設(shè)計的本質(zhì)是快速識別指代性，這就要求我們將隱喻事物圖形概括到最簡單最直接傳達(dá)信息的形狀和輪廓，降低用戶的學(xué)習(xí)成本。圖標(biāo)設(shè)計更應(yīng)確保其可讀性和清晰度，所以優(yōu)秀的圖標(biāo)設(shè)計是能夠被快速辨認(rèn)。拋棄簡單有效的信息傳達(dá)方法可能會對用戶體驗產(chǎn)生一定的負(fù)面影響。

（二）提供清晰的文字釋義。減少用戶思考的時間可以有效增強(qiáng)用戶體驗。優(yōu)秀圖標(biāo)設(shè)計最重要的特征就是讓用戶對圖標(biāo)的指代性一目了然。各個圖標(biāo)應(yīng)該快速指引用戶理解每個圖標(biāo)是要做什么，怎樣去操作。但是畢竟圖標(biāo)的隱喻有一定的局限性，尤其對于那些抽象的概念，設(shè)計師更是束手無策，為避免用戶對此類圖標(biāo)可能會產(chǎn)生的誤解，我們應(yīng)當(dāng)在圖標(biāo)下方設(shè)計一個可以不顯著的文本標(biāo)簽，用于清晰傳達(dá)圖標(biāo)的指代信息。為用戶提供最基礎(chǔ)的信息功能顯眼的圖標(biāo)圖形與不顯眼的釋義文本的結(jié)合是圖標(biāo)現(xiàn)階段最優(yōu)的設(shè)計方案。

（三）對圖標(biāo)進(jìn)行可用性測試。UI設(shè)計師相對普通人而言，是視覺設(shè)計和交互行為的專家，他們有對圖形的深刻理解，對圖形有著一般人難以企及的識別能力，所以，在圖標(biāo)圖形設(shè)計的過程中，設(shè)計師認(rèn)為的“易識別”有可能成為普通人眼中的“難以識別”，這就要求設(shè)計師必須對完成的圖標(biāo)進(jìn)行可用性測試，尤其是設(shè)計師已經(jīng)熟悉了正在設(shè)計的圖標(biāo)系統(tǒng)，很難再用陌生的眼光審視整個圖標(biāo)系統(tǒng)時，需要測試并記錄一定數(shù)量的新用戶對圖標(biāo)的識別與理解，這些用戶的反饋才是對界面優(yōu)劣最真實的反映，圖標(biāo)的可用性測試可以幫助我們判斷圖標(biāo)識別性是否達(dá)到易用標(biāo)準(zhǔn)。在測試過程中通常以識別性測試和可記憶性測試為主，可識別性方面，主要測試用戶對圖標(biāo)的第一時間的指代反應(yīng)。可記憶性方面，需要按時多次測試用戶對同一個圖標(biāo)指代性的記憶程度。

三、差異性原則

圖標(biāo)設(shè)計的統(tǒng)一性和差異性原則常常引起初學(xué)者的誤解。統(tǒng)一是圖標(biāo)設(shè)計風(fēng)格統(tǒng)一，而差異是圖標(biāo)之間的指代含義要明確。圖標(biāo)的差異性原則與圖標(biāo)的統(tǒng)一性原則并不相悖。圖標(biāo)的統(tǒng)一性是圖標(biāo)設(shè)計過程中圖形設(shè)計風(fēng)格、色彩調(diào)性、視覺尺寸、透視角度應(yīng)保持統(tǒng)一的關(guān)系。而圖標(biāo)的差異性是同一界面中的圖標(biāo)應(yīng)在圖形輪廓，圖形指代性方面存在明顯差異，避免干擾用戶選擇。這是圖標(biāo)設(shè)計的重要原則，如果一個界面上有多個圖標(biāo)，而這些圖標(biāo)在輪廓或指代含義有很高的相似度，用戶就容易受到干擾，無法快速從中辨識出需要的圖標(biāo)。這一點(diǎn)經(jīng)常被設(shè)計師忽略。設(shè)計師在圖標(biāo)統(tǒng)一風(fēng)格設(shè)計時，為達(dá)到視覺風(fēng)格的高度統(tǒng)一，常常不自覺地將不同圖標(biāo)的圖形混淆，導(dǎo)致設(shè)計的圖標(biāo)互相干擾，難以快速辨識。這就要求我們在做好圖標(biāo)視覺風(fēng)格統(tǒng)一的基礎(chǔ)上，盡可能的拉大圖標(biāo)之間輪廓形態(tài)與指代含義上的差異。