UI的工作曾經(jīng)被很多人等同于畫圖標(biāo)，然而大家真的會畫圖標(biāo)么？優(yōu)質(zhì)的圖標(biāo)和不夠好的圖標(biāo)的區(qū)別其實非常小，但是這些細(xì)微的差別對于設(shè)計質(zhì)量的影響卻是很大。這篇文章分享的是如何用6個步驟來優(yōu)化圖標(biāo)的設(shè)計。少有的icon設(shè)計理論結(jié)合實踐的文章，今天是下一小節(jié)，強(qiáng)烈建議閱讀。 這6個步驟應(yīng)該作為一個指南而非教條來準(zhǔn)守。
頂尖設(shè)計師分享的6個圖標(biāo)設(shè)計優(yōu)化指南上
2、從簡單的形狀著手 用簡略的輪廓線（圓形、三角形、方形）來開始你的設(shè)計。即使一個圖標(biāo)在自然狀況下是有機(jī)的，也最好從AI的形狀工具開始。當(dāng)我們開始制作圖標(biāo)，特別是屏幕上小尺寸的圖標(biāo)，手繪導(dǎo)致的不規(guī)則的邊緣會讓一個圖標(biāo)看起來不那么精致。從基本的幾何形狀開始設(shè)計，將會使一個圖標(biāo)擁有更加清晰的邊緣（特別是曲線的情況下），并且可以更加快速的對圖標(biāo)加以調(diào)整，以及確保你遵循著網(wǎng)格和形式設(shè)計。
在這個柯基的icon由基本的幾何圖形——兩個三角和兩個橢圓組成。
3、數(shù)據(jù)化：邊、線、角、曲線和角度 不要試圖用自己的眼睛去隨意定義圖標(biāo)的細(xì)節(jié)，比如線的粗細(xì)和角度等，要用嚴(yán)格的數(shù)字去定義它們。這些細(xì)微的差別會降低一個圖標(biāo)的質(zhì)量。 角度 在大多數(shù)情況下，堅持使用45°角，或者它的倍數(shù)。由于像素的原因，45°角的情況下是抗鋸齒的，這個角度下會有一個完美的清晰的邊緣線，人眼看起來會很舒服。如果非要打破這個規(guī)則，試著使用45°的一半（22.5°、11.25°、等）或15°的倍數(shù)，這么做的好處是，這些角度在抗鋸齒上的表現(xiàn)仍然很好。 近距離觀看45°角度下的抗鋸齒效果。 曲線 還有一個會降低圖標(biāo)質(zhì)量的地方是，不完美的曲線。這可能意味著專業(yè)和業(yè)余的差別。人的手眼之間的協(xié)調(diào)是有極限的，不可能達(dá)到一個完美的精度。去依靠形狀和數(shù)字來創(chuàng)建曲線而不是靠手繪。當(dāng)你需要繪制曲線時，使用AI或者其它矢量軟件。 手繪的彎角導(dǎo)致的不盡人意的效果. 正如我們看到的”最初“的圖像，手繪的不規(guī)則的曲線，嚴(yán)重?fù)p害了設(shè)計的質(zhì)量。 這些精確的曲線是由AI里的貝塞爾工具創(chuàng)建的，而不是手工繪制。 角 一個共同的圓角半徑的大小是2pix。在一個32 × 32-pixel的圖標(biāo)里，2像素就足夠大了，可以清楚的看到圓潤但不至于太軟。具體數(shù)值取決于你想要什么樣的設(shè)計風(fēng)格。 精確的圓角 這是經(jīng)過我們重新設(shè)計的柯基現(xiàn)在的樣子。 通過一致的圓角，光滑的曲線，統(tǒng)一的線的粗細(xì)，新版本的設(shè)計得到了大幅的提高。 完美的像素 進(jìn)行小尺寸的設(shè)計時，像素級別的校準(zhǔn)是非常重要的。小尺寸圖標(biāo)邊緣的鋸齒可以使圖標(biāo)變得模糊。如果線不能對齊到像素網(wǎng)格之間會產(chǎn)生鋸齒并且使圖標(biāo)變得模糊。所以講圖標(biāo)對其到像素網(wǎng)格，使其邊緣清晰，需要更加精確的角度和曲線。 我們之前有提到，45°角是最好的，因為它遵循了像素的堆疊方式，它會讓形狀有個完美的對角線。但是在高分辨率的屏幕上，比如說視網(wǎng)膜屏，這種完美的像素就顯得不那么重要了。 線的粗細(xì) 當(dāng)涉及到線的粗細(xì)的時候，2種是理想的，3種有時候也是必要的。目標(biāo)是在不引入太多破壞圖標(biāo)一致的多樣性前提下，提供視覺層次。當(dāng)超過三種時會讓圖標(biāo)失去統(tǒng)一性。2像素和4像素的線非常好用。因為線的粗細(xì)正好是成倍增加的。在大多數(shù)情況下，避免使用非常細(xì)的線，特別是文字和扁平化的圖標(biāo)上，除非你你想制造一個“線形”的圖標(biāo)，依靠光線和陰影來定義形狀，而不是線。
這個iPhone的圖標(biāo)演示了線粗細(xì)上的一致性。
4、使用一致的設(shè)計元素和風(fēng)格 Hemmo de Jonge在2015icon沙龍上發(fā)表了關(guān)于圖標(biāo)設(shè)計的精彩的談話。在他長達(dá)兩年的為荷蘭政府設(shè)計圖標(biāo)系統(tǒng)的項目中。Hemmo和他的小伙伴們在每個圖標(biāo)上都放置了一個缺口。并不是嚴(yán)格每個都這樣，但是大多數(shù)是如此。這個缺口成為了一種風(fēng)格，把整個圖標(biāo)集聯(lián)系到了一起。 使用一致的設(shè)計元素。 在我們狗狗的例子里。我們采用了一個心形的鼻子。這個元素不僅把每只狗狗聯(lián)系到了一起，而且賦予了這些四條腿朋友們一些情感化的東西。
狗狗圖標(biāo)里共有的元素。 在許多情況下，即使一個圖標(biāo)集的風(fēng)格發(fā)生了改變。他們之間統(tǒng)一的元素仍然能夠使它們看起來是一個整體。下面這張圖是我們?yōu)檫@三個圖標(biāo)重新創(chuàng)建的風(fēng)格，他們看起來仍然是一致的。 保持元素統(tǒng)一的，另外一種風(fēng)格狗狗的圖標(biāo)。
5、節(jié)制的使用細(xì)節(jié)和裝飾 icon應(yīng)該快速的傳達(dá)一個物體、思想或者行為。太多小的細(xì)節(jié)將會引起混亂，從而讓圖標(biāo)變得不容易辨認(rèn)，特別是小尺寸的時候。一個或者一組圖標(biāo)的細(xì)節(jié)也是審美統(tǒng)一和可識別性的一個重要方面。最合適的添加細(xì)節(jié)的方式是，在可以識別出圖標(biāo)意義的前提下，盡可能的減少細(xì)節(jié)。 用最小的細(xì)節(jié)傳達(dá)出這個物體是什么。 經(jīng)過之前的一系列動作，我們已經(jīng)基本上完成了我們的優(yōu)化設(shè)計了。耳朵旁邊的黑色輪廓線已經(jīng)用毛發(fā)一樣的顏色替代。臉部的輪廓也是用兩像素的線勾勒出。注意現(xiàn)在仍然有一些元素是之前遺留下來的，比如小狗普通的鼻子。這個我們會在下一步解決。
6、讓它有個性 每天都有才華的設(shè)計師制作出大量優(yōu)質(zhì)的圖標(biāo)，其中還有很多是免費的。不幸的是他們中的很多人過于依賴趨勢或者那些最受歡迎的設(shè)計師的風(fēng)格。作為一個創(chuàng)意行業(yè)的創(chuàng)業(yè)者，我們應(yīng)該在圖標(biāo)以外去尋找靈感，建筑、字體、工業(yè)設(shè)計、心理學(xué)、自然或其他領(lǐng)域。最近圖標(biāo)之間看起來越來越像，所以讓你的設(shè)計是獨特的變得更加的重要。
柯基狗上心形的鼻子讓它變得獨特而有個性。 在最后完成的圖片上，我們有一個特別的心形的鼻子，這給設(shè)計增加了一點新奇和希望。 這些簡單的步驟應(yīng)該被視為一個起點，而不是一個明確的指南。并沒有一個單一的方式來設(shè)計圖標(biāo)。在這篇文章中，我們概述了一個設(shè)計的基礎(chǔ)知識，但其他設(shè)計師當(dāng)然也可能有自己的意見和技術(shù)。成為一個更好的設(shè)計師，最好的辦法就是盡可能多的去看，去閱讀各種材料、定期的素描（帶著速寫本無論你走到哪里），和實踐，實踐，再實踐。
結(jié)論 我們分享了如何創(chuàng)造一個優(yōu)質(zhì)圖標(biāo)的基礎(chǔ)知識。這些基本的技能任何人都能通過練習(xí)和實踐掌握它們。記住，創(chuàng)造一個更好的圖標(biāo)，從一般性（樣式）開始朝著特殊性（可識別）努力。保持你的圖標(biāo)內(nèi)部和外部的一致性。一旦你掌握了基本的技術(shù)，就可以把精力放在如何使一個圖標(biāo)脫穎而出：你獨特的創(chuàng)造性視野。