(譯)MaterialDesign(二十二)Bottom Navigation

其他文章

Bottom Navigation Bar可以使你在一個點擊區域內切換不同的界面。

輕觸底部導航圖標可直接進入相關聯的視圖或刷新當前活動的視圖。

底部導航主要用于移動設備。 要實現類似效果的桌面應用,請使用側導航。

用法
  • 三到五個頂級的界面。

  • 頂級頁面要能夠直接到達。

顏色

使用應用程序的主顏色來調整活動圖標。 如果底部導航欄已經著色,請使用黑色或白色。

規范

每個圖標的點擊區域寬度:可點擊的區域寬度除以圖標個數。

最大為168dp,最小為80dp

導航欄高度:56dp
圖標尺寸:24 x 24dp

bottom navigation

用法

底部導航提供應用程序的頂級視圖之間的快速導航。 它主要設計用于移動。

mobile bottom navigation

較大的顯示器,例如桌面,可以通過使用側邊導航來實現類似的效果。 例如,緊湊的“軌道”處理默認顯示導航圖標。

大的屏幕設備上(平板或者電腦)使用左側導航
何時使用

底部導航應用于:

  • 三到五個相似重要性的頂級界面(替代方法:從應用程序的任何地方訪問的永久性導航抽屜)
  • 需要在應用中的任何位置直接訪問的目標(替代方法:僅一個或兩個界面的標簽)
正確
正確的使用
在一個應用中有三到五個頂級界面需要直接切換使用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前邊。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容