新拟态风格应该怎么画？一个临摹教程告诉你答案

新拟态风格是通过明暗关系，使扁平化元素产生立体感的一种设计风格。这种风格风靡一时，大受设计师的追捧与喜爱。今天借助开关控件的临摹来帮助大家理解新拟态风格，它主要由矢量工具绘制图标的基础形状组成，多次进行填充渐变阴影即可做出新拟态风格的质感。

这里推荐大家使用【行空设计】，一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接：https://xk.design 至PC端即可使用~

由于操作过程中，大家在渐变曲线数值的设置不太可能完全相同，因此下面提到的参数只是参考，大家灵活采用，那现在一起上手来试试吧~

—————————————————————————

01建立配色

画板尺寸任意（图中尺寸是400*400）。建立一个色块便于后期取色，调整画板颜色便于展现效果。

色块颜色：#2AD463

画板颜色：#DCE5E6

02绘制开关

利用两个图形的叠加打造开关的「边框」和「内部」，开关边框图层位于开关内部的上方。图形的填充色及边框色主要根据色块的明暗色调取。

1、开关边框

使用快捷键R唤起矩形工具，调整大小及圆角半径使矩形变成圆角矩形。

尺寸：118*58 圆角半径：29 边框：宽度2

填充：线性渐变 #FCFFFF→#BBBFBD，不透明度60%

2、开关内部

选中「开关边框」图层并复制，调整尺寸，来充当开关内部。

尺寸：114*58 边框：宽度0
填充：线性渐变 #CCCFCF→#C8CCCA，不透明度50%

03添加开关细节

对「开关边框」及「内部」添加内外阴影，使整体更有质感和凹凸感。

1、开关边框

外阴影：#2A332D

X值：3 Y值：2 模糊值：7

再叠加一层外阴影：#FAFEFF

X值：-2 Y值：-3 模糊值：5

2、开关内部

内阴影：#8D8F8D

X值：5 Y值：6 模糊值：5 不透明度50%

再叠加一层内阴影：#F5F9FA

X值：-4 Y值：-4 模糊值：7

04绘制滑块

同理，利用两个图形的叠加打造滑块的边框和顶部。操作步骤与开关的绘制无异，参数值有略微改变。

1、滑块边框

同时按住快捷键R及Shift键绘制一个圆形。

尺寸：52*52 边框：宽度2

填充：线性渐变 #F5FCFC→#D7D9D7

外阴影：#313634

不透明度：50% X值：2 Y值：1 模糊值：6

2、滑块顶部

复制滑块边框图层，改变尺寸及参数。

尺寸：48*48 边框：宽度0
填充：线性渐变 #C1C7C3→#F5FEFF

内阴影：#FCFFFF

X值：-3 Y值：-3 模糊值：7

05复制开启控件

复制一个开启控件，改变开关内部的填充颜色。将滑块移至右边，此时阴影关系略微改变，因此需要调整开关内部的阴影参数以及滑块边框的外阴影参数。

1、开关内部

填充：线性渐变 #14D955→#069C38 不透明度100%

内阴影：#069C38

X值：2 Y值：5 模糊值：5 不透明度50%
再叠加一层内阴影：#FAFEFF

X值：-2 Y值：-3 模糊值：7

2、滑块边框

外阴影：#FAFEFF

X值：-2 Y值：0 模糊值：5

—————————————————————————

以上就是开关控件的新拟态临摹教程啦，看完是不是发现，其实只要把握好填充渐变色设置以及阴影参数，新拟态风格也不是那么难哦，记得关注空空，我会在这里持续分享UI设计干货。

官网地址： https://xk.design

扫码关注行空设计公众号

扫码加入行空设计公测用户群