浅谈新拟态风格

新拟态是什么

在解释新拟态之前，我们先简要说明一下UI设计风格的发展历史。

起初是2007年时iphone界面的拟物风格。当中书架的木纹质感，设置图标的精致小齿轮等体现了拟物风的特点：真实、复杂。它对真实世界中的物体进行写实，将光影、透视、结构、材质、肌理的细节做得很到位。

之后是从2014年至今流行的扁平风格。它的特点是：简约，平面。扁平风格舍弃了光影、材质等修饰，在保持辨识度的同时，尽可能用简单的线条去表现。并且设计图案都不是立体的。

最近出现了轻拟物的风格。和起初的拟物相比，它在轮廓、肌理上做了简化，保留了光影和透视关系，呈现出更概念化、易于辨识的图形。它要求既不能太抽象，降低了辨识度，又不能有过多的细节，需要在两者间达到恰到好处的平衡。

新拟态的起源是在2019年11月5日，一位乌克兰的设计师Alexander Plyuto在Dribbble上发布了一张设计作品。这张作品的风格被设计师们称为“Neumorphism”，是“New +Skeuomorphism”的组合词，被译为”新拟态"。

（图源Dribbble上Alexander Plyuto的作品）

作品自出现开始便获得了大量关注，一路升至Dribbble2019年pop排行第一热门的作品。在之后的一段时间，Dribbble上持续有设计师发布新拟态风格的界面。在今年二月份的三星发布会上也用新拟态来展示新机型的卖点。

（图源网络 ）

新拟态的特点

1.在新拟态风格的页面中，按钮和卡片在表面被挤压凸起，用按钮周围左上角的亮部与右下角的暗部表现出立体感。一个页面设置一个固定光源，从左上向右下照射。凸起部分与页面本身是没有缝隙的。凸起高度通过阴影的扩散大小表现，且阴影没有明显边界。

（图源网络 ）

2.页面色彩相对单一，页面内元素与背景的对比很弱，整体感觉很柔和。凸起处通过明度的变化做出亮部暗部。按钮的选中与未选中状态通过凸起与凹陷来区分，凸起是未选中，凹陷是选中。

3.新拟态风格类似于一种没有自身色彩的的轻拟物风。按钮和卡片都是背景的颜色，其中的图标造型简约，没有琐碎的细节。

4.卡片边缘可以有选择性的进行装饰，比如在周围做一个圆润边框或做出较薄的上下叠加的效果。

5.按钮或卡片不宜过大，会导致背景与元素区分不清。

6.一处凸起按钮由四个部分组成：亮部浅色、暗部深色、凸起部分本身颜色、背景色。

新拟态与拟物风以及扁平风的对比

1.与拟物风相比较起来，新拟态没有复杂的细节，删减了光影、肌理、透视等，呈现出无纹理的简约平面风格。

2.与扁平风比较起来，新拟态风格的页面中，按钮是靠挤压凸起一个厚度，不会脱离表面。扁平风格中的按钮在高度上变化时，通常是使用一个漂浮在背景之上、能投射阴影的平面。所以制作时没有亮部，并且按钮与背景颜色可以不一样或者对比较大。

新拟态为什么火起来

1.视觉上很新颖，打破了以前页面只能是一个单纯平面的印象，给出了挤压页面的可能性。

2.新拟态风格的页面因为对比很低，所以给人的感觉是整洁干净的，非常柔和。它和现在的大部分页面带给用户的感受有所不同，对比之下很独特。

3.长期的扁平化风格带给大众审美疲劳，加上现在C4D的轻质感在不同领域不同方向上使用，使新拟态这种带有哑光与立体感觉的形式容易被接受。我们还注意到，iOS13更新之后部分抛弃了单纯的扁平，加入了3D的感觉。比如截图编辑功能的画笔，就由原先的扁平变为无纹理的拟物风格。

新拟态的一些缺点

1.它对于视力受损或者屏幕质量不高的使用者来说很不友好。由于页面对背景的依赖度很高，导致整个页面的对比度太低。按钮的选择和未选择的状态要通过投影的位置来区分，但是亮部和暗部的对比不足够明显，这样会导致页面整体模糊不清晰，让区分比较困难并且需要一定的时间。

（图源网络 ）

2.目前的页面中，在z轴上升高的按钮表示强调。但是新拟态中页面内容密集，所有元素的z轴都升高了，元素之间就会出现相互竞争的情况，导致混乱，不利于信息传递。由于对色相统一有要求，层级之间只能靠阴影的大小和深浅表现出来的不同高度，以及元素本身的大小的变化来产生一些区别。但是这两点的变化并不能构成清晰的层级，而高对比度会让界面失去柔和感。页面层级不清晰会导致屏幕缺少适当的焦点，于是影响用户的决策，让用户会感到混乱,并且加长他们的思考过程。

3.新拟态风格的页面由于对比度低，所以对放映设备有要求。如果是用幻灯片投影，但是投影仪的质量不高的话，会比较难体现细节，页面看起来模糊，影响观者体验。

关于新拟态的一些新的尝试

1.如果在整个产品中使用会因为元素过多而混乱，可以尝试在扁平风格的页面中局部使用新拟态风格的按钮，将不同风格的尝试混合。或者在平面设计、PPT等当中使用，在视觉上也比较新颖。

2.现在许多产品有黑暗模式，一部分原因是可以省电，一部分原因是保护眼睛。如果产品的目的是保护眼睛，那么柔和的新拟态界面就比较适合。

3.在表现形式上做出一些新的尝试。目前按钮的选中与未选中的状态区分是靠阴影的位置，比较难辨别。那么可以尝试通过一些新的形式来加强对比，比如未选中时是凸起的线性图标，选中后变为凹陷的面型图标；选中和未选中的状态通过正负形来体现。

（图源网络 ）

总结

新拟态作为一个比较新颖的形式，刚出现时迅速走红。但是后期也渐渐发现了它的一些比较难处理的缺点，导致热潮退却也比较快，目前在手机中真正使用这种形式的比较少见，不太适合大范围推广。但是一种设计能火起来也一定是有它的可取之处，感谢新拟态带来的一次尝试与创新。