編者按：今天的圖標(biāo)教程不停留在操作層面上，深入點(diǎn)，來說說那些微妙而關(guān)鍵的圖標(biāo)設(shè)計原則，看完這五點(diǎn)會發(fā)現(xiàn)，一枚優(yōu)秀的圖標(biāo)可不光視覺效果好，在用戶體驗方面也經(jīng)過細(xì)膩的思考，還不清楚的同學(xué)，戳 >>> 你曾經(jīng)遇到過讓你給一個指定的問題設(shè)計圖標(biāo)的困難么？和你的開發(fā)者一起合作，卻發(fā)現(xiàn)很難給你的客戶一個足夠完美的解決方案？當(dāng)你在設(shè)計頁面圖標(biāo)遇到麻煩的時候，這篇文章就可以幫助到你了。 指導(dǎo)原則 圖標(biāo)設(shè)計是整個頁面視覺設(shè)計中一個最重要的視覺元素。一個圖標(biāo)的細(xì)節(jié)，樣式和功能是由很多東西決定的。我最近也在為一系列的網(wǎng)站制作相應(yīng)的頁面圖標(biāo)，來傳遞微妙的隱喻。 這篇文章會有一些最近的我為一個網(wǎng)站設(shè)置的error這個圖標(biāo)的案例。總而言之，圖標(biāo)設(shè)計的指導(dǎo)原則涉及到以下五個部分：

1. 理解問題所在
2. 采用全局方法
3. 越簡單越美好
4. 考慮環(huán)境因素
5. 理解符號元素

這篇文章不是那么難以理解，而且會給你在真正的圖標(biāo)設(shè)計中帶來很大的幫助。
一、理解問題所在 有的時候你可能需要從零開始設(shè)計你的網(wǎng)站，那么你就需要大量的圖標(biāo)用于視覺表達(dá)。通常情況下，你的客戶需要你為他定制出獨(dú)一無二的圖標(biāo)。比如說，他需要我給一個文檔設(shè)計一個“Error”的圖標(biāo)。 起初，他建議說在一個頁面圖標(biāo)里放一個X來表示文檔類型不支持，或者表示文章沒有被下載成功。他腦海中的圖標(biāo)是這個樣子的：
還不壞是吧？為了簡單，我除去了一些元素，改成了：
但是，我也承認(rèn)它還需要改進(jìn)，因為它還不像是一個專門為文檔加載錯誤設(shè)計的一個圖標(biāo)。
二、采用全局方法 我們需要整體考慮圖標(biāo)的設(shè)置，所以我們拿了幾個其他的圖標(biāo)例子作為靈感。 “這個警告圖標(biāo)怎么樣？” 我們思考著，因為它實(shí)際上已經(jīng)在網(wǎng)頁中被大量使用了，人們可以輕易明白它的含義。
當(dāng)我們想設(shè)計一個圖標(biāo)的時候，一定要考慮到同種類型的其他圖標(biāo)是如何設(shè)計的。否則，你很有可能使用的圖形的寓意在其他圖標(biāo)上已經(jīng)被大量使用了，表達(dá)的還是另一個意思，那么你的設(shè)計就會產(chǎn)生歧義。
三、越簡單越美好 之后，我們想到在一個文檔圖標(biāo)中畫一個大三角形，像是這樣： 但是，經(jīng)驗告訴我，它太復(fù)雜了。它的寓意不那么直接，人們也不能一眼看上去就明白是什么意思。 四、考慮環(huán)境因素 之后，我提出建議我們應(yīng)該用一個大x包含在一個圓內(nèi)的圖標(biāo)，像是這樣： 但是這還是不可取的，因為這個圖標(biāo)傳達(dá)的信息是危險。這個圖標(biāo)表達(dá)的含義太過了。 我現(xiàn)在想說的，是你需要考慮到環(huán)境色。顏色和視覺量級是傳遞圖像的一個重要的方式。比如，紅色常常用語警告，而淺色比如灰色顯得更加中性。如果你用中性色來表示，那么可以恰如其分的表達(dá)出圖標(biāo)含義。
五、理解符號元素 符號語言是一種次通信，在網(wǎng)頁設(shè)計中也是非常重要的一個部分。 比如，裝飾性字體更有女性氣質(zhì)，而手繪字體則看上去更加童趣。 你想用你的圖標(biāo)表達(dá)怎樣的含義？ 例如，這個Error圖標(biāo)并沒有創(chuàng)造太多令人驚恐的元素。
我記得這個圖標(biāo)常常在我網(wǎng)絡(luò)癱瘓的時候出現(xiàn)，它們非常完美。含義也不過分，只是恰如其分的告訴用戶出錯了。 再比如這個更直接一些：
下面這個例子來源于Chrome瀏覽器，完美的表達(dá)出了我需要的那個圖標(biāo)。輕微，準(zhǔn)確，告訴用戶某個地方出了錯。這個圖標(biāo)除了白色線條的部分都是灰色，可以讓用戶明白問題的嚴(yán)重，但是又不至于過分到讓人民產(chǎn)生驚恐的感覺。 最后一個圖標(biāo)表達(dá)的信息很簡單，但是卻傳遞了最準(zhǔn)確的信息。

結(jié)論 圖標(biāo)使用的藝術(shù)需要一點(diǎn)點(diǎn)好眼力，也要一點(diǎn)點(diǎn)設(shè)計的經(jīng)驗。但是它也可以根據(jù)我們上述討論的幾個原則來構(gòu)建。如果你的圖標(biāo)寓意太模糊，或者使用千篇一律的視覺提示，那么不妨再好好思考上述說到的五點(diǎn)。