眾所周知，icon圖標(biāo)設(shè)計(jì)在移動(dòng)端app設(shè)計(jì)當(dāng)中占有很大的一個(gè)比重。一個(gè)APP的個(gè)性和風(fēng)格可以從icon上看出來(lái)的。

所以，icon圖標(biāo)設(shè)計(jì)也是最容易考驗(yàn)UI設(shè)計(jì)師水平能力的。如果你去面試APP設(shè)計(jì)師，如果icon圖標(biāo)設(shè)計(jì)都不會(huì)，估計(jì)你面試成功的機(jī)會(huì)相對(duì)會(huì)少一些。

Icon是一個(gè)手機(jī)APP界面上的重要組成部分之一。Icon設(shè)計(jì)是APP設(shè)計(jì)師必須重視的一個(gè)技能。

25學(xué)堂也相信每一位APP設(shè)計(jì)師在日常的設(shè)計(jì)工作中都曾經(jīng)遇到過(guò)這樣的問(wèn)題：

“這個(gè)icon我該使用什么樣的語(yǔ)義，這樣表示是否足夠清晰，到底應(yīng)該用icon好，還是文字好？”

一、移動(dòng)端APP使用Icon圖標(biāo)的優(yōu)勢(shì)

A、對(duì)于手機(jī)這樣的小屏幕設(shè)備來(lái)說(shuō)，采用icon的形式在大多數(shù)情況下肯定是好的；利用icon輔助文字也能在很多時(shí)候提高辨識(shí)度。

B、提高整個(gè)APP界面的視覺(jué)效果

如下圖APP界面所示：

二、移動(dòng)端APP使用Icon圖標(biāo)的不足之處

如今我們所使用的產(chǎn)品，功能都在逐步的增多，界面也都是越來(lái)越具有復(fù)雜性，一個(gè)頁(yè)面上所需要的按鈕也越來(lái)越多，那么就會(huì)出現(xiàn)很多時(shí)候單純一個(gè)圖標(biāo)在語(yǔ)義上其實(shí)很難以做到清晰且準(zhǔn)確，如果達(dá)不到清晰準(zhǔn)確那么就會(huì)需要用戶去思考及判斷，增加了體驗(yàn)過(guò)程中的認(rèn)知負(fù)荷。

如果無(wú)法快速而準(zhǔn)確的傳達(dá)信息，一個(gè)icon畫(huà)的再精美又有什么用呢？

舉個(gè)案例說(shuō)明下：

上面便是個(gè)不好的例子，當(dāng)界面上的icon不容易被識(shí)別出來(lái)的時(shí)候，用戶便會(huì)下意識(shí)的回避他們，也許很多時(shí)候你的用戶就這樣慢慢的流失掉了；

這個(gè)app頁(yè)面中的功能很多，數(shù)十多個(gè)icon堆積在頁(yè)面上，大多數(shù)icon的語(yǔ)義并不能很快速的被辨識(shí)，個(gè)別icon的設(shè)計(jì)并沒(méi)有使用用戶長(zhǎng)時(shí)間已經(jīng)積累在腦海里面的認(rèn)知語(yǔ)義。

下面我們?cè)倏聪略O(shè)計(jì)比較好的案例：

上面這個(gè)APP設(shè)計(jì)當(dāng)中的icon處理的不錯(cuò)。照片編輯里面的操作應(yīng)該算是專業(yè)性的了，對(duì)比度，飽和度，曝光等等名詞，雖然也可以堅(jiān)持用一個(gè)icon來(lái)做表示，但當(dāng)這么多操作放在一個(gè)界面上時(shí)，識(shí)別的難度就逐一增加了，使用文字為主，icon為輔的形式，保證了頁(yè)面的清晰識(shí)別性，減少了用戶的記憶成本。

三、所以，當(dāng)我們?cè)谠O(shè)計(jì)自己APP里的icon的時(shí)候，需要遵循下面幾條icon設(shè)計(jì)原則

大神總結(jié)出來(lái)的，希望各位好好參考一下。

稱為 ?icon設(shè)計(jì)?最好的原則

不要在設(shè)計(jì)的時(shí)候再去爭(zhēng)執(zhí)是用icon好，還是文字好，遵循幾個(gè)原則，就可以保證好的體驗(yàn)：

1.?使用的icon語(yǔ)義能100%準(zhǔn)確清晰的表達(dá)出來(lái)；

2.?盡量使用用戶都已經(jīng)熟悉且有認(rèn)知的icon語(yǔ)義；

3.?如果很難用直觀的icon來(lái)表示文案的語(yǔ)義，請(qǐng)用icon+文字的形式；

4.?如果空間不足無(wú)法同時(shí)使用icon+文字，請(qǐng)選擇直接使用文字；

如果各位在實(shí)踐當(dāng)中，還有更好的解決原則，可以告知25學(xué)堂。我們一定做到最全的APP設(shè)計(jì)干貨酷站。

最后，再來(lái)談?wù)剟?chuàng)新icon圖標(biāo)設(shè)計(jì)

創(chuàng)新設(shè)計(jì)是我們?cè)贏PP設(shè)計(jì)中，被提到的次數(shù)最多的，很多優(yōu)秀的APP設(shè)計(jì)師都愿意在設(shè)計(jì)的時(shí)候做出一些創(chuàng)新，覺(jué)得做不同的設(shè)計(jì)就是創(chuàng)新，甚至更多的時(shí)候是在為了不同而做不同設(shè)計(jì)；這也是一種設(shè)計(jì)師個(gè)性的展示。同時(shí)給APP作品賦予設(shè)計(jì)師的風(fēng)格。

下面是幫大家收集了幾個(gè)app上共同的“我的”的icon 的設(shè)計(jì):

設(shè)計(jì)師為了自己界面風(fēng)格的一致性，一個(gè)“我的”icon 就會(huì)設(shè)計(jì)出各種各樣，前面的幾個(gè)還是基本上與大家熟悉的圖形語(yǔ)義比較接近，也能夠很快速的識(shí)別出來(lái)，后面的2個(gè)icon從設(shè)計(jì)上說(shuō)的確是富有了很強(qiáng)的設(shè)計(jì)感，很獨(dú)特，

但是從圖形語(yǔ)義上已抽象到脫離了我們腦海里對(duì)“我的”這個(gè)感念的認(rèn)知，這種icon如果單獨(dú)的出現(xiàn)在界面中，勢(shì)必會(huì)造成理解上面的偏差。

以上就是作者的一些觀點(diǎn)和看法。各位親，以上這些原則不是規(guī)范。只能算設(shè)計(jì)師的一些心得而已。設(shè)計(jì)師要學(xué)會(huì)吸收好的干貨和參考案例。

以上內(nèi)容來(lái)源：阿里媽媽MUX ?鑫妍 ?，在此25學(xué)堂感謝大神的分享。