设计师在设计稿的过程中，很容易陷入到某一个点中，对其他的细节选择性忽视了。这个时候就需要在交稿前，对设计稿进行自查，把一些低级的错误扼杀在摇篮中。

自查表按照我自己的经验，大致分为两个大类，一个是设计稿本身，二是与其他页面的统一性。在这里有个建议，当设计稿做完的时候，先去上个厕所或者出去走一下，回来再来看，放松一下眼睛和思维。

一、设计稿本身

设计稿本身指的是就当前页面来说，所存在的问题，包括没对齐、图标风格和大小不统一、间距过大过小、文字对比不明显、图片没有铺满等等。

 1.对齐

页面上的元素必须得有它对齐的方式，左对齐、右对齐、居中对齐都可以，但一定要有明显的能被人一眼看出来的对齐方式，不然就会觉得页面上的元素是随意放置的。

自查的时候首先要注意那些明显的没对齐的地方。（PS：为了方便大家看清楚差别，所以示意图稍微夸张了点，实际大多是一两像素没对齐）

 2.图标

风格

检查一下图标的风格是不是一样，比如面性的就都是面性的，线性的都是线性的。

大小

大小主要指的是图标的大小在页面中的比例，在视觉层面上是否合适，有些时候图标本身风格、样式都没什么问题，但就是跟页面其他元素相比太大或者太小了。还需要注意一点，物理大小一样不代表视觉大小也一样，优先满足视觉大小一致。

我自己之前就遇到过，当时特别认真的画了一组图标，信心满满觉得比之前画的好很多，小溜Epik 看过之后第一反应就说太大了，不合适，过了一会我自己从那个画图标的兴奋感中出来之后，自己再看也觉得太大了，跟整体不搭。所以这也是为什么文章一开头，就建议大家做完稿之后，出去晃悠一会再回过头来看。

在这里举个例子吧，介于当时的图不合适发出，特此凭凑了一张图，不过意思是一样的。

左边的图标单个看没什么问题，但和文字放一起，图标就显得整体大了很多，看起来及其不协调。而右边就看起来般配一点。

 3.间距

间距的作用是用来区分层级，间距的大与小或多或少会影响到这一点。正如《写给大家看的设计书》中所说的亲密性一样，区分层级的本质也就是区分亲密性，页面上间距最小的，亲密性最强，属于同一层级；页面上间距最大的，亲密性最弱，不属于同一层级。

自查的时候需要着重看一下，信息层级是否区分开了，比如两个模块之间的间距一定是要大于模块内部的。

 4.对比

区分层级除了通过间距还可以通过对比，对比的方式、种类有很多种，这里就不一一展开说了，这里只讲文字间的颜色对比。以讨论区为例，讨论区一般包含用户头像、昵称、时间、评论内容以及一些辅助的功能，点赞收藏、评论、回复那些。

下图中网易新闻和喜马拉雅两者相比起来，就信息层级来说，网易新闻区分的更开一点，层级更明确。

而去对比它们页面所使用的颜色，就可以发现，网易新闻的颜色对比度更大，对比度大，信息自然而然就更明显了。

而我们在交付前的设计自查时，就需要着重检查一下页面的信息是否区分开了，对比度是否合理。这一点算比较深层次的自查了，新手可能很难发现问题，这时候可以去寻求他人的帮忙，比如同事、朋友等。

 5.图片

在 Sketch 里，大家都是画一个矩形，然后和图片一起做成蒙版，但有时候会出现图片没有铺满整个矩形。

有时候图片比较小，比如头像的时候，手机预览的时候不容易被看到，所以在自查的时候最好把设计稿放大放大看细节。

二、页面统一性

页面统一性指的是 APP 整体的统一性，输出的设计稿是否和之前统一，同时输出的几个页面是否统一等等，这个时候就需要跳出单个页面，来看整体了。最容易出错的问题分别是：两个页面同一位置的元素位置出现偏移、分割线颜色不一样、按钮的圆角度不统一等。

 1.位置偏移

这个真的很多人都会栽在这个坑里，原因我猜是做设计图的时候，都是电脑连着手机实时预览，预览软件在翻页的时候，是直接出现新的页面，不是那种上一页下一页翻页的形式。所以当元素位置发生偏移的时候，纯靠手机预览很难发现。

至于解决方案也很简单，只需要自查的时候，把所有图按照顺序导出，全部选中进行预览，这个时候页面元素动了的话，在翻页过程中极其明显，发现有出错的地方，重新修改再导出，直至没有问题为止。

 2.分割线

分割线也是一个极易容易出错的地方，特别是最开始做的时候没有定义分割线的颜色，随便用一个，后续觉得不好，又改了，改的又不彻底，有些地方没改到。加上分割线颜色普遍偏浅，不仔细看很难发现。

这个自查的时候，通过翻页预览，发现后也能修改，不过还有一个更好的办法，从源头改变。前期把分割线都做成 Symbols，统一用，后期自查的时候，只需要检查分割线是否用的是Symbols ，是的话颜色肯定是一样的。

 3.按钮圆角度

检查不同页面的按钮圆角度是否一致，不一致的地方要统一，定好规范之后，后续所有的页面都需要延续。

小贴士：

当有人告诉你，你的页面有细节问题的时候，千万不要解释，这个时候乖乖认错就好，你越解释别人越会觉得心里不舒服，不解释可能没什么，一解释就有可能减分了。

三、总结

在设计稿输出交付前，设计师需要对自己的设计稿先自查一遍，避免出现低级错误。不然这些错误持续出现，每次都等别人发现，会影响你在团队中的形象。

自查主要分两个方面，一个是设计稿本身，需要注意页面元素对齐、图标风格大小和页面整体搭配、间距要能体现亲密性、文字对比要明显；二是页面整体的统一性，需要注意的是避免出现同一元素不同页面位置发生偏移、分割线颜色统一、按钮的圆角度统一等。

Powered by Froala Editor