4个UI界面改稿重设计案例

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

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

新手做设计最怕的是做完了后自己不知道哪里需要修改,需要经历很长时间的磨练才能慢慢提升,进而发现自己早期作品出现的问题。而如果有个资深的设计师帮你带带路,指点指点,那就可以少走很多弯路,大幅度提高学习效率。本文的4个案例是资深设计师酸梅干超人关于学员日常UI界面视觉训练的的评改内容,经过版式和一些细节的调整后,整个UI界面的精致度立马就起来了。

案例1

4个UI界面改稿重设计案例

问题分析:

排版:模块的间距过大,且不合理的留白过多,让画面看起来不饱满。

字体:对比性有体现,但是主要阅读文本偏小,或者文本数量不足。

色彩:用图和主色使用都过于扁平,缺少实际的视觉冲击力,且主色使用过于零散。

样式:比较明显的问题是最近更新中图片突出去的做法破坏对齐性,且标题旁边的竖线过于多余。

4个UI界面改稿重设计案例

改稿分析:

  • 对图片进行了调整,让主题和色彩更突出。
  • 对主图 Banner 的排版做更改,让信息内容更容易被识别。
  • 主页增加了一个组件,让内容更饱满,且去掉不对齐的设计。
  • 详情页去掉了渐变,对主要功能采用悬浮卡片设计,让页面模块划分更清晰。

 

案例2

4个UI界面改稿重设计案例

问题分析:

排版:没有太明显的问题。

字体:大量最高的字重应用,以及深色字过多让画面显脏。

色彩:颜色使用偏平淡,没有吸引力。

样式:图标的样式不同意,部分卡片的使用不太合理。

4个UI界面改稿重设计案例

改稿说明:

  • 调整了主图和首页头部的样式,让按钮和输入框能更容易被识别。
  • 强化了首页头部卡片内的文字对比,突出关键信息,且作为页面权重最高组件的暗示。
  • 首页头部的颜色整体偏深,而不会显得头重脚轻。
  • 统一了图标的样式,将最新推出的卡片去除。
  • 对排版的细节进行调整,让画面更有空间感而不会感觉拥挤。

 

案例3
4个UI界面改稿重设计案例

问题分析:

排版:系统组件使用方式有问题,首页头部太空,详情页下方列表内容排列太死板。

字体:在目前的排版中没有明显问题。

色彩:主色存在感不强,整体颜色表现偏脏,图片颜色太“飘”。

样式:图片使用太多,且图片形式单一,列表的卡片样式也缺乏设计性。

4个UI界面改稿重设计案例

改稿说明:

  • 简单调整了图片的样式,让画面内容更清晰
  • 优化了组件的样式,增加首页组件的丰富性
  • 对详情页播放区域进行调整,节省更多的空间
  • 对列表作出调整更容易让用户感知当前所处步骤

 

案例4
4个UI界面改稿重设计案例

问题分析:

排版:排版没有明显的问题,列表页头部的空白区过多

字体:较多字段字号太小,且颜色层级太少,没有识别性

色彩:荧光黄无法在上方使用白色文字,且色彩体验过于单一

样式:在采用卡片式设计中卡片无法被很好的感知到,用图没有关联性

4个UI界面改稿重设计案例

改稿说明:

  • 调整了头部的设计,增加了 Banner 的文字内容
  • 对字体进行调整,且强化了对比性
  • 调整了背景色,不用阴影的方式来突出卡片组件
  • 更换了图片时不同内容图片有差异性利于浏览
  • 更改了列表页顶部样式减少奇怪的留白感

  • 版权声明:本文源自 酸梅干超人(公众号: 超人的电话亭), 共 1089 字。
  • 转载请注明,本文链接:4个UI界面改稿重设计案例

发表评论

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