设计师如何对设计稿进行正确的标注

2016/07/20  大雨

对刚开始做UI设计的同学来说，什么是导航栏、工具栏、菜单栏、状态栏 都要迷茫一段时间，好不容易明白谁是谁了就开始纠结我该用哪个尺寸来设计啊？？？ 是750*1334？还是375*667？还有Android手机，是720还是1080？听说碎片化很严重啊， 我该怎么做？等这些零零碎碎的知识点都“记”牢了，也设计出了还不错的界面出来以后， 你满满的成就感可能要被开发的同学给打击的稀碎。原因是你给了不规范的标注图， 给了开发不规范的切图，你把开发的同学整的要疯了。

用sketch的同学可以飘过了，这篇文章写给坚持用ps的同学。

现在我们聊聊设计师该如何标注自己的设计稿给开发同学，才能够愉（BU） 快（ZAI）的(MA)玩(NI)耍.

这是我以前的一个设计稿，以它为例讲一下标注。

好多UI会给出这样的标注。

这样的标注给到开发同学手里，咋一看 好像没问题，开发没细看的情况下也不会说什么。 但是,他真的开始写的就会崩溃了。

开发的同学为什么崩溃，我们来说一下。

首先，不管是iOS还是Android，在布局上都是相对布局。准守的也是从上到下、 从左到右的原则。设计师给到开发手中的有标注图和各个icon。开发同学 安装设计师给的标注图来写页面。我给的例子是720像素宽的Android界面，之 所以不说页面的高是多少像素是因为尺寸太多了。
能够看到我给的标注单位 不是px而是dp（自行百度详解），dp的意思是与像素无关，是Android为解决碎 片化问题提出的概念。程序会判断屏幕的分辨率来自动适配不同尺寸的手机，当然 、icon是要准备多套的。这张标注上的问题有哪些呢？

1)、没有总宽度

不管设计尺寸是720（360dp），还是1080（540dp）都要明确标示出来。

2）、没有标出icon和图片的宽和高。

不是你会把icon切出来给开发，就感觉图片放到哪个位置就会完美显示。icon也是 要适配不同屏幕的所以不管是icon还是文字都是有宽和高的。一定要标注出来。

3)、这个不是标注问题，是icon的规范问题。

你有没有发现如果所有的icon都是圆形的，那么你很容易把它们的宽高画的一样， 但是项目中我们不会画一样的icon。这样我们就不能保证每一个icon的宽高都是 一样的。这时候我们就要有一个热区的概念，给每一个icon都加一个一样宽高的外框， 切图的时候是按照外框的宽高来切的，这样就保证了icon的统一，也增加了icon的点击 面积（热区）。当然这样做你肯定要花费一些精力，但是会使你的设计更加可控，要知道 你不加热区的情况下负责的开发同学也会加上的，这时候你的标注尺寸就变得无效，你要 花费更多精力去协调。而且、你用markman或像素大厨标注设计稿时，你怎么确定icon的 边、文字的边。要知道，不同的字体占用的高度是不一样的，你要是知道一些CSS知识，你 会发现不同字体的“padding”是不一样。

下面标出一个相对完善的标注图给大家

icon下面的灰色部分就是我说的热区（方便讲解才显示出来），也是我画图标的时候的一个参照。这样icon 就会是一样的大小。包括图片的宽高也是，字体下面的灰色是字体所在的位置，这样的标注图 给开发同学就会很好理解，即便是要你去交代一下，也会很明白的讲清楚，大大的 提高了沟通效率，和工作效率。

为什么要这么麻烦的整理icon

我画icon时会有意识的注意到宽高比例，所以感觉有热区和没热区的区别不大，但是看最后的搜索 图标，是不是很明显的不一样。如果所有的icon或图标都没有一个规范的话，想想都知道开发按着 你给的标注写出来的界面不会理想。所以，规范自己的设计习惯对整个开发都起到积极的作用。