App之底部導航欄的設計

筆者按：這是系列文章“App之xxx”的第二篇，第一篇我總結了 App之“文字”的設計技巧 。今天來總結下app的底部導航欄的設計。 我為什么寫這個系列的文章。因為我正在做一款app，我在團隊中主抓產品設計、UX/UI設計、部分前端開發，少量運營。在工作之余，我決定把所研究的內容寫成關于app之xxx的系列文章，文章選擇的題材會往“小而精”這個方向努力，范圍在我的工作內容中選取。

先來看看app常用的導航模式有哪些： 列表式、網格式、標簽導航、抽屜式導航 等。

簡單對比下優缺點：

• 列表式結構清晰明了，大部分應用于二級或三級頁面，最常見于"我的--設置"選項里，缺點是占的篇幅比較大，樣式比較單調。如領英的設置頁面

• 網格式與列表式類似，但排布更緊湊，顯示也更直觀，可在一頁容納更多選項，常見于一級頁面，電商類app一級頁面用的比較多，如淘寶的首頁

• 標簽式有頂部、底部兩大類，底部應用的最廣泛，因為底部比較方便大拇指點擊。比如上文2個例子。

• 抽屜式是把所有功能都收到一個按鈕里，這樣界面就非常干凈了，同時給功能操作帶來了隱蔽性，例子就不舉啦，安卓機的app很多這類的。。

那么，有沒有一種方式應用在一級頁面，可以集合這些優點：

• 列表式的結構清晰明了，

• 網格式的緊湊、直觀，

• 標簽式底部導航的便利拇指操作，

• 抽屜式容納更多選項，簡潔界面。

我們一步步推理下

1、由于需要便于拇指操作，這決定了我們只能在標簽式導航中的底部導航欄來進行改造。

2、底部導航欄的功能按鈕排布。這里把抽屜式的漢堡包按鈕，變成了“更多",我們可以把一些不常用的功能全部收納到這里。

3、然后其中居中的一個按鈕可以展開更多的選項，把底部導航欄變成網格式或者列表式的導航模式。

展開為列表式

展開為網格式

這樣改善后，底部導航欄是不是變得特別強大了？

下面再看看底部導航欄的一些主流設計方式里的案例：

目前有3種典型的模式，分別是

• 模式1：首頁＋我的；

• 模式2：首頁＋更多；

• 模式3：中間功能項突出。

“我的”模式是最常見的，滿足了用戶在各個功能之間的頻繁切換。各個功能項是同等重要的。

“更多”模式是突出其他幾項功能，把次要功能全部收入更多里。

“中間功能項突出”模式，主次分明，把最頻繁使用的功能置于中間，也有的中間功能鍵起到收納作用，點擊是開啟更多選項。

開啟中間功能鍵的例子：

閑魚，拓展了標簽數量

全民K歌，直接是新起一頁，有網格式和列表式

喜馬拉雅FM，也是新起一頁，列表式

當然，案例只是參考， 具體問題還是需要具體分析的，沒有哪個模式是萬能的，只有適合的才是最好的。

下面繼續總結一些小細節：

• 一般功能項會設置4至5個。因為手機屏幕容量有限。

• 功能項大部分以圖標+文字的形式表達。文字是為了更準確的表達意思，這個在第一篇 App之“文字”的設計技巧 探討過原因。

• 主頁的圖標，采用“小房子”或logo。

• “發現”功能項是電商、娛樂影音類app用的比較多的功能。

• “消息”是社交類app的標配。

角標提醒，用小紅點或者帶數字的小紅點。

地圖類app應用較少采用常規的底部導航欄，沒有固定范式，底部導航欄的具體樣式根據業務來設計。

最后，用張動圖總結本文內容。

 

來自： http://www.cocoachina.com/design/20160527/16481.html