快捷搜索:  test  as

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

对付大年夜部分UI设计师来说,天天的事情都充足且富有寻衅性。比如:界面设计、对象运用、动效制作、代码切图、前后端协作等等,然则有时也要面对一些异常费光阴的设计需求。

尤其是大年夜批量翰墨排版,看起来简单,然则总会让很多设计师头疼。一样平常环境下,对付大年夜批量的翰墨,我们都邑用测试文本临时代替,等技巧开拓的时刻再直接文本录入。定义好样式,后期的案牍更改和设计师基础无关。

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

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

碰到的问题

虽然这么做很快,但终究是一种讨巧的规划,会呈现下面几个问题。

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

因为是一个文本图层,假如呈现标题等样式,无法进行 text-style样式节制;

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

对付第三个问题数字序号呈现的影响涉猎,可以看下图比较。PS和AI有对应的小技术,便是段落的首行缩进,改成负值即可。技巧上也有办理规划,比如前端 CSS 中的 text-indent属性,也可以改成负值来实现。详细可以看这篇文章《神奇的负值缩进,文本段落的另类对齐要领》。

然则在 Sketch 中却没有对应的样式,我们只能零丁把序号分离出来进行排列。总之上面的传统措施无法满意快速、方便、可改动的要求。假如是更多的条款,无疑会加大年夜我们的设计资源。

办理规划

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

关于这个插件,之前写过一篇文章《用这个 Sketch 的黑科技,让你快速掌握智能排版!》,具体先容了Kitchen自动排版的用法。我们着实可以把这个功能扩展使用在文本段落中,来办理上文呈现的问题。照样拿这个活动规则为例,我们一路试试把它的样式完全掌握在本武艺中。

  1. 做出段落标号

一样平常的标号都是从数字1开始的,不停到N。这里我们做个简单的样式,同时转化为 symbol,方便后期统一改动,养成优越的设计习气。

  2. 做出段落层

这里我们就不能用一大年夜段翰墨加段落间距来处置惩罚了,必要把每段规则零丁建文本层。这里宽度我们先随便拉伸固定到一个差不多的值,高度必要它的弹性特征,以是不要进行拉伸。

  3. 段落间距固定

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

同时我们现在再看下今朝的图层状况。

  4. 在Kitchen增添规则文本

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

  5. 规则案牍添补

着末一步,选中五个段落层,点击刚才在 Kitchen 创建的规则文本,即可实现快速案牍添补,而且每段的高度虽不固定,然则间距却能在 Kitchen 自动排版功能下不停维持在我们设置的20。

  6. 数字序号添补

基础搞定,剩下的便是数字序号。当然了,我们可以一个个改动,然则假如有很多项,改起来就分外费劲,以是可以使用刚才的案牍添补来实现。

同样的措施,建立数字序号添补文本1、2、3、4、5……每个数字换行。这里必要留意的是,对付顺序数字来说,我们在设计的时刻常常会用到,频率异常高。以是设计师很有需要建立一个顺序数字文本源。这里给大年夜家供给1-200的数字源,实际事情中已足够应用,点击下载。

数字源链接:https://pan.baidu.com/s/1DvSS6bwHzU-aV79KweLYjA

提取码:3jfv

对付选择,今朝有5个序号,假如是几十个,选择操作会很麻烦,必要一个个点选。这里再供给一个插件,叫做 Select Similar Layers,可以根据名称、样式、描边等属性进行同时选择。因为数字序号开始就被我们做成了 symbol,是以它们具有相同的 name属性,而且 symbol 中的 text 因为被嵌套了一层,以是同一层级上是无法被 Kitchen 文本添补识别的,不会被影响。

先选中第一个序号,然后按 Select Similar Layers 的快捷键 control+alt+7(其他常用属性都有对应快捷键),就可以选择相同名称的图层。接下来用 Kitchen 添补顺序数字编号。

当然了,我们也可以使用 Sketch 的 Filter 图层过滤功能来进行同类筛选。选择 symbol,会筛选当前页所有 symbol 元素,接下来还可以使用翰墨名称再次进行二次筛选,之后按 shift键进行全选即可。

Sketch 的 Filter 功能照样挺实用的,一共内置了外形、文本、图片、组、切片、原型和symbol七种类型,好好使用会带来很多效率提升。

一些留意点

到此为止,我们已经建立好能全局节制的活动规则页面。

假如后面需求方说规则1下面必要加一张图片,很简单,直接放入图片,每条之间的间距会自动排列。

假如第1条的案牍变更了,高度也接踵改变,那么下面的元素也会自动弥补,始终维持固定的间距。

假如我们是先加好图片再进行案牍添补也是可以的,Kitchen 的数据添补会轻忽掉落图片和同一层级的 symbol。

还有一点,假如图层是6个,只有5段案牍,那么整个添补后,第6条会添补第一段的案牍,多余的我们着末删掉落即可,不用担心发生纷乱。

着末我们再看下使用 Sketch 强大年夜的 Resizing 功能,实现弹性宽度的图文段落自动排列。序号symbol 宽高固定,位置左固定;图片宽高固定,位置左固定;段落只必要位置左固定即可。

总结

我不停觉得,一名合格的UI设计师应该成为公司(或项目)中设计问题办理规划供给者。面对各类问题,除了自身的能力和履历外,还应该充分懂得和使用浩繁对象的特征来办理响应问题,前进设计效率,避免无用的事情量。

比如本文的活动规则排版办理规划,假如面对的是十几条以致几十条就会凸显出伟大年夜上风。着实 Sketch 本身也稀有据源文本添补功能,然则只能随机添补,无法按照顺序,以是 Kitchen 插件照样给我们供给了一个对照不错的办理规划的。

盼望这篇文章能给各位设计师带来一些其他方面的启迪和实际利用。

迎接关注作者的微信"民众,"号:「UI黑客」

您可能还会对下面的文章感兴趣: