点九图切图规范

本文以微信社交对话框为例进行说明如何切点九图，其原则如下：

1.保留对话框周边四个圆角；

2.保留对话框右边的指向“三角”；

3.指定横向（水平）、纵向（垂直）内容范围区域；

整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。

具体步骤如下所示：

第一步：画好我们需要的对话框样式；

第二步：将对话横向距离减小到两圆角之间为10PX（可以更小）间距，并用铅笔工具在对话框上部中间（水平）标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。

上图最终切图为放大图，方便说明（黑点、黑线、间距）更清晰。

注意，黑点与对话框之间保留1PX空白间距。

第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。

注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸（单方向）。

如果想要对话框纵向双向对称拉伸，指向“三角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。如下图所示。

第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本垂直范围。如下图所示。

第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本水平范围。如下图所示。

总结：通过以上五步，该对话框的点九切图完毕。

如果没有指定文本范围区域，就会出现以下情况。如下图所示。

切记，黑点、黑线一定要与对话框之间保留1PX间距。切出来的图片命名为：“*.9.png”

错误                                                                        正确