寫在前面：

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

PS：因為私人原因，導致了斷更一個月，非常抱歉。以后會產出更好的內容，還有還請大家到時留意一下我的個人博客，即將上線哦！

Bottom bar/Tab bar使用指南與規范

設計師要知道，設計本身比好看更重要。設計還涵蓋了用戶如何使用一個產品，用戶是不會理會它是網站還是應用，這就好比是產品跟用戶的對話，導航欄就是其中的對話之一。無論你的網站或應用程序功能有多好視覺設計有多好看，如果用戶無法找到使用的方法，那都是一文不值的。

為什么底部導航是如此重要？

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

它需要放置在頂層和經常使用的屏幕底部，因為它們是單手操作最舒適的區域。

Tab Bar

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

底部導航設計的三個關鍵時刻
導航就好比是一輛能載用戶去他們想去的地方的車輛。還有底部導航應該用于類似重要性的功能切換，而這些目的地，需要在應用的任何地方都可以直接訪問。
良好的底部導航設計遵循以下三個規則。

1.僅顯示最重要的“目的地”。
在底部導航欄最好使用三到五個的頂級功能點／目的地。如果有少于三個目的地，請考慮使用標簽來代替。
避免在底部導航使用五個以上的功能點／目的地，因為它們之間會太靠近彼此。而且在標簽欄有太多的功能會使用戶選擇困難癥突發。請記住每增加一個選項卡，應用的復雜性也會相應增加。

如果您的頂級導航已經超過五個標簽，請提供其他方式進入。

避免滾動的標簽欄
部分隱藏的導航是小屏幕一個解決方案 - 你不必擔心有限的屏幕大小，只需將您的導航選項變成一個可滾動的標簽。但是滾動內容是低效率的，因為需要滾動才能看到想要的選項。

2.與當前位置的關系
未指明當前位置可能是在底部導航設計上最常見的錯誤。 用戶最常問，“我在哪里？”，這是最需要解決的根本問題之一。
用戶應該知道一眼就知道如何從A點到B點，而且不需要任何來自外部的指導。應該使用適當的視覺線索（圖標，標簽和顏色），從而使導航不言而喻。

圖標
因為底部導航最重要的部分是圖標，它們應該被用于連通的內容的溝通媒介。一個通用型強的圖標，用戶就會一目了然，如搜索，電子郵件，打印等功能。不幸的是“萬能”的圖標是罕見的，而應用設計師往往設計上都很容易弄巧反拙。

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

顏色
避免在底部標簽欄用不同顏色的圖標和文字標簽，而是使用應用的主要顏色來表示視覺焦點。
一個簡單的規則 - 用應用的主要顏色作為底部的導航操作選中的狀態（包括圖標和任何文字標簽）。

如果底部導航欄是彩色的，使得當前選中的圖標和文本標簽設為黑色或白色。

文本標簽

文本標簽應提供簡短和有意義的定義導航圖標。避免長時間文本標簽，因為這些標簽會截斷或包裹。

菜單內容應易于瀏覽。用戶應該能夠明白，當他們點擊標簽欄會去到哪。

目標大小

使目標足夠大，可以很容易地點擊。計算每個底部導航動作的寬度，由動作的次數除以該視圖的寬度。另外，使所有底部導航的寬度能滿足最大動作時候的操作。

Android的設計規范建議在移動的底部導航欄的尺寸。

標簽欄上的徽章

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

3.使導航不言而喻

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

行為

每個底部的導航圖標必須指向一個目標位置，但不要顯示無法打開菜單或其他彈出窗口。點擊底部導航圖標應該直接引導用戶到相關的視圖或刷新當前活動視圖。

不要使用標簽欄為用戶提供了在當前屏幕或應用模式元素控制。如果您需要提供控制請使用工具欄來代替。

盡力爭取一致性

盡可能，使所有標簽的視覺保持一致性。你可以通過在底部導航藍提供相同的標簽給用戶帶來視覺的穩定感。

當它的功能將不可用，不要刪除標簽。如果刪除了選項卡，你會讓應用程序的UI變得不穩定和不可預測。最好的解決辦法是確保所有選項卡都可用，但解釋為什么一個選項卡的內容不可用。例如，如果用戶沒有脫機文件，在Dropbox的應用程序離線選項卡顯示不可用，解釋如何有他們。這項稱為空狀態。

把它藏起來

如果屏幕滾動內容中，標簽欄可以當人們滾動新的內容時候隱藏，并透露如果他們開始拉回到頂端時會重新出現。

視覺享受

避免使用橫向運動之間進行轉換。活動和非活動視圖之間的過渡應該使用淡入淡出動畫。

小貼士

底部導航應該是

• 可見，井然有序的（用三到五個的頂級標簽欄，避免底部導航滾動內容）。

• 清晰（bar里元素應該是很容易辨認和目標應足夠大，可以很容易地點擊）。

• 簡單（確保每個導航圖標引到正確的目標，并使所有元素，包括底部導航和整個應用程序一致）。

結論

在每個網站和應用設計中幫助用戶定位想要的頁面都應該予以高度的重視。通常在這種時刻，背后的目標是創建一個自然與用戶的心理模型對齊的交互系統。

你是為了你的用戶而設計，永遠把用戶放在第一位。你的產品越清晰易用，用戶就越有可能使用它。