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 陰影處理讓蝦拉選單層級不會比選單高出太多