设计总监UI界面改稿优化案例

  • A+
所属分类:经验思维

本文来源: 咸梅干超人(公众号:超人的电话亭), 共 1061 字

本文是资深设计师,设计总监咸梅干超人的学生日常作业的展示有优化。和往期的UI界面改稿一样,依旧是从四个方面入手分析讲解,依旧是干货满满。希望这些评点改稿案例能够让你有所领悟。多看,多做,多学习,你的“开窍”时间就会越早到来。

案例1
设计总监UI界面改稿优化案例

问题分析:

排版:左侧案例下方卡片里的内容对齐不统一,特别混乱;底部 Tab Bar 上半部分留白过多

字体:左侧案例在图片上的文字无法被很好地看清

色彩:没有太多问题,使用的配图有点乱

样式:左侧案例图片过多,组件样式单一,缺少趣味性

设计总监UI界面改稿优化案例

改稿说明:

  • 对所有图片进行了调整。
  • 将“更多活动”与“印象生活馆”两个模块位置互换,并修改他们的样式,使页面更加合理
  • 将右侧案例上方的标签模块和背景图结合在一起,减少了其占用面积
  • 调整了 Tab Bar 的样式,将图标全部替换,并将选中状态进行调整,使页面更有趣。

 

案例2
设计总监UI界面改稿优化案例

问题分析:

排版:右图页面没有很好地运用平面四要素原则

字体:字体缺少权重对比,重要的文字没有很好地被表现出来

色彩:无法明确主色是橙色还是红色,配图过于混乱

样式:右图票务类型模块显得多余,以及投影太深

设计总监UI界面改稿优化案例

改稿说明:

  • 对所有图片进行了调整。
  • 修改了首页瓷片区的样式,使该模块更合理,并体现出设计感。
  • 原图首页最下方的卡片内容过于混乱,对里面的内容重新进行了排版。
  • 删除了右图原本的“票务类型”模块,改成点击底部的按钮,弹出选择票务类型,使页面更合理。
  • 对右图其余所有内容重新进行了排版,并加入了地点信息。

 

案例3
设计总监UI界面改稿优化案例

问题分析:

排版:左图顶部输入框和文字无法被看清

字体:文字缺少足够的对比度,字重和字色的差异性没有体现,难以抓到重点

色彩:主色没有用在主要的元素上,辅助色应该起到画龙点睛的作用,而不是大面积使用

样式:没有太大问题,但是太过于死板,右图全是文字且对比微弱,看着很难受

设计总监UI界面改稿优化案例

改稿说明:

  • 对所有图片进行了调整。
  • 首页顶部新增当前城市的天气温度和旅行人数,加入情感化设计
  • 加入了快速入口图标,使页面更加丰富多彩
  • 调整“旅行探索”模块的样式,更符合该模块的本意
  • 对右图进行重新排版,增加字体对比和主色的使用,使页面看上去更舒服

 

案例4
设计总监UI界面改稿优化案例

问题分析:

排版:左图上方空出一块很奇怪,底部 Tab Bar 图标过大,整个页面特别粗糙

字体:整个页面文字使用较少,没什么太大问题

色彩:没有出现辅助色,全程主色撸到底,特别枯燥

样式:左图无需出现返回按钮;整个页面图片占比太多,且用图过于混乱,文字较少,没什么看点

设计总监UI界面改稿优化案例

改稿说明:

  • 对所有图片进行了调整。
  • 修改首页顶部样式,减少不必要留白
  • 重绘并缩小底部 Tab Bar 的图标,新增歌曲播放标签
  • 对右图进行重新排版,缩小图标,加入了一些细节


发表评论

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