扁平化圖標的終極設計指南

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

---

一、使用網格

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

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

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

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

---

二、注意像素網格

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

若是你選擇使用線寬爲1像素的圖標，則應該使用內部對齊或外部對齊，而不是中心對齊。

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

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

---

三、使圖標的細節保持一致

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

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

---

四、控制最小間隙的大小

一個圖標中，鄰近元素的距離不能過小；在一套圖標中，肯定一個最小的距離並應用於圖標，這樣能夠避免圖標給人黏在一塊兒的感受。

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

---

五、刪掉重複的部分

在一套圖標中可能會有重複的細節，刪掉這些重複的部分，讓用戶的注意力集中在不一樣的元素上。就像數學裏面的分數簡化，用戶看到的干擾信息越少，就越容易理解圖標。

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

這個準則一樣適用於各類邊框裝飾、icon的背景等。若是它們不能幫助用戶理解icon，就會反過來干擾用戶。

---

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

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

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

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

---

七、用2的倍數爲尺寸

8像素網格和12分欄的佈局被用於許多app界面，由於相比於十進制的尺寸，它們更加靈活易調節。12能夠被二、三、4和6整除，所以24和48像素的圖標區域已經成爲標準區域，它們能夠在須要時隨時縮放。

---

八、保持輪廓乾淨和準確

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

這和惱人的「8.999 px」和「100.001px」同樣。若是形狀的錨點放在合適的位置，icon的邊緣看起來就會很清晰，而且但你合併形狀的時候，不會多出錨點或者空隙。

---

九、清理源文件

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

但當咱們用其餘的編輯器例如（AI）打開此SVG文件時，你會發現空的圖層，以及一些無用的蒙版，當開發者將SVG轉化爲圖標時，或者直接在網頁上使用這些SVG時，均可能會產生問題。

固然，這些多餘的東西都是能夠刪除的。

通過刪除編輯後的SVG的文件，會與原來的預覽圖有些不一樣。

---

可以看到這裏的，都是但願可以經過一些技巧和經驗可以作出更好的設計，若是你想更深刻的瞭解設計，推薦你閱讀下面的文章：Why UX, CX, UI, IA, IxD, and Other Sorts of Design Are Dumb