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

在一些科技感强的页面中，往往含有大量的异形元素，比如

在设计这类按钮时，按钮大小完全依赖于文字长度。当按钮中的文字数不固定时，萌新们一般会根据文字长度单独调整每个按钮的长度，这样当然是有效的，但按钮特别多的情况下，手动调整就显得不那么专业了。

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

1. 创建控件

首先我们要把我们设计好的按钮做成一个控件。
选中按钮形状及里面的文字，右键→创建控件。
创建好的控件会被放入控件页面中。

这时候返回实例页面中会发现，修改文字时，按钮不随文字的增减而变化，这时就需要设置控件的布局。

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

在控件页面中，选中创建好的按钮组件，在菜单列表中执行：图层→布局→从左往右，如图。

还是在控件页面中，选中按钮里的文字，在右边对齐方式中选择“自动宽度”和“居中对齐”，如图。

这时我们返回实例，更改文字时，按钮宽度就会随着文字的增减自动变化了。

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

3. 制作响应式按钮

这时虽然按钮随文字变化了，但对于这种异形按钮来说，形状也发生了变化，显然这不是我们想要的效果。


（修改文字或更改按钮大小时，异形按钮形状比例错误）

所以，最关键的来了——

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

具体方法如下：

拆分

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

联集

选中所有细分后的形状，执行“联集”操作，这时按钮就会恢复之前的样子。

固定

选中按钮中右上角的两个小三角，靠边固定选择“右+上”，固定尺寸“宽+高”，即大小不变，并固定在右上角。同理，选中按钮中左下角的两个小三角，靠边固定选择“左+下”，固定尺寸“宽+高”。

左上方的小矩形选择“左+上+下”，宽度固定。同理，右下方的小矩形选择“右+上+下”，宽度固定。


按钮中间的大矩形属于可拉伸部分，自动适配宽高，所以点击靠边固定中间的小方框，即可四个边都选。

最后，将联集后的形状结合编组选中，靠边固定也调整为四个边都选。

好了，现在返回实例，在修改按钮中的文字，按钮形状就会随着文字的增减自动变化啦。