圖標(biāo)設(shè)計(jì)，即icon設(shè)計(jì)，在界面設(shè)計(jì)中占有很重要的位置，一個(gè)好的圖標(biāo)，可以讓用戶“一秒即懂”，如何設(shè)計(jì)出優(yōu)秀的圖標(biāo)，這篇文章給你解答。

在圖形交互界面（GUI）中，圖標(biāo)（icon）是一種最常使用的設(shè)計(jì)元素之一。

怎樣設(shè)計(jì)一個(gè)優(yōu)秀的圖標(biāo)呢？

在這篇文章中，我會(huì)分享一個(gè)簡單的使用清單/使用手冊，幫助你如何把圖標(biāo)更好地展示給你的用戶。

一、易識(shí)別

清晰度是優(yōu)秀界面的最重要特征，但不幸的是，圖標(biāo)往往不夠清晰。

圖標(biāo)必須第一時(shí)間傳達(dá)最重要的信息。當(dāng)圖標(biāo)不能夠立刻表達(dá)出所代表含義時(shí)，它就會(huì)變成一種“視覺噪音”，失去了圖標(biāo)存在的意義。

優(yōu)秀的圖標(biāo)即不用閱讀標(biāo)簽或文字提示，就可以被認(rèn)知理解。

幾個(gè)簡單的規(guī)則，可以幫助你避免使用不能傳達(dá)其含義的圖標(biāo)。

1. 嘗試使用用戶熟悉的icon

用戶對于圖標(biāo)的理解，一般基于其使用與認(rèn)知的經(jīng)驗(yàn)。這就是為何使用用戶熟悉的圖標(biāo)效果會(huì)比使用獨(dú)特的圖標(biāo)要好。

依靠通用型圖標(biāo)。就像屋子、打印、玩游戲和搜尋等等這些，不需要進(jìn)行任何解釋的圖標(biāo)。

（通俗易懂的圖標(biāo)）

調(diào)查研究，檢查你的競爭對手所用的圖標(biāo)。

2. 不要使用有歧義的icon

應(yīng)該避免使用有多重含義的圖標(biāo)。舉例來說，“心形”圖標(biāo)和“星星”圖標(biāo)都可以作為【喜歡】或?qū)?nèi)容【收藏】起來。當(dāng)一起使用時(shí)很可能造成用戶干擾。

（心形和星星圖標(biāo)有歧義）

3. 測試icon的含義表達(dá)

不要聽從一些類似“人們每天都用我們的產(chǎn)品（APP），他們肯定能理解圖標(biāo)的意思”的話。

請測試你的圖標(biāo)！

【5秒鐘原則】是一種測試圖標(biāo)的有效方法。問問用戶他們希望這個(gè)圖標(biāo)代表什么？

如果需要花費(fèi)5秒鐘以上去思考這個(gè)圖標(biāo)，那么這個(gè)圖標(biāo)就不可能有效地傳達(dá)其意義。

4. 測試icon的可拓展性

測試你的icon在類似15x15px的尺寸下是否依舊清晰。

（音樂圖標(biāo)縮放清晰）

5. 給陌生的icon附上標(biāo)簽文字

如果你還是想要使用特殊的圖標(biāo)，可以考慮在旁邊給圖標(biāo)附上文字標(biāo)簽。

（圖標(biāo)+文字）

6. 不要重新定義icon的含義

通過更改圖標(biāo)的含義來混淆用戶相當(dāng)容易。當(dāng)圖標(biāo)的功能與預(yù)期認(rèn)知不同時(shí)，會(huì)造成用戶混淆。

不要重新發(fā)明輪子！

即使意義上的細(xì)小區(qū)別，也會(huì)妨礙到用戶理解圖標(biāo)的能力。

很長一段時(shí)間，Google Docs使用的圖標(biāo)看起來就像一個(gè)漢堡包。大多數(shù)界面使用類似的圖標(biāo)來表示主導(dǎo)航菜單，但Google重新定義了它的含義并將其用作“后退/返回”操作。當(dāng)用戶點(diǎn)擊此圖標(biāo)時(shí)，他們會(huì)被重新引導(dǎo)到Google文檔主頁。

二、視覺舒適

可以通過插畫、顏色以及圖標(biāo)傳達(dá)品牌個(gè)性。如果做得好，圖標(biāo)肯定可以增強(qiáng)設(shè)計(jì)的美感。

1. 減少圖形細(xì)節(jié)中的數(shù)量

KISS原則適用于所有UI元素，包括圖標(biāo)icons。保持圖標(biāo)的簡潔性，并且遵循以下兩條原則，避免沒必要的復(fù)雜性：

• 限制顏色使用數(shù)量，使用不超過3或4種顏色，保持設(shè)計(jì)簡潔。
• 通過聚焦于對象的基本特征，來減少圖形設(shè)計(jì)細(xì)節(jié)的數(shù)量。盡量保持設(shè)計(jì)的概要性 ，因?yàn)樵O(shè)計(jì)概要性的在不同的界面和分辨率都可以進(jìn)行轉(zhuǎn)換。

（請勿過于花俏，避免設(shè)計(jì)的圖標(biāo)上包含太多的視覺細(xì)節(jié)）

2. 通過添加動(dòng)畫效果創(chuàng)造愉悅體驗(yàn)

動(dòng)畫效果可以表達(dá)清晰功能的目的，并且可以創(chuàng)造用戶愉悅體驗(yàn)。

對于形態(tài)改變的情況，使用動(dòng)畫效果可以創(chuàng)造更好的動(dòng)態(tài)體驗(yàn)。

三、合適尺寸

圖標(biāo)應(yīng)該很好地作為用戶的目標(biāo)點(diǎn)。

設(shè)計(jì)師常見的錯(cuò)誤之一，是在手機(jī)上為圖標(biāo)留下太小的空間。當(dāng)你為觸摸進(jìn)行設(shè)計(jì)時(shí)，確保圖標(biāo)能夠足夠大方便手指的點(diǎn)擊。

參考：目標(biāo)在屏幕中點(diǎn)擊范圍為7-10mm。并且，請確保在目標(biāo)對象之間添加填充，以防止不準(zhǔn)確的點(diǎn)擊。

（實(shí)際目標(biāo)尺寸=視覺目標(biāo)尺寸+填充 圖片：Microsoft）

四、一致性

• 一致性是設(shè)計(jì)中的關(guān)鍵原則。
• 一致性設(shè)計(jì)是一種直觀設(shè)計(jì)。

當(dāng)使用相似的元素且具有一致的外觀和功能時(shí)，可以讓可用性和可學(xué)習(xí)性都得到提升改善。

1. 內(nèi)部一致性

圖標(biāo)設(shè)計(jì)應(yīng)該保持視覺統(tǒng)一，你決定用于你的產(chǎn)品的圖標(biāo)，應(yīng)該保持統(tǒng)一樣式。

理想情況下，它們看起來應(yīng)該是一位設(shè)計(jì)師設(shè)計(jì)的。以下是你需要遵循的關(guān)于創(chuàng)造統(tǒng)一性的幾條原則：

• 使用相同顏色或者顏色組合在你的圖標(biāo)上；
• 使用相同的形狀和其他樣式屬性（例如邊框的大小）。

（沒有凝聚力的圖標(biāo)看起來很糟糕）

2. 與平臺(tái)保持一致

確保你的目標(biāo)風(fēng)格與平臺(tái)一致，它們會(huì)讓用戶更容易去理解。

（蘋果iOS和Google 安卓圖標(biāo)）

3. 與產(chǎn)品系列保持一致

如果你擁有整個(gè)產(chǎn)品系列，確保一致的圖標(biāo)風(fēng)格（或至少類似）應(yīng)用在你所有的產(chǎn)品中。

總結(jié)

通常來說，為你的項(xiàng)目尋找一個(gè)合適的圖標(biāo)并不容易。這就是為什么我分享這個(gè)資源列表來讓這個(gè)任務(wù)變得簡單。

我會(huì)定期更新列表，以便你可以找到更有用的資源。

作者：Nick Babich

翻譯：JaylonG

原文：http://babich.biz/icon-checklist/

#專欄作家#

JaylonG（微信號(hào)JJ865477301），人人都是產(chǎn)品經(jīng)理專欄作家。一枚擅長用產(chǎn)品思維看問題，用邏輯思維做分析，用情感體驗(yàn)做設(shè)計(jì)的產(chǎn)品愛好者。愛好廣泛，歡迎交流，拒絕水友。

本文由原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash ，基于 CC0 協(xié)議