比較Material Design 1

比較Material Design 1
繼上次說明了material design (質感設計)的使用規範,這次直接圖解來比較套版前後的差異,可以從差異感受出material design (質感設計)相對上可是真得更精緻舒服呀!

樣板尚未修改前

樣板依照material design規範

App bars:top
建議元件的間距,與icon使用
  • 裝置高度600dp以下 建議高度為48dp,在此太小的我們就不繼續探討
  • 裝置高度601dp-700dp之間 建議高度為56dp,例如Iphone6
  • 裝置高度701dp以上 建議高度為64dp (最大有到72dp),例如iphone plus以上裝置
  • 各裝置與高度參考:https://material.io/tools/devices/


Bottom navigation
建議元件的間距,與icon、文字使用
  • icon大小使用一樣是24x24
  • 文字在此使用是12px


更多文章:

  1. Material Design 動態效果
  2. 卡片列表與圖片列表
  3. Dark theme 深色主題
  4. Material Design 的對話視窗
  5. Material Design-文字排版與應用

回應