UI的工作曾經被很多人等同于畫圖標，然而大家真的會畫圖標么？優質的圖標和不夠好的圖標的區別其實非常小，但是這些細微的差別對于設計質量的影響卻是很大。這篇文章分享的是如何用6個步驟來優化圖標的設計。少有的icon設計理論結合實踐的文章，強烈建議閱讀。

這6個步驟應該作為一個指南而非教條來準守。

這篇文章中我們會將這六個步驟應用到一只柯基犬的圖標上。這個圖標有潛質，但是還不足以被認為是優秀的。下圖是修改前和修改后的對比，接下來我們將詳細說明具體步驟。

左邊的是原來的icon. 右邊的是按照本文原則重新設計過的icon

有效icon設計的三個屬性

系統和深思熟慮的設計icon主要依靠三個屬性：形式、審美統一、可辨識性。無論是設計一套還是設計單個的icon，都需要考慮這三點。

1、形式

形式是關于一個圖標如何制作而成的最底層的結構。如果你忽略一個圖標的細節，畫一條線去表達它，看看它是不是變成了一個正方形、三角形、圓形、水平或者垂直的矩形？主要的幾何圖形——圓、三角和正方形——是創造一個icon視覺設計的的基礎。在我們的例子中， Kem Bardly設計的小狗的頭部是由兩個三角和兩個橢圓組成的。正如我們畫素描之前要用盡可能大的簡單的形狀打草稿然后再去添加更多的細節一樣，我們也是從簡單的形狀開始設計一個圖標，然后再去添加更多的細節。

這張圖片的關鍵線顯示了由基本形狀定義的設計形式

2、審美統一

我們說的審美統一是指在一個或者多個icon中共享同樣的設計要素。比如說都是圓形或者方形的角，角的具體尺寸（2像素、4像素、等等），一致的線的粗細（2像素、4像素、等等）、風格（面、線、填充的線、字形）、顏色等等。審美統一讓你的設計看起來是一個整體。在下面的例子中，三只狗狗都有共同的設計要素，比如2像素的圓角，2像素眼睛和鼻子的圓。

這三只狗狗用共同的設計和風格元素，創造了審美上的統一

3、可識別性

可識別是一個icon作為一個產品的本質或一個icon獨特的原因。一個圖標最終是否起作用取決于觀看者能不能容易的識別icon所描繪的對象、想法、或者行為。可識別包括大家對于一個事物普遍的看法，但它也可以包括一些獨特而意外的元素比如心形的小狗的鼻子。需要記住的是可識別性并不只是對事物單純的描述，它還包含你對此獨特的理解。在這方面審美統一和可識別能夠并且經常的相互重疊在一起。

每只狗狗的獨特性他們可以被識別，然而一致的元素和風格又讓它們看起來是一組的。

目前為止，我們了解了有效的icon設計的三個主要屬性。接下來，我們將深入了解如何用留個步驟來妥善處理這三個方面的問題。

六個步驟

1、從一個網格開始

我們這里使用一個32×32-pixel網格。我們的網格也包含一些基本的指導來幫助我們在每個圖標的設計中創建基本樣式。

在這里，我們看到了一個 32 × 32-pixel 的網格, 用一個 2-pixel邊界 (或 “禁區”) 來留出喘息的空間。

網格外面的2像素是我們所說的“禁區”。除非絕對必要，避免圖標出現在這個區域?！敖麉^”的目的主要是為了在圖標周圍創建一些喘息的空間。

對于icon可以用基礎形狀概括的，你可以畫一條外邊緣線來做邊界框，這些邊界框通常是一個正方形、圓形、三角形矩形等~

圓形的iocn以網格為中心，通常會接觸到內容區的最外層的邊緣，但不會進入禁區。注意，最常見打破禁區的情況是可以讓一些微量的需要強調的元素向圓外延伸以保證設計的完整性 ，如下圖所示。

△ 用網格和輪廓線對齊的圓形圖標

方形的圖標也是以網格為中心但并不會這么做，在大多數情況下，它會擴展到主要內容區的最外層的邊緣。當需要和圓形或者三角形的圖標保持一致的視覺重量時，大多數的長方形圖標或正方形圖標要對齊到中間的輪廓線（下圖的橙色區域）。讓圖標本身的視覺重量去決定怎么去對齊這些輪廓線，這需要在練習中去感覺?？纯聪旅娣叫蔚脑O計圖，有三個同心方塊被強調，淺藍色、橙色、淺綠色。

△ 調整成一樣視覺重量后的方形和圓形的圖標

在32-pixel的正方形里，你會注意到20 × 28-pixel大小的水平或垂直的矩形。我們松散的遵循這些矩形圖標是橫向或是豎向的，并試圖使這些圖標匹配20 × 28-pixel的尺寸。

△ 調整后的垂直和水平方向的矩形與網格的關系

對角圖標的大小是以圓形的邊緣線來調整的。注意，最外層的點與圓形的參考線基本一致就行，不需要特別的精確，接近就可以了。

△?調整后的對角圖標大小與網格的關系

記住，你不用每次都嚴格遵循網格和參考線. 網格在這里的作用是為了幫助你讓圖標保持一致性, 但是如果你需要在制作一個偉大的圖標和遵循這個規則之間二選一的話，那就打破它。有著“荷蘭圖標”美稱的Hemmo de Jonge說過：

一個獨特icon的精華比設置一致感要重要的多。

好了，明天會繼續分享接下來的步驟2~6。

歡迎關注譯者的微信公眾號：

【VR設計好文合集】

可能是國內第一個VR原創教程：
《騰訊干貨！設計師該怎樣從3個方面學習VR設計？》

VR設計指南：
《教程來了！VR設計指南之基礎概念與設計工具》

UX設計師的VR設計經驗：
《實戰教程來了！一名UX設計師的VR設計初體驗》