潤(rùn)物細(xì)無(wú)聲！5個(gè)超實(shí)用法則幫你精準(zhǔn)設(shè)計(jì)圖標(biāo)

編者按：今天的圖標(biāo)教程不停留在操作層面上，深入點(diǎn)，來(lái)說(shuō)說(shuō)那些微妙而關(guān)鍵的圖標(biāo)設(shè)計(jì)原則，看完這五點(diǎn)會(huì)發(fā)現(xiàn)，一枚優(yōu)秀的圖標(biāo)可不光視覺(jué)效果好，在用戶體驗(yàn)方面也經(jīng)過(guò)細(xì)膩的思考，還不清楚的同學(xué)，戳 >>>

你曾經(jīng)遇到過(guò)讓你給一個(gè)指定的問(wèn)題設(shè)計(jì)圖標(biāo)的困難么？和你的開(kāi)發(fā)者一起合作，卻發(fā)現(xiàn)很難給你的客戶一個(gè)足夠完美的解決方案？當(dāng)你在設(shè)計(jì)頁(yè)面圖標(biāo)遇到麻煩的時(shí)候，這篇文章就可以幫助到你了。

指導(dǎo)原則

圖標(biāo)設(shè)計(jì)是整個(gè)頁(yè)面視覺(jué)設(shè)計(jì)中一個(gè)最重要的視覺(jué)元素。一個(gè)圖標(biāo)的細(xì)節(jié)，樣式和功能是由很多東西決定的。我最近也在為一系列的網(wǎng)站制作相應(yīng)的頁(yè)面圖標(biāo)，來(lái)傳遞微妙的隱喻。

這篇文章會(huì)有一些最近的我為一個(gè)網(wǎng)站設(shè)置的error這個(gè)圖標(biāo)的案例。總而言之，圖標(biāo)設(shè)計(jì)的指導(dǎo)原則涉及到以下五個(gè)部分：

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

這篇文章不是那么難以理解，而且會(huì)給你在真正的圖標(biāo)設(shè)計(jì)中帶來(lái)很大的幫助。

一、理解問(wèn)題所在

有的時(shí)候你可能需要從零開(kāi)始設(shè)計(jì)你的網(wǎng)站，那么你就需要大量的圖標(biāo)用于視覺(jué)表達(dá)。通常情況下，你的客戶需要你為他定制出獨(dú)一無(wú)二的圖標(biāo)。比如說(shuō)，他需要我給一個(gè)文檔設(shè)計(jì)一個(gè)“Error”的圖標(biāo)。

起初，他建議說(shuō)在一個(gè)頁(yè)面圖標(biāo)里放一個(gè)X來(lái)表示文檔類型不支持，或者表示文章沒(méi)有被下載成功。他腦海中的圖標(biāo)是這個(gè)樣子的：

還不壞是吧？為了簡(jiǎn)單，我除去了一些元素，改成了：

但是，我也承認(rèn)它還需要改進(jìn)，因?yàn)樗€不像是一個(gè)專門為文檔加載錯(cuò)誤設(shè)計(jì)的一個(gè)圖標(biāo)。

二、采用全局方法

我們需要整體考慮圖標(biāo)的設(shè)置，所以我們拿了幾個(gè)其他的圖標(biāo)例子作為靈感。

“這個(gè)警告圖標(biāo)怎么樣？”

我們思考著，因?yàn)樗鼘?shí)際上已經(jīng)在網(wǎng)頁(yè)中被大量使用了，人們可以輕易明白它的含義。

當(dāng)我們想設(shè)計(jì)一個(gè)圖標(biāo)的時(shí)候，一定要考慮到同種類型的其他圖標(biāo)是如何設(shè)計(jì)的。否則，你很有可能使用的圖形的寓意在其他圖標(biāo)上已經(jīng)被大量使用了，表達(dá)的還是另一個(gè)意思，那么你的設(shè)計(jì)就會(huì)產(chǎn)生歧義。

三、越簡(jiǎn)單越美好

之后，我們想到在一個(gè)文檔圖標(biāo)中畫一個(gè)大三角形，像是這樣：

但是，經(jīng)驗(yàn)告訴我，它太復(fù)雜了。它的寓意不那么直接，人們也不能一眼看上去就明白是什么意思。

四、考慮環(huán)境因素

之后，我提出建議我們應(yīng)該用一個(gè)大x包含在一個(gè)圓內(nèi)的圖標(biāo)，像是這樣：

但是這還是不可取的，因?yàn)檫@個(gè)圖標(biāo)傳達(dá)的信息是危險(xiǎn)。這個(gè)圖標(biāo)表達(dá)的含義太過(guò)了。

我現(xiàn)在想說(shuō)的，是你需要考慮到環(huán)境色。顏色和視覺(jué)量級(jí)是傳遞圖像的一個(gè)重要的方式。比如，紅色常常用語(yǔ)警告，而淺色比如灰色顯得更加中性。如果你用中性色來(lái)表示，那么可以恰如其分的表達(dá)出圖標(biāo)含義。

五、理解符號(hào)元素

符號(hào)語(yǔ)言是一種次通信，在網(wǎng)頁(yè)設(shè)計(jì)中也是非常重要的一個(gè)部分。

比如，裝飾性字體更有女性氣質(zhì)，而手繪字體則看上去更加童趣。

你想用你的圖標(biāo)表達(dá)怎樣的含義？

例如，這個(gè)Error圖標(biāo)并沒(méi)有創(chuàng)造太多令人驚恐的元素。

我記得這個(gè)圖標(biāo)常常在我網(wǎng)絡(luò)癱瘓的時(shí)候出現(xiàn)，它們非常完美。含義也不過(guò)分，只是恰如其分的告訴用戶出錯(cuò)了。

再比如這個(gè)更直接一些：

下面這個(gè)例子來(lái)源于Chrome瀏覽器，完美的表達(dá)出了我需要的那個(gè)圖標(biāo)。輕微，準(zhǔn)確，告訴用戶某個(gè)地方出了錯(cuò)。這個(gè)圖標(biāo)除了白色線條的部分都是灰色，可以讓用戶明白問(wèn)題的嚴(yán)重，但是又不至于過(guò)分到讓人民產(chǎn)生驚恐的感覺(jué)。

最后一個(gè)圖標(biāo)表達(dá)的信息很簡(jiǎn)單，但是卻傳遞了最準(zhǔn)確的信息。

結(jié)論

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

【UI設(shè)計(jì)學(xué)習(xí)三部曲】

Step 1：騰訊設(shè)計(jì)師的新人培訓(xùn)教程！初學(xué)者必備！
《傳承設(shè)計(jì)經(jīng)驗(yàn)！圖標(biāo)設(shè)計(jì)初階的3大關(guān)鍵入門知識(shí)點(diǎn)！》

Step 2：到頂尖UI設(shè)計(jì)師集聚地吸收經(jīng)驗(yàn)與靈感！
《設(shè)計(jì)師必讀！玩轉(zhuǎn)Dribbble終極指南》

Step 3：每天一練！技巧都學(xué)全！
《PS+AI制作精致可愛(ài)的毛線風(fēng)格圖標(biāo)》

原文地址：blog.enqoo

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege