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

本期的5个UI界面设计改稿优化案例依旧是设计总监咸梅干超人对他学员作品的点评修改。我们的很多设计作品看上去好像没问题，但是经过资深设计师一点，你才会发现原来还是有一些问题需要改进的，界面可以做的更好看。如果没有良师益友的指引，那么自己就需要学会分析自查，可以借鉴本文的“问题分析”，从排版、字体、色彩、样式四个方面进行自我排查修正。当然，这需要平时大量的看些优秀的设计作品，不断的知识积累。随着审美的逐步提高，你将发现自己在设计上更多需要修正的问题。

案例1

问题分析：

排版：登录页分割过多，分裂感太强，背景图片和模糊效果不理想。首页不同模块的亲密性没有表现出来。

字体：首页瓷片区模块里的文字无法被很好地看清。

色彩：没有太多问题，图片使用整体偏“轻”。

样式：首页图片使用太多，形式太单一；组件没有创意，右图底部 Home Indicator 规范错误。

改稿说明：

• 修改了登录页的样式，背景图片使用官方制作的趣味 Lgog 图，和产品更统一。
• 原图首页左边显得太空，改版将分页器进行左对齐，保持视觉统一。
• 原图首页太多的图片让页面看上去混乱，修改了瓷片区的样式，使页面更丰富。

 

案例2

问题分析：

排版：没有太大问题，右图播放区域可以优化。

字体：部分文字看不清，字重对比没有很好控制，感受混乱。

色彩：主色存在感不强。

样式：当前页面没有太大问题，右图标签栏底部的线可以去除。

改稿说明：

• 将图片撑满顶部区域，分页器下移，增加可视区域的内容。
• 本周新书加入背景色，和其他模块区分，以示其重要性。
• 近期新书使用卡片式设计，封面半凸出显示，增加组件的趣味性。
• 调整右侧页面的排版，将“信息区域”统一放置在上半部分，“操作区域”放置在下半部分，并增加主色的使用。

 

案例3

问题分析：

排版：右图专辑卡片信息里亲密性可以优化，下方歌曲注释标签间距过大。

字体：没有太大问题，只是两个页面同样是标题文字但是字重却不一样。

色彩：从左到右的渐变色看着很乏味，并且页面使用了过多不必要的投影。

样式：右图是二级页面，左上角加入了返回按钮，下面就不用加入标签栏。

改稿说明：

• 对所有图片进行了修改。
• 对热门歌单和推荐歌手模块进行优化，体现出设计感。
• 右图取消卡片式设计，使用背景模糊的方式体现出文字内容，下方歌曲列表加入图标，使页面看上去不那么单调。

 

案例4

问题分析：

排版：没有太大问题。

字体：右侧页面文字权重区分不明显，标题文字的字重需要加粗。

色彩：没有太大问题。

样式：两个页面有圆角有直角，不统一；首页图片使用太多。

改稿说明：

• 调整了首页 Banner 的文字，将其进行重新排版。
• 将首页 Banner 下方的促销模块下移，并将热销商品模块做成卡片加入文字，避免一页中出现太多的图片。
• 对右侧的信息进行调整，加入商品说明，调整尺寸选择的样式，并加强文字之间的对比。

 

案例5

问题分析：

排版：页面分割太强烈，卡片中的文字离边缘间距太少。

字体：大段阅读的文字颜色太浅，影响阅读，还有一些数字太小，看不清。

色彩：颜色不够出彩，辅助色使用了“屎黄色”，使页面显得很“脏”。

样式：左图顶部输入框有问题，下方组件的样式不够丰富；右图作为二级页面没有返回按钮。

改稿说明：

• 对所有图片进行了修改。
• 赛程卡片重新设计，原图卡片过大，内容过少，导致留白区域过多。
• 下方资讯的权重没有上方赛程高，所以取消卡片式设计，直接使用列表式设计瀑布流展示，无需更多按钮。
• 右图底部加入标签栏，可以快速执行相应操作。