【系列文章】
盒饭君带你一稿设计适配双端 (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 就会是一样的大小。包括图片的宽高也是,字体下面的灰色是字体所在的位置,这样的标注图 给开发同学就会很好理解