扁平幾何圖示的終極指南
為使用者介面創作單色圖示的網格系統。
1.使用視覺網格
一個應用內的icon通常近似一個基本形狀：一個斜方形，一個長方形，一個菱形，圓形，三角形，正方形。模糊顯示後，它們的視覺重量會近似，因為它們或多或少有增有補。
根據圖示形狀，可以將其裝進柵格框架中。比如說，接近正方形的就比長條形或三角形更加緊湊。
圖示形狀越緊湊，它需要的空間就越小；越鋒利的形狀，或者帶有越多細節，佔用框架內的空間就越大。
別變成網格的奴隸，不要太受限。如果視覺效果更好的話，可以適當讓元素突出網格線。
2.注意畫素格
優先設計小圖示，要在非視網膜屏上看得清，要看畫素網格。優先選擇2px作為線寬（1倍），線構成的向量的圖示，最好用寬度居中的模式。
如果線性圖示線寬1px（1倍大），就必須讓寬度處於外側。
1px線寬如果相對於路徑居中，它就會出現虛邊、模糊，儘管你在工程稿看的是清晰的。
如有斜邊，起點和終點必須在交叉點上。經實驗45°, 30° 和60°角度的斜邊更乾淨，好過像是13.7° 或 81°這樣的角度。
3.保持一定細節程度
設計一個圖示包，最好從最複雜的開始。它能有效控制圖示重量的統一性。
細節程度不同的圖示，容易造成視覺重量不同。會吸引使用者更關注視覺重量更重的。
4.控制最小間歇點
圖示中的元素間隔不應該太小或大小不一。這樣能避免圖示的元素輪廓粘滯。
圖示中“最小距離”和線寬一樣粗。要麼就把線合在一起，要麼就把就設計明確的斷點，不要出現“好像連在一起”的情況。
5.去除重複部分
圖示庫中的圖示，你可能會重複某些元素，則擺脫它們，讓使用者聚焦圖示的差異點。像數學中的化簡一樣。你的圖示越少重複越易懂。
如果使用者明白一個元素的意義，沒必要一再重申。就看你會不會讓使用者誤讀。如果在一個郵件app裡就可以去除這些冗雜了。
此規則還包括背景、裝飾等等。如果不能幫你讀懂圖示，它就會阻礙介面整體辨識度。
6.選擇一個風格，並遵循
在一個系列裡不要混合 設計風格。統一風格會幫使用者辨識其意思，區分它們的層級和適用範圍是否相同。
同樣的道理，線性圖示和麵性圖示，如果你混搭，使用者會認為它們是不同層級或用途。當然，除非你刻意為之。比如，面性圖示代表關鍵命令，線性代表普通行為。
每個介面中有兩種風格的圖示是好的，線性代表未被惦記、可點選的狀態。面性代表被選中狀態。
7.基於兩倍大的尺寸體系
8小格12柱廊佈局廣泛應用於介面中，它更加靈活。12欄可以被2、3、4、6整除；所以24、48px大小的圖示成為標準。成倍地縮放它們也不成問題。
8.保持路徑乾淨精準
完美不是目標，沒人去看你路徑。但是產品中不扭曲的圖示是很重要的。記住儘量用最少的錨點，並且不要在靠在一起的形狀間留間隙。
同樣的道理，錨點處於“8.999 px” 或“100.001 px”，也會造成虛化。錨點卡在整畫素點會讓圖形更加乾淨。在路徑閉合為一的時候，經常會有這種風險。
9.清理SVG垃圾
sketch這樣的應用中能直接輸出SVG，其中有許多分組和遮罩，層層疊疊但工程裡看不出來。
在其他應用中開啟這個SVG（比如AI），你會看見很多空的圖層，不必要的分組和遮罩。開發人員在網頁或應用使用字型圖示時可能會出現問題。
你可以移除這些垃圾再儲存。
你能看見這個svg在重新編輯前後，在預覽中的差異。當然也可以直接調程式碼，如果你懂畫布的機制。
10.圖示不是魔杖
當然，每個規則都不是定死的，它們都是經驗總結，如果你知道自己的意圖，可以隨意跳過這些法則。在我看來，有至少兩種情況可以不用幾何構成圖示。
1、空狀態。如果你要顯示“沒更多工”或者“全部郵件都已讀”，最好用插畫、情感化的圖示或者僅僅是文字表明，更具有感情的影象或插畫會讓使用者愉悅，幾何的無感情的插畫對互動沒有半點幫助。
2、吉祥物和插圖。如果介面中有插圖，這些影象應該是情緒化的。不知設計師如何用幾何網格能描繪這麼多影象。
回到產品本身，問自己是否真的需要這樣平衡、時尚、統一的圖示呢？這是否是最佳的解決方案？