後台改版Material Design1

後台改版Material Design1

歷時10年的後台不論架構、長相,不免會看得出歷史的痕跡,加上這中間不斷進化的新功能,每每有新功能就是找看似妥當的位置塞進去,套用的樣式在每年的系統更新上也不盡相同,這樣強大的電商後台系統,如果在改版上套用Material Design質感設計,想必所有後台管理者操作上心情應該會更愉悅吧!

後台改版第一步:整理後台元件
想要改版,勢必要先了解要改的內容有甚麼,並針對元件套用material design統一化設計。

元件
後台元件整理過程


後台改版第二步:重新設計符合material design的元件
繪整出元件的好處是,在繪製新頁面時,可以先從元件表找出有沒有可用元件,避免同類型的元件重複繪製,變的樣式不統一

設計元件
後台元件套用質感設計繪整過程


後台改版第三步:編排
編排的路遙遠漫長,畢竟幾乎要把所有頁面都重新整理一翻,這次先從簡單的卡片式頁面下手,這頁面幾乎是購物車相關的一些設定,因為此頁面本來就以區塊區分,所以直接選用material design卡片樣式來套用。

購物車相關參數設定
未修改前的畫面


購物車相關參數設定-改版
修改後的畫面

  • 在畫面上方的選擇是否開啟購物車,把適當間距規劃出來,讓選擇更為明顯
  • 修改後的畫面加入了圓角來修潤整個畫面的複雜死板感覺
  • 卡片加上陰影層級明顯顯現
  • 卡片內容還有卡片與卡片間的距離也依照material design規劃來設定,每一個區塊選擇更明顯,不會像之前擁擠需停留較久去辨識文字內容選擇
購物車-card品項
購物車
card.PNG
接下來,讓我們待續....

更多文章:

  1. 後台改版Material Design2
  2. 比較Material Design 1
  3. Material Design 動態效果
  4. 卡片列表與圖片列表
  5. Dark theme 深色主題

回應