2020 年最火的新拟物化设计趋势，快来了解下！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

@布莱恩臣 ：日前，在网上流行起了一种叫 Neumorphism 的新风格，也有人称为 Soft UI，这是一种类似于浮雕的效果。这种风格的出现，给目前流行的扁平化设计增加了一种新的设计形式，很多媒体甚至还将这个风格列为 2020 的设计趋势，三星 Galaxy 系列的发布会宣传海报也使用了这种风格，可见这个风格的火热程度。那么一开始我们不讨论这个风格好还是不好，先来了解一下这个新风格趋势。

什么是Neumorphism？

最开始是一位来自乌克兰的设计师 Alexander Plyuto 在各平台发布了新的作品「Skeuomorph Mobile Banking」。这个作品自发布以来就获得了数十万浏览量，数千点赞数，热度持续飙升并登上 Popular 榜首。

作者是用 Skeuomorph 来命名这个作品风格，评论区就开始了这种风格的讨论，有的人说这是新的拟物风格（New Skeuomorphism），也有人说这是拟物风格 2.0 版本（Skeuomorph 2.0），而后来就有设计师创出一个新的虚构名词，把 New Skeuomorphism 两个词组合，Neo 谐音 New 就是 Neuomorphism。

这个名字就这么火了。大家都开始用上了这个名词出作品，成为了设计新趋势。甚至连作者后面的作品，也使用了这个名称。

再后来国外知名设计师 Michal Malewicz 发布了一篇关于这个风格的文章，将 Neuomorphism，删减了里面的字母「O」，改成了 Neumorphism。在大神的推动下大家又开始争先恐后地使用这个名称。

目前有各种对名称的说法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在没有实际确定的情况下，其实怎样叫都无所谓，重点是我们要知道这种设计风格趋势，关注的不是名字，而是设计。

还记得拟物风格吗？

既然 Neumorphism 只是一个虚构词，也没有任何官方认定，那就先不纠结应该叫什么，我们还是来说说它的前身吧，也就是 Skeuomorphism（拟物）。这是最早被 Apple 提出的设计概念，就是在界面中模仿现实物体纹理材质的设计，目的是让人们在使用界面时习惯性地联想到现实物体的使用方式。

拟物写实的设计风格曾经风靡全球，当时的 UI 设计师几乎都对拟物作品着迷。

而在 2013 年的 WWDC 大会中，苹果公司发布的 iOS7 系统，系统 UI 使用更简洁的设计风格。这场大会也使拟物风格逐渐过时，直到现在扁平风格的全面普及，拟物风格就再没有被广泛应用。

从前几年的设计趋势可以看到，扁平风格作为更高效更简洁的风格被设计师推崇，再加上苹果系统 iOS 7 设计风格的面世和谷歌系统规范 Material Design 的普及，扁平风格在 UI 设计中一直占据重要位置。

但设计的流行趋势也一直在改变着，在苹果公司最新发布的 iOS 13 系统中，就有出现轻拟物的设计手法，接着就有一大堆设计师猜测是不是拟物风格的回归，但我看系统中大部分界面设计也还是扁平风格，并没有把拟物风格作为主要设计风格，也许只是某种程度上解决了画笔的视觉识别问题。

拟物效果能否回归，这个言之尚早，但是新的风格趋势也许可以在扁平同质化的时候增添一点灵感与乐趣。

能用在实际项目中吗？

1. 设计

其实要做到这个效果并不难，了解一下这个风格的结构。

主要有三个样式组成，1 个背景+ 2 个投影。在这个基础上，通过改变颜色和大小参数来达到不同效果。

我尝试着使用彩色去做这个效果，使用浅色背景时还是有效果的，但使用深一点的颜色时，问题就出现了，效果更像是外发光或者普通投影。这也可能是为什么大多数作品都采用比较素的颜色作为背景的原因。

2. 浏览

这个风格最大的问题就是缺少对比度。在色彩使用上比较克制，没有大面积的平铺颜色，仅在极少的位置进行色彩点缀，作用是吸引眼球。从众多设计师的作品可以看出，整体视觉是比较平的，缺少层次。

我拿其中两张图进行了 15% 强度的模糊处理，可以看到除了点缀的位置以外，界面是没有重点的。

3. 操作

因为在界面中除了文字以外，几乎所有元素都应用了这种效果，导致界面所有内容看起来都是按钮的错觉。界面中的主要操作按钮也没有被重点提亮。正常态和点击态的对比度并没有拉开，容易造成状态混淆。点击欲望比较低，不利于引导用户进行下一步操作。

4. 动画

跟拟物效果的动画有同样的问题，元素动画效果很难做得轻快，更适合按钮的使用。由于视觉层级跟背景没有实际分离开，就像固定在了背景上一样，所以动画效果只要出现移动，就会让人觉得不合理，容易给人一种虫子在皮肤底下蠕动的感觉。

5. 开发

问题跟当年的拟物效果的实现类似，要实现这个风格，主要有两个方式。

• 切图：对元素的每个状态（Normal、Hover、Pressed），设计师都需要分别提供一张切图，这个会导致资源库增加大量的图片。
• 代码实现：这个风格的实现效果是对元素增加两个不同方向的投影，通过代码可以实现。但是需要开发对每个元素添加投影，样式代码增多，繁琐的工作量，开发也不会乐意。

附 CSS 实现新风格的网站：Neumorphism 的生成器

综合分析来看，这种设计风格目前在项目中推广和实现中并不合适。

总结

这个风格的出现也确实给大家带来了一个新的思考，这个风格会持续吗？可用吗？也许扁平风格的多年流行后，设计潮流开始往回走，但并不是直接回到拟物风格，而是在效率和视觉效果中找一个平衡点。不论这个风格的对错，起码引起了设计师的注意，也激发了很多设计师的灵感，就像当年拟物风格和扁平风格的讨论一样，不分对错，设计师也不妨多留意一下这个风格，试着做一下效果图，或许会有新的发现。

以上是我个人的思考和结论，如果对文章或者新风格有不同的看法也可以在评论区交流，感谢阅读。

延伸阅读：

从超多案例中，我总结了 2020 年值得关注的 10 个UI 设计趋势

在上篇文章《从超多大厂案例中，我总结了 2020 年值得关注的 9 个交互设计趋势》中，分享了科技发展对交互设计产生的影响和变化。