手機(jī)界面圖標(biāo)設(shè)計(jì)原則

丁男 時(shí)慧嫻

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

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

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

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

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

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

評(píng)價(jià)圖標(biāo)設(shè)計(jì)優(yōu)劣的重要標(biāo)準(zhǔn)就是圖標(biāo)的視覺(jué)風(fēng)格是否統(tǒng)一。統(tǒng)一的圖標(biāo)視覺(jué)風(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)視覺(jué)尺寸統(tǒng)一等。

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

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

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

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

二、識(shí)別性原則

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

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

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

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

三、差異性原則

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