赞助商
立即赞助

学会这个方法做设计,老板只能让你一稿过了!

UI设计3年前 (2021)更新 流光
2.7K 0 0

频繁过稿被板pass?被要求执理设计工作?接到改稿任务从下手?板你设计生质疑时,不妨用设计走查的思路说服Ta。

UI走查表有什么用?

一套成熟的UI走查表,能科学高效改稿,减少设中的反复试错,也能让审交付时理据。不仅仅停留于看去顺眼、我觉得挺好、先这样的视觉表层。深一层,走查表于养设师的结构化思维,形一完整的设体系。

文章阐述的观点

学会这个方法做设计,老板只能让你一稿过了!

如何走查信息层级

1. 页要表意思是否正确

在设计页时候,需要注意页要传用户信息。

例如本次案例的产需求中,该页面的功是促使户快速单,信息上则要侧重于格与优惠信息。(如图)

学会这个方法做设计,老板只能让你一稿过了!

首屏信息是给户的第一印象,在户打开页面,尽可展现更多户感兴趣的容。

而此次页面需要突出促销优惠息,次要息则放在后面。(如下图)

学会这个方法做设计,老板只能让你一稿过了!

2. 页面视觉重点

相信大平时经听说0.618的金例(斐波那契数列)。屏幕方寸间合金例可界面视觉重心更平稳,视觉更舒适。

同有助于界面域割,集中视觉焦点,承载更重要的息,让整个界面布局更加理。(如下图)

学会这个方法做设计,老板只能让你一稿过了!

淘、家等成熟的一线产品黄金比例运用,在视觉焦点域都向用户展示了关键息。

学会这个方法做设计,老板只能让你一稿过了!

学会这个方法做设计,老板只能让你一稿过了!

3. 元素距符合各层级关系

为什么页会杂乱章?主要是信息味地堆砌,分布没有区,要遵从以下法,页会晰很多,有节奏呼吸感也出来了。

同类的应被混乱的间距区隔开来,它们应该更集中,并且整体与别的区别开来。同,仅仅是,元素与元素之间是如此,这样户可更快速地看到自己想要的东西。

学会这个方法做设计,老板只能让你一稿过了!

那么,如何更好地信息按照相似属性合分布呢?

这就要利用5、等则来让布变得更理,假相同板块的间距值为a px,则不同板块为2a px。

这样不仅视觉可以将信息分布,还能让整体的布局加规整,不会凌乱,尽可能使用同一或者同倍数的间距,便于发。

案例中,相近元素的间距为16px(a px),则不同类别的元素为32px(2a px)。

学会这个方法做设计,老板只能让你一稿过了!

学会这个方法做设计,老板只能让你一稿过了!

如何进行文字规范走查

1. 字体种类的控制

一个产如果字体种类过多,会导致界面的统一与混乱。

通常字体控制尽量在2-3种以内,中文字体、英文字体以及殊数字字体。如下图:

学会这个方法做设计,老板只能让你一稿过了!

2. 字号与粗细控制

字号过多使信息失重点,基础字号控制在3种,目的在于清晰区分信息的层级。

正文字号建议为28px,文案为24px,大标题、价格等重要息需按实际情况加大,令息的层更显。

加粗字体往往整界面的视觉焦点,重点的文本(如标题、价格)需加粗处理,注意控制字体加粗的使用,以免造信息层级的混乱。下图调整字及粗细的后对比:

学会这个方法做设计,老板只能让你一稿过了!

3. 行距控制

行距不便于用户阅读,大会显得散,所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比:

学会这个方法做设计,老板只能让你一稿过了!

4. 字体颜色

字体要黑白灰为:#333333、#666666、#999999。

字体颜色深浅有序能让息层主次,产品应该根据不同模块以及同一模块的层需要调整不同的灰度值,并在产品中反复使用,统一规范输出。

学会这个方法做设计,老板只能让你一稿过了!

息越重要,字体颜色越深。除此之外还需要注什呢?

也很多刚入行的设小伙伴很易忽略的细节,产品的实际使用环境。

比,我们此次改版的产品详情界面就是上下单,下提货的运营模式,不仅需要考虑室内使用境,还需要考虑到特殊的室外强光境。结合下图感受一下:

学会这个方法做设计,老板只能让你一稿过了!

何在强光境下证产品良的视验呢?也是UI走查表需要注意到的细节点:强光测试(大4.5:1)。

我们先观察组颜色比,如下图:

学会这个方法做设计,老板只能让你一稿过了!

我们会发现体颜色层级依然是深黑色、黑色、浅黑色,相信很多设计师朋友已经注意到我们使用颜色更深了,为什么呢?

为了保证在强光环境信息的可阅读性,如图:字体信息最浅层级,浅黑色的色彩数值对数值都大于4.5:1。

学会这个方法做设计,老板只能让你一稿过了!

△ 强光测试

有细心的计朋友或许已经注色彩值并没#333333、#666666、#999999那便于记忆了,为什呢?

了提升好的视觉感受与界面的品质感,我们字体颜色中采用了偏蓝灰,家不防我一起观察下图,图灰色看去略微一些脏脏的感觉,下图视觉耐看、质感。

学会这个方法做设计,老板只能让你一稿过了!

腾讯新闻、金色财App 中也应用到了偏蓝灰,种扑面的清爽。

学会这个方法做设计,老板只能让你一稿过了!

除了常用字体层级的颜色对比,界面中针对关键的卖点信息还用到强调色,即品牌色。

品牌也经常运用到特殊字、提示文字、链接等等。

改版前,促销信息缺少提示入口。改版后,以品色作为入口体颜色,引起用户注意。(如下图)

学会这个方法做设计,老板只能让你一稿过了!

如何通过设计规范走查图标

1. 视觉比例

由于图标通常都群结对的出,彼此间的统一性显得非常重,但常常易被忽略,可以制如下图的图标盒子规范尺寸。

学会这个方法做设计,老板只能让你一稿过了!

2. 图标设计要点

计图标应注基础形状复用,保持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行计,既能统一大有整体。

学会这个方法做设计,老板只能让你一稿过了!

面性图标

设计时需要注意挖空例的一致性,保持图标的整体性。如格走势、降通知这一图标,挖空例控制在20%。

学会这个方法做设计,老板只能让你一稿过了!

线性图标

设计时应注意保持统线条粗细,案例2px粗细线条复使用,所有图标粗细与文粗细致,和谐统。

学会这个方法做设计,老板只能让你一稿过了!

3. 图标尺寸

在app中,功能图标大致分成两种:以点击的按钮;不点击的展示图标。

可以击按钮常用于导航栏、tab栏、操作栏(吸底按钮图示),常用尺寸为:48x48px、64x64px。

如图的导航和吸按钮都了48x48px的大小。

学会这个方法做设计,老板只能让你一稿过了!

可点击的展示图标于信息展示位置(格走势/规格/评论等图示)尺寸为:24x24px 32x32px。

如下图,评论模块中的展示图标使用24x24px,价格势则使用了32x32px的尺寸。

学会这个方法做设计,老板只能让你一稿过了!

4. 标签的走查规范

从商的角,标签是为了凸显产卖点,如你在商场时看到「全场低至2.9折」这类的促销信息。

其实在界面中同会有,目的就是为了抓住用户薅毛和刺激性消费心理,对比没有标签的同类商品,用户会更加倾向于有标签的商品。

常用标签样式三种表样式:

  • 面性:填充一整个色块。
  • 线面结合:低饱度的色块结合高饱度的描。
  • 描边:1px粗细描边。

学会这个方法做设计,老板只能让你一稿过了!

如上图:为展示清楚,在来基础上放大了1倍,运用规则之前提的图标一,根据模块功能的重要性去搭配,按照重要次要的排序是:面性>线面>线性。

标签呼吸规律

多初计都在疑惑底标签文字定多大适呢?标签字号一为:18-22px。

学会这个方法做设计,老板只能让你一稿过了!

以「营」标签为例,如上图:外框边距横纵向成2倍的倍数关系。

所以以后画标签,只先好字小,剩下的框距就按照2倍的关系去拓展。

如何走查图片比例的合理性

了确保我们视觉稿的时候易于文本的阅读通常会用到一些配图,这些配图通常也影响我们整界面的观度。

一个优的设计师在设计品时特别的注重图形与图象的比例,图的选取当也是重中之重,么我们在项目中应该何选取图并且正确地使用图的比例呢?

1. 图使用的规范

首先要做到让图的背持统一并且做到干净整洁。

图片主体比例大小跟其他图片保持统,避免出现有些图片展示局部,有些图片展示体。(如下图)

学会这个方法做设计,老板只能让你一稿过了!

2. 图模块的常用使用比例

UI设计中图的比例常用的有下列几种:

1 : 1,这比例比较适用于电商,它可以让商品图片展示最大化,也是目前电商最主流图片使用尺寸。如下图:

学会这个方法做设计,老板只能让你一稿过了!

16 : 9,这比例比较适用于视频,这是标准体工程学比例,根据体工程学家研究发现两眼睛视野范围并不是,而是个长宽比例为16 : 9长形,所以我们看到视频比例常会采用16 : 9。

学会这个方法做设计,老板只能让你一稿过了!

4 : 3,这比例应用于新闻类APP比较多。

它源自于一些微小相机最原始的尺寸例,需要进行过多例的裁剪,应起来较方,对于需要展示大量的图片信息类的产来说特别适。

学会这个方法做设计,老板只能让你一稿过了!

如果你还是知道如何使尺寸,那么你可直接查相竞进行设计。

UI设计走查表

我们整了一个较为整的设计走查表,希望在实践中够帮到大。

学会这个方法做设计,老板只能让你一稿过了!

除此外,作为一名UI设计师,仅要懂得执行设计,同时要做好前期对产的认知工作,如了解项目背景、目标户、牌特点等信息,从而更深层解产,设计更贴产。

欢迎关注作者的公众号:「EDC计研究中心」

学会这个方法做设计,老板只能让你一稿过了!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本文作者结合自身经验,总结了一份交互自查表,来帮助大家在工作中面对分支流程和异常情况的时候,提高处理效率。 先来看一...
交互设计
说到挖掘产品流程体验问题的研究方法,大部分人首先想到的肯定是可用性测试。本文要介绍的体验走查和可用性测试类似,也是一...
体验设计
网易UEDC – 徐恺 :相信不少同学都尝试过建立自查表,但最后是否有真正利用起来呢?这一次就和大家分享一下,我们团队所用的...
团队协作
视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少...
设计落地
这篇内容较少,但是非常重要实用,因为提供了很明确的几份设计走查表,用于在发布产品之前检验问题、清单共有4个,分别针对不...
交互设计流程
设计师总是需要对接一个又一个的设计需求,而这个过程一不留神就是坑。面对需求,哪些该接?哪些不该接?优先级如何排序?应...
设计走查
如何验证我们的对话设计是适宜的?这时候就需要设计走查。为了让走查过程中少出错,我们可以在设计语音体验时,考虑以下几点...
经验分享
视觉设计师作为展示产品最终形态的执行层,产品上线前走查视觉与交互还原是必经环节,而留给设计师走查修改的时间其实非常少...
设计落地