扫码登录 我要学设计网
设计师的职业进阶课堂

微信扫码登录 | 方便安全省心

这个简单的界面我是这样进行修改的

黑马青年 2021年11月24日 发布 / 584 次阅读

光阴似箭,一晃 2021 年就还剩余最后一个多月的时间啦!年初定的目标是否已经完成,是时候开始验收啦!设计能力的提升只需要多一点行动,多一分设想,简单的事情重复做,重复的事情做到极致,专业能力自然不会太差。


想要做得比别人好,就要在细微之处多用心,往往被忽略的都是精细化的部分。为了提高大家对于设计的细节处理,黑马哥在之前也分享了一次案例修改思路,也获得了很多设计小伙伴的认可。本期将会继续给大家分享,面对这个非常简单的需求,我是如何进行设计细节处理的,希望可以带给你更多思路。


封面.png


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


0.png


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




发现问题


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



头部导航栏区域

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


1.1.png


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


1.2.png


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


1.3.png



顶部分类导航区域

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


2.png



Banner 图区域

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


3.1.png


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


3.2.png


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


3.3.png



作品(菜谱)区域

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


4.1.png


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


4.2.png


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


4.3.png



底部标签栏

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


5.1.png


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


5.2.png


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




案例修改


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



头部导航栏区域

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


6.1.png


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


6.2.png



顶部分类导航区域

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


7.png



Banner 图区域

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


8.png



作品(菜谱)区域

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


9.1.png


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


9.2.png


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


9.3.png


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


9.4.png


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


9.5.png



底部标签栏

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


10.1.png


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


10.2.png




完成


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


11.1.png


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


11.2.png


最后,感谢大家的阅读学习,希望对大家能有一定的帮助,后续将会继续带来更多案例的修改分析,我们互相进步。



作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。