Material Design 改版實例

BY Grace │ 2019-09-26 11:20:53

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

電腦版

改版前

卡霓朵畫面改版-原畫面圖

改版後畫面設計

卡霓朵改版後畫面

CS屬商城，其形象走比較細緻，所以文字、間距調整會小一點，但整體一樣以8倍數下去調整
頭部高度調整為 96
主選單按鈕是使用BUTTON的規範，高度是36
圖片比例，搭配logo形象，選用較長型16:9的圖片比例

卡霓朵畫面改版-電腦版

手機版

卡霓朵改版

手機版頭部調整，除了距離上微調，最大差異在於滑開選單按鈕位置更換

卡霓朵改版

滑開選單

卡霓朵改版

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

卡霓朵改版

產品排列

因為多了分類選項，所以套用material design 的tabs規範來設計此區塊
產品排列間距等皆套用material design cards 規範設計排列

卡霓朵手機板改版畫面-2

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

徵才資訊

網頁設計助理

網頁設計師

文章關鍵字：Material Design UI設計質感設計

更多文章：