新拟物化——Neumorphism ，这么说可能不容易理解，但如果说「新拟物风格」，想必 UI 界的设计师们就知道这股「风头」，在2020年刮的多么凶猛了。

乌克兰设计师亚历山大·普卢托 （Alexander Plyuto） 在 Dribble 平台发布了一张 UI 作品《Skeuomorph Mobile Banking》，由于该作品使用了拟物化的设计风格，令人耳目一新，导致了作品的热度持续飙升，并登上了平台 Popular 榜首。Dribble 的评论区直接炸开了锅，大家纷纷讨论。

△ 普卢托的《Skeuomorph Mobile Banking》，获得了3000多次喜欢

随后一位评论者杰森·凯利（Jason Kelley）在评论中将 New Skeuomorphism 「新拟物化」组合得到的 Neuomorphism 称为「新拟物」 ，并决定去掉「 o 」，于是新设计词汇「 Neumorphism 」便产生了。之后大家便用此做 Tag ，为自己的新拟物化设计作品打标签上传。

此风格的出现也给一直流行的扁平化设计添加了新的展现形式。今年2月初，三星召开 Galaxy Unpacked 活动，为宣传新设备而发出的邀请函，便应用了新拟物化。

△ 凸出的部分，用来比喻新机型的卖点

什么是新拟物风格？

想要了解新拟物的由来，就必须知道拟物的概念。拟物又被称为拟物化，或是现实主义（Realism），概括的说其主要目标是使用户界面更有代入感，降低人们使用的学习成本，产生熟悉亲和的情感联系。

A skeuomorph, or skeuomorphism is a design element of a product that imitates design elements functionally necessary in the original product design, but which have become ornamental in the new design. Skeuomorphs may be deliberately employed to make the new look comfortablyold and familiar.

via：en.wikipedia.org/wiki/Skeuomorph维基百科上关于拟物化的释义

Apple 苹果公司最早提出了拟物化的设计概念，通过模拟现实物体的纹理、材质来进行界面设计，当时的 UI 设计师们都为拟物化设计「痴狂」。苹果创始人乔布斯也非常推崇拟物化，他认为：「通过拟物化，用这种更加自然的认知体验方式，可以减少用户对电脑操作产生的恐惧感」。不妨来回忆下曾经拟物化的 IOS 界面：

△ IOS 5系统中的相机展开状态（拟物化的镜头）

△ 拟物化的精美 ICON

△ IOS 6系统中，被精细刻画的录音机（底部指针也很惟妙惟肖）

而新拟物则是拟物的变体，在拟物的基础上改变了图形的样式，让设计元素看起来更有真实感，不再是精细的模拟，更像是从界面中「生长」出来。设计师 Michal Malewicz 以卡片的形式，将新拟物和质感设计（Material Design）对比，阐述了二者在实现时的差别。

新拟物卡片给人呈现的是一种无缝隙的「闭合」感，由界面中凸起；而质感设计卡片，则是漂浮状，阴影向四周发散，没有边界限制；二者的光影效果也非常明显，新拟物偏柔和，质感设计则相反，非常凸显物体本体。

Michal Malewicz 还标注了新拟物卡片的背景、阴影和高光的色值，整体色调比较接近。

拟物化风格的结构由背景色+高光色+阴影组成，掌握了基本规律，就可以通过改变按钮、卡片的参数进行调整变换。

△ 形状、阴影参数的不同，实际效果也有区别

新拟物风格在UI层面的设计表现及趋势？

新拟物也经常被拿来与扁平化比较，因为拟物和扁平化是两个相对的概念。其实在苹果创造的设计系统的早期界面其实是非常拟物风的，但系统从 IOS 7开始，才转向扁平的设计风格。

随着 AR、VR 技术的进步，其实对于真实物理环境，或者说对显示效率的提升之后，我们对接近物理环境的设计更热衷了。比较有代表性的就是 Google 推出的 Material Design System，它基于人们去模拟真实的物理世界的样子，进而在数字世界里展现我们对于真实世界的一个反馈后，这样的设计流程和逻辑，也让我们的设计更真实，更具有感染力。当然也不止 Google 一家发布了这样偏拟物化的设计风格。

从美学角度来看，其实新拟物化抛弃了之前很多拟物化里不必要的冗余，比如一些阴影、细节的繁琐设计，更偏近现在先进科技发展的设计风格。比如 Windows 推出的 Fluent Design System ，正迎合了未来的 AR、VR 技术广泛普及后的设计环境，希望打造一个先趋的设计系统。

在 Fluent Design System 提到的特点有：Lignt、Depth、Motion、Material、Scale。

1. Lignt

光照，它指的是点击或 Hover 的动作上面加入光照的效果，或是像柔和的光源洒落在空间中，可以去反应物体本身的反光质感，它和 Material Design 强调的光影的扩散的光影效果是不同的概念。

2. Depth

深度，其实它的概念从 Material Design 开始就已经被强调了，但是 Fluent Design System 希望是用更多的方式去呈现，比如井深的模糊效果，视差滚动的动态效果，物件彼此的大小与位置等等。

3. Motion

动效，其实它想强调的动态效果更接近真实的世界，更强调细腻的变化，比如李安的电影「比利·林恩的中场战事」，这个电影拍摄的帧数与以往传统电影不一样，看起来的感觉会更加的流畅自然，你体验过之后会很难回去之后那种电影呈现效果了。而 Windows 强调的 Motion 也是一样的，比起这种单调的动作，它也会去强调每个设计对象彼此之间的动态效果的时间差，看起来会更加的流畅自然。而且与真实空间中前景后景的物理概念一样，不同的时间差会更容易凸显出想要凸显的主题效果，也会更加的聚焦。

4. Material

材质，其实在 Windows 提出的 Fluent Design System 里面，它会出现大量的模糊，透明的背景。也就是模拟毛玻璃的材质感。通常也会代入一些微光源的效果。除了能够吸睛，吸引你的视觉之外呢，其实在 AR、VR 的界面上面感知空间中的物件是很重要的，所以模糊的背景的利用可以在不影响观看内容情况下，还能起到背景暗示的作用。其实毛玻璃效果在 Windows 系统中已经被运用到了，但是由于当时的效能以及干扰视线的问题仅仅运用在了一些小区域，而这次 Fluent Design System 的特效就成为了最强烈的视觉焦点，其实同样的 iOS 和 Mac iOS 系统里面在最近的更新也大量使用了模糊效果。

6. Scale

缩放，在视觉上眼前的物体大，后面的物体小，所以缩放也是来营造空间感、纵深感，尺度感的这样一个设计特性。