0文章
0评论
0获赞

你不知道的Sketch黑科技-段落自动排版

1,063 0

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

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

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

遇到的问题

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

  • 1:如果需求方后期要在中间加入图片,我们只能通过原始的换行来给图片腾出空间;
  • 2:由于是一个文本图层,如果出现标题等样式,无法进行text-style样式控制;
  • 3:数字序号和文本没有区分,可读性不强,影响用户体验。

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

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

解决方案

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

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

1:做出段落标号

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

2:做出段落层

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

3:段落间距固定

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

4:在Kitchen增加规则文本

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

5:规则文案填充

最后一步,选中五个段落层,点击刚才在Kitchen创建的规则文本,即可实现快速文案填充,而且每段的高度虽不固定,但是间距却能在Kitchen自动排版功能下一直保持在我们设置的20。

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

6:数字序号填充

基本搞定,剩下的就是数字序号。当然了,我们可以一个个修改,但是如果有很多项,改起来就特别费劲,所以可以利用刚才的文案填充来实现。

同样的方法,建立数字序号填充文本1、2、3、4、5……每个数字换行。这里需要注意的是,对于顺序数字来说,我们在设计的时候经常会用到,频率非常高。所以设计师很有必要建立一个顺序数字文本源。这里给大家提供1-200的数字源,实际工作中已足够使用,点击下载。

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

提取码:3jfv

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

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

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

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

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

一些注意点

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

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

如果第1条的文案变化了,高度也相继改变,那么下面的元素也会自动补充,始终保持固定的间距。

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

如果我们是先加好图片在进行文案填充也是可以的,Kitchen的数据填充会忽略掉图片和同一层级的symbol。

还有一点,如果图层是6个,只有5段文案,那么全部填充后,第6条会填充第一段的文案,多余的我们最后删掉即可,不用担心发生混乱。

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

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版

总结

我一直认为,一名合格的UI设计师应该成为公司(或项目)中设计问题解决方案提供者。面对各种问题,除了自身的能力和经验外,还应该充分了解和利用众多工具的特点来解决相应问题,提高设计效率,避免无用的工作量。

比如本文的活动规则排版解决方案,如果面对的是十几条甚至几十条就会凸显出巨大优势。其实Sketch本身也有数据源文本填充功能,但是只能随机填充,无法按照顺序,所以Kitchen插件还是给我们提供了一个比较不错的解决方案的。

希望这篇文章能给各位设计带来一些其他方面的启发和实际应用。

原文地址:UI黑客

作者:UI黑客

你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-段落自动排版
评论 (0)
请登录以参与评论。
立即登录

你不知道的Sketch黑科技-图文浮动居中

545 0

前阵子在知乎中遇到这样一个问题:

一个搜索框Symbol组件,里面的提示文字数量不定,如何让图标和文字整体居中?

这位知友的问题估计很多设计师都遇到过,先看下图,一个简单的搜索框,由圆角输入框、搜索icon和提示文字构成,其中的文字字数会根据页面的不同而不同。整个搜索框要做成Symbol组件,以便项目全局掉用

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

下图是Symbol组件中的图层显示。内容组居中在整个搜索框中。由于是居中,所以很自然地想到提示文字应该也是居中对齐

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

可是当改变文本的时候,左侧的icon并没有发生改变,我们希望的效果是,无论文字多长,内容组整体居中于搜索框。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

对于这个问题,其实不用借助任何插件工具,Sketch本身就能实现,也算是Sketch一个黑科技了。

这里我们还需要了解一个现象就是,如果icon在文字的右边,内容组是可以居中的。看下图。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

既然icon在右侧能居中,那如果我在页面中把Symbol整体翻转一下不就“实现”想要的效果了吗?来试下。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

嗯,已经基本实现想要的效果了,最后的问题是icon和文字都是反的,我们需要再次把它俩翻转过来。方法就是直接进入Symbol把icon和文字翻转。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

到这里我们已经解决了问题,icon在文字左边,无论字数多少,整体都可以居中于输入框。一起看下最终效果。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

当然了,在实际工作中,这个框的宽度可能有多个,比如我想把框拉大,如果不作一些处理的话,会变成这样:icon被拉扁了。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

所以还需要利用Sketch的Resizing功能,关于这个功能之前也分享过一篇教程《用Sketch制作弹性可伸缩的音频播放条》,不过在新版本的Sketch中,Resizing的介面发生了改变,但是本质还是一样的。

我们需要利用Resizing把icon的宽高给固定住,由于文字在Sketch中是不会被拉伸的,所以不用管。

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中

经过以上操作就可以完美实现不同宽度的搜索框了,同时icon和文字整体在框中保持居中。

END

原文地址:UI黑客

作者:UI黑客

你不知道的Sketch黑科技-图文浮动居中
你不知道的Sketch黑科技-图文浮动居中
评论 (0)
请登录以参与评论。
立即登录

你不知道的Sketch黑科技-智能排版

651 0

我立即明白他的意思,推荐他使用了Kitchen插件。结果第二天泪流满面地跟我说:Sketch这玩意儿太TM好用了。

其实很多UI设计师如果没有了解过点前端知识,可能不太理解这位程序员的心情。但是对于写过html页面,了解过css的设计师来说,网页开发中的float浮动真的应该引入到Sketch中。

先看个例子,我们现在需要做一个横向的文字导航,这应该算是一个最简单最常用的UI组件了。每个文字标签之间的间距是40。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

不过在实际工作中我们总会遇到这样的需求,比如把热门改为热门文章。正常情况下我们是这样处理的:更改文字后,为保持间距,后面三项需要手动调整位置。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

难道这个操作不对吗?对于前端程序员和了解css的设计师来说,这个操作还真的“不对”。例子中只有5项,如果有十几项不就麻烦死了。文字内容改变后,文字之间的间距应该保持不变才是正确操作。

Sketch作为设计软件,天生遵守“绝对定位”这一原则:每个元素之间是相互独立的,互不影响。但是在web开发中,页面中的元素却是互相联系的(在不设定position:absolute的前提下),定义好间距样式后,无论文字内容怎么变,它们的间距都会保持一致。

Kitchen插件中的智能排版

如果在Sketch中引入这个功能,那么不就极大解放设计师的生产力了吗?所以隆重给大家推荐Kitchen插件中的自动排版功能。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

Kitchen是一个阿里团队开发的Sketch插件,https://kitchen.alipay.com/,本文就不介绍其他功能了,大家自己体验,这里只着重介绍它的自动排版或者叫智能排版功能。这才是Kitchen的核心。

Kitchen的智能排版主要包含间距和边距两个功能,用网页前端的术语来说就是margin和padding——盒子模型中最最基本的两个属性。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

下面我们就结合实际例子,看看它是如何提高设计师的生产力的。

制作弹性按钮

一般我们做的按钮主要分为两种:固定宽度按钮和弹性宽度按钮。

固定宽度很简单,一个宽度是120的按钮,其他页面也都是120,不管两个字还是三个字,按钮宽度保持不变。

弹性按钮就不一样了,在中后台的介面设计中,经常遇到不同文字数量的弹性宽度按钮需求。不管按钮文字是多少,两端的留白(即padding)始终保持固定。这个对于设计师来说很坑爹了,每次字数变化后都要再调整按钮宽度。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

那么在使用Kitchen的智能排版之后,这个操作将变得丝一般的顺滑。

制作弹性按钮将会使用到智能排版中的边距功能。我们选中这个按钮组,打开智能排版面板,在左边距和右边距都写上20,键盘回车。然后再改变文字试试看,原本又笨又呆的按钮仿佛有了灵性,完全听从我们的指挥,这就是弹性按钮,用前端术语就是两边增加了padding-left和padding-right。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

上下边距也是同样操作,左下角的自动排版需要勾上,否则按钮组会被打散,失去自动排版功能。

下面是一个示意图,可以看到Kitchen给我们的按钮组重新命名了,多了尖括号和数值,名称中的x代表空,下边距没有填写。顺序是按照“上-右-下-左”顺时针的方向,和前端的四数值简写方法是一样的。需要注意的是,新增的尖括号及内容不能删除,否则智能排版会失效。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

所以到这里大家应该明白,智能排版本质就是赋予Sketch前端布局的功能,让设计师布局更加灵活。接下来我们看下间距的用法。

让元素自动调整间距

回到文章开头的问题,一个横向的文字导航,每项间距是40,其中第二项字数发生了改变,为了保持间距统一,后面的元素位置需要手动调整。那么利用智能排版的间距功能,我们就会给每个文字赋予生命力,让它们之间实现自动排版。在水平间距填写40看看效果。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

搞定,从此以后面对任何导航再也不怕修改文字了。垂直间距也是同样的道理。在间距操作中,导航所在的组,名字被Kitchen改为h40,h即horizontal,同样,如果是垂直间距会加上v,即vertical。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

制作一个弹性按钮组

到此,我们已经掌握了智能排版的两个核心间距和边距,在实际工作中还有很多需要两个功能结合起来的操作,比如做一个弹性按钮组:按钮内部两端的边距固定,按钮之间的间距也保持固定。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

在没有Kitchen之前,这样的操作简直要命,先要更改按钮宽度,接下来再改变按钮间距。作为一名追求工作效率的UI设计师,我可忍受不了这种复杂糟糕的体验。所以在智能排版的帮助下,复杂的操作也是瞬间完成。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

不过也有一些小瑕疵,就是当按钮宽度改变后,间距却没有及时变化,需要再次点击这个按钮组才可以,应该是插件的一个bug,希望后续的更新能优化下。

智能缩放应用到Symbol

在上面的例子中,我们用了不同宽度的按钮,但是像文字、颜色、描边等样式都是一样的。对于Sketch来说,这些按钮统一可以使用Symbol来代替,实际工作中我们肯定也是这样操作的。那么如果每个按钮都调用了同一个Symbol,上面讲到的弹性按钮组可以实现吗?当然可以。

我们先把按钮转换为Symbol,复制四个分别再命名,然后把整个组用智能排版的间距功能设置为h20。不过出现了问题,按钮高度塌陷了,一个bug。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

我们需要进入到Symbol中,把按钮的圆角矩形底的Resizing给设置下,顶部固定,高度禁止拉伸。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

设置之后再看下效果,已经可以了。不过还有个小问题就是,按钮之间的间距无法自动完成,需要我们手动选择按钮组,再使用下智能排版的间距功能,设置为h20,确定回车就可以了。这个应该还算是一个bug。

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版

总结

通过利用Kitchen的智能排版功能,我们已经实现了想要的效果,节约了大把时间,以后的介面设计效率将会极大提升。当然,还有很多其他的使用场景,各位可以自己在实战中去体验。不过在使用中也发现了一些bug,希望Kitchen的团队能够在后续版本修复。

当然了,本文的自动排版效果也有其他插件可以实现,比如

Paddy

https://github.com/DWilliames/paddy-sketch-plugin

Anima

https://www.animaapp.com/

不过由于Kitchen插件还附带数据填充、iconfont库、图表生成器等常用功能,而且插件装多了也会影响Sketch的性能,一些设计师也不愿意装那么多插件,所以Kitchen整体还是有一定优势的。

原文地址:UI黑客

作者:UI黑

你不知道的Sketch黑科技-智能排版
你不知道的Sketch黑科技-智能排版
评论 (0)
请登录以参与评论。
立即登录