在本期中，我們將討論在APP中使用小圖標(biāo)的規(guī)則。產(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)沒有明確的指導(dǎo)原則，這導(dǎo)致根據(jù)他們自己的視覺語言定義圖標(biāo)的使用規(guī)則。產(chǎn)品質(zhì)量不同。小型產(chǎn)品是指大型制造商生產(chǎn)的產(chǎn)品圖標(biāo)。事實(shí)上，他們不明白為什么他們這樣做。一個(gè)明確的邏輯，最終系統(tǒng)圖標(biāo)設(shè)計(jì)并不嚴(yán)謹(jǐn)。

　　國外的現(xiàn)狀

相對(duì)國內(nèi)而言，這種情況在國外比較少見。原因是大多數(shù)外國產(chǎn)品都有一個(gè)單一的業(yè)務(wù)。與具有特色社會(huì)主義的國內(nèi)產(chǎn)品不同，業(yè)務(wù)豐富，產(chǎn)品復(fù)雜，最具代表性的是（淘寶，天貓，京東）。 ，手機(jī)QQ）

廢話結(jié)束后，以下是主題。讓我們分析小圖標(biāo)的場(chǎng)景規(guī)則的使用

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

要做得更好，您需要了解行業(yè)基準(zhǔn)產(chǎn)品的完成方式

Facebook系統(tǒng)圖標(biāo)通常使用面部和線性圖標(biāo)，并且在設(shè)置界面中使用帶背板的圖標(biāo)（以區(qū)分不同的服務(wù)）。界面圖標(biāo)在底板上具有相同的面部圖標(biāo)，頂部導(dǎo)航?jīng)]有地板樣式圖標(biāo)樣式。每個(gè)人都關(guān)注它。 Facebook使用圖標(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ò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是中國比較復(fù)雜的產(chǎn)品之一。產(chǎn)品越復(fù)雜，圖標(biāo)就越難。天貓?jiān)谶@里使用三種類型的圖標(biāo)，在主頁的頂部，有幾個(gè)獨(dú)立的品牌。圖標(biāo)樣式風(fēng)格不同于其他平面插圖樣式，其余的頂部和底部導(dǎo)航都是線性圖標(biāo)，在我的頁面中，實(shí)際上（付費(fèi)，等待發(fā)貨，等待收據(jù)等）這些圖標(biāo)都是合理的線性，這些功能被認(rèn)為是更重要的功能，因此這里使用了臉部圖標(biāo)，圖標(biāo)顏色顏色圓角與線性聚焦顏色功能一致。

必要的工具屬于單獨(dú)的列條目，因此圖標(biāo)樣式與其他工具不同

KEEP是我經(jīng)常使用的健身產(chǎn)品。在這里，我不得不嘔吐他們的系統(tǒng)圖標(biāo)，不使用任何邏輯。

首先，它與導(dǎo)航圖標(biāo)相同。為什么兩個(gè)地方的圖標(biāo)樣式不一致？不一致的原因是什么？ （藍(lán)框）

在紅色框部分中，兩個(gè)圖標(biāo)使用具有底部表面樣式的圖標(biāo)。在這里，請(qǐng)用顏色來區(qū)分兩個(gè)圖標(biāo)的含義。在我的頁面中，這是一個(gè)功能圖標(biāo)，顏色與底部選項(xiàng)卡相同，找到的頁面上的圖標(biāo)屬于Column圖標(biāo)，使用藍(lán)色進(jìn)行區(qū)分，有點(diǎn)類似于天貓APP我的頁面

Spotify系統(tǒng)圖標(biāo)，每個(gè)人都應(yīng)該非常清楚，基準(zhǔn)產(chǎn)品，圖標(biāo)的整體風(fēng)格是一樣的，在心情類型中使用大臉圖標(biāo)來區(qū)分各種風(fēng)格。整體使用2種圖標(biāo)

　　總結(jié)

上面列出的是幾個(gè)產(chǎn)品來說明，每個(gè)人都應(yīng)該清楚地了解如何定義產(chǎn)品的圖標(biāo)使用規(guī)則，我們必須理解為什么圖標(biāo)功能被明確區(qū)分，實(shí)際上，目的是為了以后管理，制定規(guī)范，使其更系統(tǒng)，更一致，并降低產(chǎn)品復(fù)雜性

« 結(jié)合虛擬和真實(shí)兩條線蘇寧店實(shí)現(xiàn)零售革命 | 2017年即將結(jié)束。網(wǎng)易大師如何做設(shè)計(jì)年度總結(jié)？ »