圖標(biāo)在產(chǎn)品中的應(yīng)用非常重要，不同位置的圖標(biāo)有不同的設(shè)計(jì)思路。本文將從產(chǎn)品和設(shè)計(jì)兩個(gè)角度對(duì)底部導(dǎo)航欄的圖標(biāo)進(jìn)行分析。閱讀之前，請(qǐng)先瀏覽文章的大綱。

01 底部導(dǎo)航欄圖標(biāo)重要性及維度

• 重要性

• 三個(gè)重要評(píng)估維度

02 底部導(dǎo)航入口的數(shù)量

• 認(rèn)知心理學(xué)決定最高數(shù)值

• 產(chǎn)品框架決定具體數(shù)值

03 底部導(dǎo)航欄的模式

• 權(quán)重平分

• 強(qiáng)調(diào)信息 

• 引導(dǎo)操作

04 底部導(dǎo)航欄的表現(xiàn)形式

• 線(xiàn)性圖標(biāo)的優(yōu)勢(shì)

• 其它圖標(biāo)趨勢(shì)

05 圖標(biāo)設(shè)計(jì)思路與創(chuàng)意

• 權(quán)重平分模式示例

• 強(qiáng)調(diào)信息模式示例

• 引導(dǎo)操作模式示例

01 底部導(dǎo)航欄圖標(biāo)重要性及維度

• 重要性

底部導(dǎo)航欄的圖標(biāo)是路牌，承擔(dān)著指路的作用，給用戶(hù)指明進(jìn)入產(chǎn)品后可以分別通往什么頁(yè)面。早期的底部導(dǎo)航欄是單一的指路功能，經(jīng)過(guò)多年的交互設(shè)計(jì)迭代后，附加了“信息展示”和“引導(dǎo)操作”的作用，這點(diǎn)會(huì)在下文中詳細(xì)闡述。

• 三個(gè)重要評(píng)估維度

（1）品牌調(diào)性

品牌調(diào)性決定了圖標(biāo)的體量感、差異化和創(chuàng)意延展。怎樣評(píng)估圖標(biāo)設(shè)計(jì)能夠體現(xiàn)出品牌調(diào)性呢？最簡(jiǎn)單直接的方法：截屏首頁(yè)，不看頂部欄，僅從底部導(dǎo)航欄能看出來(lái)這是什么產(chǎn)品，就算成功體現(xiàn)了品牌調(diào)性。

（2）識(shí)別度

識(shí)別度決定了用戶(hù)辨識(shí)其它頁(yè)面功能的速度。高識(shí)別度的圖標(biāo)能協(xié)助用戶(hù)辨識(shí)，低識(shí)別度的圖標(biāo)會(huì)阻礙用戶(hù)辨識(shí)。在選擇做這部分圖標(biāo)的時(shí)候，一定要考慮識(shí)別度的問(wèn)題，進(jìn)行創(chuàng)新要建立在高識(shí)別度的基礎(chǔ)上。

（3）美觀(guān)

導(dǎo)航欄圖標(biāo)美觀(guān)的要義是：統(tǒng)一、精致。統(tǒng)一不代表絕對(duì)統(tǒng)一，精致不代表過(guò)于精細(xì)。要做到美觀(guān)，可以遵循以下幾點(diǎn)：大小統(tǒng)一和諧、線(xiàn)條粗細(xì)一致、圓角視覺(jué)統(tǒng)一、內(nèi)容繁簡(jiǎn)平衡。

將三個(gè)維度按重要程度來(lái)排序，是品牌調(diào)性>識(shí)別度>美觀(guān)。有的設(shè)計(jì)師會(huì)選擇以美觀(guān)度作為優(yōu)先標(biāo)準(zhǔn)。但站在產(chǎn)品的角度來(lái)說(shuō)，應(yīng)該以體現(xiàn)品牌調(diào)性和識(shí)別度為重要標(biāo)準(zhǔn)，在這基礎(chǔ)上再進(jìn)行美觀(guān)設(shè)計(jì)。下圖中，新華書(shū)店APP的底部導(dǎo)航欄圖標(biāo)略顯年代感，圖標(biāo)細(xì)節(jié)表現(xiàn)不一顯得不夠統(tǒng)一和精致，然而用戶(hù)還是能夠根據(jù)圖標(biāo)一眼區(qū)分各個(gè)導(dǎo)航入口的功能。它們可能不是設(shè)計(jì)師眼中好看的圖標(biāo)，但它們是用戶(hù)眼中好用的圖標(biāo)。 

02 底部導(dǎo)航入口的數(shù)量

底部導(dǎo)航入口一般在3-5個(gè)，最常見(jiàn)的是4-5個(gè)。這個(gè)數(shù)量由什么決定呢？

• 最高數(shù)值由認(rèn)知心理學(xué)決定

在認(rèn)知心理學(xué)理論中，人的記憶系統(tǒng)由三個(gè)儲(chǔ)存器組成：感覺(jué)寄存器，短時(shí)記憶和長(zhǎng)時(shí)記憶。來(lái)自環(huán)境的刺激經(jīng)過(guò)過(guò)濾首先進(jìn)入感覺(jué)寄存器，通過(guò)選擇性直覺(jué)，信息被臨時(shí)傳入短時(shí)記憶（STM）。它是一個(gè)過(guò)渡性的記憶緩沖期，容量有限，只能記錄7+-2個(gè)信息組塊，且只能保持大約15-30秒。

在使用APP的時(shí)候，底部導(dǎo)航欄使用到的是人記憶系統(tǒng)中的感覺(jué)寄存器和短時(shí)記憶?？紤]到APP面對(duì)的人群非常廣，短時(shí)記憶容量不一，選擇了7-2（也就是5）作為底部導(dǎo)航入口的最高數(shù)值。

• 具體數(shù)值由產(chǎn)品的框架決定

產(chǎn)品經(jīng)理會(huì)通過(guò)項(xiàng)目背景和用戶(hù)調(diào)研，決定產(chǎn)品的功能結(jié)構(gòu)。而功能結(jié)構(gòu)圖劃分的類(lèi)別決定了底部導(dǎo)航入口數(shù)量。有的產(chǎn)品功能非常單一，結(jié)構(gòu)也單一，三個(gè)導(dǎo)航入口已經(jīng)能夠滿(mǎn)足需求；有的產(chǎn)品功能復(fù)雜，則需要更多的導(dǎo)航入口，用以劃分APP功能，幫助用戶(hù)快速識(shí)別。

03 底部導(dǎo)航欄模式

底部導(dǎo)航欄有權(quán)重平分、強(qiáng)調(diào)信息、引導(dǎo)操作這三種模式。本次深度分析采用了30個(gè)產(chǎn)品作為對(duì)象進(jìn)行研究，其中大部分為知名社交電商類(lèi)產(chǎn)品。因?yàn)檫@類(lèi)型的產(chǎn)品比較多，迭代完善，可參考性強(qiáng)。

• 權(quán)重平分

當(dāng)產(chǎn)品的功能結(jié)構(gòu)權(quán)重比較平均，不希望突出其中某個(gè)結(jié)構(gòu)時(shí)，一般采用權(quán)重平分的模式，即每個(gè)底部入口的分量都是平均的。常規(guī)產(chǎn)品會(huì)采用這樣的形式。

• 強(qiáng)調(diào)信息

當(dāng)產(chǎn)品需要強(qiáng)調(diào)某些信息引起用戶(hù)注意或同一個(gè)按鈕承擔(dān)兩個(gè)功能時(shí)，設(shè)計(jì)便可以選擇在某個(gè)入口添加明顯的信息指示或功能。增加功能的底部導(dǎo)航入口不一定是首頁(yè)，也可以是其它入口。

嚴(yán)選的首頁(yè)按鈕承擔(dān)著“回到頂部/快速定位推薦模塊/品牌展示”的功能；淘寶、飛豬的首頁(yè)按鈕承擔(dān)著“回到頂部/品牌展示”的功能；微博的視頻按鈕承擔(dān)著“視頻/關(guān)注的人更新內(nèi)容提示”的功能。

• 引導(dǎo)操作

當(dāng)產(chǎn)品希望用戶(hù)能夠進(jìn)行某個(gè)操作，需要進(jìn)行強(qiáng)操作提醒時(shí)，可以選擇引導(dǎo)操作的導(dǎo)航欄模式，在中心突出操作按鈕。大眾點(diǎn)評(píng)、百果園、轉(zhuǎn)轉(zhuǎn)、星巴克、閑魚(yú)等都是采用這種模式。

04 底部導(dǎo)航欄圖標(biāo)表現(xiàn)形式

• 線(xiàn)性圖標(biāo)的優(yōu)勢(shì)

從大多數(shù)APP設(shè)計(jì)來(lái)看，未選中狀態(tài)下，線(xiàn)性圖標(biāo)占有優(yōu)勢(shì)。相對(duì)面性圖標(biāo)來(lái)說(shuō)，線(xiàn)性圖標(biāo)有更多可能性，且選中與未選中的區(qū)分落差較大，對(duì)比明顯。

• 其它圖標(biāo)趨勢(shì)

未選中狀態(tài)的圖標(biāo)常用線(xiàn)性方式，目前的主要趨勢(shì)還是在圖標(biāo)表意上下功夫；選中狀態(tài)的圖標(biāo)常用面性、微質(zhì)感、立體、插畫(huà)等方式。

05 圖標(biāo)設(shè)計(jì)思路與創(chuàng)意

為了直觀(guān)表現(xiàn)圖標(biāo)設(shè)計(jì)的思路，我為權(quán)重平分模式、強(qiáng)調(diào)信息模式、引導(dǎo)操作模式分別設(shè)定不同的產(chǎn)品背景，把圖標(biāo)設(shè)計(jì)的過(guò)程寫(xiě)下來(lái)供大家參考。

• 權(quán)重平分模式示例

• 強(qiáng)調(diào)信息模式示例

• 引導(dǎo)操作模式示例

06 結(jié)語(yǔ)

圖標(biāo)對(duì)我而言最有趣的地方在于，它是由不同的變量組合出來(lái)的結(jié)果，每一次的設(shè)計(jì)都會(huì)有驚喜。不同的品牌、不同的產(chǎn)品背景、不同的產(chǎn)品框架...這些千變?nèi)f化，讓圖標(biāo)有了生命，也讓每一次的設(shè)計(jì)都有意義。也歡迎你使用這樣的方式，組合變量，做更多突破性的設(shè)計(jì)。