Material Design 改版實例

Material Design 改版實例
此次卡霓朵商城改版,採用了全站material design的設計,依其品牌形象風格下去做整個版面微調,還做了網站優化內容調整,改版前後畫面上的差異性,可以明顯看出加了material deisgn 設計規範後整體美觀度更讓人覺得舒適,尤其以手機接面操作上也更為流暢集中。

電腦版
改版前
卡霓朵畫面改版-原畫面圖
改版後畫面設計
卡霓朵改版後畫面
  • CS屬商城,其形象走比較細緻,所以文字、間距調整會小一點,但整體一樣以8倍數下去調整  
  • 頭部高度調整為 96  
  • 主選單按鈕是使用BUTTON的規範,高度是36  
  • 圖片比例,搭配logo形象,選用較長型16:9的圖片比例

卡霓朵畫面改版-電腦版
手機版
卡霓朵改版
  • 手機版頭部調整,除了距離上微調,最大差異在於滑開選單按鈕位置更換
卡霓朵改版

滑開選單
卡霓朵改版
  • 手機上滑選單寬度調整,背景會有透明度黑遮蓋,讓使用者更集中於選單使用
  • 滑開選單內按鈕間距調整,以前都畫面設計都比較密集
卡霓朵改版

產品排列
  • 因為多了分類選項,所以套用material design 的tabs規範來設計此區塊
  • 產品排列間距等皆套用material design cards 規範設計排列
卡霓朵手機板改版畫面-2

網站畫面截自 - 卡霓朵官方網站

更多文章:

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