野丹丹（譯）于嘰嘰（編輯）
經過我長期的軟磨硬泡，終于跟美女視覺設計師野丹丹同學約到了一篇優質翻譯稿。原文由全球著名的圖標分享售賣平臺iconfinder的設計團隊撰寫，主要講了如何規范地制作圖標的方法，希望對各位視覺設計師同學能有所幫助。
Iconfinder（我的工作所在地） 這樣的網站為設計師提供便宜、方便獲取、精心設計的矢量圖標。提供成千上百的高品質圖標和免費的圖標合集供大家使用。
提交到iconfinder的圖標都會經過評估和審核，以確保這些優質圖標對我們的用戶有吸引力并且有潛在的商業價值。在審查這些提交到網站上的圖表合集的時候，我們有責任向設計師和用戶保證盡量使這些圖標達到最好的品質。為了實現這一目標，我們不斷地意識到“差不多”和“高品質”的差別往往是非常小的，通常只需要做出很小的變化，但對圖標的設計和價值有很大的影響。和大多數市場不同的是，我們很少拒絕不太符合我們的質量要求的圖標集，相反，我們會向設計師提出具體的可行性建議，以便提高圖標的質量。
本文討論了一套六步設計指南。這些步驟遵循了完整的圖標設計基本原則，包括一致性、可讀性和清晰性，有效的圖標設計原則已經在設計師John Hicks的著作The Icon Handbook 中討論過，谷歌的material design設計規范中有關系統圖標的部分討論過。本文討論的六步應該被看作是一個指導，而不是教條式的規則，成為一個偉大的設計師應當學會何時遵循規則何時打破規則，我將會在本文作示例。
下面的示例圖像將會用到這六步原則，這張圖是Iconfinder用戶Kem Bardly提交的小狗圖標（精確點來說，一柯基犬）的再設計。這個圖標有潛力，但并不能達到要求的“高質量”。我們向Kem提了一些簡單的建議，并做了一些重設計，現在他的圖標集已經達到了“高質量”，下圖是Kem的小狗圖標前后對比。在下面的章節中，我們將介紹如何有條不紊從before變成after。
注意，雖然本文中討論的準則以web圖標為例，但它們也同樣適用于印刷品。印刷品的經典300（DPI）使得對其像素本質上沒有意義。如果印刷品設計師看到這篇文章，所有原則都是適用的，但你可以在很大程度上忽略對其像素這部分。
?有效圖標設計的三個屬性 ?
那些設計優秀的圖標都會在框架、一致性和識別性這三個方面做到審慎和條理清楚。當設計一個新的圖標集，用迭代推進的方式考慮這三條屬性，從共性（框架）逐步達到特殊性（識別度）。即使你只創建一個單一的圖標，仍然要包含這三個屬性，并且從單一的設計推進。
毫無疑問，以上三個屬性構成有效的圖標設計，但這只是一個良好的開端。方便起見，我們把重點放在這三個主要屬性。
1 框架
框架是一個圖標的基礎結構。你可以忽略一個圖標的細節，在它的主要形態上畫線，那么它是否會形成一些正方形、圓形、矩形、三角形或其他基本的圖形？主要的幾何形狀（ 圓形、方形和三角形 ） 組成了圖標設計中視覺的穩定基礎。在Kem Bardly的柯基犬例子中可以看到，狗的頭部是由兩個三角形和兩個橢圓組成的，一開始只需要描繪出一個最大的最簡單的形狀，然后繼續添加更多的細節 - 就像有的人一開始畫圖標只會畫一個最簡單的形狀，然后逐步增加更多的細節。但是切記，無論是物體、想法還是行動，只有必要的的細節才能傳達更多的信息。
2 美學統一
通常所說的美學統一是指一個圖標的元素同時在一個圖標集中使用。例如圓角方角，圓角的尺寸（2px，4px等）、線寬（2px，4px）、樣式（平面，線形，填充線型或立體的）、配色等。美學統一是某些設計元素在整個合集中重復，這樣在視覺上可以把它們分類在一起作為一個有關聯性的整體。在下面的例子中可以看出，Kem的圖標集有一些共同的要素，例如2px的圓角不斷出現在狗狗面部的各種元素上，以及三條狗狗都擁有的心形的鼻子。
3 可識別性
可識別性是一個圖標的本質，使這個圖標獨特化。圖標是否有用最終取決于觀看者是否能夠輕松地領會它所描繪的對象、想法或動作。可識別包括展示出觀察者通常能夠關聯起的特征，但它也可以包括一些特殊或不常見的元素，例如柯基心形的鼻子。請記住，可識別性不僅包括用戶對你描繪的對象、想法或動作的理解，也包括你的圖標集的特有風格的識別度。在下圖中，我們能區分兩只狗是柯基犬和哈士奇，因為它們各自有其獨特的顏色、頭形和耳朵，同時也認為他們是同一組，因為它們有共同的的設計風格和元素。
到目前為止，我們已經看過了有效的圖標設計的三個主要屬性。在下文中，我將深入探討能解決這三個方面的具體六個步驟。
? 六個步驟 ?
1. ?從網格入手
在多種多樣的網格尺寸中，最好用一個單獨的個體著手去做。對于我們而言，我們使用32×32px 網格工作。我們的網格還包含了一些基本的指南，來幫助我們創建圖標設計的基礎。
網格外部的2像素就是我們所說的“no-go zone”。如非必要，不要把圖標放在這個區域內。no-go zone的目的是為圖標提供一些透氣的空間。
一個圖標的基礎框架的部分一般是有形狀的。如果沿著圖標外緣線畫一條線，這個形狀一般是正方形、圓形、三角形、橫長方形、豎長方形或對角線的矩形。
圓形圖標一般在網格居中，通常有四個點觸摸到內容區域的邊緣。請注意，對于打破no-go zone原則的一個常見原因是，如果某個重要或少數的元素需要延伸到no-go zone以保持設計完整性，如下圖所示。
方形圖標也在網格中居中，但在大多數情況下，它不會一直延伸到內容區域的邊緣。為了保持圓形圖標和方形的圖標視覺重量一致，大多數方形圖標會對齊中間的key line（以下圖像中的橙色區域）。圖標自身的視覺重量決定什么時候對齊到各自的key line，根據積累的經驗決定什么時候去用多大的尺寸。看看下面的正方形圖像，上面提到的三個同心正方形分別顯示在淡藍色，橙色和淺綠色區域。
在32＊32px網格里，你會發現20×28像素的縱向和橫向的長方形。我們做那些水平或垂直方向的圖標時會粗略的沿著這些矩形制作，并嘗試讓任何有方向性的圖標都可以用20×28px的矩形框架進行設計。
對角線型的圖標對齊到圓形內容區域的邊緣，如下圖所示。請注意，最外面的點大致對準圓的邊緣，不需要非常精確的對齊，接近就足夠了。
請記住，你并不需要每一次都嚴格按照網格原則來做。網格是幫助你做出的圖標保持一致，但如果讓一個圖標變得完美和遵守規則之間進行選擇，還是打破規則吧。就如Hemmo de Jonge（更廣為人知的綽號是 Dutch Icon）所言：單個圖標的精髓比一套圖標的統一性更重要。
2.從簡單的幾何形狀開始
從簡單的圓形、長方形和三角形開始設計圖標的主要形狀。即使一個圖標最終是擬物的，那也要從Adobe Illustrator形狀工具開始畫起。當開始制作圖標，尤其是在屏幕上使用的小尺寸圖標，手繪圖標在邊緣的輕微變化使得圖標缺少一些精致。（在使用了網格和框架的前提下，）從基本的幾何形狀開始畫將會使圖標邊緣更精確（尤其是曲線），并允許你在設計中相對迅速的調整一定規模的相關元素，同樣需要確保使用了網格和框架。
3.使用數字：邊，線，角，曲線和角度
在保證設計看起來不會過于機械乏味的前提下，盡可能在圓角、曲率和角度上保持數學上的精確統一。換句話說，在這些細節上不能過分追求數字上的完美但也不能完全放任不管。這些元素的不一致會降低一個圖標的品質。
角度
大多數情況下，依照45度角或其倍數。45度角在抗鋸齒情況下能均勻的分布（有效的像素對齊），所以結果是清晰的，角度完美（45度）的對角線是一個人眼很容易識別的模式。這種可識別的模式構建了單個圖標和整個圖標集之間的一致性。如果您的設計決定了你必須打破這個規則，嘗試減半去做（22.5度，11.25等），或者使用15度的倍數。每一種情況是不同的，因此具體問題具體分析。使用45度的對半的好處是，在抗鋸齒情況下仍然會均勻展示。
曲線
一個能降低圖標標準的、區分專業人員和業余人員的最顯著的部分就是不完美曲線。相對于人眼能夠檢測到非常輕微的位置變化，手眼的合作卻不是總能達到精度很高的水平。盡可能使用形狀工具和參數來創建曲線，而不是手繪這些形狀。當你需要手動繪制曲線時，使用Adobe Illustrator中的（或矢量軟件）constraint modifier key（Shift鍵），甚至更好的是，使用VectorScribe和InkScribe這種比貝塞爾曲線控制得更為精確的矢量繪圖插件。
正如我們在看到圖片上的“before”，手繪線條形成的不規則曲線降低了設計的質量。
角
一個常見的圓角（或半徑）值是2像素。在一個32×32像素的圖標，2-像素半徑大到足以清楚地看到弧度，這個弧度不至于使轉角過于圓潤以致以改變設計的個性（看起來有泡泡感）。您的選擇取決于你想要賦予設計什么樣的個性。是否使用圓角會被考慮近圖標集的整體美觀審美。
從幾何形狀開始，然后增加了2像素描邊，演示形狀工具是怎樣在細節的一致性（例如圓角）來改進設計。
像素完美
設計小尺寸圖標的時候完美的像素對齊是非常重要的。在小尺寸下一個圖標的邊緣鋸齒會使圖標出現模糊。對齊到像素網格將消除鋸齒和模糊。圖標對齊像素網格將使直線完美清晰，角度和曲線更精確。圓角和曲線有個共同點：數學上它們越是精確，抗鋸齒會越精確。
線寬
當談到線寬，兩像素是比較理想的，但某些情況也需要3像素。目標是提供視覺層次和變化，前提是不要沒使用太多可變化的因素，從而破壞了組的一致性。變化超過三種這個組會失去自身的統一性。2和4像素線寬的好處是，它們是2的倍數，因此，有很強的擴展性。大多數情況要避免很細的線，特別是在字形和平面圖標。除非你刻意營造一個“線型”圖標，請使用光線和陰影而不是線，來定義形狀。
4.使用統一的設計元素和符號圖標
Hemmo de Jonge of Dutch Icon在2015年的圖標沙龍中談到了圖標設計的這一方面。在荷蘭政府委托給他的持續兩年的計數圖標系統項目，Hemmo和他的設計合作伙伴，給每個圖標做了槽口。不是每個圖標都有槽口，但大多數都有。這種特性貫穿了圖標集，并真正使這些圖標凝聚成一個合集。
在我們的狗狗圖標例子中，我們采用心形的鼻子作為一個共同的風格元素。使用心形鼻子的視覺特性不僅使圖標合集在一起，增加了一個開放性的元素，也表達了我們對人類的朋友狗狗的感情。
在許多情況下，即使圖標集的樣式都改變了，一個建立美感的統一的元素依然可以使圖標看起來是一組，如下所示。我們重新創造了風格相同的三個圖標，他們仍然擁有一致的審美。
5.使用細節及少量裝飾
圖標應迅速傳達表達對象，思想或行動。太多的小細節將會使其變得復雜性，減少圖標的識別性，特別是在更小的尺寸下。圖標的細節是統一的審美和可識別性的重要方面。根據經驗，使圖標達到高質量一個很好的規則是使需要細節的降到最低限度。
上面的版本已經非常接近最終版本，已經提高了設計質量。耳朵周圍的黑色輪廓已變成皮毛覆蓋的褐色區域。面部周圍的黑線都去掉了，但是柯基犬的臉上白色標記上方的2像素仍然肉眼可見。但是請注意，我們仍然有保留了“before”版本的一些元素，如扁平的鼻子。
6.使其具有唯一性
創造高品質的圖標集（其中很多是免費的）的有才華的設計師，似乎每天都在增長。不幸的是，很多設計師的過度依賴趨勢或出名設計師的流行風格。作為創意專業人士，我們應該在圖標行業外開闊視野，建筑，平面版式，工業設計，心理學，自然，我們可以在任何其他領域找到靈感。因為這么多圖標集看起來很相像，讓你的設計獨特越來越重要。
在“after”中，心形的鼻子添加了新奇性使得其成為走心的設計。
這些簡單的步驟應被看作是一個起點，不是一個最終的指導。設計圖標沒有唯一的辦法。在這篇文章中，我們提出了一個基礎的方法來設計，但其他的設計師肯定也有自己的見解和技術。要成為一名優秀的設計師，最好的辦法是看盡可能多的參考、可以閱讀各種材料、經常收回，并且，練習，練習，再練習。
