提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
今天给大家推荐一个新Plugin:Kitchen,由蚂蚁金服提供。文末会给大家plugin下载压缩包。
对于写过 html 页面,了解过 CSS 的设计师来说,网页开发中的 Float 浮动真的应该引入到 Sketch 中。以前一直在寻觅这种工具,终于被我不经意间发现了,赶快介绍给大家,提供工作效率Q.Q~
先看个例子,我们现在需要做一个横向的文字导航,这应该算是一个最简单最常用的 UI组件了,每个文字标签之间的间距是40。
但是突然产品说,我们要改个文案:“热门改为热门文章”。
正常情况下我们是这样处理的:更改文字后,为保持间距,后面三项需要手动调整位置。
难道这个操作不对吗?对于前端程序员和了解 CSS 的设计师来说,这个操作还真的「不对」。例子中只有5项,如果有十几项不就麻烦了,文字内容改变后,文字之间的间距应该保持不变才是正确操作。
Sketch 作为设计软件,天生遵守「绝对定位」这一原则:每个元素之间是互不影响。但是在 web 开发中,页面中的元素却是互相联系的(在不设定 position:absolute 的前提下),定义好间距样式后,无论文字内容怎么变,它们的间距都会保持一致。
Kitchen 中的智能排版
如果在 Sketch 中引入这个功能,那么不就极大解放设计师的生产力了吗?所以隆重给大家推荐 Kitchen 插件中的自动排版功能。
Kitchen 的智能排版主要包含间距和边距两个功能,用网页前端的术语来说就是 margin 和 padding——盒子模型中最基本的两个属性。
下面我们就结合实际例子,看看它是如何提高设计师的生产力的。
制作弹性按钮
一般我们做的按钮主要分为两种:固定宽度按钮和弹性宽度按钮。
固定宽度很简单,一个宽度是120的按钮,其他页面也都是120,不管两个字还是三个字,按钮宽度保持不变。
弹性按钮就不一样了,在后台的界面设计中,经常遇到不同文字数量的弹性宽度按钮需求。不管按钮文字是多少,两端的留白(即padding)始终保持固定。这个对于设计师来说很麻烦,每次字数变化后都要再调整按钮宽度。
那么在使用 Kitchen 的智能排版之后,这个操作将变得丝一般的顺滑。
制作弹性按钮将会使用到智能排版中的边距功能。我们选中这个按钮组,打开智能排版面板,在左边距和右边距都写上20,键盘回车。然后再改变文字试试看,原本又笨又呆的按钮仿佛有了灵性,完全听从我们的指挥,这就是弹性按钮,用前端术语就是两边增加了 padding-left 和 padding-right。
上下边距也是同样操作,左下角的自动排版需要勾上,否则按钮组会被打散,失去自动排版功能。
下面是一个示意图,可以看到 Kitchen 给我们的按钮组重新命名了,多了尖括号和数值,名称中的x代表空,下边距没有填写。顺序是按照「上-右-下-左」顺时针的方向,和前端的四数值简写方法是一样的。需要注意的是,新增的尖括号及内容不能删除,否则智能排版会失效。
所以到这里大家应该明白,智能排版本质就是赋予 Sketch 前端布局的功能,让设计师布局更加灵活。接下来我们看下间距的用法。
让元素自动调整间距
回到文章开头的问题,一个横向的文字导航,每项间距是40,其中第二项字数发生了改变,为了保持间距统一,后面的元素位置需要手动调整。那么利用智能排版的间距功能,我们就会给每个文字赋予生命力,让它们之间实现自动排版。在水平间距填写40看看效果。
搞定,从此以后面对任何导航再也不怕修改文字了。垂直间距也是同样的道理。在间距操作中,导航所在的组,名字被 Kitchen 改为h40,h即 horizontal,同样,如果是垂直间距会加上 v,即vertical。
这个插件目前还是有些小bug,有时候不是很灵活,需要多次点击才可以,希望会慢慢优化
制作一个弹性按钮组
到此,我们已经掌握了智能排版的两个核心间距和边距,在实际工作中还有很多需要两个功能结合起来的操作,比如做一个弹性按钮组:按钮内部两端的边距固定,按钮之间的间距也保持固定。
智能缩放应用到 Symbol
在上面的例子中,我们用了不同宽度的按钮,但是像文字、颜色、描边等样式都是一样的。对于 Sketch 来说,这些按钮统一可以使用Symbol 来代替,实际工作中我们肯定也是这样操作的。那么如果每个按钮都调用了同一个 Symbol,上面讲到的弹性按钮组可以实现吗?当然可以。
我们先把按钮转换为 Symbol,复制四个分别再命名,然后把整个组用智能排版的间距功能设置为h20。不过出现了问题,按钮高度塌陷了,一个bug。
我们需要进入到 Symbol 中,把按钮的圆角矩形底的 Resizing 给设置下,顶部固定,高度禁止拉伸。
设置之后再看下效果,已经可以了。不过还有个小问题,按钮之间的间距无法自动完成,需要我们手动选择按钮组,再使用智能排版的间距功能,设置为h20,确定回车就可以了。这个应该也算是一个bug。
总结及安装使用
通过利用 Kitchen 的智能排版功能,我们已经实现了想要的效果,节约了大量时间,以后的界面设计效率将会极大提升。
除了排版功能,还有很多功能大家可以自行挖掘哦,而且包含很多不同插件能解决的问题呢,例如文字快速填充、人物头像填充等等,设计不断发掘嘛~
下载压缩包后双击即安装完成,在sketch的plugins里面找到kitchen,选中元素就可以开始使用啦~
喜欢点赞哦 Q.Q~
最后贴一个我的公众号给大家, 里面有干货、教程、个人VLOG生活分享。说不定关注了,哪天会有惊喜给你哦~
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册