设计修改怎么做.docx

随着设计职场对UI设计师的要求不断升级，我们需要掌握的技能层层叠加，从最初的视觉层加对接层演变成我们还需要具备动效层、交互层、产品层等能力。所以说三年入行五年精专，想要做好这个细分岗位也是不易的。产品层交互层t视觉层动效层对接层黑马青年当然，无论高度的天花板有多高，一切都还需要脚踏实地。就算是面对视觉层这样的底层技能需求，依然还是有部分设计师达不到精细化的程度。无论是整体的风格把控，还是局部的细节思考，都容易被忽略。视觉层底层技能需求黑马青年今天就来和大家一起攻破一下视觉层面的精细化，挑选了界面为案例进行解析。以案例实战的形式进行解析，很多设计原则和思考仅代表个人经验总结，大家需要结合自身项目情况酌情运用。一、找问题二、如何改三、总结四、标注文件分享一找问题1.1、 先看整体当我们设计完一个界面之后，我们需要先看整体再打磨细节，整体的视觉引导和信息层级关系需要处理到位。如果整体信息层级把控不准，可以将界面模糊态之后观察。案例中界面头部到Banner区域信息对比模糊：金刚区下方的异形广告位过度干扰，导致视觉焦点不明显。BI S SW - Ml»健康须如iaj1A.«». BM91 MX*. 。+为B8fl胃U一冲AatXMfl ««7'S$“ 伪黑马青年1.2、 再看局部整体排查之后，从上往下再进行局部细节走查。导航栏和Banner区域需要进行视觉比重区分，这里忽略Banner设计本身的质量；金刚区图标无需灰色卡片背景，图标设计细节规范和表现力不够深入等；异形广告比重太大，需要弱化处理；列表排版信息对比不明显，局部信息需要图标化引导，配图处理过于单一等；底部标签栏没有区分点击和默认状态，图标设计细节规范问题，中间图标采用“凹”式效果不够柔和等。eEi i加吟IwnHttwhmm零进行视觉比重区分色彩处理问题去掉灰色卡片背景图标设计问题比重太大需要弱化中华医学会指南全新上线内容更全.冷疗更IMtOMBG黄 3 皇苜页 消息 今日出诊 料普 我的排版信息对比不明显加强图标化引导 配图处理过于单一点击和默认状态区分图标设计问题黑马青年1.3、 设计规范对于Ul设计来说，规范性是设计的基础，确定好界面尺寸的模版比例之后，标准的控件不要用错。根据案例的尺寸比例属于iPhoneX的设计，在项目设计中尽量真实还原设计稿，状态栏和底部主页控制器不要用错。整体布局过程中的数字关系比较混乱，在布局的过程中定好数字系数，按照系数的倍数关系来进行排版布局。9：41.Hl令黑马青年以上问题仅作为列举示意，更多问题大家自行分析归纳，这里就粗略统计啦！二如何改根据分析出的问题，接下来我们逐步进行调整。在进行界面布局的过程中，我们需要根据需求先设计出高保真原型图，忽略颜色、配图、图标等耗费时间的设计内容，快速将整体的信息对比关系做出来。个人的习惯是根据低保真原型图、高保真原型图、Ul设计稿、细节打磨等环节进行。低保真原型图高保真原型图Ul设计稿细节打磨黑马青年2.1、 头部细化（状态栏）头部我们通常采用深色（品牌色）、浅色、白头、Banner图填充等形式。为了使整体设计通透性更好，我选择白头加局部色彩点缀的形式，处理手法使用了极光效果。既可以让头部的效果更具特色，露出品牌色增强曝光度，也不会和Banner图互相干扰。9：41杭州VQ最新疫情快讯9：41Q搜索疾病/医生等黑马青年2.2、 Banner尺寸标准化在确定Banner图尺寸的时候虽然我们可以自定义，但是我们也尽可能的在探索更规范的形式，利用一些数列关系来确定比例关系。这里我采用了斐波那契数列进行计算，在推荐的宽高比例中我使用了8:3进行计算。在算出的值中取能被4整除的数值，确定Banner尺寸为：686*256px（基于二倍图）。BANNER8:3H=686*(3/8)=257.259：41杭州Q搜索疾病/医生等取4整除=256PX黑马青年2.3、 金刚区图标优化金刚区图标设计风格很多，大体上分为线性和面性风格，而面性里面也会有扁平的和质感的。如果在图形统一性上面把控较弱，也可以采用统一的外轮廓背景来进行约束。外轮廓有圆形、圆角矩形、椭圆形、超椭圆等，这里我选择了超椭圆作为图标设计的外轮廓。在配色上面为了和整体色系搭配，选择了莫兰迪色系，图标设计风格偏向于微质感。0ElSl31QQQQQWIIntt*Sttl加5EM问诊挂号复诊抓药专家OOOOO问诊挂号复诊抓药专家问答护理通知资讯帮助黑马青年2.4、 通知栏优化根据之前案例中异形广告的文案“中华医学会指南全新上线”，偏向于通知形式，优化后改为通知栏板块。既可以突出查看按钮，也不会过度视觉化干扰金刚区功能模块。为了突出通知内容，根据内容的强化等级在前面添加火苗图标，起到重点强化的目的。中华医学会指南全新上线中华医学会指南全新上线中华医学会指南全新上线立即查看黑马青年2.5、 健康须知模块优化该模块优化了卡片式设计，改灰色卡片为白色卡片，这样显得更加干净整洁。除了对标题等信息对比加强以外，也将一些文案进行图标化，增强设计感。之前的配图采用统一模版的文字表达形式，这样过于单一，而且设计感欠佳。调整后采用图片表达，更能引导用户点击阅读。健康须知今隼32岁.长瓦。网工件.近2个月上学己龄冬习一健康须知B>>什公？A充泳之柄HQIIifiIBM第0?野黄 tfU<r"!向H游泳之后耳朵疼应该怎么办？针灸老的一图让你读懂3个双H经停六位：女室案大叫号6BM7!黑以n. lt,y必景又是一年考研季，你的备考本准备好了吗？Xl-t<W,体第4本雷备始f7U不JkHMiftie拿7健康须知游泳之后耳朵疼应该怎么办?针灸老师一图让你读懂问答。268O82又是一年考研季，你的备考本准备好了吗？国TlQ304。109更多黑马青年2.6、 底部标签栏优化重新绘制了底部标签栏的图标，默认状态采用线性图标，点击状态采用面性。中间图标将“凹”式改为“凸”式，通过调整凸出的锚点使得整体过渡柔和。中间凸出图标设计风格和金刚区保持一致，形成上下风格关联。因只角3BBX首页消息今日出修MW代的互联网工作者职业病科普今日出诊即只科普我的黑马青年2.7、 完成在保持原有信息的基础上，仅做了视觉层面的优化，希望这个案例修改可以带给你更多思考。9：41Q搜索疾篇/杭州VOO问诊复诊挂号抓药专家中华医学会指南全新上线健康须知K»>健康须知只因清包BANN立即直看内容更全.isan今日出诊游泳之后耳朵疼应该怎么办？计灸老师一图让你读懂“互联网工作者职业病科普O最新疫情快讯中华医学会指南全新上线又是一年考研季，你的备考本准备好了吗？A备页修改前修改后黑马青年三总结这是一个功能相对比较简单的首页案例，本次案例忽略了产品层面、交互层面等思考，只在视觉层进行了优化。调整了色彩关系、布局细节和图标设计等内容，基于原始案例内容不变的情况进行调整，希望抛砖引玉，可以带给大家更多思考。