UI设计学习总结-点9图

一直闷着头做设计4年了，最近萌生了一个想法，把UI设计相关的知识点分模块总结一下吧。

今天要总结的就从Android系统下的点9切图来说起。

目录：

一、什么是点9图？

二、点9图的作用是什么？

三、点9图的注意事项

四、如何使用点9图？

一、什么是点9图？

点9图是Android开发中用到的一种特殊格式的图片，后缀名是“.9.png”的图片。左上两条线控制可拉伸区域（未画线表示不可拉伸），右下两条线控制内容显示区（无文字内容不画）。

二、点9图的作用是什么？

简单来说，点9图的作用就是可以保证图片在不模糊变形的前提下做到自适应。

什么意思呢？我们来举个简单的例子说明吧。下图是我们常见的按钮背景，切图的时候如果没有用点9切图，开发想改变按钮的高度的时候，会直接整体拉伸，得到的结果就是圆角就变形了，如下图：

那么用点9图之后，会通过左、上两条横线定义图片可以拉伸的部分，问题就得到了解决啦，如下图：

三、点9图的注意事项

1、系统只认#000000的纯黑线或者点。

2、每条边画满黑线=没画黑线（左上只画可拉伸的区域，右下只画允许内容显示文字的区域，如果没有文字内容右下两条线可以不画）。

3、输出的图片后缀必须是「.9.png」。

4、尽可能的减小资源的大小。

四、如何使用点9图？

还是举例说明吧

案例一：气泡框

案例二：带投影的按钮

好啦，关于点9图就总结到这里啦。