3个UI界面设计作品优化解析改稿案例

有些设计作品乍一看还挺不错的，但其实可以改进优化的地方还有很多。下面3个APP界面设计作品你可以先看看原稿，想想需要优化改进的有哪些地方，然后看看资深设计师的优化解析是不是跟你想的一样。如果你能找出问题并有能力优化这些问题，那么恭喜你，你已经是个不错的UI设计师了。如果不能，那么可以看看这些问题有没有出现在自己的作品中。

案例1

问题分析：

排版：字段的字号和字重对比不够强烈；右侧「猜你喜欢」列表中图文间距控制不理想，看着有点挤。

字体：整体字体偏小。

色彩：色彩应用较昏暗，看起来不够活泼；选集被选中项的色彩不够突出，倒有点像已看过的置灰项。

样式：首页banner后的图片添加得比较生硬，图上叠图的效果并不好；演员卡片太小，过于逼仄，不够大气。

改稿说明：

• 将 Banner 撑满顶部，并用弧形设计，分页器和搜索框等一些按钮全都放在 Banner 图中。
• 热点热议模块加入实时滚动公告功能，下方图片与文字模块未做太多修改。
• 电视剧模块使用该剧的封面图来填充，并加入标签来丰富页面。
• 右图对上半部分信息进行重新排版，增大演员模块，加入饰演角色，使用户获取信息更直观。
• 对底部“猜你喜欢”模块中的信息进行整合，并调整其位置。

案例2

问题分析：

排版：商品卡片中的图文间距/对齐、动态中图文的对齐没有做到位。

字体：字重对比不够，整体偏细，看起来有点轻飘飘的。

色彩：也是太轻太淡，所以画面没有明确的着眼点来吸引和引导视线；搜索框的色彩过重，灰不溜秋的。

样式：动态的样式放在首页不理想，左侧的负空间被切得坑坑洼洼，且把权重最高的商品卡片弱化了，反而突出了发布者信息，本末倒置；tabbar 图标太过简单，也没体现出多少产品气质。

改稿说明：

• 去除了所有圆角，改成直角，符合产品气质。
• 将底部 Tab Bar 图标进行替换。
• 首页顶部增加了 Banner 运营模块。
• 对快速入口进行了调整，一页显示加到了4个，并对里面的内容进行细化。
• 对用户动态模块进行重新设计，原设计不符合该模块本身所要表达的意义。
• 右图顶部 Banner 撑满，加入搜索框，并使它可以被滚动。
• 将分页器下移，在分页器的上部加入瓷片区。

案例3

问题分析：

排版：头部区域留白太大，banner位置过分偏下导致首页看起来重心下坠。

字体：整体偏细，字重的对比没有表达出来。

色彩：没有太大问题。

样式：浅色背景上使用白色卡片在做一层投影，视觉负担增大。

改稿说明：

• 首页顶部加入渐变色背景，并调整文字内容，输入框放在中间，使页面更饱满。
• 修改了快速入口图标的样式，将其缩小，并增加至 5 个。
• 底部去除了卡片式设计，改为列表式设计，左图右文。
• 右图没有做太多调整，只将顶部打卡模块拆散，进行重新排版