Dark Mode（夜间模式）能够降低屏幕亮度，减少视觉疲劳，因此该模式在过去几年越来越受欢迎，也成为苹果和谷歌UI的重要组成部分。

为达到界面的整体视觉和谐，夜间模式比较考究颜色的填充，那夜间模式应该怎样设计呢？今天以第一个图标为例来帮助你了解这类风格。

这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接：https://xk.design?c=huicn 至PC端即可使用，边看边操作效果更佳哦，文章底部附有源文件链接，大家需要的自取哈

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

01 绘制图形

建立画板，随后在画板中利用基础绘图工具和钢笔工具绘制出图形。

画板尺寸任意。大圆与钢笔工具绘制的不规则图形进行布尔运算的联集，组成形状结合，不规则图形的尺寸大家自由绘制。

大圆：尺寸206*206px

小圆：尺寸114*114px

星形：尺寸116.8*110.16px；旋转335°；圆角半径10；角度5；中心距离41%

02 填充颜色

为了与深色背景有更好的对比性，因此夜间模式的icon最好使用较浅的颜色，星形则是icon的重点色。

画板：#121D57

形状结合：线性渐变填充#58A2FF-#864BFF

小圆：纯色填充#4340DC

星形：线性渐变填充#FEF172-#FEAE51

03 设置属性

为凸显图标的整体立体度，给形状结合和星形添加内外阴影，给小圆设置高斯模糊。

形状结合：

外阴影填充#CEBFFF、不透明度30%、大小【9、2、46、10】

内阴影填充#FFFFFF、不透明度30%、大小【-6、-2、16、0】

叠加内阴影填充#FCFCFC、不透明度30%、大小【8、8、20、0】

星形：

外阴影填充#4541E2、不透明度100%、大小【3、2、4、0】

内阴影填充#FFFFFF、不透明度50%、大小【2、2、4、0】

叠加内阴影填充#7D5BFF、不透明度100%、大小【-2、-2、4、0】

小圆：高斯模糊50

这样一个夜间icon就完成啦，是不是超级简单，你也来动手试试其他两个图标吧，

复制链接：https://xk.design?c=huicn 至PC端查看源文件，大家有其他疑问可以在评论区讨论。

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

Powered by Froala Editor