如何做好底部導航欄圖標設計？來看高級設計師的全面總結！

圖標在產品中的應用非常重要，不同位置的圖標有不同的設計思路。本文將從產品和設計兩個角度對底部導航欄的圖標進行分析。閱讀之前，請先瀏覽文章的大綱。

01 底部導航欄圖標重要性及維度

• 重要性
• 三個重要評估維度

02 底部導航入口的數量

• 認知心理學決定最高數值
• 產品框架決定具體數值

03 底部導航欄的模式

• 權重平分
• 強調信息
• 引導操作

04 底部導航欄的表現形式

• 線性圖標的優勢
• 其它圖標趨勢

05 圖標設計思路與創意

• 權重平分模式示例
• 強調信息模式示例
• 引導操作模式示例

底部導航欄圖標重要性及維度

1. 重要性

底部導航欄的圖標是路牌，承擔著指路的作用，給用戶指明進入產品后可以分別通往什么頁面。早期的底部導航欄是單一的指路功能，經過多年的交互設計迭代后，附加了「信息展示」和「引導操作」的作用，這點會在下文中詳細闡述。

2. 三個重要評估維度

品牌調性

品牌調性決定了圖標的體量感、差異化和創意延展。怎樣評估圖標設計能夠體現出品牌調性呢？最簡單直接的方法：截屏首頁，不看頂部欄，僅從底部導航欄能看出來這是什么產品，就算成功體現了品牌調性。

識別度

識別度決定了用戶辨識其它頁面功能的速度。高識別度的圖標能協助用戶辨識，低識別度的圖標會阻礙用戶辨識。在選擇做這部分圖標的時候，一定要考慮識別度的問題，進行創新要建立在高識別度的基礎上。

美觀

導航欄圖標美觀的要義是：統一、精致。統一不代表絕對統一，精致不代表過于精細。要做到美觀，可以遵循以下幾點：大小統一和諧、線條粗細一致、圓角視覺統一、內容繁簡平衡。

將三個維度按重要程度來排序，是品牌調性>識別度>美觀。有的設計師會選擇以美觀度作為優先標準。但站在產品的角度來說，應該以體現品牌調性和識別度為重要標準，在這基礎上再進行美觀設計。下圖中，新華書店APP的底部導航欄圖標略顯年代感，圖標細節表現不一顯得不夠統一和精致，然而用戶還是能夠根據圖標一眼區分各個導航入口的功能。它們可能不是設計師眼中好看的圖標，但它們是用戶眼中好用的圖標。

底部導航入口的數量

底部導航入口一般在3-5個，最常見的是4-5個。這個數量由什么決定呢？

1. 最高數值由認知心理學決定

在認知心理學理論中，人的記憶系統由三個儲存器組成：感覺寄存器，短時記憶和長時記憶。來自環境的刺激經過過濾首先進入感覺寄存器，通過選擇性直覺，信息被臨時傳入短時記憶（STM）。它是一個過渡性的記憶緩沖期，容量有限，只能記錄7+-2個信息組塊，且只能保持大約15-30秒。

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

2. 具體數值由產品的框架決定

產品經理會通過項目背景和用戶調研，決定產品的功能結構。而功能結構圖劃分的類別決定了底部導航入口數量。有的產品功能非常單一，結構也單一，三個導航入口已經能夠滿足需求；有的產品功能復雜，則需要更多的導航入口，用以劃分APP功能，幫助用戶快速識別。

底部導航欄模式

底部導航欄有權重平分、強調信息、引導操作這三種模式。本次深度分析采用了30個產品作為對象進行研究，其中大部分為知名社交電商類產品。因為這類型的產品比較多，迭代完善，可參考性強。

1. 權重平分

當產品的功能結構權重比較平均，不希望突出其中某個結構時，一般采用權重平分的模式，即每個底部入口的分量都是平均的。常規產品會采用這樣的形式。

2. 強調信息

當產品需要強調某些信息引起用戶注意或同一個按鈕承擔兩個功能時，設計便可以選擇在某個入口添加明顯的信息指示或功能。增加功能的底部導航入口不一定是首頁，也可以是其它入口。

嚴選的首頁按鈕承擔著「回到頂部/快速定位推薦模塊/品牌展示」的功能；淘寶、飛豬的首頁按鈕承擔著「回到頂部/品牌展示」的功能；微博的視頻按鈕承擔著「視頻/關注的人更新內容提示」的功能。

3. 引導操作

當產品希望用戶能夠進行某個操作，需要進行強操作提醒時，可以選擇引導操作的導航欄模式，在中心突出操作按鈕。大眾點評、百果園、轉轉、星巴克、閑魚等都是采用這種模式。

底部導航欄圖標表現形式

1. 線性圖標的優勢

從大多數APP設計來看，未選中狀態下，線性圖標占有優勢。相對面性圖標來說，線性圖標有更多可能性，且選中與未選中的區分落差較大，對比明顯。

2. 其它圖標趨勢

未選中狀態的圖標常用線性方式，目前的主要趨勢還是在圖標表意上下功夫；選中狀態的圖標常用面性、微質感、立體、插畫等方式。

圖標設計思路與創意

為了直觀表現圖標設計的思路，我為權重平分模式、強調信息模式、引導操作模式分別設定不同的產品背景，把圖標設計的過程寫下來供大家參考。

1. 權重平分模式示例

2. 強調信息模式示例

3. 引導操作模式示例

結語

圖標對我而言最有趣的地方在于，它是由不同的變量組合出來的結果，每一次的設計都會有驚喜。不同的品牌、不同的產品背景、不同的產品框架...這些千變萬化，讓圖標有了生命，也讓每一次的設計都有意義。也歡迎你使用這樣的方式，組合變量，做更多突破性的設計。

關于產品圖標體系：

歡迎關注作者微信公眾號：「一點牙線」