close
Material Design 提出了對於下方導覽列(Bottom Navigation)的相關規範.
但目前還未實現API, 提供上層使用.
使用時機
1. 當有3至5個按鈕時使用, 2個按鈕的話建議用Tab
呈現方式
1. 在手機的表現上, 呈現於下方, 若為大型顯示裝置則顯示於左方.
圖片出處 Google Spec.
2. 按鈕寬度要等寬
3. icon顏色簡單即可, 不使用五顏六色的設計
使用 | 不使用 |
![]() |
![]() |
圖片出處 Google Spec.
4. 當背景有顏色時, 圖片與文字使用白色或黑色, 亦不使用五顏六色的設計
使用 | 不使用 |
![]() |
![]() |
圖片出處 Google Spec.
5. 文字的呈現上, 使用單行且能完整呈現文字
使用 | 不使用 (需使用單行呈現) | 不使用 (無法完整呈現) |
![]() |
![]() |
![]() |
圖片出處 Google Spec.
動畫效果
1. 若有上下動畫效果時, 當由下往上滾動時, Bottom Navigation需要收起.
當由上往下滾動時, Bottom Navigationt則滑出.
2. 切換頁面時, 回到每一頁的第一個Item
3. 切換頁面時, 使用直接顯示, 不使用翻頁過場動畫(ViewPager效果)
大小格式
請參閱Google Bottom Navigation Spec.
文章標籤
全站熱搜