新拟态如何用 Adobe XD 实现

前言

前些天无意间在某个订阅号看到一个新UI，十分惊艳，这种介于扁平化和传统投影的设计，的确让人眼前一亮。于是有了想用这种风格练练手设计UI的想法。由于之前一直都使用Adobe XD制作原型，所以这次特意找了一个教程学学如何使用Adobe XD制作新拟态风格，特此写下笔记。

「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软UI）。简单来说就是一种类似浮雕的效果，介于扁平与投影之间。

| 图片源自站酷 @Frannnk

三者区别主要体现在层级上。

元素与背景是同为一个平面，视觉层级没有特别强烈的前后关系，对背景依赖不大。如果本身背景与画面整体背景有区分，色彩就划分了层级。

| 图片源自Dribble @Divan Raj

带投影的给我们的感知就是漂浮起来的，单独看它，它漂浮在背景之上。与扁平并列看，它高于扁平，通常大家为了突出某些内容或某个模块会去使用这种样式。

投影的使用对背景的依赖几乎可以忽略，因为投影除了形状可以调整，包括色彩、大小等都可以调整，且它是无边界的漂浮着，即你可以随意定义它的高度。

| 图片源自Dribble @Alexander Plyuto

从顶面看，它似乎是介于扁平与投影之间。

从侧面看，同样也是漂浮的，但是它有厚度却又没有离开平面，它的范围相对于投影的无边界，似乎还有一些模糊的界定。

对背景有一定依赖，需要几乎相同的色值实现。

| 图片源自Dribble @Ashish Kumar

| 图片源自Dribble @Anna Raptunovich

| 图片源自Dribble @MazePixel

通过观察，不难发现这种风格的一些基本特点：

| 图片源自UI Kits @Harpen Design in

这个风格最大的问题就是缺少对比度，导致可见性较差。

在色彩使用上比较克制，没有大面积的平铺颜色，仅在极少的位置色彩点缀，作用是吸引眼球。

从众多作品中可以看出，整体视觉是比较平的，缺少层次。

| 图片源自Dribble @Riotters

| 图片源自Dribble @Igor Erema

实现步骤是根据B站视频教程实操总结而得：视频地址；
在线CSS代码生成：新拟态

先上最终效果预览：

先上图：

新建画板就不重复了，新建一个100*100的正方形，去掉填充，勾选边框，色值为：#000000，透明度为20%，大小为5。
勾选背景模糊，把背景模糊改为对象模糊，设置数量为5。
复制三层出来。左中右分别命名为：mask，light，dark。各部分数值如下图：
mask：取消填充，勾选边界，色值为：#000000，大小为1。
light：投影色值改为：#ffffff，不透明度为：80%，大小为3，对象模糊色值改为3。
dark：投影色值为：#000000，不透明度为：20%，大小为5。
将三个图层合在一起。
将light的宽高设置为120，并往左、往上各移动20px：
将dark的宽高设置为120：
选中三个正方形，右键选中带有形状的蒙版。（若生成结果不一样，请检查图层顺序）右键制作组件。