7个UI界面设计优化改稿实例

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

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

相信很多设计师在做完设计后,要么觉得不够满意但就是不知道如何修改,要么自我感觉良好,但其实还有很大的改进空间。下面是资深设计师酸梅干超人关于学员日常UI界面视觉训练的的评改内容,是这阵子挑选的一些作业的修改。这次的修改是在原图基础上做小改,没做颠覆式的调整,希望能给你对自己作品的审视带来一起帮助。

案例1

7个UI界面设计优化改稿实例

问题分析:

排版:排版问题不大,右侧详情页中分割的卡片数量偏多,看起来不是太舒服

字体:部分说明文本偏小,文字样式过多

色彩:橙色和彩色渐变投影的加入反而使画面出现混乱

样式:按钮圆角不统一,地标卡片展示不合理

7个UI界面设计优化改稿实例

改稿说明:

  • 统一了圆角按钮和去掉了投影
  • 将部分卡片内容进行适当的合并,使页面内容看起来更整洁。
  • 将顶部图片和背景采用渐变进行融合,减少割裂感

 

案例2
7个UI界面设计优化改稿实例

问题分析:

排版:没有太多排版问题,右侧页面顶部字体偏拥挤

字体:字体样式偏多,且字重比较混乱

色彩:背景色和主体物过于接近,不利于前后层级划分

样式:封面样式的描边不合理,标签的模糊样式和背景冲突

7个UI界面设计优化改稿实例

改稿说明:

  • 加深了背景用来突出主题(实际上换张图片效果会更好)
  • 将元素的间距进行适当调整让内容看起来更严谨
  • 修改了若干配色细节,让颜色分布更合理

 

案例3
7个UI界面设计优化改稿实例

问题分析:

排版:首页不同矩形的比例排列起来比较违和,且Banner内文字排版不合理

字体:没有太多问题

色彩:没有太多问题

样式:首页图片占比太多,看起来枯燥

7个UI界面设计优化改稿实例

改稿说明:

  • 修改 Banner 内容和文字排版,增加指示器
  • 调整了最新作品列表的图片比例
  • 调整了活动比赛模块的形式,和上方内容做区分

 

案例4
7个UI界面设计优化改稿实例

问题分析:

排版:作图元素排列位置没有规律,整体元素间距上缺乏控制

字体:字体大小和字重控制太随意,没有规律

色彩:黑色的渐变使用过多,且配图颜色不够整体,两个页面缺乏色彩联系

样式:购买和全部按钮的比例尺寸都不太合理,色彩选择按钮不明所以

7个UI界面设计优化改稿实例

改稿说明:

  • 使用了风格一致的图片素材
  • 减少了黑色渐变的透明度
  • 调整了文字的尺寸和排列,提升阅读感
  • 更改了按钮的样式,更符合操作习惯
  • 调整了元素间距让内容更紧凑,张弛有度

 

案例5
7个UI界面设计优化改稿实例

改稿分析:

排版:部分模块的内容过于拥挤,大图模块使用过多

字体:字重、字号没有有效控制,感受混乱

色彩:添加了很多不必要出现的背景色,字色太黑

样式:组件设计缺乏细节,且样式不合理

7个UI界面设计优化改稿实例

改稿说明:

  • 调整了大图背景组件中文字的排版和比例
  • 更改了部分内容的间距和排列方法
  • 调整了组件的展示形式,去掉不合理的背景

 

案例6
7个UI界面设计优化改稿实例

问题分析:

排版:半卡片的展示不够彻底,语言、话题组件的排版太简陋

字体:对比性差差了点,主次的区分不够明显

色彩:几乎只用主色使得画面看起来很乏味

样式:组件样式没有亮点,文字使用过多而枯燥

7个UI界面设计优化改稿实例

改稿说明:

  • 优化了组件样式和排版方式,让信息层次更清晰
  • 减少了主色的使用和增加辅助色彩
  • 将卡片的应用和统一化,特定元素会悬浮
  • 字体做出进一步修改符合阅读需要

 

案例7
7个UI界面设计优化改稿实例

问题分析:

排版:布局的内容没有太多的问题

字体:部分文字看不清,且权重的表现没有做好

色彩:主色的使用饱和度太低,且辅助色明度过高

样式:组件边缘大圆角的做法缺乏视觉支撑

7个UI界面设计优化改稿实例

改稿说明:

  • 调整了文字的权重表现
  • 更改了主色的应用增加饱和度
  • 应用色彩较深的头部图片稳定画面重心
  • 对详情页信息进行重新整理


发表评论

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