本文翻譯自設計師Slava Shestopalov的文章 原文連結

---

1、使用網格

一個圖示通常是由矩形、圓形、三角形等基本元素演變而成，將圖示模糊後再去觀察它們的光斑，會發現它們基本有相同的視覺重量。

根據圖示的形狀將它們放在對應的網格中，就會發現，正方形圖示會比三角形或者長方形的圖示更加緊湊。

圖示越緊湊，佔用的空間就越少。圖示的邊緣越鋒利或者細節越少，佔用的空間就越大。

但是也不要被網格所控制，網格是用來幫助你而不是限制你的。如果一個圖示加上某些突出的元素會更好看，那就加上吧！

---

2、注意畫素網格

和網格對齊，並給線形圖示2個畫素的線寬度，可以讓圖示在非retina螢幕上也很清楚。2畫素中心對齊的邊框可以保證足夠的厚度和清晰的輪廓。

如果你選擇使用線寬為1畫素的圖示，則應該使用內部對齊或外部對齊，而不是中心對齊。

1畫素中心對齊的邊框會使圖示放大時變得模糊。

根據畫素網格設定對角線的起始點。45°、30°和60°的對角線比不均勻的對角線看起來更加清楚，比如13.7°或81°。

---

3、使圖示的細節保持一致

最好從最複雜的圖示開始整套圖示的創作，它將決定細節的多少，並讓其它圖示保持同樣的細節程度。

當一套圖示中每個圖示的細節程度不同時，細節越多的那個將越容易吸引使用者的注意力。

---

4、控制最小間隙的大小

一個圖示中，鄰近元素的距離不能太小；在一套圖示中，確定一個最小的距離並應用於圖示，這樣可以避免圖示給人黏在一起的感覺。

做線性圖示時，讓最小距離和線寬相同是一個很好的方法。線應該明確的分開或者連線，不要讓使用者產生困惑。

---

5、刪掉重複的部分

在一套圖示中可能會有重複的細節，刪掉這些重複的部分，讓使用者的注意力集中在不同的元素上。就像數學裡面的分數簡化，使用者看到的干擾資訊越少，就越容易理解圖示。

如果目標使用者已經意識到了他使用的是什麼，就沒有必要一次又一次地重複這些元素了。舉個例子，不使用帶郵件的圖示並不會讓使用者覺得他不是在使用郵件App。

這個準則同樣適用於各種邊框裝飾、icon的背景等。如果它們不能幫助使用者理解icon，就會反過來干擾使用者。

---

6、選擇一種特定的風格並遵循它

不要在一套圖示中混合使用側檢視和前檢視，讓icon保持一致的風格可以幫助使用者辨別icon，並暗示使用者它們有相同的重要性或者狀態。

這個準則同樣適用於線性圖示和填充圖示。如果將這兩種風格的圖示混合在一起，使用者便會認為它們可能有不同的重要性或者狀態。例如：填充圖示會跳轉到關鍵頁面，而線性圖示會跳轉到其它頁面。

在一套圖示中有兩種變體是很好的，例如用線性圖示代表常態或者未啟用狀態；而用填充圖示代表選中狀態。

---

7、用2的倍數為尺寸

8畫素網格和12分欄的佈局被用於許多app介面，因為相比於十進位制的尺寸，它們更加靈活易調節。12可以被2、3、4和6整除，因此24和48畫素的圖示區域已經成為標準區域，它們可以在需要時隨時縮放。

---

8、保持輪廓乾淨和準確

我們的目標不是做到完美，也不需要為了畫完美的線條而畫出一條完美的線條。但這對於最終產品中正確的，而不是扭曲的圖示渲染是很重要的。永遠記得儘量使用最少的形狀錨點繪製圖示，並保證相鄰元素間沒有空隙。

這和惱人的“8.999 px”和“100.001px”一樣。如果形狀的錨點放在合適的位置，icon的邊緣看起來就會很清晰，並且但你合併形狀的時候，不會多出錨點或者空隙。

---

9、清理原始檔

在用Sketch等設計工具產生SVG圖時，會產生很多多餘的“副產品“，例如多餘的group、圖層，還有裁剪的模板。雖然在Sketch中，所有事情看起來都很美好，沒有多餘的東西。

但當我們用其他的編輯器例如（AI）開啟此SVG檔案時，你會發現空的圖層，以及一些無用的蒙版，當開發者將SVG轉化為圖示時，或者直接在網頁上使用這些SVG時，都可能會產生問題。

當然，這些多餘的東西都是可以刪除的。

經過刪除編輯後的SVG的檔案，會與原來的預覽圖有些不同。

---

能夠看到這裡的，都是希望能夠通過一些技巧和經驗能夠做出更好的設計，如果你想更深入的瞭解設計，推薦你閱讀下面的文章：Why UX, CX, UI, IA, IxD, and Other Sorts of Design Are Dumb