每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
一些刚开始做UI设计的设计师不知道怎么标注自己的设计稿，不知道开发同学都需要哪些尺寸和信息，做一个简单介绍。
设计师如何对设计稿进行正确的标注
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或图标都没有一个规范的话，想想都知道开发按着 你给的标注写出来的界面不会理想。所以，规范自己的设计习惯对整个开发都起到积极的作用。
全部评论：11条
-
-
-
-
-
喊闹钟起CHANG
2016-12-13 18:10@Jessica_L: 你可以和你们程序好好沟通一下，字体的控件是自适应字体的，标清了字号、字体和颜色就可以了，可以标明距离其它控件的距离，这就OK了。
-
-
-
Jessica_L
2016-12-02 15:56@喊闹钟起CHANG: 我之前也是标注font-size啊，可是程序说字体也算一个控件，凡是控件就一定得有一个尺寸，所有的高度加起来等于总高度才行，如果只标字体大小，他并不知道该怎么去排
-
喊闹钟起CHANG
2016-11-06 13:15@Jessica_L: 字体是不是标高的，是font-size，第一张图中有显示，而且不同的字体占的像素高度不同，会严重影响设计稿的还原，如果你用sketch设计，体会一下你会很好的理解这个问题。而如果你用的是ps或ai，导出图片，再放到“像素大厨”之类的标注软件就很难找到字体占的高度了。
-
-
-
更多作品
发表评论