一個(gè)App應(yīng)用圖標(biāo)設(shè)計(jì)的美感與吸引力，直接決定了用戶對(duì)產(chǎn)品的第一印象。一個(gè)吸睛的APP應(yīng)用圖標(biāo)，可以讓用戶愿意花時(shí)間了解你，下載你的App。對(duì)于移動(dòng)端APP 是最重要的「門(mén)面」，它直接關(guān)聯(lián)著產(chǎn)品的品牌價(jià)值，圖標(biāo)是否具備良好的可用性，將會(huì)直接影響到品牌和產(chǎn)品本身。

通常，用戶第一次仔細(xì)看 APP 的圖標(biāo)是在 App Store 和 Google Play 這樣的軟件商店和某些第三方推薦文章當(dāng)中，相比于在界面中使用的功能性圖標(biāo)而言，APP 圖標(biāo)需要承擔(dān)更加廣泛的責(zé)任：不只要具備品牌本身的氣質(zhì)和元素，還要能夠體現(xiàn)這個(gè)數(shù)字產(chǎn)品本身的功能和特質(zhì)，視覺(jué)上能夠在同類的設(shè)計(jì)當(dāng)中脫穎而出，在手機(jī)主界面的程序列表中還得足夠抓人眼球，易于識(shí)別。對(duì)于這樣一個(gè)小小的圖標(biāo)而言，要求一點(diǎn)都不少，不是嗎？最近通過(guò)分析大量的應(yīng)用圖標(biāo)，結(jié)合自己的專業(yè)認(rèn)知，今天，分享一些圖標(biāo)設(shè)計(jì)的方法。此方法論描述僅代表個(gè)人認(rèn)知經(jīng)驗(yàn)，設(shè)計(jì)的方法有很多種，以下僅為拋磚迎玉，希望大家能找到適合自己的方法。

一. 字體

& 中文字體

1. 單個(gè)字體設(shè)計(jì)

提取產(chǎn)品名稱中最具代表性的獨(dú)立文字，進(jìn)行字體設(shè)計(jì)。通過(guò)對(duì)筆畫(huà)及整體骨架進(jìn)行設(shè)計(jì)調(diào)整，以達(dá)到符合產(chǎn)品特性和視覺(jué)差異化的目的。作為國(guó)人對(duì)漢字的敏感度，這樣的設(shè)計(jì)形式大大降低了用戶對(duì)品牌的認(rèn)知成本。

優(yōu)點(diǎn)：擁有特征性的字體設(shè)計(jì)可以一目了然的傳遞產(chǎn)品信息，讓用戶在自己的手機(jī)桌面上快速找到應(yīng)用所在。如支付寶、網(wǎng)易郵箱大師、知乎等應(yīng)用圖標(biāo)，識(shí)別性很強(qiáng)。

獨(dú)立文字的提取難度較大，只能應(yīng)用于產(chǎn)品名稱中有特征性含義的產(chǎn)品，如果提取不當(dāng)很容易達(dá)不到市場(chǎng)差異化，與很多相同字體混淆在一起，干擾用戶對(duì)產(chǎn)品的記憶。

2. 多個(gè)字體設(shè)計(jì)

多個(gè)字體設(shè)計(jì)通常為產(chǎn)品名稱直接運(yùn)用在設(shè)計(jì)中，如有道、閑魚(yú)、當(dāng)當(dāng)、小紅書(shū)等。多個(gè)字體設(shè)計(jì)需要注意的是整體的協(xié)調(diào)與可讀性，一排出現(xiàn)兩個(gè)漢字屬于比較理想的可讀范圍，極限值為3個(gè)漢字并排，最多兩行為宜。

由此推算，適合運(yùn)用字體作為應(yīng)用圖標(biāo)的產(chǎn)品名稱最多6個(gè)字為宜，超出這個(gè)數(shù)量，將會(huì)大大降低用戶對(duì)產(chǎn)品的識(shí)別能力。

優(yōu)點(diǎn)：可以更加直接的告知用戶產(chǎn)品名稱，便于品牌推廣，減少用戶的記憶成本。

對(duì)產(chǎn)品名稱有一定限制因素，以1~4個(gè)漢字為最佳，超過(guò)6個(gè)漢字組合將會(huì)影響用戶的識(shí)別能力。

3. 字體加輔助圖形

為了突出產(chǎn)品特有的氣質(zhì)和屬性，通過(guò)字體與輔助圖形組合來(lái)烘托這樣的氛圍也是設(shè)計(jì)方式之一。如頭條字體和文章剪影圖形組合形成內(nèi)容豐富的氛圍，利用紙張折痕的效果突出文藝氣質(zhì)，購(gòu)物袋的圖形運(yùn)用烘托購(gòu)物的氛圍等等。

優(yōu)點(diǎn)：相比單純的文字設(shè)計(jì)，適當(dāng)輔助一些帶有產(chǎn)品特性的圖形，可以更加靈活的突出產(chǎn)品氣質(zhì)和屬性。

圖形運(yùn)用不當(dāng)容易對(duì)字體信息的傳達(dá)造成干擾，需要在字體設(shè)計(jì)比重和圖形難易度之間做好權(quán)衡。

4. 字體加幾何圖形組合設(shè)計(jì)

幾何圖形的運(yùn)用可以增加圖標(biāo)的形式感，如矩形與字體設(shè)計(jì)組合可以強(qiáng)調(diào)局部信息；圓潤(rùn)的形狀可以使圖標(biāo)風(fēng)格更加活潑有趣；三角形的運(yùn)用有一定的引導(dǎo)性。

優(yōu)點(diǎn)：幾何圖形的運(yùn)用可以增加應(yīng)用圖標(biāo)的形式感和趣味性。

常用的幾何圖形形式單一，難以形成獨(dú)有的視覺(jué)差異。

&英文

5. 單個(gè)英文字母設(shè)計(jì)

英文字母設(shè)計(jì)通常是提取產(chǎn)品名稱首字母進(jìn)行設(shè)計(jì)，由于英文字母本身造型簡(jiǎn)潔，結(jié)合產(chǎn)品特點(diǎn)進(jìn)行創(chuàng)意加工，很容易達(dá)到美感和識(shí)別性兼?zhèn)洹?/p>

優(yōu)點(diǎn)：利于設(shè)計(jì)師發(fā)揮，很容易做出具備美感的應(yīng)用圖標(biāo)。

很容易創(chuàng)意雷同，視覺(jué)差異化很難保障。

6. 多個(gè)英文字母

多個(gè)英文字母通常是產(chǎn)品名稱全稱或幾個(gè)單詞首字母縮寫(xiě)組合而成，在國(guó)內(nèi)也會(huì)提取漢語(yǔ)拼音和拼音首字母等方式進(jìn)行組合。在進(jìn)行字母組合設(shè)計(jì)的時(shí)候，需要考慮組合字母的識(shí)別性，單排字母為1~3個(gè)為宜，字母越多，識(shí)別性越低。

優(yōu)點(diǎn)：組合字母很容易形成獨(dú)有的產(chǎn)品簡(jiǎn)稱，方便用戶記憶，如OFO，YY等。

熱門(mén)的組合字母容易雷同，對(duì)產(chǎn)品差異化形成挑戰(zhàn)。

7. 字母加背景圖案

通過(guò)添加背景圖案，結(jié)合字母設(shè)計(jì)組合呈現(xiàn)，既可以增加應(yīng)用圖標(biāo)的視覺(jué)層次感，也能豐富視覺(jué)表現(xiàn)力。這里需要注意背景圖案的色相和繁簡(jiǎn)度的處理，需要和字母設(shè)計(jì)形成強(qiáng)對(duì)比，使信息傳達(dá)不受影響。

優(yōu)點(diǎn)：可以豐富應(yīng)用圖標(biāo)的視覺(jué)層次感和視覺(jué)表現(xiàn)力。

字母數(shù)量過(guò)多時(shí)，背景圖案的設(shè)計(jì)繁簡(jiǎn)度會(huì)影響信息的傳達(dá)。

8. 字母加圖形組合

字母加圖形組合設(shè)計(jì)應(yīng)用比較廣泛，圖形分為幾何圖形和生活映象提煉的圖形。如酷狗音樂(lè)就是結(jié)合圓形組合而成，QQ瀏覽器則是與生活中云朵的提煉圖形結(jié)合而成。通過(guò)字母與圖形進(jìn)行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺(jué)表現(xiàn)更加飽滿。

優(yōu)點(diǎn)：圖標(biāo)視覺(jué)表現(xiàn)飽滿，對(duì)字母的設(shè)計(jì)要求相對(duì)較低。

如果選取的圖形為常用圖形，不易形成特征性元素。

&數(shù)字

9. 數(shù)字設(shè)計(jì)

數(shù)字對(duì)于我們來(lái)說(shuō)是非常敏感的，利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。由于數(shù)字的識(shí)別性很強(qiáng)，易于品牌傳播與用戶記憶。

優(yōu)點(diǎn)：自帶親和力，識(shí)別性強(qiáng)，易于傳播和記憶。

針對(duì)性較強(qiáng)，數(shù)字與品牌關(guān)聯(lián)性密合度控制較難。

&特殊符號(hào)

10. 特殊符號(hào)設(shè)計(jì)

特殊符號(hào)在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對(duì)較少，由于符號(hào)本身的含義會(huì)對(duì)產(chǎn)品屬性有一定限制，所以針對(duì)性比較強(qiáng)。如「￥」符號(hào)可代表與錢(qián)財(cái)有關(guān)聯(lián)性的產(chǎn)品，無(wú)法運(yùn)用在與此屬性無(wú)關(guān)的產(chǎn)品上面。

優(yōu)點(diǎn)：圖形特征明顯，自身有很強(qiáng)的屬性，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。

圖形屬性針對(duì)性較強(qiáng)，獨(dú)立圖形無(wú)法在同類產(chǎn)品中形成差異化，需要結(jié)合產(chǎn)品特征進(jìn)行組合設(shè)計(jì)。

三. 圖形

11. 幾何圖形設(shè)計(jì)

幾何圖形的運(yùn)用設(shè)計(jì)給人簡(jiǎn)約、現(xiàn)代、個(gè)性、富有空間感等視覺(jué)感覺(jué)，從單個(gè)具象圖形到復(fù)雜的空間感營(yíng)造，幾何圖形的表現(xiàn)形式非常豐富。

不同的形狀給人的情感表達(dá)不同，如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等，添加圓角后又會(huì)更加親民、可愛(ài)。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。

優(yōu)點(diǎn)：構(gòu)圖簡(jiǎn)潔，設(shè)計(jì)形式豐富多樣，不同的形狀和細(xì)節(jié)處理可以營(yíng)造不同的氛圍。

過(guò)于簡(jiǎn)約的形狀容易創(chuàng)意雷同，無(wú)法形成差異化，考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。

12. 抽象圖形

通過(guò)提取品牌信息、產(chǎn)品服務(wù)、功能模塊等關(guān)鍵詞進(jìn)行圖形創(chuàng)意，形成的圖形不屬于生活中大家常見(jiàn)的基本圖形，是對(duì)品牌進(jìn)行高度提煉形成的抽象圖形。通過(guò)暗喻的形式傳達(dá)品牌文化和產(chǎn)品特點(diǎn)，品牌獨(dú)特性較強(qiáng)。

優(yōu)點(diǎn)：抽象圖形品牌獨(dú)特性較強(qiáng)，容易形成視覺(jué)差異化。

用戶認(rèn)知記憶成本較高，品牌推廣難度較大。

13. 動(dòng)物剪影設(shè)計(jì)

動(dòng)物剪影通常是提取動(dòng)物外部輪廓進(jìn)行單色填充，可以提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素。這類應(yīng)用圖標(biāo)背景為單色或者漸變色，少量的會(huì)輔助一些圖形作為背景元素，動(dòng)物采用單色填充，以白色填充居多。

優(yōu)點(diǎn)：?jiǎn)紊畛涞膭?dòng)物形象與背景對(duì)比強(qiáng)烈，整體視覺(jué)效果直觀醒目、簡(jiǎn)潔大方。

常見(jiàn)的動(dòng)物形象容易雷同，生僻的動(dòng)物造型對(duì)用戶的認(rèn)知能力有一定的挑戰(zhàn)。

14. 剪影設(shè)計(jì)

除了動(dòng)物剪影以外，生活中可以作為剪影設(shè)計(jì)的元素很多。如食物、工具、生活用品、學(xué)習(xí)用品、娛樂(lè)道具等等?？梢元?dú)立形成剪影圖形，也可以根據(jù)產(chǎn)品特點(diǎn)進(jìn)行創(chuàng)意加工，最終形成應(yīng)用圖標(biāo)獨(dú)有的造型圖案。

15. 相同圖形重復(fù)設(shè)計(jì)

將相同的圖形進(jìn)行有序的排列，排列形式有梯度漸變、等大均排、規(guī)律性重復(fù)、配色差異、大小錯(cuò)落等。這樣的設(shè)計(jì)方式可以給單調(diào)的圖形增加層次感和構(gòu)圖飽滿，有一定梯度漸變和規(guī)律性重復(fù)的圖形組合可以傳遞一定的韻律感和動(dòng)感。

優(yōu)點(diǎn)：給單調(diào)的圖形增加層次感，也能增強(qiáng)整體的構(gòu)圖飽滿度。

對(duì)于沒(méi)有特征性的圖形容易形成單調(diào)乏味。

16. 正負(fù)形設(shè)計(jì)

正負(fù)形的設(shè)計(jì)在logo圖形設(shè)計(jì)中是比較常見(jiàn)的表現(xiàn)手法，運(yùn)用在圖標(biāo)設(shè)計(jì)中，以正形為底突出負(fù)形特征，以負(fù)形表達(dá)產(chǎn)品屬性。利用正負(fù)形進(jìn)行設(shè)計(jì)，圖形設(shè)計(jì)感較強(qiáng)，正形與負(fù)形可以更加充分的表達(dá)產(chǎn)品特征與服務(wù)。

優(yōu)點(diǎn)：圖形設(shè)計(jì)感較強(qiáng)，可以更加充分的表達(dá)出產(chǎn)品特征與服務(wù)。

對(duì)圖形設(shè)計(jì)能力要求較強(qiáng)，正形與負(fù)形銜接必須順暢，不然無(wú)法清晰的傳達(dá)產(chǎn)品特征。

17. 線形設(shè)計(jì)

線性設(shè)計(jì)風(fēng)格的圖標(biāo)給人簡(jiǎn)潔輕快的感覺(jué)，線性設(shè)計(jì)的方式分閉合式和開(kāi)放式，可以是一條連續(xù)的線條或者幾條線段組成。在有色背景上面線條通常反白處理，背景設(shè)計(jì)可以是單色、漸變色、其他輔助圖形設(shè)計(jì)等。

優(yōu)點(diǎn)：傳遞簡(jiǎn)潔輕快的產(chǎn)品屬性，適合文藝、小清新、簡(jiǎn)約風(fēng)格的應(yīng)用。

僅用于表現(xiàn)簡(jiǎn)約的圖形，對(duì)于造型復(fù)雜的圖形將會(huì)影響識(shí)別度。

18. 白色漸變圖形設(shè)計(jì)

白色漸變是利用白色漸變填充，不透明度100%到X%「X透明度在100%到0%之間」之間設(shè)置完成。白色漸變圖形具有空間感、質(zhì)感，視覺(jué)效果較好，被廣泛運(yùn)用在應(yīng)用圖標(biāo)設(shè)計(jì)中。

優(yōu)點(diǎn)：比單純的剪影圖形更具空間感和質(zhì)感，傳遞更多的細(xì)節(jié)表現(xiàn)。

圖形本身僅為白色填充，必須在深色背景才能清晰的呈現(xiàn)，不適合淺色背景。

19. 彩色漸變圖形設(shè)計(jì)

彩色漸變是利用多種顏色進(jìn)行漸變，比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對(duì)比，營(yíng)造空間感。應(yīng)用圖標(biāo)的背景需要和圖形的色彩形成對(duì)比，最佳的背景為白色或者淺色。

優(yōu)點(diǎn)：圖形色彩表現(xiàn)更加豐富細(xì)膩，圖標(biāo)表現(xiàn)出更多的細(xì)節(jié)。

多種顏色的搭配色彩絢麗，色彩組合處理不當(dāng)容易使圖標(biāo)整體過(guò)于花俏，很難形成獨(dú)有的品牌色認(rèn)知。

20. 動(dòng)物形象設(shè)計(jì)

動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見(jiàn)的方式之一，動(dòng)物給人的印象比較可愛(ài)，有助于加深用戶對(duì)產(chǎn)品的印象。動(dòng)物的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。

優(yōu)點(diǎn)：動(dòng)物形象給人可愛(ài)的印象，有助于加深用戶對(duì)產(chǎn)品的印象。

常見(jiàn)的動(dòng)物形象容易雷同，罕見(jiàn)的動(dòng)物對(duì)用戶的推廣成本較高。

21. 動(dòng)物局部設(shè)計(jì)

利用動(dòng)物局部進(jìn)行圖形設(shè)計(jì)，可以讓元素特征更加明顯。比起展示整個(gè)動(dòng)物形象，局部特征展示視覺(jué)表現(xiàn)力更強(qiáng)。

優(yōu)點(diǎn)：圖形特征元素更加明顯，視覺(jué)表現(xiàn)力更強(qiáng)。

動(dòng)物局部的選擇需要擁有更加明顯的特征，否則無(wú)法正確識(shí)別動(dòng)物形象。

22. 人體局部設(shè)計(jì)

利用人體局部作為圖形設(shè)計(jì)元素，比較常用的有眼睛、嘴巴、手掌、頭部等。利用人體的元素進(jìn)行設(shè)計(jì)，用戶對(duì)圖形的敏感度更強(qiáng)，易于傳播和記憶。

優(yōu)點(diǎn)：用戶對(duì)于人體局部元素創(chuàng)意的圖形敏感度高，容易形成記憶。

常用的局部特征容易雷同，必須從表現(xiàn)手法上面加以區(qū)分，挑戰(zhàn)設(shè)計(jì)師的設(shè)計(jì)能力。

23. 卡通形象設(shè)計(jì)

卡通形象與動(dòng)物形象容易混淆，因?yàn)楹芏嗫ㄍㄐ蜗蠖际腔趧?dòng)物設(shè)計(jì)演變而來(lái)。這里單獨(dú)提取出來(lái)是為了歸類一些單純以動(dòng)物外形為設(shè)計(jì)元素的表現(xiàn)手法?？ㄍㄐ蜗笤O(shè)計(jì)在應(yīng)用圖標(biāo)的設(shè)計(jì)中是非常常見(jiàn)的，很容易對(duì)用戶形成記憶。

優(yōu)點(diǎn)：形象可愛(ài)、親民，易于用戶記憶與傳播。

卡通形象的設(shè)計(jì)難度較大，對(duì)設(shè)計(jì)師的要求較高。

24. 卡通形象臉部設(shè)計(jì)

卡通形象臉部設(shè)計(jì)是通過(guò)只展示臉部信息來(lái)進(jìn)行設(shè)計(jì)，以圖標(biāo)整體輪廓作為臉部外形，突出卡通形象的表情特征。

優(yōu)點(diǎn)：卡通形象表情特征明顯，視覺(jué)沖擊力和圖標(biāo)的識(shí)別性較強(qiáng)。

表情特征處理要求較高，處理不到位容易使整個(gè)形象呆板無(wú)趣。

25. 擬人化圖形設(shè)計(jì)

通過(guò)對(duì)接近圓形或者構(gòu)圖飽滿的圖形添加眼睛等元素，可以使整個(gè)圖形擬人化。給原本冰冷的圖形賦予其生命，擁有一定的情感表達(dá)，讓產(chǎn)品更加親民，更容易被用戶所接受和記憶。

優(yōu)點(diǎn)：使圖形更加情感化，更容易打動(dòng)用戶，拉進(jìn)與用戶的距離。

對(duì)圖形本身的造型要求極高，并非通用于大部分圖形。

26. 從功能服務(wù)提煉圖形

為了更加清晰的傳遞產(chǎn)品的某項(xiàng)功能與服務(wù)，根據(jù)產(chǎn)品的功能服務(wù)提取元素進(jìn)行圖形設(shè)計(jì)也是比較常用的表現(xiàn)手法，如計(jì)算器、日歷、導(dǎo)航等直接提取相關(guān)聯(lián)的圖形元素進(jìn)行設(shè)計(jì)，一目了然的傳遞出產(chǎn)品信息。也可以從產(chǎn)品服務(wù)內(nèi)容入手進(jìn)行提煉，如教育類產(chǎn)品，提取學(xué)士帽為元素進(jìn)行設(shè)計(jì)。

優(yōu)點(diǎn)：能夠清晰直接的傳遞產(chǎn)品信息，減少用戶的認(rèn)知成本。

相同功能的產(chǎn)品之間無(wú)法形成差異化，如日歷，很難讓用戶對(duì)某個(gè)品牌推出的日歷產(chǎn)生記憶。

27. 擬物圖標(biāo)設(shè)計(jì)

隨著扁平風(fēng)格的盛行，擬物圖標(biāo)的表現(xiàn)手法出現(xiàn)在少數(shù)產(chǎn)品和游戲類的產(chǎn)品中，如錘子推出的系列應(yīng)用，依然保留著這樣的風(fēng)格。在超質(zhì)感擬物風(fēng)格和抽象的扁平風(fēng)格之間進(jìn)行取舍，便出現(xiàn)了微質(zhì)感的設(shè)計(jì)表現(xiàn)形式，也得到很多設(shè)計(jì)師的青睞。

優(yōu)點(diǎn)：光影與質(zhì)感的處理使得圖標(biāo)設(shè)計(jì)展現(xiàn)出更多的細(xì)節(jié)，還原真實(shí)場(chǎng)景。

對(duì)很多剛?cè)胄械脑O(shè)計(jì)師來(lái)說(shuō)設(shè)計(jì)成本較大，在如今快節(jié)奏的生活中使得整個(gè)產(chǎn)品不夠輕快。

四. 色彩

28. 色環(huán)運(yùn)用設(shè)計(jì)

圖形設(shè)計(jì)以環(huán)形構(gòu)圖為主，配色為多種顏色形成如同色環(huán)一般，這樣的圖標(biāo)設(shè)計(jì)構(gòu)圖飽滿、色彩豐富，給用戶傳遞輕松、愉快、可愛(ài)、親和、熱情的產(chǎn)品形象。

優(yōu)點(diǎn)：構(gòu)圖飽滿，色彩豐富，給用戶傳遞更加輕松愉快的體驗(yàn)。

界面風(fēng)格必須和圖標(biāo)多彩的風(fēng)格保持一致，界面配色的設(shè)計(jì)難度較大。

29. 單色背景

單色背景的應(yīng)用圖標(biāo)非常常見(jiàn)，其顏色的選擇通常是品牌色為主，烘托出圖形的視覺(jué)表現(xiàn)。圖形的處理方式以反白、白色漸變、輔助色點(diǎn)綴等較為常見(jiàn)。

優(yōu)點(diǎn)：突出品牌色，便于圖形的視覺(jué)表現(xiàn)。

配色單調(diào)，圖形的視覺(jué)表現(xiàn)形式較少，圖形配色需要結(jié)合背景色做出對(duì)比。

30. 漸變色背景

漸變色背景的運(yùn)用越來(lái)越受到設(shè)計(jì)師青睞，相對(duì)于單色的背景視覺(jué)表現(xiàn)力更加豐富，整體色彩給人通透的感覺(jué)。漸變色可以是雙色漸變，也可以是多色漸變，根據(jù)產(chǎn)品的氣質(zhì)靈活的運(yùn)用。

優(yōu)點(diǎn)：色彩的視覺(jué)表現(xiàn)力更加豐富，整體色彩給人通透的感覺(jué)。

漸變色的運(yùn)用過(guò)多會(huì)使圖標(biāo)整體花俏，對(duì)于配色「度」的把控需要注意。

31. 文藝風(fēng)格設(shè)計(jì)

文藝風(fēng)格圖標(biāo)設(shè)計(jì)配色清新、復(fù)古、簡(jiǎn)約，適合帶有文藝風(fēng)格類的產(chǎn)品。設(shè)計(jì)方向?yàn)楹?jiǎn)約的圖形組合或者文藝風(fēng)格的字體設(shè)計(jì)為主，圖標(biāo)整體留白較多，配色簡(jiǎn)約，白色背景居多。如果是深色背景則采用黑色、復(fù)古色為主。

優(yōu)點(diǎn)：圖形造型簡(jiǎn)約，配色清新，文藝風(fēng)格特征明顯。

這種風(fēng)格僅適合特定的用戶群體和產(chǎn)品。

32. 活動(dòng)氛圍設(shè)計(jì)

在一些購(gòu)物類產(chǎn)品中，經(jīng)常會(huì)對(duì)應(yīng)用圖標(biāo)進(jìn)行特定的活動(dòng)氛圍包裝。會(huì)保留原本的圖形面貌，進(jìn)行整體的氛圍營(yíng)造，以突出購(gòu)物火爆的場(chǎng)景感。如即將到來(lái)的雙十一活動(dòng)，很多平臺(tái)都進(jìn)行相應(yīng)的氛圍營(yíng)造。

優(yōu)點(diǎn)：突出活動(dòng)氛圍，營(yíng)造購(gòu)物火爆的場(chǎng)景感。

時(shí)效性較短，活動(dòng)結(jié)束便恢復(fù)原貌。

五. 板式

33. 對(duì)稱設(shè)計(jì)

受到傳統(tǒng)文化的影響，國(guó)人比較喜歡對(duì)稱設(shè)計(jì)，如古代建筑、生活器具、裝飾圖案等，對(duì)稱圖形帶給人的感覺(jué)是穩(wěn)重、安靜、平和、莊嚴(yán)、正式等。在應(yīng)用圖標(biāo)的設(shè)計(jì)中，對(duì)稱的運(yùn)用是非常常見(jiàn)的設(shè)計(jì)手法，有左右對(duì)稱、上下對(duì)稱、斜角對(duì)稱等表現(xiàn)形式。

優(yōu)點(diǎn)：對(duì)稱形式歷史悠久，被廣大用戶所喜歡，構(gòu)圖也比較飽滿穩(wěn)重。

對(duì)稱兩邊的圖形設(shè)計(jì)保持一致，可以充分利用對(duì)稱形成的負(fù)空間，讓圖形寓意更加豐富。

34. 打破常規(guī)

設(shè)計(jì)初期我們需要學(xué)會(huì)對(duì)齊，設(shè)計(jì)排版整齊規(guī)整，隨著設(shè)計(jì)師設(shè)計(jì)功底的成熟穩(wěn)定，打破對(duì)齊也將體現(xiàn)出一位老司機(jī)的功底。在進(jìn)行應(yīng)用圖標(biāo)的設(shè)計(jì)布局時(shí)，設(shè)計(jì)師為了突出產(chǎn)品的獨(dú)特性，會(huì)選擇打破常規(guī)，也許會(huì)得到不一樣的視覺(jué)效果。

優(yōu)點(diǎn)：打破常規(guī)，擁有獨(dú)特的視覺(jué)特征，傳遞給用戶不一樣的視覺(jué)體驗(yàn)。

需要設(shè)計(jì)師更強(qiáng)的設(shè)計(jì)把控力，把握好圖標(biāo)整體的形式感。

35. 圓形的運(yùn)用

圓形的運(yùn)用在應(yīng)用圖標(biāo)的設(shè)計(jì)中非常常見(jiàn)，有圓形外圈的運(yùn)用、整體構(gòu)圖呈現(xiàn)圓形、圖形創(chuàng)意結(jié)合圓形進(jìn)行創(chuàng)意加工、以圓形作為背景突出特征圖形等表現(xiàn)形式。圓形的設(shè)計(jì)構(gòu)圖飽滿，表現(xiàn)形式更具親和力，被廣大用戶所喜愛(ài)。

優(yōu)點(diǎn)：可以將瑣碎的圖形規(guī)整，整體構(gòu)圖更加飽滿，表現(xiàn)形式更具親和力。

圓形營(yíng)造的構(gòu)圖穩(wěn)重、平和，需要通過(guò)夸張的圖形來(lái)增強(qiáng)視覺(jué)沖擊力。

六. 游戲

36. 游戲角色運(yùn)用設(shè)計(jì)

游戲類應(yīng)用圖標(biāo)設(shè)計(jì)需要設(shè)計(jì)師具備較強(qiáng)的寫(xiě)實(shí)圖標(biāo)設(shè)計(jì)功底，設(shè)計(jì)方向主要有：游戲角色、純文字、道具或標(biāo)識(shí)、明星頭像、輔助圖形或元素等。設(shè)計(jì)表現(xiàn)力需要顏色鮮艷、角色表情和動(dòng)作夸張、設(shè)計(jì)精美有質(zhì)感等。

一個(gè)好的游戲應(yīng)用圖標(biāo)需要設(shè)計(jì)風(fēng)格和游戲內(nèi)畫(huà)風(fēng)一致，視覺(jué)表現(xiàn)對(duì)玩家的吸引力直接影響到游戲是否吸量。

優(yōu)點(diǎn)：設(shè)計(jì)精美有質(zhì)感，視覺(jué)沖擊力大，吸引用戶眼球。

缺點(diǎn)：設(shè)計(jì)功底要求較強(qiáng)，整體圖標(biāo)的視覺(jué)表現(xiàn)力需要結(jié)合游戲整體風(fēng)格，考驗(yàn)設(shè)計(jì)師的綜合設(shè)計(jì)能力。

七. 注意事項(xiàng)

1. 第一件事：從背景信息搜集開(kāi)始

在給一個(gè) APP 設(shè)計(jì)圖標(biāo)的時(shí)候，最重要的是什么事情？是圖形和色彩嗎？這當(dāng)然重要，但不是最重要的。隨后我們會(huì)講到這個(gè)部分，但是給 APP 設(shè)計(jì)圖標(biāo)的時(shí)候，這不是起點(diǎn)。先應(yīng)該了解的是產(chǎn)品背后公司的氣質(zhì)、團(tuán)隊(duì)的背景、產(chǎn)品的功能，而不是直接設(shè)計(jì)。

了解這個(gè)圖標(biāo)所涉及到的 APP 的業(yè)務(wù)組成和整體架構(gòu)，詢問(wèn)團(tuán)隊(duì)相關(guān)的營(yíng)銷(xiāo)策略和內(nèi)容，包括價(jià)值主張，目標(biāo)受眾，市場(chǎng)特征，定價(jià)策略，這些東西確定了產(chǎn)品本身給人的感覺(jué)，應(yīng)該有的定位，這些東西都和設(shè)計(jì)息息相關(guān)。沒(méi)有做足夠深入的背景調(diào)研，就只能閉著眼睛畫(huà)圖了，這很難讓 APP 圖標(biāo)真正貼合產(chǎn)品，發(fā)揮功用。

企業(yè)和產(chǎn)品本身的狀況和數(shù)據(jù)對(duì)于設(shè)計(jì)的重要性，怎么強(qiáng)調(diào)都不算過(guò)分。認(rèn)真搞定這種準(zhǔn)備工作，絕對(duì)是磨刀不誤砍柴工。

2. 熟悉標(biāo)準(zhǔn)：仔細(xì)研讀設(shè)計(jì)規(guī)范

雖然在圖標(biāo)的設(shè)計(jì)上，創(chuàng)意和想法并不受限制，但是在任何平臺(tái)上，都有著相對(duì)清晰的設(shè)計(jì)規(guī)范，它們是需要設(shè)計(jì)師嚴(yán)格遵守的。設(shè)計(jì)規(guī)范讓圖標(biāo)在一個(gè)范圍內(nèi)和其他的圖標(biāo)在視覺(jué)上保持著足夠的協(xié)調(diào)，設(shè)計(jì)師可以在規(guī)范范圍內(nèi)讓圖標(biāo)更加「出彩」，而不是「突兀」。

在 Android 平臺(tái)和 iOS 的設(shè)計(jì)規(guī)范中，對(duì)于圖標(biāo)的設(shè)計(jì)和使用有著非常清晰的說(shuō)明，從配色到尺寸大小，包括樣式和具體使用場(chǎng)景。請(qǐng)盡量遵循圖標(biāo)設(shè)計(jì)的技術(shù)規(guī)格和設(shè)計(jì)建議，因?yàn)樵S多問(wèn)題和障礙是設(shè)計(jì)規(guī)范的制定者已經(jīng)考慮清楚了，遵循規(guī)范能夠讓你的設(shè)計(jì)繞過(guò)很多坑。

3. 選對(duì)工具：大家通常用這些軟件

通常情況下，最終輸出的圖標(biāo)會(huì)使用 PNG 格式，不論你選擇什么樣的工具，至少要能夠輸出PNG 格式的圖標(biāo)。當(dāng)然，這只是選擇軟件工具過(guò)程中很小的一個(gè)條件。目前，絕大多數(shù)的設(shè)計(jì)師都會(huì)選擇時(shí)下最常見(jiàn)、接受度最高的專業(yè)軟件，其中幾個(gè)甚至就是行業(yè)標(biāo)準(zhǔn)本身：

• Adobe Illustrator CC ，也就是常說(shuō)的 AI，是最好的矢量設(shè)計(jì)工具之一，歷史悠久。

• Adobe Photoshop CC，是目前使用范圍最廣也是最好的位圖編輯軟件，無(wú)論是制作光影還是陰影效果，都非常的稱手。

• Sketch 是一款有著友好界面和豐富插件的矢量圖形編輯和 UI設(shè)計(jì)軟件，對(duì)于復(fù)雜的設(shè)計(jì)它可能不是最好的選擇，但是拓展性足夠強(qiáng)大，許多功能都是基于現(xiàn)代的 UI 和移動(dòng)端的設(shè)計(jì)來(lái)開(kāi)發(fā)的。

• Affinity Designer 是矢量繪圖軟件中的新貴，有著足夠干凈的 UI，非常適合初學(xué)者。

4. 注意細(xì)節(jié)：簡(jiǎn)約而富有凝聚性

在設(shè)計(jì)圖標(biāo)的過(guò)程中，記得隨時(shí)審視圖標(biāo)，看看是否缺少一些關(guān)鍵性的信息，關(guān)鍵性的元素是否缺失了，是否有多余的東西。眾所周知，APP 的圖標(biāo)被設(shè)計(jì)出來(lái)之后，會(huì)出現(xiàn)在不同的場(chǎng)合，大小也不盡相同，隨著大小尺寸的變化，有些信息會(huì)變得不夠顯著，擁有太多細(xì)節(jié)的圖標(biāo)會(huì)在縮小的時(shí)候顯得非常混亂，所以將過(guò)多的文本和圖片細(xì)節(jié)融入到 APP 圖標(biāo)當(dāng)中，是非常沒(méi)有必要的。

簡(jiǎn)約的圖標(biāo)設(shè)計(jì)不僅僅是一種風(fēng)格上的選取，它在功能和體驗(yàn)上的優(yōu)勢(shì)也非常的明顯。不要指望將大量的隱喻和內(nèi)容都包含在同一個(gè)圖標(biāo)當(dāng)中，抓住最主要的概念和想法，并且用清晰的輪廓、簡(jiǎn)單的元素來(lái)呈現(xiàn)它。至少絕大多數(shù)大型企業(yè)和優(yōu)秀的團(tuán)隊(duì)都傾向于使用直截了當(dāng)?shù)脑O(shè)計(jì)。

5. 結(jié)合品牌：記得考慮品牌風(fēng)格指南

每個(gè)品牌都有著獨(dú)特的設(shè)計(jì)，從配色方案到細(xì)節(jié)元素的樣式，通常都有著相對(duì)明確的定位。品牌風(fēng)格指南在絕大多數(shù)的品牌當(dāng)中，已經(jīng)具備了非常明確的說(shuō)明文檔。為了讓 APP 的圖標(biāo)和品牌的聯(lián)系足夠清晰，最好參考品牌風(fēng)格指南來(lái)進(jìn)行設(shè)計(jì)，這樣確保用戶在看到 APP 的第一眼就能夠從視覺(jué)上與品牌本身構(gòu)成關(guān)聯(lián)。

6. 艱難取舍：讓你的圖標(biāo)替APP發(fā)聲

當(dāng)你想到電子郵件的時(shí)候，你的腦海當(dāng)中想到的第一個(gè)意象是什么？是信封，對(duì)嗎？那么，當(dāng)你在蘋(píng)果的 App Store 中搜索郵箱的時(shí)候，會(huì)發(fā)現(xiàn)一大堆的信封樣式的圖標(biāo)，各種配色和風(fēng)格都有，不一而足。

一方面，使用大眾所熟知的意象來(lái)設(shè)計(jì)圖標(biāo)，確實(shí)非常成熟，被廣泛的認(rèn)知，大家非常容易理解。而這種設(shè)計(jì)策略還有另外一面：類似的設(shè)計(jì)意味著激烈的競(jìng)爭(zhēng)。這件事情可能是設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)的時(shí)候，所面臨的最大的挑戰(zhàn)：設(shè)計(jì)師需要在原創(chuàng)性和功能性之間，做艱難的取舍。

7. 知己知彼：仔細(xì)審視競(jìng)爭(zhēng)對(duì)手的設(shè)計(jì)

留出足夠的時(shí)間來(lái)對(duì)競(jìng)爭(zhēng)對(duì)手進(jìn)行調(diào)研，了解競(jìng)爭(zhēng)對(duì)手的功能，APP的設(shè)計(jì)，圖標(biāo)的構(gòu)思，這樣可以讓設(shè)計(jì)師足以排除已有的設(shè)計(jì)，在營(yíng)造獨(dú)特性上獲得思路，避免作出和競(jìng)爭(zhēng)對(duì)手相似的設(shè)計(jì)，降低風(fēng)險(xiǎn)。

有些甲方喜歡使用和競(jìng)爭(zhēng)對(duì)手相似的元素，這同樣有其優(yōu)勢(shì)在，因?yàn)橄嗨粕踔料嗤脑卮_實(shí)會(huì)讓一些用戶面對(duì)這個(gè)新的 APP 的時(shí)候，產(chǎn)生信任感和同理心。但是和之前所提到的很多問(wèn)題一樣，這需要設(shè)計(jì)師來(lái)取舍，或者控制中間的程度。看起來(lái)太過(guò)相似，用戶會(huì)視之為山寨和跟隨者，缺乏獨(dú)特性，很容易讓人在使用過(guò)程中失去信任，甚至完全放棄。

8. 開(kāi)始設(shè)計(jì)：選擇正確的色彩和展現(xiàn)形式

終于到了這個(gè)熟悉的環(huán)節(jié)了。優(yōu)秀的配色和有趣的圖形，確實(shí)能夠讓圖標(biāo)在視覺(jué)上脫穎而出。在選擇色彩這個(gè)環(huán)節(jié)，很多設(shè)計(jì)師都很容易收不住手，許多色彩擠壓在小小的圖標(biāo)當(dāng)中，會(huì)讓圖標(biāo)變得像現(xiàn)代藝術(shù)品一樣。這個(gè)時(shí)候，需要在已經(jīng)限定的色彩范圍內(nèi)（品牌用色），結(jié)合色彩心理學(xué)，來(lái)構(gòu)建圖標(biāo)的色彩體系。

在紙上繪制圖標(biāo)的原型，探索基本的想法和構(gòu)圖，是非常有效的手段，無(wú)論你會(huì)不會(huì)手繪，這個(gè)過(guò)程都會(huì)讓你的設(shè)計(jì)過(guò)程更加順暢，很多創(chuàng)意和想法，會(huì)在紙和筆的摩擦中，逐漸誕生，這一點(diǎn)，是許多數(shù)字軟件都無(wú)法替代的。

此外，運(yùn)用基本的幾何圖形（圓形、方形、三角形等）來(lái)創(chuàng)建圖標(biāo)的基本框架，非常有用。請(qǐng)記住，任何復(fù)雜的圖標(biāo)都是在簡(jiǎn)單的圖形的基礎(chǔ)上創(chuàng)建出來(lái)的。

9. 多做檢驗(yàn)：繞不過(guò)的實(shí)際測(cè)試

無(wú)論你的 APP 圖標(biāo)出現(xiàn)在什么地方，你都希望它看起來(lái)是非常不錯(cuò)的，對(duì)吧？所以，接下來(lái)繞不過(guò)的環(huán)節(jié)，就是要在不同的場(chǎng)合、不同的地方測(cè)試圖標(biāo)的設(shè)計(jì)，是否有足夠的對(duì)比度，是否看起來(lái)足夠清晰，是否能夠融入相應(yīng)的場(chǎng)景，是否貼合品牌的氣質(zhì)，等等。

• 檢查不同尺寸的 APP 圖標(biāo)，主要注意看小尺寸的圖標(biāo)是否可以看得清，識(shí)別度如何，大尺寸的圖標(biāo)是否有不恰當(dāng)?shù)脑O(shè)計(jì)；

• 使用不同的背景來(lái)查看APP 圖標(biāo)，看看圖標(biāo)在不同色彩、樣式的背景下，是否有足夠的對(duì)比度；

• 了解圖標(biāo)在不同分辨率下的樣子；

• 不要只在 App Store 和 Google Play 下測(cè)試圖標(biāo)的外觀，還可以將圖標(biāo)放到隨機(jī)某個(gè)用戶的屏幕上，看看實(shí)際的效果。

八. 注意事項(xiàng)

關(guān)于應(yīng)用圖標(biāo)就BB這么多，其實(shí)我們平時(shí)在用APP的時(shí)候都沒(méi)真正留意過(guò)它，但是它是我們打開(kāi)軟件的第一步，如何在同類型的的界面上面脫穎而出，是每個(gè)設(shè)計(jì)師該去思考的問(wèn)題！

系列文章閱讀

UI設(shè)計(jì)進(jìn)階干貨 - 首頁(yè)

UI設(shè)計(jì)進(jìn)階干貨-注冊(cè)登錄

UI設(shè)計(jì)進(jìn)階干貨-引導(dǎo)頁(yè)

UI設(shè)計(jì)進(jìn)階干貨-閃屏

UI設(shè)計(jì)進(jìn)階干貨-重陽(yáng)節(jié)閃屏賞析

UI設(shè)計(jì)進(jìn)階干貨-列表頁(yè)

UI設(shè)計(jì)進(jìn)階干貨 - 切圖&命名

UI設(shè)計(jì)進(jìn)階干貨 - 適配&標(biāo)注

相關(guān)文章

我要進(jìn)群

想要辭職的第896天

iOS設(shè)計(jì)尺寸規(guī)范

Android設(shè)計(jì)尺寸規(guī)范

小程序設(shè)計(jì)規(guī)范

Web UI 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范

平面設(shè)計(jì)基礎(chǔ)常識(shí)匯總

全鏈路UI設(shè)計(jì)師了解一下

令人驚嘆的網(wǎng)頁(yè)設(shè)計(jì)長(zhǎng)什么樣？

超贊的27個(gè)高質(zhì)量免費(fèi)圖片網(wǎng)站

3小時(shí)內(nèi)創(chuàng)下150萬(wàn)流量的H5都長(zhǎng)什么樣？

成體系！UI自學(xué)教程大禮包全新上線

120G頂級(jí)C4D教程強(qiáng)勢(shì)來(lái)襲

你和大神之間只差一份高級(jí)進(jìn)階教程

100集國(guó)際頂尖AE視頻教程強(qiáng)勢(shì)來(lái)襲

100G頂尖游戲原畫(huà)視頻教程限時(shí)免費(fèi)領(lǐng)?。?/a>

iPhone X 人機(jī)交互指南及其設(shè)計(jì)細(xì)節(jié)

一款A(yù)PP從設(shè)計(jì)到切圖標(biāo)注適配全記錄

2018年網(wǎng)頁(yè)設(shè)計(jì)的19個(gè)趨勢(shì)！

WUI | 極簡(jiǎn)網(wǎng)頁(yè)界面設(shè)計(jì)

2018現(xiàn)役最全的14種平面設(shè)計(jì)風(fēng)格

10個(gè)讓人上癮的設(shè)計(jì)神器1

讓人上癮的設(shè)計(jì)神器2之大氣星球

H5十大云端神器“仙”界有名

無(wú)需代碼！9個(gè)最強(qiáng)設(shè)計(jì)師作品集制作神器

明明我比他厲害為什么我收到offer比他少一半？

萬(wàn)字干貨！這可能是最全面的交互基礎(chǔ)知識(shí)總結(jié)

近兩萬(wàn)字的干貨！最全面的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)全攻略

關(guān)鍵詞回復(fù)：

軟件下載 、UI學(xué)習(xí) 、面試技巧、Banner，樣機(jī)下載

LOGO、C4D教程，名片，包裝，字體下載

設(shè)計(jì)規(guī)范，創(chuàng)意合成，作品集模板

(可見(jiàn)相對(duì)應(yīng)知識(shí)文章）