今天的话题是关于Neumorphism，这是一种设计风格，或者说是一种设计潮流，它让设计师陷入了一个泥潭。

一、Neumorphism的诞生与定义

neuromorphism(或Neo-skeuomorphism)是一种新潮的设计风格，应用于网页元素、框架、界面等。它也被称为skeuomorphisms。

所以Neumorphism是“新”和“骨骼形态”的巧妙结合。因为我们对“新”并不陌生，所以我们来看看“Skeuomorphism”。

自从人类发明了媒体，我们的祖先就用它来获取最新的消息。在寻找Skeuomorphism的定义时，人们发现了这段话：

……手机应用的设计手法是模仿现实生活中的物体，这就是“Skeuomorphism”。

他们在关于乔布斯的报道(纪念文章)中偶然发现了这个清晰的定义，这个定义解释了苹果产品传统外观的改变。作者在文章中强调了这段引文。

由此我们知道，Skeuomorphism这个词作为一种设计风格，在苹果的设计团队中已经广泛应用于各种产品中，而苹果的实践表明，他们在这一领域拥有绝对的主导地位。所以我们可以得出一个初步的定义：

Uomorphology=过去的苹果风格

还有一点需要注意的是，它与另一个UI/UX流行语密切相关：可用性(availability)(这恰好是一个非常正面的词，在产品设计领域受到高度重视)。

在IOS7发布之前，苹果宣布放弃传统的设计风格，包括界面和图标。从此，这种风格开始向扁平化转变。

苹果设计团队的明智之举是尽可能减缓这种变化。2019年，这种扁平化的风在整个设计界达到顶峰。

苹果，这个行业的风向标，宣布Skeuomorphism的彻底终结，设计界纷纷效仿。

设计师是一个技术不断更新的群体，他们很容易适应新的设计风格。随着扁平化风格人物插画的流行，我们在2018年底到2019年进入了另一个扁平化设计的黑暗期，不过这是另一回事。

二、Skeuomorphism的转世

我知道你可能会觉得这个书名是非洲奇幻小说，或者是流行的网络综合，其实都不是。只是意味着Skeuomorphism作为Neumorphism再次出现在大众的视野中。

当你打开Dribbble，搜索关键词：Neumorphism，很容易被大量类似的作品筛选，从专业设计师到业余爱好者，一个接一个。

我是其中之一。你可以在这里找到我的作品。任何一个标签都可以把你带到Neumorphism的地盘，在这里你可以真切地感受到它的魅力。

哪里新？

“Neo”和“Neu”源于同一个词根。

仔细分析这种在2019年11月开始流行的新风格，会发现许多旧元素都被改造成了极简设计。

1. 色板

大多数情况下，主色调为浅色，饱和度低，看起来接近白色、米色或浅灰色。而且只用颜色相近的渐变色来突出一些特定的部分。

2. 形状

易访问的形状用于创建重复的用户界面。

3. 表现

与之前的设计不同。新变体风格的特点是非常温和和微妙。它不是过度模仿自然界中的物体，而是创造了一种新的表现形式，看起来就像一个原始的白色模具(3D设计时，模型并不处于被纹理化之前的状态)。

4. 效果

它没有试图特别逼真，而是采用了HTML和CSS容易实现的效果，比如双阴影、渐变、填充、描边或者内阴影。这些效果都是初级开发工程师用现成代码就能实现的。

5. 零开发难度

如果是特别难开发的设计，你需要10倍以上的技术人员来实现，或者你受困于PNG、GIF、JPG图片的糟糕显示效果，无法采用SVG这种更清晰的可缩放矢量图形。

三、如何设计Neumorphism？

首先你得是个设计师，不是设计家具或者服装的那种，而是数码产品设计师。所以虽然有一定的局限性，但并不局限于产品设计师，UI设计师，平面设计师。

一旦角色被确定，他们自己的工具将完成这个设计。

每种工具及其自身的局限性，我将尝试从UI/UX和产品设计的角度分析这些工具的优缺点：

1. Adobe XD

它最初是由UI/UX设计师使用的。这是一个非常轻量级的设计工具。目的是配合第三方插件，与其他Adobe软件结合使用，因为单独使用时，其本身的功能是有限的。

优点：组件状态、背景和模糊性等。缺点：多投影，渐变描边等。

2. Figma

首款通过网页实现大规模多人协作的设计工具。还提供了大量的第三方插件，和其他传统设计软件不太流畅，但也受到很多设计师的喜爱。

优点：效果叠加，背景和虚化等。缺点：其强大的Web工作流(网络状况不好的时候简直就是灾难)。

3. Sketch

目前是设计界的网络名人。它拥有Figma的所有功能，但拥有更多更好的第三方插件和更广泛的服务。即将推出多人协作功能。

优点：混合模式，矢量图形等。缺点：频繁死机，停滞不前，苹果设备使用受限。

4. Adobe Photoshop

现在还在用PS做UI/UX的设计师被称为老古董，但我不认同这种说法，因为他们没有完全了解情况。是的，我们必须承认PS有点过时，对于某些UI/UX工作流来说过于笨重，但我们不能忽视它在同一张画布上执行多项任务时的强大性能，这也是为什么这把老枪退役后依然强大的原因。

优点有：图像编辑、图层样式(如内阴影)以及与矢量软件AI的无缝连接等。这里就不讨论缺点了。

5. 其他软件

Invision Studio(用于原型设计)、亲和设计师等。和上面四个属于同类产品，不推荐。除非你打算用渐变和颜色来完成链接、组件等一些简单的设计任务，或者你只是单纯想浪费甲方爸爸的时间，尽量不要用AI做UI设计。

四、基础：一个简单的教程

步骤1

创建新画布。如果你想上传一个Dribbble，把大小设置为1800 * 1350px，因为它要求的比例是8003360600。

本教程是在Adobe XD中完成的，但是您也可以在任何软件中实现它，甚至在画板中。

用淡蓝色填充画板，颜色值为#D2DEEF。

步骤2

选择左上角的矩形工具，画一个601*840px的矩形。这里我加了一个倒角，改名为“Surulere”。

用灰色填充，颜色值可以是#EAF0F8。

给他一个#FFFFFF纯白，1px宽的笔画。

给它添加一个阴影，其中x为0，y为30，模糊为60。确保阴影看起来不那么黑。可以是#A7B3BE(或者#000000的纯黑，然后透明度设置为35%)。

复制原始图层，将阴影中的Y更改为-30，颜色更改为#F8FCFF，透明度更改为50%。

在Figma或Sketch中，只需要在同一个图层上再添加一个阴影效果，不需要复制图层。

步骤3

再次选择矩形工具，添加一个430*94px的矩形，纵横居中对齐，重命名为“Ajah”。

用同样的灰白色填充，加一个1px的白色描边。

给它添加一个阴影，x为0，y为12，模糊为16，阴影更柔和，颜色值可以是#EAF0F8(或者#000000纯黑，然后透明度设置为30%)。

复制原图层，将阴影中的Y改为-12，颜色改为#FFFFFF，纯白。

步骤4

选择文字工具添加文字：“这个流行趋势的按钮”(或者随便你)。我会选择Calibre字体32pt中等的字重，然后填充#66727C的浅灰色。

可以像我一样排版。

步骤5

打开你的图标库，选择任意一个图标，用和文字一样的颜色填充。我选择了一个看起来像家和教堂的图标。

将图标放在文本的左侧，并调整它们之间的间距，以确保有足够的空白。

两者之间加一条1px的白色分割线。

步骤6

然后是vans！复制两遍，然后用不同的颜色填充图标，在网上搜索一些设计参考，继续探索更多样的设计。

是酱阿姨！

五、我现在知道它了，之后应该怎么使用呢？

知道如何以及何时使用这种超能力比它本身更重要。

可以用在UI/UX或者网站设计中，但是请不要用在印刷品中。这种设计风格要想打破自己的现状，必须要进行改进和调整，才能应用到屏幕之外的世界。

设计师可以自由探索Neumorphism的更多可能性，就像他们现在做的那样，让它更有创意，更漂亮。

在动态和三维设计领域，为了创造更美的视觉效果，这种风格被发展到了极致。

如果想了解它在其他设计领域的发展趋势，可以在评论区留言告诉我。

原作者：David Ofiare，来自尼日利亚，是一位非常有经验的独立设计师。

原文链接：https://www.linkedin.com/in/david-ofiare-0a9293173/

编译：可视化饼图

本文由@视觉派翻译发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。