在一些科技感强的页面中,往往含有大量的异形元素,比如
【Sketch技巧】响应式异形按钮设计
在设计这类按钮时,按钮大小完全依赖于文字长度。当按钮中的文字数不固定时,萌新们一般会根据文字长度单独调整每个按钮的长度,这样当然是有效的,但按钮特别多的情况下,手动调整就显得不那么专业了。

那么更快捷有效的方法是什么呢?

1. 创建控件

首先我们要把我们设计好的按钮做成一个控件。
选中按钮形状及里面的文字,右键→创建控件。
创建好的控件会被放入控件页面中。
【Sketch技巧】响应式异形按钮设计
这时候返回实例页面中会发现,修改文字时,按钮不随文字的增减而变化,这时就需要设置控件的布局。
【Sketch技巧】响应式异形按钮设计

2. 设置控件布局和文字对齐方式

在控件页面中,选中创建好的按钮组件,在菜单列表中执行:图层→布局→从左往右,如图。
【Sketch技巧】响应式异形按钮设计
还是在控件页面中,选中按钮里的文字,在右边对齐方式中选择“自动宽度”和“居中对齐”,如图。
【Sketch技巧】响应式异形按钮设计
这时我们返回实例,更改文字时,按钮宽度就会随着文字的增减自动变化了。

PS:“从左往右”布局是指,按钮距离画板的左边距固定,另外几种布局形式大家也可以尝试下。

3. 制作响应式按钮

这时虽然按钮随文字变化了,但对于这种异形按钮来说,形状也发生了变化,显然这不是我们想要的效果。
【Sketch技巧】响应式异形按钮设计
【Sketch技巧】响应式异形按钮设计
(修改文字或更改按钮大小时,异形按钮形状比例错误)

所以,最关键的来了——

在控件页面中,将按钮中位置不需要改变的形状靠边固定,大小不需要改变的形状固定尺寸。

具体方法如下:

拆分

将异形按钮形状拆分为矩形和三角形,三角形属于固定大小和位置的元素,两侧的小矩形属于半固定元素,中间的大矩形属于自动适配元素。

【Sketch技巧】响应式异形按钮设计

联集

选中所有细分后的形状,执行“联集”操作,这时按钮就会恢复之前的样子。
【Sketch技巧】响应式异形按钮设计

固定

选中按钮中右上角的两个小三角,靠边固定选择“右+上”,固定尺寸“宽+高”,即大小不变,并固定在右上角。同理,选中按钮中左下角的两个小三角,靠边固定选择“左+下”,固定尺寸“宽+高”。
【Sketch技巧】响应式异形按钮设计【Sketch技巧】响应式异形按钮设计
左上方的小矩形选择“左+上+下”,宽度固定。同理,右下方的小矩形选择“右+上+下”,宽度固定。
【Sketch技巧】响应式异形按钮设计
【Sketch技巧】响应式异形按钮设计
按钮中间的大矩形属于可拉伸部分,自动适配宽高,所以点击靠边固定中间的小方框,即可四个边都选。
【Sketch技巧】响应式异形按钮设计
最后,将联集后的形状结合编组选中,靠边固定也调整为四个边都选。
【Sketch技巧】响应式异形按钮设计
好了,现在返回实例,在修改按钮中的文字,按钮形状就会随着文字的增减自动变化啦。
【Sketch技巧】响应式异形按钮设计
【Sketch技巧】响应式异形按钮设计

相关文章: