手機界面圖標設計原則

丁男 時慧嫻

【摘 要】在手機界面中圖標是引導用戶操作最重要的視覺符號，設計師在手機圖標設計過程中，參考具有普遍指導意義的手機界面圖標通用原則是設計出優秀圖標的必要流程和規范。

【關鍵詞】數字媒體藝術;圖標設計;手機界面

中圖分類號：TB472? 文獻標志碼：A ? ? ? ? ? ? ?文章編號：1007-0125（2019）21-0140-02

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

優秀的圖標設計在視覺風格上各不相同，但一般來說會有一些相同點，即統一性原則、識別性原則、差異性原則。

一、統一性原則

評價圖標設計優劣的重要標準就是圖標的視覺風格是否統一。統一的圖標視覺風格可以使手機界面布局整齊合理，降低用戶的交互操作難度，增強界面產品易用性。將系統圖標統一有很多種方法，如圖標色彩統一、圖標圖形風格統一、圖標圖形透視關系統一、圖標視覺尺寸統一等。

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

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

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

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

二、識別性原則

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

（一）保持簡單而直接的傳遞信息。圖標設計的本質是快速識別指代性，這就要求我們將隱喻事物圖形概括到最簡單最直接傳達信息的形狀和輪廓，降低用戶的學習成本。圖標設計更應確保其可讀性和清晰度，所以優秀的圖標設計是能夠被快速辨認。拋棄簡單有效的信息傳達方法可能會對用戶體驗產生一定的負面影響。

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

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

三、差異性原則

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