当前位置:首页设计教程Sketch技巧:如何让段落自动排版
Sketch技巧:如何让段落自动排版
°
  • 素材类型: 资源-素材
  • 上传时间:

对于大部分UI设计师来说,每天的工作都充实且富有挑战性。比如:界面设计、工具运用、动效制作、代码切图、前后端协作等等,但是偶尔也要面对一些非常费时间的设计需求。

对于大部分UI设计师来说,每天的工作都充实且富有挑战性。比如:界面设计、工具运用、动效制作、代码切图、前后端协作等等,但是偶尔也要面对一些非常费时间的设计需求。

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

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

Sketch技巧:如何让段落自动排版

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

Sketch技巧:如何让段落自动排版

遇到的问题

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

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

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

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

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

Sketch技巧:如何让段落自动排版

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

解决方案

所以该拿出我们的杀手锏了——Kitchen插件。

关于这个插件,之前写过一篇文章《用这个 Sketch 的黑科技,让你快速掌握智能排版!》,详细介绍了Kitchen自动排版的用法。我们其实可以把这个功能扩展利用在文本段落中,来解决上文出现的问题。还是拿这个活动规则为例,我们一起试试把它的样式完全掌握在自己手中。

  1. 做出段落标号

一般的标号都是从数字1开始的,一直到N。这里我们做个简单的样式,同时转化为 symbol,方便后期统一修改,养成良好的设计习惯。

Sketch技巧:如何让段落自动排版

  2. 做出段落层

这里我们就不能用一大段文字加段落间距来处理了,需要把每段规则单独建文本层。这里宽度我们先随便拉伸固定到一个差不多的值,高度需要它的弹性特点,所以不要进行拉伸。

Sketch技巧:如何让段落自动排版

  3. 段落间距固定

现在我们有了第一条暂时还没有内容的规则,序号 symbol 和右侧文本进行编组。接下来复制四个,然后利用 Kitchen 设置好每行的间距,这里我设置了20。

Sketch技巧:如何让段落自动排版

同时我们现在再看下目前的图层状况。

Sketch技巧:如何让段落自动排版

  4. 在Kitchen增加规则文本

接下来我们要在 Kitchen 的数据填充功能中,添加活动规则的全部5条文本内容。需要注意两点:一是不要带序号,二是每段之间换行即可,不要空行。实际操作中,我们可以让需求方提供遵守上述规则的文本txt文件,直接复制粘贴。同时要勾选保持顺序,否则每段会随机排列。

Sketch技巧:如何让段落自动排版

温馨提示:

文章标题:Sketch技巧:如何让段落自动排版

文章链接:https://www.4tu.cn/design/18662.html

更新时间:2024年08月14日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
设计教程

2019年3月超实用设计圈干货合集

2024-8-14 12:21:16

设计教程

时尚插画:绘制时尚个性的插画教程

2024-8-14 12:21:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索