Bottom Navigation Bar可以使你在一個點擊區域內切換不同的界面。
輕觸底部導航圖標可直接進入相關聯的視圖或刷新當前活動的視圖。
底部導航主要用于移動設備。 要實現類似效果的桌面應用,請使用側導航。
用法
三到五個頂級的界面。
頂級頁面要能夠直接到達。
顏色
使用應用程序的主顏色來調整活動圖標。 如果底部導航欄已經著色,請使用黑色或白色。
規范
每個圖標的點擊區域寬度:可點擊的區域寬度除以圖標個數。
最大為168dp,最小為80dp
導航欄高度:56dp
圖標尺寸:24 x 24dp
用法
底部導航提供應用程序的頂級視圖之間的快速導航。 它主要設計用于移動。
較大的顯示器,例如桌面,可以通過使用側邊導航來實現類似的效果。 例如,緊湊的“軌道”處理默認顯示導航圖標。
何時使用
底部導航應用于:
- 三到五個相似重要性的頂級界面(替代方法:從應用程序的任何地方訪問的永久性導航抽屜)
- 需要在應用中的任何位置直接訪問的目標(替代方法:僅一個或兩個界面的標簽)
正確的使用
在一個應用中有三到五個頂級界面需要直接切換使用Bottom Navtigaiton Bar
錯誤的用法
如果少于3個,請使用tabs來表示
如果你的頂級界面超過6個,請使用其他位置的導航欄(如左側drawer navigation)來訪問Bottom Navigation Bar中未覆蓋的界面。
正確的做法
圖標固定在Bottom Navigation Bar
錯誤的做法
避免在底部導航欄中滾動內容。
正確的做法
在Bottom Navigation Bar中最多添加五個圖標
錯誤的做法
避免在底部導航中使用超過五個圖標,因為點擊目標將彼此太靠近影響美觀。
Bottom Navigation Bar和Tabs
組合使用Bottom Navigation Bar與Tabs時,請謹慎,因為在導航應用程序時,可能導致混亂。 例如,點擊兩個Tabs和Bottom Navigation Bar可以在同一內容中顯示不同轉換的動畫而混淆。
樣式
圖標和文本
由于Bottom Navigation通過圖標產生行為操作,因此應該用文字顯示他們操作的內容。
根據以下條件對每個操作進行樣式設定:
- 當view獲得焦點時,顯示圖標和文本
- 當只有三個圖標時,保持圖標和文本一直顯示
- 當有四個或者五個圖標時,將非活動視圖置為只顯示圖標,不顯示文本
顏色
使用應用程序的主顏色( primary color)來調整當前底部導航操作(包括圖標和任何文本標簽)。
正確的做法
當圖標獲得焦點時使用程序主顏色(primary color)
錯誤的做法
禁止使用不同顏色的圖標和文字顏色
如果Bottom Navigation Bar已經被著色,請使用黑白的圖標和文本
正確的做法
當Bottom Navigation Bar已經有顏色時使用黑白的圖標和文本
錯誤的做法
避免使用彩色圖標來匹配已經有顏色的Bottom Navigation Bar
文字
文本標簽為Bottom Navigation Bar的圖標提供簡短,有意義的定義。 避免使用長文本標簽,因為這些標簽不會截斷或換行。
正確的做法
使用較短的文本標簽
錯誤的做法
避免使用過長的文本標簽
錯誤的做法
避免截斷文字,這樣做可能會妨礙用戶理解文字內容
錯誤的做法
避免縮小文本來使文本在一行內顯示
行為
點擊Bottom Navigation Bar的圖標可直接轉到相關聯的視圖,或刷新當前活動的視圖。
每個底部導航圖標必須連接到它所指向的界面,并且不會打開菜單或其他彈出窗口。
在Android上,“后退”按鈕不會在底部導航欄視圖之間導航。
點擊顯示Bottom Navigation Bar時,應該顯示當前活動按鈕中的頂部位置
點擊其他界面圖標后再次返回時應該重置狀態
Bottom Navigation Bar可以在滾動式動態的顯示和隱藏。
向下滾動時應該隱藏
向上滾動時顯示
Bottom Navigation Bar可以消失并重新顯示,以配合沉浸式內容視圖。
在瀏覽應用程序層次結構時,Bottom Navigation Bar仍保持可見。
在內容區域上使用滑動手勢不會在視圖之間導航。(這條貌似有點問題)
正確的做法
使用交叉淡入淡出動畫在活動和非活動視圖之間切換。
錯誤的做法
避免使用橫向運動在視圖之間轉換。
規范
固定Bottom Navigation Bar
要計算每個Bottom Navigation按鈕的寬度,請將視圖的寬度除以按鈕數:
按鈕寬度=整個視圖的寬度/按鈕數
例如,如果視圖的寬度為360dp,并且有三個按鈕,則每個操作的寬度應為120dp。
固定在底部的Bottom Navigation Bar
寬度的最大值和最小值(包含padding):
- 最大:168dp
- 最小:80dp
- 高度:56dp
- 圖標:24*24dp
- align:文本和圖標在視圖中水平居中。
- padding:6dp(活動視圖),8dp(非活動視圖)
- Roboto Regular(字體大小):14sp(主動視圖),12sp(非活動視圖)
56dp height,12dp left and right of text ,10dp under text
橫屏是的Bottom Navigation Bar
56dp height,24 x 24dp icon,6dp above icon (active view),8dp above icon (inactive view),10dp under text
平板電腦上的Bottom Navigation Bar
56dp height,24 x 24dp icon,6dp above icon (active view),8dp above icon (inactive view),10dp under text
Bottom Navigation Bar圖標的移動
寬度最小值和最大值(包括Padding):
活動視圖
- 最大:168dp
- 最小:96dp
非活動視圖
- 最大:96dp
- 最低:56dp
- 高度:56dp
圖標:24 x 24dp
align:文本和圖標在視圖中水平居中。
padding:6dp上方圖標(活動視圖),16dp上方和下方圖標(不活動視圖),10dp下的文本
文字標簽:Roboto Regular 14sp(主動視圖)
移設備上的Bottom Navigation Bar
56dp height,24 x 24dp icon,6dp above icon (active view),10dp under text,6dp below icon,16dp below icon with no title
活動視圖:最小寬度96dp
活動視圖:最大寬度168dp
非活動視圖:最小寬度56dp
非活動視圖:最大寬度96dp
活動視圖的文本標簽使用最大寬度
橫屏模式
56dp height,24 x 24dp icon,6dp above icon (active view),10dp under text,6dp below icon,16dp below icon with no title
平板上的Bottom Navigation Bar
56dp height,24 x 24dp icon,6dp above icon (active view),10dp under text,6dp below icon,16dp below icon with no title
高度
由于snackbars的高度屬性(6dp)比Bottom Navigation Bar的高度屬性(8dp)低,所以會展現在Bottom Navigation Bar的下邊。
由于Bottom Sheets、NavigationDrawer、和Keyboard會暫時性展現在Bottom Navigation Bar前邊。