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

    这里推荐大家使用【行空设计】，一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接：https://xk.design?c=huicn  至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?c=huicn

扫码关注行空设计公众号

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

Powered by Froala Editor