服装电商主题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: