近些年来，设计工具一直在发展，从 PS 到 Sketch、XD，我们的工作效率越来越高，而设计工具 MasterGo 再次给我们带来工作方式的变革和工作效率的提升，今天我们就用 MasterGo 来教大家做一个矢量的轻拟物风格设计。

在前几年扁平化风潮之后，最近两年拟物化风格又有抬头的趋势，不同于之前拟物化 UI “油腻”的风格。

脱胎于扁平化的拟物 UI 也简洁了很多，比如前年的“新拟物”、去年 MacOS 更新的 BigSur 图标，甚至是毛玻璃风格，这些风格一经推出，便很快风靡了全球。

不仅设计风格在不断迭代、提升，设计工具也在不断迭代、进化。今天我们就用界面设计工具 MasterGo 中非常好用的自动布局功能，来做一个轻拟物的合成器键盘。

这次临摹的源文件链接我们也会在结尾放出，第一到五步我们是制作各个拟物化部件，第六、七步是教大家用自动布局把他们组合成一个成品，如果你对轻拟物比较熟悉的话，可以直接跳到自动布局的部分。

现在开始：

打开我们的 MasterGo.com 在线设计平台，并创建一个新文件。

MasterGo 使用地址：MasterGo.com

为了方便看出效果我们先将画布背景色调为浅灰。

一、制作琴键

为了方便自动布局排列，这部分我们会制作一个白键和一个黑白组合键。

• 1. 制作白键

• 新建 74*214 的容器，将其命名为“白键”，展开圆角选项将下面两个角的圆角改为 12px
  

填充颜色（线性渐变，从上到下）： #FFFFFF, 85% → #FFFFFF, 100%

特效（外阴影）设置参数：

位置：X=0 Y=8

模糊：B=30

颜色色值：#000000, 30%

• 在容器“白键”中新建一个矩形。

尺寸：70*205    

圆角弧度（下面两角）：10

留出间距：上 2 下 7 左 2 右 2 ，按住「option」键（Windows：alt）查看图层和其他图层的间距。

• 调整矩形填充：

色值（线性渐变从上到下）：#DCDCDC, 100% → #F7F7F7, 100%

• 将容器“白键”创建组件。

2. 制作黑白组合键

• 复制“白键”组件实例。

• 将实例创建为新组件。
  

命名为“黑白组合键”，并关闭「裁剪超出内容」按钮。

• 创建新容器，命名为“黑键”。

尺寸：32*120

圆角弧度（下面两角）：10

填充色值：#3B3B3B , 100%

描边大小 ：2

描边色值：#171717, 100%

• 创建容器外阴影。

点击特效选择外阴影设置参数

位置：X=0 Y=12

模糊：B=12

色值：#000000, 23%

• 在容器“黑键”中创建矩形，并调整位置。

尺寸：28*114

圆角弧度（下面两角）：10

• 填充（线性渐变从上到下）：
  

#121212, 100% → #232323 , 100%

• 间距：左 2，右 2，下 6

• 最后，将容器“黑键”拖动到“黑白组合键”组件中，并调整到黑键的中线对齐组件左边缘，顶部对齐。

这一步注意不要把黑键移出了组件，然后按键盘方向键，让黑键向上、左各移动 2 像素。如果成功了，拖动“黑白组合键”，黑白键应该是一起移动的。

二、制作旋钮

1. 创建圆形，命名为“底”，添加特效外阴影

数值如图：

尺寸：96*96 

• 填充色值（线性渐变从上到下）：#FFFFFF, 100%  →  #D0D0D0, 100%

2. 创建椭圆形，命名为“炫光”。

尺寸：96*92  

填充色值（旋转渐变）如图顺时针添加颜色点：

#D8D8D8 , 100% →  #F6F6F6 , 100% →  #EDEDED , 100% →  #F6F6F6, 100%

• 将“炫光”图层拖动到“底”图层上，使二者水平垂直居中，详见参考线。

• 3. 创建矩形，命名为“指针”。
  

尺寸：4*15

填充颜色：#818181, 100%

圆角弧度：2

把指针移动到下图位置，按住「option」键（Windows：alt）可以查看图层和其他图层的间距。

• 4. 创建指示点。
  

创建两个相同的圆形并置放于平行垂直居中于“底”图层。详见参考线。

尺寸：6*6

填充色值：#818181, 100%

间距：96

• 5. 选中“底”、“炫光”、“指针”、圆形 3、圆形 4，创建组件命名为“旋钮”并关闭裁剪超出内容按钮。

三、制作音阶键

• 1. 新建容器并将其命名为“按钮”
  

尺寸：48*108    

填充色值：#FCFCFC, 100%

圆角弧度 （从左上顺时针至左下）：10、10、2、2

• 2. 复制容器“按钮”并更改部分参数后将“按钮 1”拖入容器“按钮”中
  

尺寸：48*106

色值：#F0F0F0, 100%

约束：左右固定，上下固定

• 3. 添加图标
  

• 
  
• 点击「资源库」 - 「图标」搜索“箭头” 选择向上箭头，拖入容器“按钮”中，使其上下左右居中对齐。
  

尺寸：24*24

颜色：#818181, 100%

约束：居中，居中

• 4. 向下垂直复制一个“按钮”并且使其垂直翻转。

• 5. 选中两个“按钮”添加自动布局调整参数。
  

圆角：11

自动布局：垂直自动布局，间距：2 ，边距：2

填充色值：#BFBFBF, 100%

• 6. 将两个按钮的调整改为：宽度充满容器，高度充满容器。

四、制作指示灯

• 1. 创建圆形
  

尺寸：8*8

填充颜色：#0AFF81, 100%

• 2. 复制两个圆形更改颜色添加特效并将三个圆形调整好距离后放到一个容器中。
  

灰色圆形填充颜色：#818181

然后添加特效来做出一点深度感：

内阴影（上）  X=0，Y=1，B=0，颜色：#000000, 31%

内阴影（下）  X=0，Y=-1，B=0，颜色：#FFFFFF, 50%

五、制作底板

现在我们开始做合成器的底板：

• 1. 任意创建一个容器设置参数：
  

圆角：36

自动布局：垂直布局，间距：56，边距：56

填充（由下至上）

1: #FFFFFF, 100%

2: 填充图片（属性设为正片叠底）8%  

3: 填充图片（属性设为颜色加深）10%

• 2. 添加容器特效（由下至上）
  

1（外阴影）：Y=32， B=36， #000000，20%

2（内阴影）：Y=4，   B=0，   #FFFFFF，100%

3（内阴影）：Y=-4，  B=0，   #000000，15%

• 3. 把容器命名为“合成器”

六、创建文字，我们给合成器添加上品牌名

• 1. 添加文字，更改样式：
  

大标题，字体：Inter，粗体，字号：36 ，填充颜色：#6D6D6D, 100%

副标题，字体：Inter，中粗体，字号：14，填充颜色：#818181, 100%

由于之前给合成器添加了自动布局，所以同学们在打字的过程中，会发现合成器的大小随着文字图层的变化而变化。

• 2. 选中两个文字图层，添加自动布局，并将容器命名为“文字”

七、拖入组件

现在我们拖入之前做好的组件，因为自动布局的原因，我们能看到容器随着内容的变化而变化，再也不用因为改变内容的尺寸而调整其他所有图层的大小或位置了，我们来看一个加速播放的预览来感受一下自动布局的魅力：

• 1. 将容器“指示灯”拖入容器“合成器”
  

• 
  

  • 按：
    

Mac: Option

Windows: Alt

可以复制并拖动。注意不要放到了“文字”容器里。

• 然后我们选中文字和指示灯，添加自动布局：

自动布局：垂直布局，并设置一个合适的间距。

• 
  

• 2. 我们把做好的音阶键放入合成器，并创建一个键盘的底板

• 将容器“音阶键”拖入“合成器”中。

• 在“合成器”中，画一个任意尺寸的容器，命名为“键盘”：

填充色值：#1A1A1A , 100%    

圆角：16

自动布局：水平布局，间距：4，边距：4

• 同时选中“音阶键”和“键盘”并给他们添加一个新自动布局：

自动布局：水平布局

间距：默认

• 
  

• 3. 将“琴键”复制拖入“键盘”中并更改部分圆角，并适当调整内容
  
  

  • 将“琴键”按顺序拖入“键盘”容器中，由于我们设置好了自动布局，整个合成器都会响应式变化。
• 
  
  • 将第一个白键和最后一个键适当调整圆角：圆角：12

你会发现白键的外阴影没了，是因为被容器裁剪了，这时我们只要关闭容器“键盘”和其父容器的裁剪超出内容按钮即可。

• 因为我们设置好的自动布局，我们可以随意调节旁边音阶键的宽度到一个合适的大小。

• 4. 最后，我们将“旋钮”复制并拖入到合成器容器中，并将其与文字设置自动布局，稍加调整即可完成！ 

• 
  

  • 将“旋钮”拖到文字容器下方选中二者添加自动布局，并关掉新自动布局容器的「裁剪超出内容」按钮。
    

自动布局：水平布局

• 将“旋钮”在此容器中复制一个。

• 更改调整，改变自动布局形式，让旋钮自动撑满整个容器并平均间距。
• 
  

调整：宽度充满容器

自动布局：分布式

• 稍加调整直到满意的效果即可大功告成！

学会了么，最后我们把合成器放到一个好看的背景里，就大功告成了，可以上传作品了！

最后我们放出源文件链接，点击创建副本自动复制文件到自己的 MasterGo 中：

【源文件】轻拟物合成器键盘

Powered by Froala Editor