寫在前面：

Google在上一個(gè)月更新了Andorid的設(shè)計(jì)規(guī)范，將bottom bar即iOS中的tabbar重新加入到MD的設(shè)計(jì)規(guī)范中。詳情大家可以看：原文／譯文

PS：因?yàn)樗饺嗽?，?dǎo)致了斷更一個(gè)月，非常抱歉。以后會(huì)產(chǎn)出更好的內(nèi)容，還有還請(qǐng)大家到時(shí)留意一下我的個(gè)人博客，即將上線哦！

Bottom bar/Tab bar使用指南與規(guī)范

設(shè)計(jì)師要知道，設(shè)計(jì)本身比好看更重要。設(shè)計(jì)還涵蓋了用戶如何使用一個(gè)產(chǎn)品，用戶是不會(huì)理會(huì)它是網(wǎng)站還是應(yīng)用，這就好比是產(chǎn)品跟用戶的對(duì)話，導(dǎo)航欄就是其中的對(duì)話之一。無論你的網(wǎng)站或應(yīng)用程序功能有多好視覺設(shè)計(jì)有多好看，如果用戶無法找到使用的方法，那都是一文不值的。

為什么底部導(dǎo)航是如此重要？

Steven Hoober在自己的移動(dòng)設(shè)備使用量的研究發(fā)現(xiàn)，49％的人在手機(jī)上依靠一個(gè)拇指把事情完成。下圖中，該手機(jī)的屏幕上顯示的圖是近似的范圍圖，其中的顏色代表用戶可以用拇指與屏幕接觸的區(qū)域。綠色表示用戶可以很容易到達(dá)的區(qū)域；黃色，這需要一個(gè)伸展的區(qū)域；紅色的，即需要用戶的區(qū)域移位。

它需要放置在頂層和經(jīng)常使用的屏幕底部，因?yàn)樗鼈兪菃问植僮髯钍孢m的區(qū)域。

Tab Bar

許多應(yīng)用程序使用底部導(dǎo)航欄（又稱tab bar）時(shí)都遵循把最重要的功能展示的原則。例如Facebook的tab上都放置核心功能，使功能之間快速切換。

底部導(dǎo)航設(shè)計(jì)的三個(gè)關(guān)鍵時(shí)刻
導(dǎo)航就好比是一輛能載用戶去他們想去的地方的車輛。還有底部導(dǎo)航應(yīng)該用于類似重要性的功能切換，而這些目的地，需要在應(yīng)用的任何地方都可以直接訪問。
良好的底部導(dǎo)航設(shè)計(jì)遵循以下三個(gè)規(guī)則。

1.僅顯示最重要的“目的地”。
在底部導(dǎo)航欄最好使用三到五個(gè)的頂級(jí)功能點(diǎn)／目的地。如果有少于三個(gè)目的地，請(qǐng)考慮使用標(biāo)簽來代替。
避免在底部導(dǎo)航使用五個(gè)以上的功能點(diǎn)／目的地，因?yàn)樗鼈冎g會(huì)太靠近彼此。而且在標(biāo)簽欄有太多的功能會(huì)使用戶選擇困難癥突發(fā)。請(qǐng)記住每增加一個(gè)選項(xiàng)卡，應(yīng)用的復(fù)雜性也會(huì)相應(yīng)增加。

如果您的頂級(jí)導(dǎo)航已經(jīng)超過五個(gè)標(biāo)簽，請(qǐng)?zhí)峁┢渌绞竭M(jìn)入。

避免滾動(dòng)的標(biāo)簽欄
部分隱藏的導(dǎo)航是小屏幕一個(gè)解決方案 - 你不必?fù)?dān)心有限的屏幕大小，只需將您的導(dǎo)航選項(xiàng)變成一個(gè)可滾動(dòng)的標(biāo)簽。但是滾動(dòng)內(nèi)容是低效率的，因?yàn)樾枰獫L動(dòng)才能看到想要的選項(xiàng)。

2.與當(dāng)前位置的關(guān)系
未指明當(dāng)前位置可能是在底部導(dǎo)航設(shè)計(jì)上最常見的錯(cuò)誤。 用戶最常問，“我在哪里？”，這是最需要解決的根本問題之一。
用戶應(yīng)該知道一眼就知道如何從A點(diǎn)到B點(diǎn)，而且不需要任何來自外部的指導(dǎo)。應(yīng)該使用適當(dāng)?shù)囊曈X線索（圖標(biāo)，標(biāo)簽和顏色），從而使導(dǎo)航不言而喻。

圖標(biāo)
因?yàn)榈撞繉?dǎo)航最重要的部分是圖標(biāo)，它們應(yīng)該被用于連通的內(nèi)容的溝通媒介。一個(gè)通用型強(qiáng)的圖標(biāo)，用戶就會(huì)一目了然，如搜索，電子郵件，打印等功能。不幸的是“萬能”的圖標(biāo)是罕見的，而應(yīng)用設(shè)計(jì)師往往設(shè)計(jì)上都很容易弄巧反拙。

我在上一篇文章就指出過這個(gè)問題。

顏色
避免在底部標(biāo)簽欄用不同顏色的圖標(biāo)和文字標(biāo)簽，而是使用應(yīng)用的主要顏色來表示視覺焦點(diǎn)。
一個(gè)簡(jiǎn)單的規(guī)則 - 用應(yīng)用的主要顏色作為底部的導(dǎo)航操作選中的狀態(tài)（包括圖標(biāo)和任何文字標(biāo)簽）。

如果底部導(dǎo)航欄是彩色的，使得當(dāng)前選中的圖標(biāo)和文本標(biāo)簽設(shè)為黑色或白色。

文本標(biāo)簽

文本標(biāo)簽應(yīng)提供簡(jiǎn)短和有意義的定義導(dǎo)航圖標(biāo)。避免長(zhǎng)時(shí)間文本標(biāo)簽，因?yàn)檫@些標(biāo)簽會(huì)截?cái)嗷虬?/span>

菜單內(nèi)容應(yīng)易于瀏覽。用戶應(yīng)該能夠明白，當(dāng)他們點(diǎn)擊標(biāo)簽欄會(huì)去到哪。

目標(biāo)大小

使目標(biāo)足夠大，可以很容易地點(diǎn)擊。計(jì)算每個(gè)底部導(dǎo)航動(dòng)作的寬度，由動(dòng)作的次數(shù)除以該視圖的寬度。另外，使所有底部導(dǎo)航的寬度能滿足最大動(dòng)作時(shí)候的操作。

Android的設(shè)計(jì)規(guī)范建議在移動(dòng)的底部導(dǎo)航欄的尺寸。

標(biāo)簽欄上的徽章

您可以在標(biāo)簽欄的圖標(biāo)上顯示徽章，表明存在與該視圖或模式相關(guān)的新信息。

3.使導(dǎo)航不言而喻

良好的導(dǎo)航應(yīng)該像一只看不見的手引導(dǎo)著用戶。畢竟，如果人們無法找到那些最酷的功能還是最引人注目的內(nèi)容這都是無用的。

行為

每個(gè)底部的導(dǎo)航圖標(biāo)必須指向一個(gè)目標(biāo)位置，但不要顯示無法打開菜單或其他彈出窗口。點(diǎn)擊底部導(dǎo)航圖標(biāo)應(yīng)該直接引導(dǎo)用戶到相關(guān)的視圖或刷新當(dāng)前活動(dòng)視圖。

不要使用標(biāo)簽欄為用戶提供了在當(dāng)前屏幕或應(yīng)用模式元素控制。如果您需要提供控制請(qǐng)使用工具欄來代替。

盡力爭(zhēng)取一致性

盡可能，使所有標(biāo)簽的視覺保持一致性。你可以通過在底部導(dǎo)航藍(lán)提供相同的標(biāo)簽給用戶帶來視覺的穩(wěn)定感。

當(dāng)它的功能將不可用，不要?jiǎng)h除標(biāo)簽。如果刪除了選項(xiàng)卡，你會(huì)讓應(yīng)用程序的UI變得不穩(wěn)定和不可預(yù)測(cè)。最好的解決辦法是確保所有選項(xiàng)卡都可用，但解釋為什么一個(gè)選項(xiàng)卡的內(nèi)容不可用。例如，如果用戶沒有脫機(jī)文件，在Dropbox的應(yīng)用程序離線選項(xiàng)卡顯示不可用，解釋如何有他們。這項(xiàng)稱為空狀態(tài)。

把它藏起來

如果屏幕滾動(dòng)內(nèi)容中，標(biāo)簽欄可以當(dāng)人們滾動(dòng)新的內(nèi)容時(shí)候隱藏，并透露如果他們開始拉回到頂端時(shí)會(huì)重新出現(xiàn)。

視覺享受

避免使用橫向運(yùn)動(dòng)之間進(jìn)行轉(zhuǎn)換?；顒?dòng)和非活動(dòng)視圖之間的過渡應(yīng)該使用淡入淡出動(dòng)畫。

小貼士

底部導(dǎo)航應(yīng)該是

• 可見，井然有序的（用三到五個(gè)的頂級(jí)標(biāo)簽欄，避免底部導(dǎo)航滾動(dòng)內(nèi)容）。

• 清晰（bar里元素應(yīng)該是很容易辨認(rèn)和目標(biāo)應(yīng)足夠大，可以很容易地點(diǎn)擊）。

• 簡(jiǎn)單（確保每個(gè)導(dǎo)航圖標(biāo)引到正確的目標(biāo)，并使所有元素，包括底部導(dǎo)航和整個(gè)應(yīng)用程序一致）。

結(jié)論

在每個(gè)網(wǎng)站和應(yīng)用設(shè)計(jì)中幫助用戶定位想要的頁面都應(yīng)該予以高度的重視。通常在這種時(shí)刻，背后的目標(biāo)是創(chuàng)建一個(gè)自然與用戶的心理模型對(duì)齊的交互系統(tǒng)。

你是為了你的用戶而設(shè)計(jì)，永遠(yuǎn)把用戶放在第一位。你的產(chǎn)品越清晰易用，用戶就越有可能使用它。