UI Sketch技巧教程：学习怎么样让段落自动排版，文字排版教程。

时间：2020-11-21 17:45 来源：优设作者：UI黑客阅读：次

UI Sketch技巧教程：学习怎么样让段落自动排版，文字排版教程。大批量文字排版，看起来简单，但是总会让很多设计师头疼。一般情况下，对于大批量的文字，我们都会用测试文本临时代替，等技术开发的时候再直接文本录入。定义好样式，后期的文案变动和设计师基本无关。

不过，也有很多设计师为了界面展示目的，或在需求方的奇葩要求下，把文本严格按照需求提供的填充到界面中来。比如我们做一个简单的活动规则手机页面，总共有5个段落。

很简单，直接复制粘贴，做一个文本图层，调整好样式即可。同时不要忘了右侧的 Paragraph 属性，让每个段落产生间距。

遇到的问题

虽然这么做很快，但毕竟是一种讨巧的方案，会出现下面几个问题。

如果需求方后期要在中间加入图片，我们只能通过原始的换行来给图片腾出空间;

由于是一个文本图层，如果出现标题等样式，无法进行 text-style样式控制;

数字序号和文本没有区分，可读性不强，影响用户体验。

对于第三个问题数字序号出现的影响阅读，可以看下图对比。PS和AI有对应的小技巧，就是段落的首行缩进，改成负值即可。技术上也有解决方案，比如前端 CSS 中的 text-indent属性，也可以改成负值来实现。具体可以看这篇文章《神奇的负值缩进，文本段落的另类对齐方式》。

但是在 Sketch 中却没有对应的样式，我们只能单独把序号分离出来进行排列。总之上面的传统方法无法满足快速、方便、可修改的要求。如果是更多的条目，无疑会加大我们的设计成本。