1. 樣式-Style

1.1 圖標(biāo)和文字-Icons and text

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.
由于底部導(dǎo)航操作顯示為圖標(biāo)，它應(yīng)該使用與其內(nèi)容相符合的圖標(biāo)。根據(jù)以下條件來為每個(gè)操作設(shè)定樣式：

• 當(dāng) Item 是 focus 狀態(tài)的時(shí)候，顯示這個(gè) Item View 的圖標(biāo)和文字。
• 當(dāng) bottom navigation 只有三個(gè) Item 的時(shí)候，他們的圖標(biāo)和文字都應(yīng)該被顯示。
• 當(dāng) bottom navigation 有四個(gè)或者五個(gè) Item 的時(shí)候，在非激活狀態(tài)的時(shí)候只顯示他們的圖標(biāo)即可。

1.2顏色

Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color
用應(yīng)用的主色調(diào)給底部導(dǎo)航操作（包括圖標(biāo)與當(dāng)前標(biāo)簽文字）上色。

Do. Use the app’s primary color to indicate the view in focus.

Don't. Avoid using different colored icons and text labels.

如果底部導(dǎo)航條已著色，將底部導(dǎo)航操作圖標(biāo)和文字設(shè)置為白色或黑色。

Do. Use black or white iconography if the bottom navigation bar is colored.

Don't. Avoid pairing colored icons with a colored bottom navigation bar.

1.3文本標(biāo)簽

文本標(biāo)簽為導(dǎo)航圖標(biāo)提供簡明的定義。應(yīng)避免使用較長的文本而造成文本被裁截或遮擋。

Do. Use short labels

Don't. Avoid labels with wrapping text

Don't. Avoid truncating text labels as doing so may prevent comprehension.

Don't. Avoid shrinking text labels to fit on a single line.

2.操作

點(diǎn)擊底部導(dǎo)航圖標(biāo)將直接跳轉(zhuǎn)至相關(guān)的界面或刷新當(dāng)前的界面。

每一個(gè)底部導(dǎo)航圖標(biāo)都必須指向一個(gè)目的，不應(yīng)打開主菜單或跳轉(zhuǎn)至其他窗口。

每一個(gè)底部導(dǎo)航圖標(biāo)都會隨著界面的滾動(dòng)而動(dòng)態(tài)的顯示或隱藏。

• 界面向下滾動(dòng)時(shí)隱藏底部導(dǎo)航欄
• 界面向上滾動(dòng)時(shí)顯示底部導(dǎo)航欄

在內(nèi)容區(qū)域使用滑動(dòng)手勢不能進(jìn)行界面的跳轉(zhuǎn)。
在當(dāng)前界面與未激活界面的跳轉(zhuǎn)過程中使用淡入淡出的動(dòng)畫效果。

3.空間

3.1確定底部導(dǎo)航欄

用底部導(dǎo)航欄的總長度除以圖標(biāo)的個(gè)數(shù)，計(jì)算出每個(gè)圖標(biāo)的寬度。也就是說，要使得每個(gè)底部導(dǎo)航圖標(biāo)占有最充足的空間。

Fixed bottom navigation bar on mobile

寬度的最大及最小值（這些數(shù)據(jù)包含邊距）：

• 最大值：168dp
• 最小值：較大界面為 120dp，較小界面為 104dp

高度：
56dp

圖標(biāo)：
24*24dp

104dp min width for smaller views

168dp max width

內(nèi)容對齊：
文本與圖標(biāo)需居中且水平。

邊距：

• 距圖標(biāo) 6dp（當(dāng)前界面），距圖標(biāo) 8dp（未被激活界面）
• 距文本 10dp
• 距文本左右各 12dp

文本標(biāo)簽：

• 常規(guī) Roboto字體： 14sp（當(dāng)前界面）
• 常規(guī) Roboto字體：12sp（未激活界面）

12dp left and right of text

12dp left and right of text

Fixed bottom navigation bar on landscape mobile

Fixed bottom navigation bar on tablet

3.2切換底部導(dǎo)航欄

用底部導(dǎo)航欄的總長度除以圖標(biāo)的個(gè)數(shù)，計(jì)算出每個(gè)圖標(biāo)的寬度。

Shifting bottom navigation bar on mobile

寬度的最大及最小值（這些數(shù)據(jù)包含邊距）：
當(dāng)前界面

• 最大值：168 dp
• 最小值：96 dp

未激活界面

• 最大值：96 dp
• 最小值：64 dp

Active view: 96dp min width

Active view: 168dp max width

Inactive view: 64dp min width

Inactive view: 96dp max width

高度：
56dp

圖標(biāo)：
24*24 dp

內(nèi)容對齊：
文本與圖標(biāo)需居中且水平。

邊距：

• 距圖標(biāo)上 6dp（當(dāng)前界面），距圖標(biāo)上下各 16dp（未被激活界面）
• 距文本下 10dp

文本標(biāo)簽：
常規(guī) Roboto 字體： 14sp（當(dāng)前界面）

Shifting bottom navigation bar on landscape mobile

Shifting bottom navigation bar on tablet

4. 層級

由于 snackbars 的層級高度(elevation) 為6dp，而 navigation bar 的層級高度為 8dp，所以 snackbars 顯示在 navigation bar 的后面。而 Bottom sheets, navigation drawers 和 keyboards 都顯示在 navigation bar 的前面，完全覆蓋 navigation bar 。

Snackbars appear behind the bottom navigation bar.

Orthographic view of app structure

本文標(biāo)題:Android Bottom navigation 規(guī)范二：樣式、行為與規(guī)格
文章作者:Gracker
發(fā)布時(shí)間:2016年04月05日 - 23時(shí)10分
最后更新:2016年04月05日 - 23時(shí)28分
原始鏈接:http://androidperformance.com/2016/04/05/android-bottom-bar-2.html **
許可協(xié)議:** "署名-非商用-相同方式共享 3.0" 轉(zhuǎn)載請保留原文鏈接及作者。