5.2 圖標繪制細節

清晰是圖標的基本要素，在sketch中，參數不要有小數點，讓圖標占滿像素網格。因為計算機不能識別小數點，導出圖標時計算機會把不能識別參數的部分拉伸填滿像素網格，導致圖標出現虛邊。

如果為圖標設置1像素的邊框，邊框應該使用外部或內部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時候，它們看起來很清晰。但在100%比例大小顯示的時候，它們會模糊，如下圖：

根據像素的網格線來設置一條線的起點和終點，會讓你的圖標看起來更清晰。通常情況下，線的傾斜角度在45°，30°，60°的時候，清晰度會比一些不常見的角度效果會更好，比如13.7°，81°等等。所以，盡量避免用這些奇怪的數值。

從一套圖標中最復雜的那個開始來設計通常是最有效的，因為它會幫助我們定義相同的視覺重量，讓所有的圖標視覺重量保持一致。因為當圖標具有不同的細節層次時，更復雜的圖標會吸引用戶更多的注意力，而且視覺上看上去更重。

5.3 圖標的基本元素

5.3.1 大小

一致性是設計圖標的關鍵，在繪制時，一定要確保所有的圖標都相同大小。在UI界面設計中，網格的大小必須要是4或12的倍數。@2x下作圖要保證是4的倍數，這樣可以整除2，適配@1x的屏幕;@3x下作圖就需要是12的倍數了，這個數值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標尺寸24*24px、48*48px。

通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發人員根據倍數調整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。

不過當我們的圖標涉及一些復雜的細節時，還是需要根據尺寸大小單獨繪制。比如我們的產品圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節。

這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多，也能最大程度的保留圖標原始狀態。

5.3.2 描邊和填充

沒有什么比看到一個填充圖標和一個線性圖標放在一起更讓人抓狂的了。確保你的圖標風格一致是非常非常重要的。比如你想用填充圖標來表示選中狀態，那么請一定要確保你的其他圖標風格一致，只有少量的變化。

通常，填充圖標具有更高的可識別性，而描邊圖標更方便添加細節。并且在選擇你哪種風格更合適的時候，也別忘了考慮品牌定位和風格。

如果你要繪制描邊圖標，那么需要保證所有的筆畫都是相同的粗細，并且筆畫之間的間距不要比筆畫本身更細。

當我們繪制線性圖標的填充版本時，首先需要考慮如何簡化線條。理想情況下，填充圖標類似于陰影，而不是直接翻轉顏色。繪制填充圖標的描邊版本，需要確定好線條的粗細，以及在保證清晰度的情況下可以添加多少細節。

5.3.3 顏色

如果是功能圖標，那么最好只使用一種顏色:黑色。否則你的組件可能變得過于復雜，不利于和其他設計師協作。而對于營銷圖標，出于品牌宣傳的目的，你可能會想要使用兩種顏色，個人認為圖標最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標。

5.4 功能圖標的風格

常見的功能性圖標風格大致有三種：線性圖標、面形圖標和扁平化圖標。但其實我們可以將「扁平化圖標」可以看作是「線性圖標」和「面型圖標」的一種組合形式，所以歸根到底，基礎的圖標風格有兩大類：「線性圖標」和「面型圖標」;

5.4.1 線性圖標

線性圖標是通過線條來表現物體的輪廓，它比面形圖標更能塑造優美的外觀，且作為貫穿圖標繪制的線條本身就是一種設計語言，因此繪制整套線性圖標會更加統一，具有整體感。例如twitter和微信底部的tab圖標等。在一個場景下的幾個同等重要的圖標，如果線條粗細不一致，會給人一種權重上存在差異的感覺。所以，在繪制線型圖標時，通常會使用統一粗細的線條。

常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細 ICON 所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。圓角粗線條的 ICON 顯得飽滿而可愛，個別 App 的底部標簽欄圖標采用粗線條設計，但粗線條的 ICON 圖形較為極簡才適用。

線性圖標根據樣式還可以分為：雙色線性圖標、線面填充圖標、線性漸變圖標。

5.4.2 面形圖標

面形圖標是以面為主要表現形式的圖標。在「微信」底部標簽欄中，為選中的圖標是線性圖標，而選中的圖標則是面形圖標，同時顏色會變成微信的品牌綠色再次暗示用戶選中狀態。面形圖標占用的面積要比線性圖標多，所以更加顯眼。實際上，蘋果在新的設計規范中也建議開發者在APP底部標簽欄中全部使用面形圖標，是否處于點擊態通過改變填充圖標的顏色進行區別。這是因為填充圖標看上去像可點擊的。

面性圖標根據不同的配色樣式可以分為：單色飽和度填充圖標，純色漸變圖標和多色漸變圖標。

基于最基本的「線性圖標」和「面型圖標」，通過不同的形態和風格的組合，再結合豐富的 表現手法，就可以設計出形形色色的圖標風格了。比如：不同粗細線條線性圖標的組合，或者面面組合，或者線面組合。大家在設計圖標的時候，需要根據自己的產品特征、受眾和使用場景，去選擇適合自己的表現形式。

6.1 圖標繪制方法

圖標的繪制方式主要有兩種：布爾運算和貝塞爾曲線。

6.1.1 布爾運算

布爾指的是喬治·布爾，19世紀的一位數學家，為了紀念布爾在符號邏輯運算中的杰出貢獻，所以將這種運算稱為布爾運算。

布爾運算聽起來比較難，但其實非常簡單，布爾運算采用的數字邏輯推演法，主要有數字邏輯的聯合、相交、相減。設計師在使用軟件過程中引用了這種邏輯運算方法，對應到設計軟件中，就有：合并形狀、減去頂層形狀、與形狀區域交叉、排除重疊形狀。例如兩個圓形相減可以得到一個月亮的造型，這就是布爾運算。

合并形狀：將兩個形狀合并為一個，取的是交集;

減去頂層形狀：用底層圖形減去頂層圖形所得最終圖形;

與形狀區域相交：得到的形狀是兩個圖形重疊的部分，取的是交集;

排除重疊形狀：簡單理解就是減去兩個圖形重疊的部分，與「與形狀區域相交」相反;

基本上通過布爾運算，我們能繪制出常見的大部分圖標了，但有時我們需要針對某些線條進行單獨的調整，又或者我們需要打造一套手繪風的矢量圖標，這個時候就需要用到貝塞爾曲線了。

6.1.2 貝塞爾曲線

貝塞爾曲線適用于二維圖形繪制的數學曲線。1962年法國工程師皮埃爾·貝塞爾(Pierre Bézier)所發表。他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線是繪制矢量圖形時的重要工具，使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的。

貝塞爾曲線包括：節點、控制點、控制線、曲線這幾個基本概念。

矢量圖形便是由這幾個基本概念構成的。圖形由基礎節點作為支撐構成，控制點和節點之間的線段稱為控制線，控制線就像皮筋一樣，調整控制點的位置，可以改變曲線的形狀，就像被皮筋(控制線)拉扯一樣。

節點包括 4 種基礎屬性類型，一種是沒有控制點和控制線的「直線節點」;另一種是「鏡像關聯節點」，這種節點控制其中一側的控制點，另一側的控制點會發生鏡像變化，適合繪制對稱結構的曲線;再有一種是「無關聯節點」，即節點兩側的控制點可以各自自由控制它們那一側的曲線而不互相影響;最后一種是「不對稱關聯節點」，這種類型下，節點兩側的控制點和節點會永遠保持在同一條直線上，但是卻不會對稱控制線的長度。

在 Sketch 中，我們可以在選中節點后通過快捷鍵 1 / 2 / 3 / 4 來快速切換當前節點的類型，加快繪制效率。

 

6.1.3 鋼筆工具

繪制自由貝塞爾曲線常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對于新手可能稍微薇有點復雜，但是一但上手，會非常方便。The Bézier Game 這個是一個非常不錯的練習鋼筆工具的網站，以游戲的形式練習鋼筆工具，通關的時候你對鋼筆工具就已經輕車熟路了。

繪制實戰

這里選擇了幾個比較典型的圖標，簡單演示下繪制方法和各自的繪制思路：

6.1.4 面性

眼睛：布爾運算相交 / 相減 / 合并形狀

繪制一個正圓，然后復制這個正圓形，通過布爾運算「與形狀區域相交」得到眼睛外輪廓，再繪制兩個圓通過「相減」與合并形狀得到眼睛造型。

位置定位：旋轉 / 相減

這個圖標由兩個大小圓形相減，得到環形，再繪制一個和大圓半徑相等的正方形，和圓環左、下對齊，最后逆時針旋轉45度完成。

WIFI：相加 / 相減 / 旋轉

繪制多個圓通過布爾運算的相加減得出三個圓圈嵌套“靶子造型，再繪制一個正三角形，和靶子圖形相交得到Wi-Fi圖標。

齒輪：旋轉 / 相減

通過兩個圖形的布爾運算得到環形，然后繪制一個梯形，復制一個鏡像，將其對齊環形兩端，復制梯形編組并旋轉復制三次(45度)，最后合并全部形狀完成。

鈴鐺：相加 / 相減

由3個矩形組成鈴鐺主體，鈴鐺頂部圓頂結構通過設置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進行布爾運算，完成。

6.1.5 線性

放大鏡：旋轉 / 相加

繪制一個正圓和一條線，用對齊工具將其居中對齊，編組后逆時針旋轉45度即可。

時鐘：鋼筆 / 剪刀工具

繪制一個正圓和一個矩形，使圓形的左下角對齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個錨點，再用剪刀工具減去多余的線條即可。注意指針的長短關系。

雨傘：相減 / 剪刀工具

繪制一個正圓，再繪制一個矩形與其相減得到傘頂，然后繪制一個矩形，通過剪刀工具減去多余部分，得到傘架，完成。

相機：合并

繪制一個矩形和一個梯形，通過合并得到相機主體，再繪制一個正圓完成相機鏡頭部分，完成。

愛心：相加 / 旋轉

繪制兩個正圓和一個直徑與圓形等寬的正方形，然后逆時針旋轉45度所得。

6.2 制定規范

無規矩不成方圓，規矩的出現可以讓一切雜亂的東西變得合理，統一起來。在設計上也是如此，規范具有統一輸出，指引細節、便于查看的好處，規范就是一組圖標中的規矩，所有圖標的繪制都按照規矩來，最終的成品就會顯得井然有序。

小小的圖標是由很多圖形元素組成的，在這些圖標中，元素的一致性是建立一個共同視覺于洋的關鍵。熟悉這些元素可以更容易地理解每個圖標和他們之間細微的差異，也將幫助我們學會圖標設計的底層結構，依次是筆畫末端、圓角、留白、筆觸、內部角、禁繪區。

在制定規范時，我們通常先繪制出一個符合業務風格的圖標，然后根據這一個圖標定制后續的圖標規范，依次按照上述圖標元素進行規范。如果是漸變填充圖標還要規定它的漸變角度，光影角度等。在一組中的圖標需要在這些圖形屬性中進行統一，這樣的圖標雖然形狀不一樣但是在視覺上看起來是屬于同一系列的。

制定規范的三個過程：

拆分細節：將圖標中的細節元素(圓角、筆畫末端等)進行分解，并在規范中制定細節元素的使用法則。

風格定位：根據產品調性，業務屬性在規范中制定相應的色彩、質感風格。

功能劃分：不同功能(金剛區和標簽欄等)的圖標要區分開來，功能相近的包括色彩、質感應該采取相近性。

圖標設計規范