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

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

目前小圖標的使用場景現(xiàn)狀分析

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

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

國外的現(xiàn)狀

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

廢話說完，下面進入正題。我們來分析下小圖標使用場景規(guī)則

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

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

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

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

Airbnb的整個系統(tǒng)圖標視覺語言都是以線性為主，圖標視覺線索和產(chǎn)品圖標風格一致，都是線性，從品牌傳達上得以繼承啟動圖標的視覺語言，airbnb之所以圖標全部是線性是因為所有圖標都指向意思都明確，都是功能描述性圖標

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

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

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

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

首先同為導航圖標，為何兩個地方圖標樣式風格不一致？有什么理由不一致？（藍色框）

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

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

總結(jié)

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

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

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

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