設計好icon的小技巧
無聊的翻譯樢，翻譯自:ＨＥＲＥ
icons已經變成每個介面的關鍵角色，他們幫助我們減少許多螢幕上的視覺元素，刪去不必要的動作解說。以設計師的角度來看，這是非常棒的一件事情。因為透過好的icons，你能看到簡單化的美好成果。
這一篇小小的文章將分享一些訣竅，幫助你為自己的產品設計好的icons，包含很棒的練習、icons在一些裝置上的演示及一個能免費下載icons的連結。讓我們開始吧！
1.定義你的需求
我先假設你已經對你的產品所需要的icons做出一些形容。現在，你得把在介面互動上，所需要icon的部分劃分出來。
記得喔，因為被icon抽象化程度的不同所限制，所以並不是每個動作都需要一個icon。像是”display menu”這樣的要求是ok的，但像是”展示出一個被相關使用者的資訊過濾表格”也許就會是個很大的挑戰。
為什麼呢?
能作用正常的icon，通常是建立於常識。以”漢堡按鈕”表示選單，一開始也是備受爭議的，因為在圖形上，漢堡按鈕並沒有準確的說明這個動作。但由於持續性的被使用，最後也就成為”常識”的一部分了。
這是很好的，因為這個關於科技常識上的革命，鼓勵了我們持續的創新。
我很喜歡這個清單，因為它只用很簡單的方式，卻幾乎解釋了所有東西。所以我建議你先製作一個像這樣的表格。如果你們是一個團隊，google的電子表格會是很好的討論空間。
這是我為了一些小icon設定所製作的表格。在我的案子中，它不是為了設計產品，而是描繪出最常見的需求。它們有著相同的過程，只是是為了不同的目的。
2.定義你的風格
我們先假設你已經製作了moodboard，而且你也已清楚想好產品的個性及風格。在開始設計icon之前，搞清楚這兩點是非常重要的。因為icons將在你的產品中扮演非常重要的角色，所以它們當然必須符合你的產品的個性。
一個腦中的練習，想像你正在定義你的長相，而為了某些因素，你想要走文青風，所以如果你穿著藍白拖又沒戴上粗框眼鏡，可能就無法達成你所設定的風格。
那麼要如何定義icon的風格呢?你只需要將產品的視覺轉換過來就行了。例如，Medium的個性是非常銳利乾淨，而那也可能是為什麼他們選擇使用linear風格的icon。在這個練習中，我想要一個pixel art風格，接下來我會對它做更多的解釋。
現在讓我們上工吧!
a.格點(The Grid)
我在一開始就告訴你用可變表格來定義icon清單的其中一個原因，是因為你需要知道所需的icon尺寸。這對於易讀性來說是非常重要的，因為就算視網膜螢幕時代還尚未來臨，很大一部分的螢幕仍然使用1x。
所以請想像你用32x32 grid設計了一個很美的icon，然後你需要在一個16x16 grid的空間使用它。在1x的螢幕中，這個銳利的icon將不再銳利。換句話說，我的建議是，你需要記住在越多情況下，以grid世界去想，icon越可伸縮、可使用越好。
在以下這個練習，有兩個原因促使我去使用15x15 grid：
一、這是很好的最小尺寸，所以它能在很大量的場域被使用。
二、在16x16 grid 幾乎成為標準時，這對設計來說根本就是個惡夢。譬如說，如果你想設計一個簡單的”+”icon，看看這個icon在偶數的gird中表現得如何?這有點難用文字說明，但比較15x15與16x16兩個案子，16x16的情況使我必須超出格點，最後只能產出一點也不銳利的icon。
b.合成(Synthesis)
這個部分也是為什麼我非常喜歡icon設計的原因，因為你需要實行極簡主義。將複雜的行為轉變成非常簡單易懂的圖示。這其實不容易，但也非不可能。這裡有些能幫你做得更好的技巧：
一、icon需要在空間上有固定的位置，所以在背景上放上格點，（我建議方形格點）會有很大的幫助。也試著去填滿這些空間，並保持填滿與空白區域之間的平衡。
二、有明確定義的icon，比如說＂刪除＂，試著用越少的元素畫出腦海中它的外型。看看這個在格點上的垃圾桶icon。
三、比較棘手的是那些沒有明確定義的icon，像是一直有爭議的＂分享＂，它因為Apple和Google的緣故變成一團混亂，導致我們無法用常識去辨識它。
我們有兩個選擇：把清單中的這個icon刪掉，放入連結來代表這個動作，或者把握機會設計一個全新的＂分享＂。而Apple其中一個解決之道是非常令人混淆的，根本就會跟＂上傳＂這個動作搞混。
哪裡做錯了？他們用了向上指的箭頭，容易造成混淆。所以要是我們將箭頭稍微轉向，不再往上下指，應該能建立把＂某些東西＂傳出這個產品的意象。
最後兩個技巧～～～
＋保持檔案條理化。好的組織跟命名系統能讓你的icons保持一致性。
＋找一些團隊以外的人來測試這些icons，他們會幫助你找出模糊不清的icons。
３．工具及格式
為了瞭解格式，我們必須懂一些現在科技的狀況。省下做調查的利器，（未來與現在）都是SVG圖檔。這個格式能讓你避免2x圖檔。他們甚至能在程式中做修改！改變顏色和其他基本的屬性。很酷吧！！！
談到製作SVG圖檔，我建議使用AI或／及我喜歡Sketch。我的icons當中有80%適用Sketch做的。我喜歡Sketch讓我能輕鬆保持物件條理的特色，但它卻無法處理太過複雜的形狀；關於這點，AI就非常理想。比如說＂設定＂，我先用AI做好，之後再放到Sketch裡面。
接下來就是成果囉：
免費下載的連結：
