序
接著上一篇Tabs(選項(xiàng)卡)，再說一個(gè)基本每個(gè)App都會(huì)有的組件—底部導(dǎo)航欄。
前言
在HIG和Material Design規(guī)范中命名也不盡相同，分別是Tab Bars和Bottom Navigation。底部導(dǎo)航欄我們又會(huì)叫這個(gè)組件標(biāo)簽欄(Tab bar)。為了保證閱讀的統(tǒng)一性接下來的的文章就用標(biāo)簽欄這個(gè)命名。
首先一個(gè)問題導(dǎo)航的含義是什么？
導(dǎo)航的含義就是指引用戶前往他們想去的地方，那標(biāo)簽欄就是用來放置App中常用的幾項(xiàng)重要功能。
目錄
- 標(biāo)簽欄的作用
- 為什么標(biāo)簽欄要放在底部？
- 標(biāo)簽欄的標(biāo)簽數(shù)量
- 避免純圖標(biāo)標(biāo)簽欄
- 標(biāo)簽欄的標(biāo)簽文字
- 點(diǎn)擊熱區(qū)要足夠大
- 始終有一個(gè)標(biāo)簽被選中
- 標(biāo)簽欄的一致性
- 避免太多的顏色
- 適時(shí)隱藏標(biāo)簽欄
- 標(biāo)簽欄標(biāo)簽上的小符號(hào)
- 標(biāo)簽欄不是工具欄
- 適時(shí)隱藏標(biāo)簽欄
- 標(biāo)簽欄不需要手勢(shì)動(dòng)作
- 最后
標(biāo)簽欄的作用
標(biāo)簽欄是由標(biāo)簽組成，作用是讓用戶在不同模塊間進(jìn)行切換。
為什么標(biāo)簽欄要放在底部？
在Steven Hoober的研究中發(fā)現(xiàn)：49%的用戶習(xí)慣于使用單個(gè)拇指來完成所有操作。在上圖中，屏幕中不同顏色的區(qū)域表明用戶拇指能夠觸及的難度等級(jí)。其中，藍(lán)色區(qū)域表示很容易觸及的范圍，黃色則表示要伸展開拇指才能來觸及，而要觸達(dá)紅色區(qū)域則要求用戶改變?cè)O(shè)備的手持方式。
這樣看的話，將優(yōu)先級(jí)較高且常用的功能放在屏幕的底部位置是正確的，是因?yàn)檫@個(gè)位置用戶使用拇指就可以輕松的和設(shè)備發(fā)生交互了。
標(biāo)簽欄的標(biāo)簽數(shù)量
標(biāo)簽欄標(biāo)簽的數(shù)量不宜超過5個(gè)，導(dǎo)致標(biāo)簽的點(diǎn)擊熱區(qū)之間很擁擠，容易造成誤操作的問題。也會(huì)讓App表標(biāo)簽欄看起來很復(fù)雜。
但不宜少于2個(gè)，少于2個(gè)就得思考使用其他的方式去設(shè)計(jì)了。
避免純圖標(biāo)標(biāo)簽欄
常見的標(biāo)簽欄的標(biāo)簽很多都是用使用圖標(biāo)和文字表示，icon也能傳達(dá)出對(duì)應(yīng)的信息。比方：放大鏡icon是搜索功能，房子icon是首頁，人型剪影icon是我的。
雖說用戶對(duì)小部分icon有認(rèn)知，但對(duì)沒有認(rèn)知的icon就會(huì)很難快速的從中讀懂icon的含義，只需要配合上文字就能快速理解標(biāo)簽的含義了。
標(biāo)簽欄的標(biāo)簽文字
標(biāo)簽的文字是對(duì)標(biāo)簽功能的簡(jiǎn)短且清晰的描述。當(dāng)用戶掃描文字后就可以有點(diǎn)擊標(biāo)簽后去哪里的預(yù)期了。盡量不要使用太多文字，避免被截?cái)?...)、顯示不全或換行的問題。
點(diǎn)擊熱區(qū)要足夠大
根據(jù)多次提到的費(fèi)茨定律，讓標(biāo)簽的點(diǎn)擊熱區(qū)足夠大，才能更便于點(diǎn)擊。
使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。
——Wikipedia(費(fèi)茨法則)
始終有一個(gè)標(biāo)簽被選中
對(duì)于用戶而言，在使用標(biāo)簽欄之前，他們要搞清楚的問題便是現(xiàn)在"我在哪"，那默認(rèn)選中項(xiàng)就顯得很重要了。
一個(gè)優(yōu)秀的導(dǎo)航欄設(shè)計(jì)應(yīng)該是在用戶能第一眼就可以看出去那個(gè)標(biāo)簽可以滿足自己的目的?？梢允褂靡曈X元素顏色，直觀的告訴用戶選中的是什么。
標(biāo)簽欄的一致性
在各種情況下顯示個(gè)數(shù)相同的標(biāo)簽，別在一個(gè)標(biāo)簽?zāi)K中沒有信息時(shí)移除標(biāo)簽。如果在標(biāo)簽對(duì)應(yīng)模塊內(nèi)容為空時(shí)隱藏一個(gè)標(biāo)簽，而在標(biāo)簽對(duì)應(yīng)模塊內(nèi)容不為空時(shí)又顯示標(biāo)簽。這樣做會(huì)讓用戶覺得App是不是有問題。解決方法就是向用戶顯示所有標(biāo)簽，如果當(dāng)某個(gè)標(biāo)簽對(duì)應(yīng)模塊內(nèi)容為空時(shí)，告訴用戶為空的解釋是什么。
如上圖，如果一個(gè)賬號(hào)下沒有行程，標(biāo)簽對(duì)應(yīng)的模塊就得告訴用戶為什么沒有？該如何創(chuàng)建行程，這個(gè)也叫做為空狀態(tài)并告訴用戶怎么做。
避免太多的顏色
盡量避免在標(biāo)簽欄使用不同顏色的標(biāo)簽(文字和icon)，就只使用一個(gè)高亮的顏色(可以是App主色調(diào))來區(qū)分選中狀態(tài)和未選中狀態(tài)。
標(biāo)簽欄標(biāo)簽上的小符號(hào)
可以在一個(gè)標(biāo)簽欄的標(biāo)簽上加入一個(gè)符號(hào)來表示有關(guān)該模塊的新信息。
標(biāo)簽欄不是工具欄
當(dāng)點(diǎn)擊標(biāo)簽欄的一個(gè)標(biāo)簽時(shí)，是應(yīng)該直接前往相關(guān)模塊的，或者刷新當(dāng)前模塊又或者定位到該模塊的新消息。所以千萬別在標(biāo)簽欄給用戶提供那些在當(dāng)前模塊下做操作行為的組件，如果想讓用戶有操作行為，就可以使用工具欄組件。
避免使用滾動(dòng)設(shè)計(jì)
對(duì)于移動(dòng)端有限的屏幕空間而言，隱藏一部分標(biāo)簽可以說是一個(gè)不錯(cuò)的解決方案。這樣就可以不用擔(dān)心屏幕空間的問題，把標(biāo)簽欄設(shè)計(jì)成可以滑動(dòng)的區(qū)域，但這種方式難免會(huì)降低使用效率。
個(gè)人鐘意的VSCO改版去除了滾動(dòng)標(biāo)簽欄的設(shè)計(jì)，改成了常規(guī)標(biāo)簽欄設(shè)計(jì)。
推薦劉英滕的一篇文章：VSCO和現(xiàn)代設(shè)計(jì)
雖標(biāo)簽欄是帶過，但嘗試是大膽的。
適時(shí)隱藏標(biāo)簽欄
如果在屏幕中顯示內(nèi)容是可以滾動(dòng)的信息流時(shí)，標(biāo)簽欄可以在用戶做向下滾動(dòng)手勢(shì)時(shí)隱藏，在用戶向上回滾時(shí)重新顯示。
標(biāo)簽欄不要需要手勢(shì)動(dòng)作
標(biāo)簽欄需要避免使用橫向滑動(dòng)手勢(shì)來控制不同模塊間的切換。但是可以考慮在不同模塊間點(diǎn)擊切換時(shí)使用淡入淡出的簡(jiǎn)單動(dòng)畫來進(jìn)行過渡。
最后
確保標(biāo)簽欄每個(gè)標(biāo)簽可以指引用戶去完成他們的目的，在基本的標(biāo)簽欄設(shè)計(jì)規(guī)范上結(jié)合產(chǎn)品的特性做出一點(diǎn)變化，比方微信的標(biāo)簽欄在微信模塊出現(xiàn)新消息提醒時(shí)，點(diǎn)擊標(biāo)簽就可以快速定位到未讀的消息。還有很多App的舵式標(biāo)簽欄，有高亮的顯眼的重要功能按鈕標(biāo)簽。結(jié)合需求打造一個(gè)標(biāo)簽欄就顯得很重要了，標(biāo)簽欄的背后還有很細(xì)節(jié)值得挖掘。
只有把我們的標(biāo)簽欄設(shè)計(jì)的越容易使用，才會(huì)在用戶手中更有可能的被使用。
參考文章：
UX Design for Mobile: Bottom Navigation
Guideline：
以上的觀點(diǎn)從我個(gè)人總結(jié)出發(fā)，雖說文筆拙劣，但是如果你有不同的意見，歡迎交流～
以前文章廣告位：
《常見的表單設(shè)計(jì)，如何最大化提升用戶體驗(yàn)？》
《一個(gè)關(guān)于Tabs(選項(xiàng)卡)的設(shè)計(jì)故事》
到這也就看完了我叨逼叨，也不知說恭喜你還是佩服你…總之先雙手合十的感謝你！
