2020 年最火的新拟物化如何落地应用？来看高手的思路

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

最近关于新拟物化 Neumorphism 的风太大，简直是传遍大江南北无人不知。对于它的看法大家也都众说纷纭，大部分的观点都集中于：第一看过去非常的高大上，再仔细琢磨一下就感觉只能是飞机稿中的战斗稿。对此我表示非常的理解，毕竟在国内体制下的用户界面设计基本都延续商业设计的命脉──低效能、不实用、不能带来良好转化的东西统统给我丢掉，哪怕是用户体验也是建立在商业目标驱动下的存在。

尽管观点如此，我还是想为新拟物化这位诞生在不平凡 2020 年的新生儿稍稍正个身，它并非空穴来风，也并非完全无法落地使用，相反如果合理加以优化应该能达到意想不到的双赢效果。

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

@布莱恩臣 ：日前，在网上流行起了一种叫 Neumorphism 的新风格，也有人称为 Soft UI，这是一种类似于浮雕的效果。

新拟物化的由来

一切的开始都源于一个叫 Alexander Plyuto 的设计师在各平台发布了一个他的新作品──「Skeuomorph Mobile Banking（拟物化手机银行）」。

在去年末的时候这名设计师还一直沿用 Skeuomorph（拟物化）这个名词来命名自己的一系列设计作品，直到 HYPE4 的 CEO-Michal Malewicz 写了一篇关于此风格的文章，并赋予了它一个新名词 Neumorphism（New+Skeuomorphism），自此之后大家就都照着这个新名词进行传播了。

在详解新风格之前，先让我们回忆一下这些年移动端用户界面设计风格的演变历程。自 2013 年苹果推出了 iOS7 之后开始刮起的扁平风潮，所有走在设计前沿的大厂都开始不约而同地对自己家的 app 进行了大刀阔斧的改版。

这扁平风一刮就是 7 年，仔细分析一下就能明白为何 ta 如此长寿：内容优先的认知简约，不仅拓展性强且具有高效能的特性，解放了一大堆「手活」不是那么好的设计师，让他们有更多时间专注在设计解决问题的命题上。

但就算一个风格再适应市场的需求，用户和时代还是会对它逐渐疲惫，审美疲劳和新的市场需求都会催生新的变革。

新拟物化设计语言解析

1. 新拟物化≠轻拟物

第一次看到这个风格介绍的时候险些以为就是曾经的轻拟物重返江湖了，但仔细看看原设计师输出的设计原则，发现确实是完全不同的 2 种定义。

轻拟物从本质上来说是 Y 轴面原质化层级分离的，而新拟物是在 Y 轴面不分离的情况下物理化拟态。

来看一个轻拟物与新拟物卡片的比对：

从上图可以感受到新拟物在保留轻质感的同时，更贴近事物的物理还原，但真实感与舒适度带来的代价就是它的辨识度和对比度明显较其他风格低了很多，这也是它被大家吐槽飞机稿中的战斗稿的重要原因之一。

2. 新拟物化控件示例

原设计师对新拟物化的「浅色版」控件规范如下，基本涵盖了核心的界面设计控件，整体对于控件的定义就在于良好使用投影和渐变来打造物理化界面肌理。

另外还有可以良好适配当前流行黑色模式的「黑色版」。

新拟物化的改良与应用

在了解新拟物化的设计语言特点之后，大家应该都发现这种风格的设计是有一定局限性的，它并不适用于一部分商业产品，大部分时候也不适合全局控件应用。那么如果我们想要把新拟物化应用到我们的落地项目设计中，需要注意哪些地方，并进行什么样的改良呢？

1. 深浅模式叠加解决弱可视难题

新拟物的按钮肌理很多是建立在素色白板上的浅色按钮，如果继续沿用浅色按钮，且不说色弱用户的可视问题，普通用户的操作行为也会大打折扣，所以这里我们建议将新拟物的深浅模式叠加来使用，如下图：

2. 局部高光使用解决层级难辨问题

如果将新拟物化全控制使用，确实容易造成界面层级混乱的问题，因为毕竟它的设计语言就是 Y 轴面不分离的设计定义，但如果我们合理选择它来作为局部高光，应该大部分情况下还是不错的。如下图，我们仅在银行卡部分使用新拟物化（深浅双模式均可用），其他的控件部分保持扁平，使用 2 个风格相融合的方式可以良好保障层级的划分：

3. 拿什么解决开发崩溃的问题？

之前看到很多文章在转发一个生成新拟物化 css 代码的网站：Neumorphism.io，说是用这个就可以轻松解决开发的问题。

2020 年最火的新拟物化设计怎么做？这个在线神器一键生成！

新拟物化 UI 设计（Neumorphism / soft ui）在近段时间流行起来的，我们在 Dribbble 中搜索 Neumorphism 就有很多相关的新拟物化设计作品，这种效果一眼看上去感觉很美，很舒服，但是怎么做出来的呢？

然而事实的真相总是令人落泪的，这个网站提供的 css 代码只是网页代码，移动端是完全用不了的。而且就算有对应的 css 代码，对于开发来说也是远不够的，他们还是要写框架来支持这套 css 代码，不然是跑不起来的。所以我们要如何解决开发小哥哥手写新拟物化设计稿崩溃的问题呢？

很简单，就是给他们切图。按钮的软点击切两张状态图，卡片背景只需要切一张，ppduck 压缩走一波，对 app 性能的影响基本可以忽略不计（因为上文我也说过了这种风格不大可能大面积或者全界面应用）。

至于新拟物风不适用的场景大家应该都心知肚明了，信息承载大，层级关系复杂，我就不一一举例了，基本就涵盖了大部分现在市面上主流的产品的大部分场景。但即便如此我们还是需要对新的设计保有一丝激情与希望，不要轻易的去否定，毕竟新生事物总是有它的魅力与独到之处。

欢迎关注作者的微信公众号：「Nana的设计锦囊」