先看一下这个界面修改前后的对比，是一个相对简单的界面，无论是功能还是文案内容都不复杂。

下面通过发现问题和案例修改来进行分析（案例来源于黑马家族内部学员的初次作业）。

发现问题

好了，看完修改前后的对比之后，我们开始进一步分析，从上到下一起来看一下吧！

头部导航栏区域

功能层面来说，发布既然运用高亮的处理，证明该功能是相对比较重要的，放在手势盲区操作体验不是很友好。

右侧的两个功能图标距离太近，点击过程中容易造成误操作，两个图标的视觉不平衡，不能以高度来定标准，要看整体的面积占比。

最后，发布、搜索、功能图标之间的间距没有做规范设计，导致设计不够严谨，视觉协调度和节奏感没有呈现出来。

顶部分类导航区域

这个部分问题不是很大，类别之间的间距可以适当增加，如果是可以左右滑动的，末尾最好再新增一个，把可滑动的样式体现出来。

Banner 图区域

轮播 Banner 图采用通栏的处理，会将整个界面一分为三（头部区域、Banner 区域、作品区域），如果界面边距较大的时候，这样处理不是很理想，会使得整个界面不够连贯。

轮播点的处理不建议使用灰色来表现，不仅区分不明显，配色上面也显得不够干净整洁。

Banner 图本身的质量也是需要注意的，站在输出作品的角度来说，图片的质量会影响整个作品的气质。而且这个图没有任何主题，设计的真实感无法得到体现。

作品（菜谱）区域

整个界面篇幅较大的区域就是推荐的各类菜谱，第一眼看过去，是不是图片显得没有食欲啦！针对美食类作品，只有食物本身的食欲感才能吸引用户去点击学习。

菜谱名称、作者信息、收藏与收藏数的显示亲密关系处理不合适，关联性被分断了。

间距留白没有掌握好数字关系，显得比较拥挤。直角的封面图显得有些生硬，亲和力不是很强。

底部标签栏

底部标签栏最主要的就是图标设计，图标设计的规范性需要注重一下。比如针对线性图标来说，描边粗细的统一、圆角值的统一和风格的统一等需要重点对待。

其次就是点击状态和默认状态的区分，图标利用颜色深浅进行区分也是可以的，文字区域的区分也需要进行深浅的对比。

以上便是针对这个界面发现的一些在 UI 层面的问题，接下来我们一起针对这些问题进行修改。

案例修改

针对罗列出来的问题，下面进行一些修改，设计属于主观表达，仅代表黑马哥自己的想法。不足的地方欢迎大家留言指正，互相进步。

头部导航栏区域

为了方便用户发布内容，我将发布按钮移出导航栏，放置在底部标签栏。将右侧的两个功能图标拆分为左右两侧布局，优化了间距和布局细节。

功能图标绘制上面三条横线做了长短变化，显得更灵动。整体图标的高度要比通知图标的小一点，以此来平衡它们之间的面积差异。

顶部分类导航区域

这个部分优化了文字之间的间距，然后通过字体大小和颜色深浅来区分点击和默认状态的差别，将短线装饰改为弧线，弧线作为符号基因运用到底部标签栏的图标设计中，这里是作为视觉符号的延续。

Banner 图区域

轮播 Banner 图本身没有做，本期案例只是 UI 层面的修改。优化了 Banner 图的比例，采用 8:3 的比例进行计算，取 4 整除的高度数值。轮播点的设计通常有数字、小圆点、小短线、进度形式等，这里采用进度形式来表达。

作品（菜谱）区域

这个部分调整比较大，从内容到布局结构都做了调整。首先将固定尺寸的封面图改为宽度固定高度自定义的瀑布流设计，满足用户的不同拍摄需求，对图片设置了圆角处理，增强亲和力。

将标题、作者信息、收藏数据统计等信息进行整合，集中布局展示，增加内容之间的亲密关系。新增了标签，由于菜谱种类较多，通过标签更容易搜索到同类菜谱。

收藏图标加数字来体现之前的文字表达形式，用户更容易理解，采用爱心图标既能表示喜欢也能带有收藏的作用，点击欲更强。

单行标题适配为最多两行显示，方便用户为自己的菜谱名称增加修饰词。这里需要考虑最大值的情况，设计的时候需要体现出超出最大值的设计样式。

最后就是选择了拍摄质量更好的图片来填充，作为作品输出来说，配图的质量还是至关重要的。来看一下这个部分的最终效果，对比一下就可以感受出前后视觉感的差异。

底部标签栏

将发布按钮布局在中间位置，做突出形式，吸引用户发布内容，丰富平台的作品量和提高用户参与度。可以布局在标准的底部标签栏内部，也可以做凸出显示，这里尝试了两个版本。

优化了图标设计，统一了描边值和圆角值，用小弧线作为视觉符号进行点缀。点击状态换成面性图标，区分更加明显，显得也更为成熟稳重。文字需要体现当前状态和默认状态的差异，这里使用品牌色来区分，也可以使用深浅不同的灰色来体现。

完成

通过对发现的问题进行调整之后，完成了最终的设计案例优化。这个案例比较简单，通过案例想要说明的点是：无论简单还是复杂，都要考虑好每一个细节的深入，也要对每一个元素的设计有自己的设计想法。每一个界面都要体现出设计规范、设计质量和自己的设计态度，只有作品成熟才能说服别人，获得认可。

本次案例修改的大体流程是：分析问题所在、组织优化思路、调整内容结构、设计高保真原型、填充内容完成最终 UI 稿。

文章转载：黑马青年，版权归原作者所有