本期聊聊一個(gè) APP 內(nèi)的小圖標(biāo)使用規(guī)則，在一個(gè)產(chǎn)品里面需要多少種圖標(biāo)才滿足功能，才不會(huì)讓界面看起來亂，如何把控系統(tǒng)圖標(biāo)樣式，那么今天就來聊聊。

這里我把圖標(biāo)分為：基本的功能圖標(biāo)（比如Tab bar/頂部導(dǎo)航/設(shè)置界面一些圖標(biāo)），欄目圖標(biāo)（點(diǎn)擊入口進(jìn)入一個(gè)獨(dú)立的欄目頁面,一般在頁面內(nèi)），品牌圖標(biāo)（點(diǎn)擊進(jìn)去就是一個(gè)獨(dú)立品牌）下面開始。

目前小圖標(biāo)的使用場(chǎng)景現(xiàn)狀分析

國內(nèi)的現(xiàn)狀

小圖標(biāo)系統(tǒng)沒有一個(gè)明確的指導(dǎo)規(guī)范，導(dǎo)致各家根據(jù)自己視覺語言去定義圖標(biāo)使用規(guī)則，質(zhì)量參差不齊，小的產(chǎn)品就參考大廠所做的產(chǎn)品圖標(biāo)，其實(shí)不明白他們?yōu)楹芜@樣做，沒有一個(gè)清晰的邏輯，最后導(dǎo)致系統(tǒng)圖標(biāo)設(shè)計(jì)不嚴(yán)謹(jǐn)。

國外的現(xiàn)狀

國外相對(duì)國內(nèi)來說 ，比較少出現(xiàn)這種情況，原因是國外大多產(chǎn)品業(yè)務(wù)單一，不像國內(nèi)，特色社會(huì)主義下的產(chǎn)物，業(yè)務(wù)豐富，產(chǎn)品復(fù)雜,最具代表性就是（淘寶，天貓，京東，手機(jī)QQ）

廢話說完，下面進(jìn)入正題。我們來分析下小圖標(biāo)使用場(chǎng)景規(guī)則

行業(yè)標(biāo)桿產(chǎn)品小圖標(biāo)使用規(guī)則分析

要想做得更好，就要先了解行業(yè)標(biāo)桿產(chǎn)品是如何做的

Facebook系統(tǒng)圖標(biāo)大體上使用了面型和線性圖標(biāo)，在設(shè)置界面使用了帶底板的圖標(biāo)（是為了區(qū)分不同業(yè)務(wù)），設(shè)置界面帶底板上面的面型圖標(biāo)和頂部導(dǎo)航未帶底板圖標(biāo)風(fēng)格樣式一致，且大家注意觀察沒有，F(xiàn)acebook 在圖標(biāo)上使用整體視覺語言是通過圓角大小來保證面型和線性的一致性。

總結(jié)分析：Facebook整體關(guān)鍵頁面使用圖標(biāo)風(fēng)格就面型和線性兩種。這樣保證視覺風(fēng)格不花哨，也能達(dá)到滿足產(chǎn)品需求，在主頁面，直播、照片、簽到其實(shí)屬于三個(gè)功能圖標(biāo)，按道理需使用線性圖標(biāo)，但這里Facebook ? 需要強(qiáng)調(diào)這個(gè)功能，所以使用了面型圖標(biāo)

Airbnb的整個(gè)系統(tǒng)圖標(biāo)視覺語言都是以線性為主，圖標(biāo)視覺線索和產(chǎn)品圖標(biāo)風(fēng)格一致，都是線性，從品牌傳達(dá)上得以繼承啟動(dòng)圖標(biāo)的視覺語言，airbnb之所以圖標(biāo)全部是線性是因?yàn)樗袌D標(biāo)都指向意思都明確，都是功能描述性圖標(biāo)

總結(jié)分析：Airbnb其實(shí)是業(yè)務(wù)相對(duì)來說算是單一的一個(gè)產(chǎn)品，所以整體設(shè)計(jì)輕量化，圖標(biāo)繼承LOGO 的視覺基因（線性）

天貓APP在國內(nèi)來說，業(yè)務(wù)算是比較復(fù)雜的一個(gè)產(chǎn)品之一，業(yè)務(wù)越復(fù)雜的產(chǎn)品，圖標(biāo)其實(shí)就不好控制，天貓這里使用了三種類型圖標(biāo)，在首頁頂部幾個(gè)獨(dú)立的品牌的圖標(biāo)樣式風(fēng)格和其他有所區(qū)別，扁平插畫風(fēng)格，其余頂部和底部導(dǎo)航都采用線性圖標(biāo)，在我的頁面，其實(shí)（代付款，待發(fā)貨，待收貨等）這幾個(gè)圖標(biāo)按道理需要使用線性的，這幾個(gè)功能算是比較常用的重要功能，所以這里使用了面型圖標(biāo)，圖標(biāo)顏色顏色圓角都和線性的焦點(diǎn)色功能上的一致。

必備工具屬于一個(gè)單獨(dú)的欄目入口，所以圖標(biāo)樣式有所區(qū)別與其他

KEEP 算是我經(jīng)常用的一個(gè)健身產(chǎn)品，這里我要吐槽下他們的系統(tǒng)圖標(biāo)使用沒有邏輯。

首先同為導(dǎo)航圖標(biāo)，為何兩個(gè)地方圖標(biāo)樣式風(fēng)格不一致？有什么理由不一致？（藍(lán)色框）

紅色框部分，兩個(gè)圖標(biāo)使用帶底板面風(fēng)格圖標(biāo)，在這里keep通過顏色來區(qū)分了兩種圖標(biāo)的表意，在我的頁這個(gè)屬于功能型圖標(biāo)，顏色和底部tab一致，在發(fā)現(xiàn)頁的圖標(biāo)屬于欄目圖標(biāo)，運(yùn)用了藍(lán)色來做區(qū)分，有點(diǎn)類似天貓APP我的頁

Spotify 系統(tǒng)圖標(biāo)，大家看了心里應(yīng)該很清晰了，標(biāo)桿性的產(chǎn)品，圖標(biāo)整體Style一致，在心情流派哪里用大的面圖標(biāo)來區(qū)分各種曲風(fēng)。整體使用圖標(biāo)就2種

總結(jié)

上面列舉了幾個(gè)產(chǎn)品來說明下，大家心里應(yīng)該有明白如何去定義產(chǎn)品的圖標(biāo)使用規(guī)則了，我們要明白為什么要把圖標(biāo)功能清晰的區(qū)分，其實(shí)目的為了后期管理，做規(guī)范，使其更加系統(tǒng)化，一致性更強(qiáng)，減少產(chǎn)品復(fù)雜程度

作者：Tony，微信公眾號(hào)：洞見設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

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

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