比較Material Design 2 滑開選單
BY Grace │

比較Material Design 2 滑開選單

這次material design (材料設計)的使用規範,來說明使用Navigation drawer,側邊滑出選單的部分,以前都想說要清晰分明而大量使用"Divider(分隔線)",但在material design規定裡分隔線可以用來區隔每個群組、區隔標題,但不能用來區隔每個品項,所以這次也拿掉了大量分隔線,另外在滑開選單的寬度也做了調整。

樣板尚未修改前

樣板依照material design規範

Navigation drawer
  • 選單採用左側滑開,展開的寬度與右側相距56px,選單內容的左右內距是16px。
  • 選單滑開後,其餘應被透明度32%的黑色色塊遮住。
  • 選單內header(頭部)的高度除非需增加元素太多,不然應與App bars:top一樣;頭部內文字為20px。
  • 選項按鈕的高度應為48px,點擊後效果文字顏色為主色(primary),背景顏色為主色調放淡(透明度12%的 primary)。
  • 分隔線英文1px的線條,上下外距為8px。


更多文章:

  1. Material Design 網頁版比較
  2. Material Design 改版實例
  3. Material Design 按鈕介紹
  4. Material Design-文字排版與應用
  5. Material Design 的對話視窗

回應