Material Design新秀Bottom navigation設(shè)計(jì)以及實(shí)現(xiàn)-上

上周Google更新了Android應(yīng)用設(shè)計(jì)指導(dǎo)規(guī)范。新的規(guī)范主要是建議Android應(yīng)用的開發(fā)者更多的使用Material Design對(duì)象庫(kù)來(lái)讓應(yīng)用看的更加簡(jiǎn)潔。而最新的對(duì)象庫(kù)中新增的一個(gè)亮點(diǎn)就是此前已經(jīng)在Google Photos和Google+中出現(xiàn)過的「Bottom Navigation」組件,也就是我們?cè)趇OS應(yīng)用中經(jīng)常見到的底部Tab導(dǎo)航欄。

那么我們今天就來(lái)了解一下Bottom navigation組件吧

使用方法

底部導(dǎo)航提供了一個(gè)應(yīng)用程序的頂層視圖之間快速導(dǎo)航。它主要設(shè)計(jì)用于在移動(dòng)設(shè)備上使用。在大一點(diǎn)的設(shè)備,比如平板,桌面系統(tǒng)上,可以實(shí)現(xiàn)通過使用側(cè)邊欄導(dǎo)航類似的效果。例如,在默認(rèn)情況下,使用緊湊型的顯示導(dǎo)航圖標(biāo)。


移動(dòng)設(shè)備上的底部導(dǎo)航欄


在大屏設(shè)備上的左側(cè)導(dǎo)航欄樣式, 如在桌面設(shè)備或者平板

使用注意事項(xiàng)

底部導(dǎo)航欄應(yīng)該在以下的情況使用動(dòng)在頂層的導(dǎo)航需要

有類似重要性的三至五個(gè)條目(或者在程序的任意地方都需要顯示)

底部的導(dǎo)航欄不能超過六個(gè)條目,更不能讓他滑動(dòng)顯示

當(dāng)導(dǎo)航欄的條目有焦點(diǎn)的時(shí)候顯示當(dāng)前條目的圖標(biāo)和文字

如果只有三個(gè)條目的話同時(shí)顯示圖標(biāo)和文字

當(dāng)?shù)撞繉?dǎo)航欄有四至五個(gè)條目的時(shí)候展示動(dòng)態(tài)展示圖標(biāo)和文字(獲取焦點(diǎn)的時(shí)候展示圖標(biāo)和文字,沒有焦點(diǎn)只展示圖標(biāo))

使用程序的Primary Color來(lái)展示,取得焦點(diǎn)的條目
如果底部的導(dǎo)航欄被選中了把條目的顏色和圖標(biāo)設(shè)置成白色或者黑色
底部的標(biāo)簽要剪短

Behavior

如果你了解Design Library那么你一定了解behavior

那么Bottom navigation有什么behavior呢我們通過圖片簡(jiǎn)單了解一下

Bottom navigation樣式以及設(shè)計(jì)細(xì)節(jié)


最小寬度和最大寬度(包括padding):

最大值: 168dp

最小值: 120dp(大的View), 104dp (比較小的View)

高度:56dp

圖標(biāo):24 x 24dp

內(nèi)容對(duì)齊方式:

文本和圖標(biāo)水平居中

Padding:

6dp 圖標(biāo)上方(獲取焦點(diǎn)), 8dp 圖標(biāo)上方 (沒有獲取焦點(diǎn))

10dp 文字底下

12dp 文字左右

文字標(biāo)簽:

正常的圖片14sp (獲取焦點(diǎn))

正常的圖片12sp (沒有獲取焦點(diǎn))

陰影

因?yàn)閟nackbars 有一個(gè) (6dp) 的陰影,snackbar在bottom navigation bar 后邊顯示(8dp elevation).

Bottom sheets, navigation drawers 和鍵盤顯示的時(shí)候在bottom navigation bar的上部, 暫時(shí)覆蓋他


整體樣式


https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

不周之處盡請(qǐng)指正,如果喜歡可以打賞


附英文網(wǎng)站截屏


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容