畫圖標的一篇基礎指南
（譯文有部分增改）
1. 使用視覺網格系統
一個界面圖標通常會接近以下幾種基本形狀。它有可能像一個豎矩形，或者斜矩形、平矩形，還有的像圓形、三角形、正方形。如果你使用了視覺網格系統來畫你的圖標，那把你的一套圖標模糊化處理後，你就會發現各個圖標都有著同樣的視覺比重。因為模糊化的它們看起來是重量相近的一團糊。
基於圖標形狀，把它放進一致的視覺網格框架里查看。這時候你會發現，有點方的圖標看起來比三角的或者細長的更緊湊。
圖標越緊湊，它所需要的空間就越少。如果一個圖標擁有更尖銳的邊角或小細節在裡面，它就需要佔據你畫板上更多的空間。
FBI WARNING!最後請注意，別成為網格的奴隸。它的使命是輔助你，而不是來監視你、限制你的。如果一個圖標有著額外的突出部分，但視覺上看起來更好。別糾結，就讓他們裸露在外面吧。
2. 不要輕視像素網格
做圖標時，為了兼容非視網膜屏，你應該打開像素網格預覽，並且在畫線框圖標時優先使用2的倍數像素。
2倍數像素的描邊，如果是選擇了居中樣式，可以同時滿足你的圖標對於粗和彎曲的要求。但如果你選擇了1倍數像素用來描邊，那就應該選擇「外部」外部或「內部」，而不能選擇「中間」。否則，你的圖標就會在實際顯示時出現糊邊情況。
請準確地使用像素網格里的網格點設置斜線的起始點。因為相比不規則的度數：如13.7度，81度的斜線，眼睛在看45度，30度和60度的斜線時，你的大腦會覺得它們更加清晰銳利。
3. 保持一定程度上的細節
畫一組圖標呢，最好從最複雜的那個開始畫。因為畫完這個圖標後，它可以決定在這組圖標里你需要的細節程度，也會使你這組圖標的視覺比重始終保持一致。
如果你的圖標有著不同的細節程度，更有細節的圖標會更吸引用戶的注意。這樣就會讓這組圖標喪失統一性，失去平衡。另外，有更多細節的圖標看起來更重，這時候成組來看這套圖標，會使視覺感受不夠友好。
4. 控制好最小間距
圖標的元素之間間距如果太小，或者跟整組圖標里的其他圖標不一致，就不可能做出一組好的圖標。最佳做法是設定好一個固定的最小間距，且做到處處保持一致。這樣有兩個好處，一是可以保持圖標一致化，另一方面又可以避免圖標元素之間靠得太近看起來黏糊。
在畫線框圖標時有一個小技巧，就是把最小間距設置成跟線的粗細一樣的數值。同時，圖標的線性元素也不該特別分離突兀出來，或者「幾乎」接在一起。永遠，永遠不要似接非接地接在一起。還不如把兩根接觸的線直接貫穿成一條線。
5. 去除重複的東西
在畫成組圖標的時候，你難免會把一些元素翻來覆去重複使用。因此你需要學會保持警惕，儘早去除圖標里會干擾用戶注意力的重複元素或多餘的細節，專註於向用戶表現不同的視覺元素。就像算數時需要把分數分母簡化一樣。越少視覺噪音，就會讓用戶更快更清晰理解你的圖標設計。
另外，如果目標用戶已經很清楚自己是在什麼語境下進行操作，就沒必要再重複強調。例如，在一款郵件軟體的圖標里，「轉發」、「回復」、「收藏」、「刪除」的圖標就可以直接把「信封」這個基底去除，簡化後的圖標大家也都知道什麼意思。這些約定俗成的圖標，就沒必要使用多餘的視覺元素了。
6. 確定一種規則後，要守規矩
一套刻畫正面輪廓的圖標組，你卻把一個圖標畫成了有透視關係的，或者有厚度的，哎呀那你就不對了。樣式統一可是至關重要的。它關係著用戶是否可以準確認出你的一組圖標是不是一個風格，是不是同等重要或者是不是在表示同一類狀態。所以你看，可不能粗心大意，錨點下自由飛翔。
這套規則同時適用於線框圖標和填充圖標。如果你的一套圖標里有線框和填充兩種風格的圖標混合組成，用戶可能就會覺得這些圖標並非同等重要或並非在說明同類狀態。當然，當然，除非你要的就是這個效果。比如，你想讓填充的圖標代表著關鍵操作，線框的代表其他操作。
界面圖標有2種樣式已經是很常見的一種操作了。一款線框樣式的用來代表「不可用狀態」或「默認狀態」，另一款填充樣式表明「點擊狀態」。
7. 利用好 2 倍數尺寸
越來越多的人每天畫圖標時用著8像素網格和12豎列的版式，這種版式比傳統的十進位制更加靈活，而且12數列還可以分成2，3，4，和6列。因此，以24像素，48像素為基礎的圖標就成為了世界規範。從這2個尺寸里做出來的圖標如果想放大也可以直接放大，不需要擔心糊啊什麼的破事兒。
8. 保持圖標輪廓乾淨和準確
並不是在逼你成為完美主義者。啊，沒人需要像素完美的線。但是為了避免圖標某些部分在輸出時候奇怪地被分離，還是要給自己提個醒，圖形錨點能少不能多，兩個相鄰元素之間的間距也要再次確認空間確認足夠。
最後啊，我多說一句。
我就不信你沒遇到過煩人的「8.999像素」和「100.001像素」。如果圖標里的錨點準確地站在像素網格上，真正輸出後的圖標就會看起來銳利整齊。你也遇不到合併圖形後出現多餘的錨點和間距的情形了。
原文標題：Hopefully, the Ultimate Guide to a Flat Icon Set
原文作者：Slava Shestopalov
本文為原創譯文，轉載/引用皆請標明譯者和出處，本文版權歸點融設計中心DDC所有。
TAG:點融設計中心DDC |