新拟态风格的那些事

      最近突然有好多小伙伴来问我新拟态风格是怎么回事，这不是2020年流行起来的设计风格么，哈哈哈哈~~~既然有小伙伴来问，那么狼哥也来盘一盘新拟态风格的那些事。

      新拟态本身我明白是怎么回事，但是为了很好的以文字形式展现，我查阅了很多资料，所以有些图大家应该在网上见过（这算不算抄袭啊，怕怕的）。好了，正文开始~

      记得2020年初的时候，设计界突然掀起一股新拟态的界面设计风格，但对于一些刚入坑的小伙伴们还是有点搞不懂，新拟态和轻拟物有区别吗？不都是有立体感？今天狼哥就和大家来盘一盘新拟态到底是怎么回事。

新拟态的起源

新拟态一开始是由一位叫Alexander Plyuto的乌克兰设计师在追波上发布了一个名为[Skeuomorph Mobile Banking]的作品。

      这个作品一时间被众多设计师争相模仿，点赞量也是噌噌噌的往上涨，毫无意外的登上了Popular榜首。之后作者把这样的风格命名为New Skeuomorph。（看到这里是不是觉得似曾相识？不错，走红的路子和MBE风格一毛一样。）后来有设计师生造了一个新的虚构名词，把New Skeuomorph两个词结合了一下，把new改成了谐音neo，就有了Neuomorphism，最后，由一位叫Michal Malewicz的知名设计师命名为Neumorphism。就这样，名字就定了下来。

      重点来了，其实叫啥并不是很重要，重要的是设计本身！

什么是新拟态

      什么是新拟态呢？其实一新拟态就是在界面中加入光影效果及渐变来模拟出元素的立体感。但是和拟物化又不同。新拟态主要是在卡片和按钮上做突出或凹陷的浮雕效果，比较有现代感和科技感。界面整体饱和度较低，元素本身不会出现鲜艳的颜色。

      轻拟物则是通过渐变及光影效果来呈现元素的立体感及轻微的质感，颜色自由度较高。

      写实风（也就是重拟物）会让元素看起来非常接近现实生活中的物体，有细腻的光影表现和质感表现。（写实风图标设计可参考狼哥哥以前写的文章《PS绘制索爱图标一枚（绘制思路及方法）》https://www.zcool.com.cn/article/ZODQ2NTY=.html）

新拟态的设计要点

1、卡片和背景的关系

      首先，当然是对光影和结构理解啦~~~（所以狼哥经常说，学过美术的同学，尤其是美术生，做设计有着天然的优势）我们就以“突出的卡片”为例来讲讲不同风格的卡片所呈现出来不同的视觉效果。

常规卡片：卡片紧贴背景，没有前后的空间感；

悬浮卡片：卡片悬浮背景之上，背景上有卡片的投影；

新拟态卡片：卡片与背景没有分离，从背景中凸起，有明显的受光面和背光面；

（PS实现时，选择浮雕中的外斜面）

   

2、卡片的表面结构

      不同的卡片表面会呈现不同的明暗效果，所以我们要理解卡片的结构是什么样的，为什么会有这样的光影变化。

浮雕平面：卡片就是平整的，没有任何变化；

浮雕凸面：卡片表面微微隆起，带有一定的弧度变化；

浮雕凹面：卡片从背景中凸起，表面又成凹陷效果；

凹陷平面：卡片凹陷进背景；（凹面又可分为凹陷平面、凹陷凸面和凹陷凹面）

3、新拟态风格的特点

A、距离对光影的影响

短距离：卡片距离背景越近，浮雕的明暗就越明显，同时浮雕范围也越小；

中等距离：随着卡片高度的增加，浮雕范围也逐渐变大，浮雕的明暗关系逐渐减弱；

远距离：远距离时，浮雕越来越不明显，明暗对比也越来越弱；

这就是透视中的一个现象：距离近就对比清晰，距离远对比弱化；

B、光源角度的选择

      我们选择光源时，根据风格特征首选左上方45度角，或者正上方90角。因为这两个光源看起来也比较顺眼，特别是左前方45的光源，较为柔和。

C、直角和圆角

      新拟态风格在遇到拐角的时候，不会直接使用尖锐的角，通常是会加点圆角，让画面更加柔和，过渡自然。

D、避免纯白背景

      新拟态风格的背景要避免使用高明度的背景，尤其是白色背景。由于新拟态风格具有浮雕效果，所以在高明度的背景上，浮雕的受光面极难显示，所以要避免高明度的背景。

E、元素饱和度较低

使用了新拟态效果的元素（如卡片、按钮、表单等元素）饱和度不会高，通常都是偏低的，同时明度也会稍微偏高一些。元素的颜色通常和背景使用同一个色值。

      通过饱和度和明度的对比，我们发现浅色时效果还不错。但是提高了饱和度，稍微降低了明度，浮雕效果看起来是不是就像外发光或常规的投影一样呢，浮雕效果大大降低。所以新拟态风格的作品通常都是用的颜色比较浅。

题外话：

      这里狼哥哥给大家分享一个新拟态的在线测试工具  https://neumorphism.io/  这个工具可以在线调试新拟态风格的各个相关参数。

Pick a color：挑选一个颜色，后面的输入框直接输入十六进制的色值；

Size：元素的大小；

Radius：圆角半径；

Distance：浮雕大小；（相当于PS中的浮雕大小）

Intersity：浮雕深度（相当于PS中的浮雕深度）；

Blur：浮雕的柔和度（相当于PS中的浮雕软化）

Shap：元素表面类型；

下面黑框里是调整后的CSS样式表，可直接用于前端；点击绿色额的“copy”可以复制CSS样式。

左侧4个角落各有1个扇形，表示光源的方向。

新拟态的应用

离开应用说风格，那都是耍流氓。UI界面的风格总要运用到项目中才有实际意义。接下来我们就来看看这种风格在实际应用中到底行不行得通。

1、新拟态风格的优点

新拟态风格在刚出现时确实给人耳目一新的感觉，用在界面上的确很有很强新鲜感，可以快速抓住浏览者的眼球。

      这种风格界面用色比较克制，整体饱和度较低，只有在极少数需要突出的重点上进行高饱和度的点缀，与以往的界面设计相差很大，所以会给人强烈的新鲜感。

2、新拟态风格的缺点

A、画面缺少层次

虽然在用色及表现上很有新鲜感，看上去也满满的未来感、科技感，但正是这种极为克制的用色，整体比较统一，甚至说是单一，这样反而让画面缺少层次感。

 

B、对背景要求高

元素和背景的颜色一致，元素依靠浮雕效果来与背景区分。而且背景和元素的明度不能个太高，否则高光无法展现。

 

C、浮雕太多

绝大部分元素都适用了浮雕，而且是突出的形式，。这就会让用户造成“界面中都是按钮”的错觉，而且按的正常状态和点击状态的对比也没有拉开，更会大大降低用户对真正按钮的点击欲望。

D、动效难以开展

我们在扁平风的状态下可以将动效做的轻快、流畅，甚至可以做出顺畅的“融合与分离”的视觉效果。新拟态风格因为元素和背景在实际的视觉呈现上并没有分开，所以像是被固定在了背景上。做动效会给人“蠕动”（甚至有人会想起科幻片中虫子在皮肤下蠕动……）的感觉。

E、工作量增加

      我们就以最最常见的“常规”和“选中”两个状态来讲，一个按钮在扁平化中只需要开发人员写个按钮样式，两个状态用不同的色值表现即可，如：

若换成新拟态风格，就复杂很多。如：

      也许也可以通过纯用CSS来写，但是代码增多直接导致开发进度变慢。如果使用切图，那么图片增多，1个按钮需要2张图片，导致APP资源库中的图片大量增加。不管是用CSS来写还是使用切图，都将提高开发成本，更不利于后期维护。

总结

      至少目前来看，新拟物并不适合用于实际项目中，至少不适合用于功能复杂层级较深的产品中。如果产品的功能比较少，层级较浅，页面简洁的工具类产品可以适当尝试下新拟态风格。有道云笔记就已经开始尝试应用这种风格：

      新风格的出现也为设计师带来了新的研究方向和新的设计灵感，我们也不能说新拟态不好，也就是以现阶段的技术可能并不适合去做开发。我们要在开发效率和视觉呈现中找到一个平衡点。也许以后技术发展了就可以像扁平风一样普及了呢。想想以前拟物风格也曾风靡一时，设计师都在做各种写实的效果。

      以上，我是对新拟态风格的理解和对前人经验的总结。如果小伙伴们有不同的看法，欢迎一起来讨论~~