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

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

目前小圖標的使用場景現狀分析

國內的現狀

小圖標系統沒有一個明確的指導規范，導致各家根據自己視覺語言去定義圖標使用規則，質量參差不齊，小的產品就參考大廠所做的產品圖標，其實不明白他們為何這樣做，沒有一個清晰的邏輯，最后導致系統圖標設計不嚴謹。

國外的現狀

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

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

行業標桿產品小圖標使用規則分析

要想做得更好，就要先了解行業標桿產品是如何做的

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

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

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

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

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

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

KEEP 算是我經常用的一個健身產品，這里我要吐槽下他們的系統圖標使用沒有邏輯。

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

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

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

總結

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

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

本文由 @TONY 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議