服裝電商主題UI界面改稿優化案例

  • A+
所屬分類:經驗思維

本文來源: 酸梅干超人(公眾號: 超人的電話亭), 共 940 字

HELLO,大家好,酸梅干超人老師又帶著他學生的日常作業來進行改稿“公示”了。這次是以優衣庫電商服裝APP為主題的UI界面練習,依舊是從排版、字體、色彩、樣式四個方面進行問題分析和優化建議。

案例1

服裝電商主題UI界面改稿優化案例

問題分析:

排版:登錄頁分割較多,有比較強的分裂感。首頁的矩形內容太多,顯得死板!

字體:字體缺少足夠的對比度,對權重的表現不理想,無法分清主次,且字很難被看清。

色彩:主色使用沒有太多問題,配圖顏色不夠整體。

樣式:圖片使用太多,組件實際樣式和標題所表達內容不符。

服裝電商主題UI界面改稿優化案例

改稿說明:

  • 在登錄頁中,對需要輸入信息的地方加入輸入框;其他操作放到登錄按鈕下方。
  • 將圓角全部改為直角,并對圖片進行了調整,更符合優衣庫產品的主題。
  • 修改了“人氣推薦”組件的樣式,避免頁面圖片過多的問題,并更符合標題實際意義。

 

案例2

服裝電商主題UI界面改稿優化案例

問題分析:

排版:商品卡片價格右側出現大量無意義留白。

字體:分頁器文字過大;商品卡片中字體的粗細、顏色對比沒有表現出來。

色彩:沒有太多問題。

樣式:分類頁面圖片占比太大,且在配圖的使用上顏色不夠整體。

服裝電商主題UI界面改稿優化案例

改稿說明:

  • 在分類頁中將圖片縮小,并將文字放在圖片下側。
  • 對商品卡片進行了重做,加入官方原有字段,并將字體對比體現出來。
  • 將圓角全部改為直角,圖片色彩進行統一。

 

案例3

服裝電商主題UI界面改稿優化案例

問題分析:

排版:頁面對齊有少許問題,并且親密性也沒有很好地體現。

字體:對比不明顯,標題和可以點擊的內容沒有表現出來。

色彩:顏色過于混亂,加入購物車按鈕無需做成純色按鈕。

樣式:商品介紹頁頂部 ICON 和下方重復,購物車卡片中的內容過于擁擠。

服裝電商主題UI界面改稿優化案例

改稿說明:

  • 商品介紹頁標題部分的排版進行了優化,不同權重的字體重新梳理。
  • 顏色選擇中圖片加大,可以更直觀地選擇;尺碼選擇在頁面中等分處理,更易點擊。
  • 根據四要素中的親密性原則對購物車中商品卡片的字段進行重新排列。

 

案例4

服裝電商主題UI界面改稿優化案例

問題分析:

排版:右側頁面圖標離上方留白過多;列表之間上下間距過小。

字體:字體顏色層級太少,沒有識別性。

色彩:右側頁面圖標和數據信息漸變的使用使頁面過于混亂。

樣式:熱銷排行卡片組件下方大量無意義留白。

服裝電商主題UI界面改稿優化案例

改稿說明:

  • 調整右側頁面上半部分的樣式,將快速入口的圖標進行縮小,看上去更精致
  • 根據四要素原則,對熱銷排行卡片組件中的字段重新梳理
  • 右側頁面取消了漸變色的應用,加大了列表之間的間距。

 

全部頁面展示

服裝電商主題UI界面改稿優化案例服裝電商主題UI界面改稿優化案例

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: