1. 樣式-Style
1.1 圖標和文字-Icons and text
Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.
由于底部導航操作顯示為圖標,它應該使用與其內容相符合的圖標。根據以下條件來為每個操作設定樣式:
- 當 Item 是 focus 狀態的時候,顯示這個 Item View 的圖標和文字。
- 當 bottom navigation 只有三個 Item 的時候,他們的圖標和文字都應該被顯示。
- 當 bottom navigation 有四個或者五個 Item 的時候,在非激活狀態的時候只顯示他們的圖標即可。
1.2顏色
Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color
用應用的主色調給底部導航操作(包括圖標與當前標簽文字)上色。
如果底部導航條已著色,將底部導航操作圖標和文字設置為白色或黑色。
1.3文本標簽
文本標簽為導航圖標提供簡明的定義。應避免使用較長的文本而造成文本被裁截或遮擋。
2.操作
點擊底部導航圖標將直接跳轉至相關的界面或刷新當前的界面。
每一個底部導航圖標都必須指向一個目的,不應打開主菜單或跳轉至其他窗口。
每一個底部導航圖標都會隨著界面的滾動而動態的顯示或隱藏。
- 界面向下滾動時隱藏底部導航欄
- 界面向上滾動時顯示底部導航欄
在內容區域使用滑動手勢不能進行界面的跳轉。
在當前界面與未激活界面的跳轉過程中使用淡入淡出的動畫效果。
3.空間
3.1確定底部導航欄
用底部導航欄的總長度除以圖標的個數,計算出每個圖標的寬度。也就是說,要使得每個底部導航圖標占有最充足的空間。
寬度的最大及最小值(這些數據包含邊距):
- 最大值:168dp
- 最小值:較大界面為 120dp,較小界面為 104dp
高度:
56dp
圖標:
24*24dp
內容對齊:
文本與圖標需居中且水平。
邊距:
- 距圖標 6dp(當前界面),距圖標 8dp(未被激活界面)
- 距文本 10dp
- 距文本左右各 12dp
文本標簽:
- 常規 Roboto字體: 14sp(當前界面)
- 常規 Roboto字體:12sp(未激活界面)
3.2切換底部導航欄
用底部導航欄的總長度除以圖標的個數,計算出每個圖標的寬度。
寬度的最大及最小值(這些數據包含邊距):
當前界面
- 最大值:168 dp
- 最小值:96 dp
未激活界面
- 最大值:96 dp
- 最小值:64 dp
高度:
56dp
圖標:
24*24 dp
內容對齊:
文本與圖標需居中且水平。
邊距:
- 距圖標上 6dp(當前界面),距圖標上下各 16dp(未被激活界面)
- 距文本下 10dp
文本標簽:
常規 Roboto 字體: 14sp(當前界面)
4. 層級
由于 snackbars 的層級高度(elevation) 為6dp,而 navigation bar 的層級高度為 8dp,所以 snackbars 顯示在 navigation bar 的后面。而 Bottom sheets, navigation drawers 和 keyboards 都顯示在 navigation bar 的前面,完全覆蓋 navigation bar 。
本文標題:Android Bottom navigation 規范二:樣式、行為與規格
文章作者:Gracker
發布時間:2016年04月05日 - 23時10分
最后更新:2016年04月05日 - 23時28分
原始鏈接:http://androidperformance.com/2016/04/05/android-bottom-bar-2.html **
許可協議:** "署名-非商用-相同方式共享 3.0" 轉載請保留原文鏈接及作者。