【产品经理】关于点 9 图，知其然还要知其所以然

话说作为设计师，最不能忍的，要数明明给的图整齐又漂亮，但是开发做出来却走样又失真了吧。

很多设计师，不仅要废寝忘食出图给标注，事后还要一个像素一个像素的检查还原情况，非常辛苦。

其实失真的原因有很多。有的可能是因为被过度拉伸，比如你有一张小图，放在大屏幕手机上不幸被系统自动放大的话，就会失真（参考如何适配 iOS 屏幕、如何适配 Android 手机屏幕）。还有一种情况，比如下面这个 Button 的背景图，中间纯色，四周有1px 的圆角边框，如果被整体拉伸的话，也非常难看。

原图与拉伸后：

这种情况之所以失真，就是因为它在拉伸的时候，1px 宽的边框也被拉伸成了 3、4 个 px 了，而这其实是不应该的。好在在 Android 平台上，你可以用点 9 图（因后缀名是.9.png 得名）来解决这个问题。点9 图是一种png，但是它可以指定图的某个区域被拉伸，而其他区域保持原样。

点 9 图：

你看，上面的点 9 图跟原来的 png 相比，内容不变，只是四周都画了一条黑边。点 9 图就是靠这些黑边，来识别哪里区域可以被拉伸，哪里必须保持原样的。其中左边的黑边表示，从黑边往右看过去的平行区域是可以被任意上下拉伸的。上边的黑边表示，从