每個(gè)APP都需要一個(gè)漂亮的圖標(biāo)，而每個(gè)設(shè)計(jì)師也都力圖讓自己APP的圖標(biāo)看起來漂亮而吸引人。為了在APP Store 和APP列表中脫穎而出，優(yōu)質(zhì)的圖標(biāo)設(shè)計(jì)是如此的讓設(shè)計(jì)師渴求。失敗的APP圖標(biāo)設(shè)計(jì)有著各不相同的原因，而成功的APP圖標(biāo)設(shè)計(jì)則有著相似的特性，這也是促成今天這篇文章的重要原因。

制作一個(gè)對用戶友好、具備良好識(shí)別度的好的APP圖標(biāo)，應(yīng)該遵循什么樣的設(shè)計(jì)規(guī)則？讀下去，下面所挑選的三個(gè)最實(shí)用的規(guī)則，應(yīng)該能夠幫你在迷霧中，辟開一條道路。

1、設(shè)計(jì)一個(gè)高識(shí)別度的圖標(biāo)

首先，圖標(biāo)需要表情達(dá)意，傳達(dá)信息。一個(gè)需要讓用戶猜測的圖標(biāo)并不是一個(gè)稱職的圖標(biāo)。

對于你的APP而言，圖標(biāo)就是它的臉面，一目了然的圖標(biāo)設(shè)計(jì)能夠讓用戶明白你的APP的功能與意義。當(dāng)你為你的APP設(shè)計(jì)圖標(biāo)的時(shí)候，你應(yīng)當(dāng)時(shí)刻謹(jǐn)記一件事情：圖標(biāo)是借助隱喻和聯(lián)想來同用戶溝通的，如果它的形象或者暗示的操作不能讓用戶立刻明白，那么這個(gè)圖標(biāo)就不具備良好的可用性。因此，讓你的圖標(biāo)清晰直觀是至關(guān)重要的：

不要使用抽象的圖標(biāo)設(shè)計(jì)，因?yàn)槌橄蟮膱D標(biāo)設(shè)計(jì)很少能夠正常工作。用戶很難依靠以往的經(jīng)驗(yàn)來弄明白圖標(biāo)背后的含義，iOS中游戲中心的圖標(biāo)設(shè)計(jì)就是一個(gè)相當(dāng)?shù)湫偷姆蠢＿@個(gè)圖標(biāo)是一組多彩、具有玻璃質(zhì)感的圓圈組成的，它看起來像氣球，也許能夠喚起部分用戶的想象，但是人們通常很難明白它的確切含義。

而一個(gè)安全的設(shè)計(jì)思路是使用用戶能夠一眼分辨得出來的形象，這樣用戶就很容易識(shí)別了。絕大多數(shù)的用戶都能夠清晰地認(rèn)出Home的圖標(biāo)，打印和放大鏡這類圖標(biāo)就更是廣泛地為用戶所了解。所以，當(dāng)我們看到Gmail 的圖標(biāo)的時(shí)候，哪怕是新用戶，通常都能很快聯(lián)想到電子郵件。

2、盡力做到極簡

找到一個(gè)能夠捕捉應(yīng)用程序本質(zhì)的元素，并盡量以簡單的形態(tài)呈現(xiàn)出這個(gè)元素。然后，刪除這個(gè)圖標(biāo)中不必要的裝飾性的、冗余的內(nèi)容即可。

絕大多數(shù)的設(shè)計(jì)師希望他們的APP的圖片看起來很棒，但是正像許多圖標(biāo)所共有的問題，核心的信息總是被太多的細(xì)節(jié)和冗余的裝飾所掩蓋，許多過度設(shè)計(jì)的細(xì)節(jié)成為了阻礙用戶獲得良好體驗(yàn)的視覺噪音：

盡量不要在圖標(biāo)中包含沒有必要存在的、或者指向性或者涉及交互的詞句，僅在必要的時(shí)候在LOGO中包含特定的文字。（至少現(xiàn)在沒必要在圖標(biāo)中加上“Free”的字樣了吧？）

不要在APP的圖標(biāo)中包含APP的名稱，因?yàn)锳PP的下方已經(jīng)有文字名稱了。

不要在APP的圖標(biāo)中包含過度圖像細(xì)節(jié)，因?yàn)檫@么小的尺寸，即使是視力正常的用戶也常常看不清那么小的細(xì)節(jié)。

不要包含照片和屏幕截圖啥的。

不要使用3D透視圖，因?yàn)?D透視和陰影在小圖標(biāo)上難于辨認(rèn)。

當(dāng)然，細(xì)節(jié)并非完全是圖標(biāo)的天敵。最重要的事情還是讓你的圖標(biāo)清晰而直觀，所以你需要做的更多的是平衡細(xì)節(jié)和整體視覺：

·當(dāng)你為你的圖標(biāo)選取一個(gè)合適的形象之時(shí)，盡量選擇它最有代表性的特征，或者最常見、最具有識(shí)別度的特性來作為設(shè)計(jì)的基礎(chǔ)，其他的部分盡量略去。
·設(shè)計(jì)圖標(biāo)的時(shí)候，盡量讓它擁有視覺焦點(diǎn)，立刻抓住用戶的注意力，讓用戶記住你的APP。

以iOS的天氣APP為例，其中的太陽和云是是讓用戶立刻記住“天氣”這一特征的元素。

3、在不同的背景下測試你所設(shè)計(jì)的APP圖標(biāo)

圖標(biāo)應(yīng)當(dāng)在所處的背景下清晰可見。

設(shè)計(jì)一個(gè)易于識(shí)別且極簡的圖標(biāo)并非意味著你已經(jīng)完成設(shè)計(jì)了。正如同其他所有的UI元素一樣，完成設(shè)計(jì)之后需要對設(shè)計(jì)進(jìn)行測試和驗(yàn)證。你并不能控制用戶選擇屏幕背景，者也就意味著你需要測試不同的背景，確保你的APP 圖標(biāo)在不同的背景下都具有良好的識(shí)別度：

不要讓圖標(biāo)與背景融為一體。下面的股票APP在深色背景下幾乎無法識(shí)別。

不要使用透明的圖標(biāo)背景，確保你的圖標(biāo)能被輕松識(shí)別。

在具有動(dòng)態(tài)背景的手機(jī)上測試你的圖標(biāo)設(shè)計(jì)，在背景的變化與移動(dòng)過程中，測試你的APP圖標(biāo)的可用性。

結(jié)語

看了上面的三個(gè)技巧之后，你如果有所啟發(fā)并且發(fā)現(xiàn)你的圖標(biāo)尚有提升空間的話，不妨著手重新設(shè)計(jì)吧。

【Nick Babich 的用戶體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)之談】

1. 輸入框設(shè)計(jì)：《講真，你真的懂得文本輸入框設(shè)計(jì)的那些潛規(guī)則么？》
2. 表單設(shè)計(jì)：《摳細(xì)節(jié)！設(shè)計(jì)高效好用表單的10個(gè)技巧》
3. 極簡APP UI：《超贊！幫你打造極簡風(fēng)APP UI 的實(shí)用設(shè)計(jì)技巧》
4. 前端開發(fā)：《有法可依！幫你衡量一個(gè)動(dòng)效是否合格的六個(gè)核心因素》
5. 面包屑：《并不簡單！網(wǎng)頁中為你指路的面包屑到底應(yīng)當(dāng)怎么使用？》
6. 移動(dòng)端頁面：《跟著建議走！這樣的移動(dòng)端網(wǎng)站設(shè)計(jì)才對頭》

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com