频繁过稿被板pass？被要求执理设计工作？接到改稿任务从下手？板你设计生质疑时，不妨用设计走查的思路说服Ta。
一套成熟的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设计师，仅要懂得执行设计，同时要做好前期对产的认知工作，如了解项目背景、目标户、牌特点等信息，从而更深层解产，设计更贴产。
欢迎关注作者的公众号：「EDC计研究中心」
浙公网安备33011002017549号