筆者今天將和大家分享下：設(shè)計(jì)師每天都會(huì)用到的圖標(biāo)的運(yùn)用場(chǎng)景、類型，以及講述：什么時(shí)候用什么類型圖標(biāo)？。

圖標(biāo)是什么？

圖標(biāo)廣義上是指有指示作用的標(biāo)志，也可以說(shuō)圖標(biāo)是一種“視覺語(yǔ)言”， 通過(guò)圖形表達(dá)出所代表對(duì)象的意義、特征以及信息。

圖標(biāo)已經(jīng)融入了我們的生活，它能夠快速幫助人們定位以及作出相應(yīng)的決定，比如：商場(chǎng)、洗手間、進(jìn)出口等指示牌、路上交通提示的標(biāo)志等等，所以圖標(biāo)不止是我們界面中才會(huì)用到。

圖標(biāo)的作用

在UI設(shè)計(jì)中，圖標(biāo)可以引導(dǎo)指示用戶，圖文并茂、生動(dòng)形象的幫助用戶快速的到達(dá)“目的地”，使得人機(jī)交互更容易；另外，還可以節(jié)省空間、增強(qiáng)界面美感。

圖標(biāo)運(yùn)用場(chǎng)景

1. 應(yīng)用商店

也就是手機(jī)桌面上的系統(tǒng)圖標(biāo)以及不同應(yīng)用的圖標(biāo)，可以看出：從早期的擬物化到如今的扁平化，圖標(biāo)能夠形象的表達(dá)出對(duì)應(yīng)的功能以及代表的應(yīng)用，幫助以及引導(dǎo)用戶快速進(jìn)入對(duì)應(yīng)的APP。

2. 功能入口

通常放在APP第一屏的位置，能夠?qū)PP的核心功能、或者用戶常用的入口直觀的展現(xiàn)給用戶。

另外還可豐富界面，比如：3-4個(gè)顏色（顏色類型多容易造成界面凌亂花哨）漸變的底色結(jié)合實(shí)色的面性圖標(biāo)，讓界面充滿活力。

常見的有APP中導(dǎo)航部分，通常是4-5個(gè)，最多10個(gè)，這里不宜放太多，從視覺上，會(huì)造成界面擁擠，影響美觀。

從產(chǎn)品的角度上講，這里的iCON一般各大功能入口，可以呈現(xiàn)出APP的主要功能，用戶能夠快速找到功能；這里圖標(biāo)除了引導(dǎo)導(dǎo)航作用，還能在大促時(shí)候做營(yíng)銷氛圍。

核心入口操作，如微博的發(fā)微博，閑魚的發(fā)布，中間“加號(hào)”，意義明晰，傳達(dá)給用戶的信息是點(diǎn)擊可添加編輯內(nèi)容，點(diǎn)擊之后對(duì)應(yīng)彈出界面呈現(xiàn)出核心的“買閑置”等3個(gè)功能入口；iCON不僅僅意義明確，同時(shí)要能承載對(duì)應(yīng)的交互功能。

3. 情感化

在一些直播軟件里面，圖標(biāo)能很好的傳遞出氛圍，幫助商業(yè)轉(zhuǎn)化，圖標(biāo)在這里起到作用非常大，很多時(shí)候平臺(tái)的收入就和這些圖形設(shè)計(jì)有關(guān)。

Same的頻道名稱前加上不同修飾的iCON，界面更有趣，更加符合年輕用戶喜好，圖標(biāo)在這里承載不止是功能，也是情感的傳遞。

4. 空白頁(yè)面

當(dāng)APP出現(xiàn)網(wǎng)絡(luò)不好、加載狀態(tài)、界面異常等等的時(shí)候；一定程度上會(huì)阻礙用戶影響用戶使用APP。

這時(shí)，我們可以運(yùn)用插圖或者圖標(biāo)作為配圖配合文案正確的、清晰的、直觀的表達(dá)出當(dāng)前的狀態(tài)；結(jié)合情感化設(shè)計(jì)與用戶產(chǎn)生情緒上的共鳴。

5. 彈窗

APP中有不同類型的彈窗，是不可缺少的組成部分；同理iCON作為配圖注入情感化設(shè)計(jì)，有趣生動(dòng)的彈窗不僅減少用戶的“厭惡感”還能增強(qiáng)互動(dòng)、鼓勵(lì)用戶完成引導(dǎo)提示功能。

6. 引導(dǎo)頁(yè)

通常情況，用戶會(huì)迫切的想要進(jìn)入到應(yīng)用內(nèi)部，因此會(huì)快速滑動(dòng)界面，所以想要在幾秒鐘內(nèi)讓用戶產(chǎn)生印象，好的配圖能夠不僅僅需要準(zhǔn)確到位的展示出APP更新內(nèi)容以及產(chǎn)品特色，還要讓用戶容易抓住關(guān)鍵點(diǎn)。

圖標(biāo)風(fēng)格類型

圖標(biāo)的風(fēng)格可以簡(jiǎn)單的分為線形圖標(biāo)、面形圖標(biāo)、線面結(jié)合的圖標(biāo)，可根據(jù)不同場(chǎng)景以及產(chǎn)品的調(diào)性去靈活運(yùn)用。

線形圖標(biāo)：由線條來(lái)組成的圖形，沒有填充色;界面中比較常用的常見，線的設(shè)計(jì)整體視覺感受比較輕量化。

面形圖標(biāo)：形狀是填充色，可用作功能入口，或者一些行業(yè)入口，圖標(biāo)填充為主，配合彩色使用。

線面結(jié)合：線條和填充的形狀組合，元素相對(duì)豐富。細(xì)節(jié)比較多，使用場(chǎng)景也比較靈活。

設(shè)計(jì)Tips

在設(shè)計(jì)圖標(biāo)的時(shí)候，首先提取產(chǎn)品的調(diào)性、面向的用戶群體、與之APP界面相符合的設(shè)計(jì)風(fēng)格；根據(jù)APP的定位選擇可愛的、 活潑的、有趣味性的、具備親和力的(可以選擇帶圓角的、筆畫柔和的圖標(biāo)、雙色或者多色的) ；還是穩(wěn)重的、安全的、可靠的（直角的、筆畫硬朗的、單色的）。

馬蜂窩提取了LOGO下面的弧度運(yùn)用在了每一個(gè)iCON上包括下劃線，品牌基因運(yùn)用的特別好在iCON上面貫穿了整個(gè)APP。

網(wǎng)易蝸牛則是用了面性的iCON，領(lǐng)讀的小書本、 書桌的小桌子都很深刻形象的傳達(dá)出這是一個(gè)閱讀的APP。

一些趨勢(shì)

漸變色運(yùn)用、雙色彩多色彩疊加或者組合使用，色彩方面不再是單一的色。

微小的交互動(dòng)效的使用，動(dòng)畫中融入情感化設(shè)計(jì)，讓人機(jī)交互更有趣，不再是靜止?fàn)顟B(tài)（比如：QQ 、 優(yōu)酷、愛奇藝、土牛、標(biāo)簽欄切換時(shí)候的icon加入了動(dòng)效設(shè)計(jì)）。

3個(gè)iCON切換的時(shí)候圖標(biāo)的表情視線跟著變換，(就好像當(dāng)前是我兄弟表現(xiàn)呢，咱們得看著支持下~是不是很有趣味性呢~) 聊天創(chuàng)空中語(yǔ)音一欄的iCON可特別留意“表情”iCON的點(diǎn)頭， QQ這里的iCON也運(yùn)用了漸變色。

總結(jié)

1. 圖標(biāo)可以簡(jiǎn)單理解為一種人們都讀懂的語(yǔ)言，也是界面必不可少的元素之一，因此圖標(biāo)必須要具備一下幾點(diǎn)：可識(shí)別性、唯一性、統(tǒng)一性、吸引力等等。
2. iCON的界面很重要的元素，它的表現(xiàn)形式多樣化：不同圖標(biāo)有自己性格特征，需要根據(jù)我們用戶、產(chǎn)品特征，以及設(shè)計(jì)趨勢(shì)結(jié)合去定義風(fēng)格。
3. 圖標(biāo)運(yùn)用場(chǎng)景多：可運(yùn)用與APP的系統(tǒng)圖標(biāo)、APP空狀態(tài)、APP彈窗、APP引導(dǎo)頁(yè)、APP界面導(dǎo)航、APP加載動(dòng)畫。正確的運(yùn)用能夠提升產(chǎn)品統(tǒng)一性，打造產(chǎn)品風(fēng)格主張。

作者：曼曼，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys）

本文由 @我們的設(shè)計(jì)日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。