圖形化用戶界面圖標設計原則

張振中

鄭州成功財經學院，鄭州 451200

圖標是圖形化用戶界面設計中的重要元素之一，也是圖形化用戶界面設計中最直接、最生動的視覺形態，有著優秀圖形化用戶界設計、形象明確、造型突出的圖標，能夠迅速地被用戶所理解和接受，從而使軟件或程序的使用效率提高，最終帶給用戶很好的使用體驗。同時，圖標的設計，并不是簡單對圖形或圖片進行堆砌，而是要深入到用戶的操作和交互使用過程中，區分用戶對圖標“使用”和“適用”的需求[1]。因此，在圖形化用戶界面的圖標設計中，需要對圖形化用戶界面的用戶使用過程中各個方面進行考慮。圖形化用戶界面圖標設計的原則，主要有以下幾個，即圖形化用戶界面圖標的統一性原則；圖標的用戶認知性與民族性原則；圖標的簡潔性和符號性原則；圖標的尺寸性原則和圖標的文字應用原則。具體從這幾個方面入手，通過相關案例分析在圖標設計中需要注意的問題，進行了相應的探討。其目的，就是要將上述原則，繼續落實在今后的圖標設計實踐之中。

一、圖標的統一性原則

一個軟件或程序的系統中，圖標的設計風格需要保持統一。因為統一的圖標比單一零散的圖標更具品質，更容易讓用戶理解和接受[2]。圖標的造型設計，可以使用輕松詼諧的繪畫風格，也可以使用簡潔明快的平面剪影效果或酷炫時尚的3D效果。而在當下流行的3D效果圖標中，透視效果和光影效果，則無疑很好地促成了圖標的整體統一風格。

其一，圖標的透視效果表現，是圖標造型中的重要因素。如果某一圖標元素的造型設計成平行透視的表現效果，那么其他的圖標，也要按照平行透視效果來進行設計。而如果圖標元素視覺效果是成某一個特點角度，即成角透視效果，那么其他所有的圖標，都要按照這個特定角度進行設計。例如，智能手機主題的圖標設計。又如，REAL VⅠSTA General 3D圖標設計（見圖1），如果其中一個照相機圖標的放置效果為正面透視成30°角，那么在這一主題下，其他圖標包括用戶、游戲、打印機、攝像頭等在內的應用程序的圖標設計效果，也同樣需要按照正面透視成30°角的效果來設計。因為只有這樣的設計，才能使所設計的界面整體有統一的視覺效果。

圖1 REAL VISTA General 3D圖標設計①

其二，圖標的光影效果表現，也能很好地體現圖標的統一性。圖標的光影效果，如果不是從同一光源角度射入，那么可能會導致整個圖標系統視覺混亂。使用統一的光源效果，不僅可以使圖標整體效果統一，而且也會讓使用者覺得圖標的設計比較專業。

在VⅠSTAR系統的使用說明書中，有一章專門介紹圖標的光影效果的使用規范，這樣的開發細節規定，便于圖標設計者和開發者設計的圖標，能夠和VⅠSTAR系統相一致。同時，使用陰影也可以提升圖標在背景上的可視性，這是大多數設計師習慣用到的手法，如果只在空白背景上做一個立體效果的圖標，而沒有添加任何的背景或陰影，那么使用者就會感覺到這個圖案漂浮在背景空間上，是不穩定的。如果加入陰影作為背景，那么就不至于讓人感覺到如此地飄忽不定，整體圖標也顯得穩定。統一的陰影位置和角度，搭配統一的光影角度，這樣圖形化界面也會顯得統一協調。

例如，創意醫療圖標設計（見圖2），使用統一的立體方形為背景，搭配統一的右上角光源效果和左下角陰影位置，雖然圖標造型簡單，但是整體效果統一明確，同時具有強烈的視覺穩定感。

圖2 創意醫療圖標設計②

其三，圖標的色彩風格，也需要和圖標造型風格相統一。特別是在色彩的選擇和搭配上，盡量考慮色彩三屬性的協調，色相、明度或純度3項中至少有1項是相互統一協調的。同時，顏色選用也不宜過多，因為過多的顏色在一個很小的區域里出現，會讓人產生雜亂的感覺，影響到最終視覺效果。例如，女性手機圖標（見圖3），其使用了玫紅色為圖標設計的主色調，這不僅體現了女性的特色，而且使整個的圖形化用戶界面的圖標，排列成為了一個統一的整體。

圖3 女性手機主題圖標設計③

二、圖標的用戶認知性與識別性原則

圖標設計的目的，是通過符號化的圖形傳達信息。因此，圖標的用戶認知性與識別性原則，在圖標設計中就顯得尤其重要。圖標，是建立在虛擬世界和真實世界的一種隱喻或映射關系的橋梁。隱喻旨在“以一種更為明顯，更為熟悉的觀念符號來表示某種觀念”[3]，觀念之間存在著類似性。在圖標設計中，隱喻是一個相當重要的表現手法。通過歸納和聯想，使圖標的圖案造型與圖標的使用功能，可以建立起最為直接的聯想。但是，這種直接的聯想關系，取決于圖標使用用戶的認知水平和認知習慣。相較之下，具有隱喻表現手法的界面圖標設計，可以化繁為簡，將抽象事物的內涵明確化，讓使用者更容易理解和認知，因此顯著地提高了圖標在人機交互間的有效性和準確性[4]。

一個小型企業內部程序專屬的軟件圖標，其設計的定位與規劃，與大眾軟件所使用的圖標的定位與規劃，是截然不同的。因為，特定軟件的圖標所對應的使用人群，和大眾軟件所對應的使用人群的范圍，存在著很大的差異。這些用戶的認知水平和認知習慣，因而也就存在很大的不同。在設計圖標時所要考慮的因素，最為關鍵的就是用戶的認知能力。據心理學家研究表明，用戶認知的差異來自于多個方面，其中主要包括用戶在社會文化、民族文化、地域特點、性別、教育程度等方面的差異。

很多人對社會文化的理解，感覺很抽象。其實，在圖形設計特別是圖標設計中，所謂用戶認知的社會文化差異，就是社會文化視覺元素的區別。這些差異，又體現在視覺圖形的使用習慣、視覺符號的地域特點、地域環境對視覺元素的區別與影響等方面。相同的視覺元素，應用在符號設計中，可能會產生不同的視覺效果和符號含義。

在圖標的設計中，也是一樣的道理。相同的元素，使用在不同系統，圖標就會出現不同的應用效果。例如，移動通訊設備中應用程序“設置”功能的圖標，歐洲和北美的部分區域，使用了齒輪作為圖形元素，而亞洲國家則使用扳手和螺絲刀作為圖形元素（見圖4）。產生這種情況的原因，主要是歐洲和北美的人進入機械化工業的時間較長，齒輪是工業化的代表，因此，在他們的心目中，對“設置”功能的印象，就是機械齒輪的調整。而亞洲國家由于進入機械化階段時間短，大眾對“設置”功能這個概念的印象，還停留在手工業時代，所以手動的扳手和螺絲刀，給他們帶來更為直接的聯想。在圖標設計中，正確地理解和分析不同使用者對視覺圖形的認知，顯得尤其重要。

圖4 “設置”功能圖標設計④

圖標的用戶識別性體現在文化傳統、生活環境和行為習慣這3個方面，因為在不同的國家和民族，這3個方面是徹底不同的。在電子郵件之類應用程序的圖形化界面設計中，郵件圖標造型設計體現得最為突出。因為郵箱在全球各個地方都有，但是，在不同的國家或不同的區域，這些郵箱的造型，卻有著很大的不同。

蘋果公司的智能手機圖標中，有用到郵件功能的圖標，它所設計的圖標，需要帶有人機交互識別性原則。如果蘋果公司設計的這個大眾軟件的郵箱圖標，其圖標視覺形象基于一個小國家的鄉村郵箱造型，顯然是錯誤的。因此蘋果公司的智能手機郵件圖標，選用了更適合于大多數使用，又易于讓人識別的“郵票”元素（見圖5）。因為郵票是全球通用郵資憑證，郵票外框的半圓孔造型的識別性，遠高于造型各異的郵箱，同時具有普適性，所以這種元素的視覺形象，在蘋果的圖標設計上，獲得了大眾的廣泛認可。

圖5 蘋果公司“郵件”功能圖標設計⑤

三、圖標的簡潔性和符號性原則

研究表明，視覺圖案的寫實程度，與受眾對視覺圖案的關注度，是成正比的。即越寫實的圖案，越容易引起受眾的關注。因此，設計師在進行圖標設計時，其設計的圖標的視覺表現越是逼真，越是可以引起用戶更多的注意，也可激發更多用戶的使用興趣。但是，形象寫實逼真的圖標設計，卻也從另一個方面影響了圖標信息的快速傳達。因為圖形在傳遞信息時，其簡約程度，與受眾的識別認知度，也是成正比的。即越是簡潔的圖案，越容易讓人識別和記憶，也越是能高效地傳達信息。而極度寫實或加入過多裝飾效果的圖標，其信息傳達的快捷度，也是大打折扣的。

象征性的符號，在圖標設計中也是常見的。符號圖標能夠更快地被用戶所接受、記憶和識別。同時，符號圖標所使用的圖形文件小，便于硬件的支持和運算效率的提高。因此，在圖標設計時，盡量不要使用過于復雜的圖案。過多的圖形和裝飾效果，會降低圖形的認知度，特別是在小尺寸圖標中，由于圖標尺寸偏小，導致視覺上的識別度降低。同時，也需要避免過多的元素在同一圖標中出現。如果必須在圖標中加入過多元素的話，那么就要盡量在圖標設計時保持強烈的符號品質，讓主體圖案以符號化的形式出現。

在圖標中，應謹慎地設置圖標的圖形元素，因為不可能所有的圖標，都有使用簡約的黑白剪影效果。雖然WP8系統圖標基本使用這一風格（見圖6），還同時體現了圖標扁平化趨勢，但是要在圖標中加入使人感興趣的視覺效果，在設計時，就不能減少對用戶視覺的沖擊體驗效果的關注。過于平淡的設計，往往會導致用戶的厭惡和抵觸心理。因此，圖標設計可以在明確識別和信息傳達的同時，加強一下視覺效果，哪怕是損失一部分快速識別的符號化元素。把握識別度和符號化相關的程度關系，是很重要的。這種類型的設計，一般在大尺寸的圖標上應用得相對多一些。而相對小尺寸的圖標，則更多地需要較少的裝飾或視覺效果，這樣能夠便于用戶識別。

圖6 WP8系統圖標設計⑥

四、圖標的尺寸性原則

由于圖形化用戶界面的使用環境不同，導致圖形用戶界面在使用中的顯示環境不同。因此，圖形化用戶界面的圖標尺寸，也出現了不同。同時，隨著顯示技術的不斷發展，圖標對應的顯示尺寸越來越大，分辨率越來越高，這使得圖標的細節，也不斷地在進行改進中。并且跨平臺軟件的圖標大小或像素的數量，通常按照特定的技術規范進行設計[5]。一般的圖標標準尺寸有4種，分別為16×16像素、24×24 像素、32×32像素和48×48像素。這4種常規尺寸的圖標，在PC系統中使用，從Windows 98系統開始，一直持續到Windows XP。隨著電子產品的不斷發展及操作系統的更新換代的不斷加速，圖形化界面設計的形式越來越多，圖標的尺寸也越來越大，目前已經逐步發展成為4種標準尺寸，即小圖標32×32像素、中圖標64×64 像素、大圖標 128×128 像素，以及特大圖標256×256像素。在Windows 7系統中，最大的圖標尺寸，已經發展到了512×512像素。在圖標設計中，圖標的尺寸越大，意味著設計師在制作圖標的過程中，所需要考慮和展現的細節就越多，同時也需要配合和考慮到系統的整體性[6]。

圖標設計，不同于其他的視覺設計。同一圖標，由于其尺寸不同，展示效果和制作細節也不盡相同。因此，在不同顯示系統下的圖標，在圖標設計時，都有其對應的圖標效果。例如，Artisan Ophone手機圖標（見圖7），在不同的尺寸大小上，其效果有著細微的差別，同時在整體觀看時，又是效果統一協調的。

圖7 Artisan Ophone手機圖標設計⑦

因此，在設計制作不同系統、不同尺寸的圖標時，應注意相關的問題。在設計制作大尺寸圖標和小尺寸圖標時，也有需要注意的問題。在Windows XP系統中，桌面快捷方式的大圖標，使用的是帶陰影效果的，而在導航欄中的小圖標，則是不帶陰影效果的。這些因素，都是要根據特定的軟件或程序的尺寸需求，來進行設計的。

五、圖標的文字應用原則

在圖標設計中，除了圖形設計之外，還有一個重要的組成部分就是文字。簡潔明快的文字標簽和清晰準確的文字說明，能更好地提高圖形化用戶界面的工作效率[7]。在設置圖標文字時，最好使用簡單通俗的文字作為圖標的說明文字。在圖標文字的選擇上，需要具備高度的概括性。同時，圖標文字又需要有高度的信息傳達性，能夠充分體現其是對圖標圖案的一種解釋和說明。

在圖標文字的設計中，需要對文字屬性和文字使用環境進行考慮。而文字的字體、尺寸和色彩等方面，也會對圖標的整體視覺和運行效果產生影響。在文字字體的選擇上，考慮圖標字體的形態不宜復雜。黑體和中等線體等字體，因其橫豎撇捺筆畫一致相等、空隙均勻，是圖標文字中比較常用的字體[8]。而圖標字體的大小，則應根據圖標顯示尺寸的大小來進行設計。由于文字的識別度差異，在通常情況下，中文字體應不小于14px，英文字體應不小于12px。另外，應該盡量使用均勻的間距，使文字更為整齊清晰，易于辨識[9]。

圖標中的文字使用，是對圖標圖案的說明，能夠讓用戶高效、快速地讀懂圖標所需要傳達的全部信息。圖標文字的設計，涉及到圖標文字內容的選擇、字體選取、字形安排以及文字的色彩的選用等多個方面，是綜合應用的結果，也體現了圖標文字應用在圖形化界面中的重要性。

六、結語

設計的對象是產品，但是設計的目的并不是產品，而是滿足人類的需要[10]。圖形化用戶界面的圖標設計，也是如此。圖形化用戶界面的圖標設計，是一個高度系統化的工程，需要考慮的原則很多，需要滿足的需求也很多，可以說，其需要解決的問題，存在于圖標設計過程中的各個方面。本文研究圖形化用戶界面圖標設計的原則，通過圖標設計過程中的各個方面原則的理論分析，是希望在圖標設計的基礎理論上，加大探討與研究的力度，找尋更為人本化的圖標設計的策略與方法，從而推動我國圖形化用戶界面設計的理論發展，并帶動我國ⅠT創意產業的持續發展和不斷進步。

注釋

① 圖1來源： REAL VISTA General.REAL VISTA General 3D圖標設計[EB/OL].（2011-09-19）[2014-12-03].http://www.visionunion.com/article.jsp?code=201109190023.

② 圖2來源：佚名.創意醫療圖標按鈕圖片[EB/OL].（2013-05-12）[2014-12-03].http://www.taopic.com/vector/201305/348826.html.

③ 圖3來源：http://tieba.baidu.com/p/286904 9777.

④ 圖4來源：作者PS拼合.

⑤ 圖5來源：http://www.24ker.com/app/92.html.

⑥ 圖6來源：IT之家.WP8.1的Metro動態磁貼：彰顯你的個性[EB/OL].（2014-04-21）[2014-12-03].http://wp.msn.com.cn/news/focus/26617 6.shtml.

⑦ 圖7來源：http://www.uedhome.cn/visual/sho jiui/032210092013.html.

[1]黃炯.手機界面圖標設計發展研究[J].藝術與設計：理論，2013（6）：111-113.

[2]潘璠，明蘭.智能手機GUI設計原則研究[J].湖北經濟學院學報：人文社會科學版，2012（12）：38-40.

[3]劉偉元.用戶界面中圖標設計原則[J].包裝工程，2013（8）：94-97.

[4]任美琪，謝慶森.手機交互界面中圖標的隱喻設計研究[J].包裝工程，2014（4）：29-31.

[5]滕兆烜，金頌文，甄永亮.論手機圖形用戶界面中圖標設計可視性[J].包裝工程，2013（4）：66-70.

[6]張婷婷.圖形用戶界面中影響用戶認知的圖標設計因素研究[D].上海：上海交通大學，2011：28-29.

[7]李琰君，張振中，吳李玥.圖形化界面設計分析[J].包裝工程，2008（5）：141-143.

[8]毛珊珊.手機圖形界面的圖標設計風格研究[D].北京：北京服裝學院，2012：37-38.

[9]郭霞.軟件用戶界面圖標的易用性設計研究[D].南京：南京航空航天大學，2012：34-35.

[10]李硯祖.產品設計藝術[M].北京：中國人民大學出版社，2005：5-6.