这个设计我是这样进行修改的

黑马青年 2021年06月24日 发布 / 539 次阅读

随着设计职场对 UI 设计师的要求不断升级，我们需要掌握的技能层层叠加，从最初的视觉层加对接层演变成我们还需要具备动效层、交互层、产品层等能力。所以说三年入行五年精专，想要做好这个细分岗位也是不易的。

0.1.png

当然，无论高度的天花板有多高，一切都还需要脚踏实地。就算是面对视觉层这样的底层技能需求，依然还是有部分设计师达不到精细化的程度。无论是整体的风格把控，还是局部的细节思考，都容易被忽略。

0.2.png

今天黑马哥就来和大家一起攻破一下视觉层面的精细化，挑选了黑马家族成员第一次尝试的界面为案例进行解析。以案例实战的形式进行解析，很多设计原则和思考仅代表个人经验总结，大家需要结合自身项目情况酌情运用。

一、找问题

二、如何改

三、总结

四、标注文件分享

一、找问题

1.1、先看整体

当我们设计完一个界面之后，我们需要先看整体再打磨细节，整体的视觉引导和信息层级关系需要处理到位。如果整体信息层级把控不准，可以将界面模糊态之后观察。案例中界面头部到 Banner 区域信息对比模糊；金刚区下方的异形广告位过度干扰，导致视觉焦点不明显。

1.1.png

1.2、再看局部

整体排查之后，从上往下再进行局部细节走查。导航栏和 Banner 区域需要进行视觉比重区分，这里忽略 Banner 设计本身的质量；金刚区图标无需灰色卡片背景，图标设计细节规范和表现力不够深入等；异形广告比重太大，需要弱化处理；列表排版信息对比不明显，局部信息需要图标化引导，配图处理过于单一等；底部标签栏没有区分点击和默认状态，图标设计细节规范问题，中间图标采用“凹”式效果不够柔和等。

1.2.png

1.3、设计规范

对于 UI 设计来说，规范性是设计的基础，确定好界面尺寸的模版比例之后，标准的控件不要用错。根据案例的尺寸比例属于 iPhone X 的设计，在项目设计中尽量真实还原设计稿，状态栏和底部主页控制器不要用错。整体布局过程中的数字关系比较混乱，在布局的过程中定好数字系数，按照系数的倍数关系来进行排版布局。

1.3.png

以上问题仅作为列举示意，更多问题大家自行分析归纳，这里就粗略统计啦！

二、如何改

根据分析出的问题，接下来我们逐步进行调整。在进行界面布局的过程中，我们需要根据需求先设计出高保真原型图，忽略颜色、配图、图标等耗费时间的设计内容，快速将整体的信息对比关系做出来。个人的习惯是根据低保真原型图、高保真原型图、UI 设计稿、细节打磨等环节进行。

2.0.png

2.1、头部细化（状态栏）

头部我们通常采用深色（品牌色）、浅色、白头、Banner 图填充等形式。为了使整体设计通透性更好，我选择白头加局部色彩点缀的形式，处理手法使用了极光效果。既可以让头部的效果更具特色，露出品牌色增强曝光度，也不会和 Banner 图互相干扰。

2.1.png

2.2、Banner 尺寸标准化

在确定 Banner 图尺寸的时候虽然我们可以自定义，但是我们也尽可能的在探索更规范的形式，利用一些数列关系来确定比例关系。这里我采用了斐波那契数列进行计算，在推荐的宽高比例中我使用了 8:3 进行计算。在算出的值中取能被 4 整除的数值，确定 Banner 尺寸为：686*256px（基于二倍图）。

2.2.png