【系列文章】
盒饭君带你一稿设计适配双端 （375的标注，讲得同样很清晰）
到底用pt还是px标注呢？
对设计图做标注之iOS篇（解释了渲染的点和像素是不一样的）
让开发崩溃的标注稿到底
这张标注上的问题有哪些呢？
1)、没有总宽度
不管设计尺寸是720（360dp），还是1080（540dp）都要明确标示出来。
2）、没有标出icon和图片的宽和高。
不是你会把icon切出来给开发，就感觉图片放到哪个位置就会完美显示。icon也是 要适配不同屏幕的所以不管是icon还是文字都是有宽和高的。一定要标注出来。
3)、这个不是标注问题，是icon的规范问题。
你有没有发现如果所有的icon都是圆形的，那么你很容易把它们的宽高画的一样， 但是项目中我们不会画一样的icon。这样我们就不能保证每一个icon的宽高都是 一样的。这时候我们就要有一个热区的概念，给每一个icon都加一个一样宽高的外框， 切图的时候是按照外框的宽高来切的，这样就保证了icon的统一，也增加了icon的点击 面积（热区）。当然这样做你肯定要花费一些精力，但是会使你的设计更加可控，要知道 你不加热区的情况下负责的开发同学也会加上的，这时候你的标注尺寸就变得无效，你要 花费更多精力去协调。而且、你用markman或像素大厨标注设计稿时，你怎么确定icon的 边、文字的边。要知道，不同的字体占用的高度是不一样的，你要是知道一些CSS知识，你 会发现不同字体的“padding”是不一样。
较为完善的标注稿
iicon下面的灰色部分就是我说的热区（方便讲解才显示出来），也是我画图标的时候的一个参照。这样icon 就会是一样的大小。包括图片的宽高也是，字体下面的灰色是字体所在的位置，这样的标注图 给开发同学就会很好理解
网友评论