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.

 

 

 

arrow
arrow

    nickthomas55 發表在 痞客邦 留言(0) 人氣()