3步告诉你夜间icon怎么画？

Dark Mode（夜间模式）能够降低屏幕亮度，减少视觉疲劳，因此该模式在过去几年越来越受欢迎，也成为苹果和谷歌UI的重要组成部分。
为达到界面的整体视觉和谐，夜间模式比较考究颜色的填充，那夜间模式应该怎样设计呢？今天以第一个图标为例来帮助你了解这类风格。

这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch～

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

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就完成啦，是不是超级简单，你也来动手试试其他两个图标吧！大家有其他疑问可以在评论区讨论。

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

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

扫码关注行空设计公众号：