比較Material Design 2 滑開選單

比較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. Design system設計系統概述
  2. Material You是什麼?Material Design3 與2的比較
  3. 網頁配色怎麼選?使用配色工具挑顏色2
  4. 網頁配色怎麼選?使用配色工具挑顏色1
  5. Material Design-Android網站分析2