路野

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

图片

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

图片

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

一、找问题

二、如何改

三、总结

四、标注文件分享

 

  找问题 

 1.1、先看整体

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

图片

 

1.2、再看局部

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

图片

 

1.3、设计规范

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

图片

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

 

 如何改 

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

图片

 

 2.1、头部细化(状态栏)

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

图片

 

2.2、Banner 尺寸标准化

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

图片

 

2.3、金刚区图标优化

金刚区图标设计风格很多,大体上分为线性和面性风格,而面性里面也会有扁平的和质感的。如果在图形统一性上面把控较弱,也可以采用统一的外轮廓背景来进行约束。外轮廓有圆形、圆角矩形、椭圆形、超椭圆等,这里我选择了超椭圆作为图标设计的外轮廓。

 在配色上面为了和整体色系搭配,选择了莫兰迪色系,图标设计风格偏向于微质感。

图片

 

2.4、通知栏优化

根据之前案例中异形广告的文案“中华医学会指南全新上线”,偏向于通知形式,优化后改为通知栏板块。既可以突出查看按钮,也不会过度视觉化干扰金刚区功能模块。为了突出通知内容,根据内容的强化等级在前面添加火苗图标,起到重点强化的目的。

图片

 

2.5、健康须知模块优化

该模块优化了卡片式设计,改灰色卡片为白色卡片,这样显得更加干净整洁。除了对标题等信息对比加强以外,也将一些文案进行图标化,增强设计感。

 之前的配图采用统一模版的文字表达形式,这样过于单一,而且设计感欠佳。调整后采用图片表达,更能引导用户点击阅读。

图片

 

2.6、底部标签栏优化

重新绘制了底部标签栏的图标,默认状态采用线性图标,点击状态采用面性。中间图标将“凹”式改为“凸”式,通过调整凸出的锚点使得整体过渡柔和。中间凸出图标设计风格和金刚区保持一致,形成上下风格关联。

图片

 

2.7、完成

在保持原有信息的基础上,仅做了视觉层面的优化,希望这个案例修改可以带给你更多思考。

图片

 

三  总结 

 这是一个功能相对比较简单的首页案例,本次案例忽略了产品层面、交互层面等思考,只在视觉层进行了优化。调整了色彩关系、布局细节和图标设计等内容,基于原始案例内容不变的情况进行调整,希望抛砖引玉,可以带给大家更多思考。

 

 标注文件分享 

最后附上修改案例的标注文件,希望可以帮助大家更好的理解。关注“黑马家族”公众号,后台回复关键词“首页设计”获取标注文件。

 

原文地址:黑马家族(公众号)

作者:黑马青年

图片

 

转载请注明:学UI网 » 这个设计我是这样进行修改的

登录收藏
 
你可能喜欢的:
HMI设计需要遵循什么设计原则?HMI设计需要遵循什么设计原则?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
改作业 | 有一说一,这个改稿效果真不错!改作业 | 有一说一,这个改稿效果真不错!
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
淘宝订单页改版分析:如何提高支付转化率淘宝订单页改版分析:如何提高支付转化率
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)