Material Design 網頁版比較

Material Design 網頁版比較
Material Design (質感設計) 官方有釋出規範說明,不過其解釋幾乎是針對行動裝置上的頁面,現在隨著質感設計的規範越來越完整,網頁版也有部分規範做為參考依據,今天,我們以平常使用的測試網站來做改版,依照質感設計規範下去設計介面,之前有先介紹在手機板差異了,一起來看看網頁版修改前後的差異吧!

▼未改版前網站

▼使用質感設計規範設計網站


在登入列排版差異比較
未修改以前設計
  • 未修改以前的設計排版壅擠
  • Icon大小無規範,顯得凌亂
Material Design設計
  • 改版後符合質感設計Ico規範
  • Icon大小為24x24
  • Icon間距為24dp
最佳處碰範圍為48x48,所以icon左右需留下12dp的距離,因此icon與icon間的距離應為24dp


按鈕排版差異比較
未修改以前設計
  • 未修改以前的按鈕因間距小顯得壅擠
Material Design設計
  • 改版後符合質感設計按鈕規範
  • 按鈕與按鈕間距離為8dp
  • 按鈕的高度為36dp


在訊息列表排版差異
未修改以前設計
  • 未修改以前的條列消息行距不明顯
  • 因擁擠顯得不易閱讀容易讓人忽略
Material Design設計
  • 改版後將行距規劃出來畫面較清爽


在下拉選單出現部分
未修改以前設計
  • 未修改以前的選單文字與下拉距離太近
  • 因下拉選單的陰影處理顯得與背景距離很高
Material Design設計
  • 改版後符合質感設計選單規範
  • 選單應有上下內距,距離為8dp
  • 每一個選單的高度最小32dp或48dp
  • 陰影處理讓蝦拉選單層級不會比選單高出太多

更多文章:

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