新拟物化——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

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

新拟物风格在设计上的应用体验？

1. 界面设计上的特点

常应用于图标、卡片或按钮元素设计上，背景板多为干净的纯色；界面平滑，没有明显的颗粒感；

△ HYPE4《 Neumorphic Bank Redesign in Dark and Light mode 》

△ Filip Legierski 《 Banking App 》

按钮的外边框均设置了阴影、渐变效果，突出立体感；

△ Samson Vowles《 Neumorphic dark ui kit components 》

在视觉处理上，凸出的按钮为可点击的状态，凹进去则代表已选中。

△ Emy Lascan《 Freebie Neumorphic UX UI Elements 》

2. 被吐糟的缺点

层次结构弱

Whale Lab 观察发现，新拟物弱化颜色区分而强调近远景阴影布局，所以整体色彩都相近，除了在个别的位置加入其它颜色点缀，用户识别起来也会迷茫；而卡片、按钮都使用了阴影，高光效果，层次结构不明确，也很难带来流畅的体验；

△ 新拟物风格，Filip Legierski《 Neumorphism UI Elements 》

对比度和视觉限制

明显的对比是界面设计的重要原则。由于新拟物风格具有各种阴影色调和角度，可单击的内容与不可单击的内容区域在哪里不是很好区分。根据产品的功能和要求，每个应用神经同构的产品都可以具有自己的UI阶段规则；但是由于阴影，角度和浮动水平的不同，由于缺乏一致性，迷失方向的可操作项，「神经变形」会给用户带来混乱，最终为残疾用户造成使用障碍。

如同下面这个例子，按钮状态已点击和未点击的一个效果，由于受压状态的反差太小，则看起来的效果也没有什么不同。

增加开发难度

更为严重的是，不少设计者在使用 Neumorphism 进行界面开发过程中，也遭遇到了不少局限。要实现这个风格，主要有两个方式：

卡片、按钮切图，每个状态（Normal、Hover、Pressed）都要裁切，导致资源库图片量过载；

代码实现，这个风格的实现效果是对元素增加两个不同方向的投影，但需要开发对每个元素添加投影，样式代码增多，工作量浩大。

网站neumorphism.io，可以快速生成 Neumorphism UI 。设置按钮的参数值，就能看到多样的新拟物化效果，非常神奇！

新技术、事物、趋势的出现，起初都会给人们带来焦虑甚至是恐慌。不管是拟物还是扁平，Whale Lab 觉得若是绝对化的去推崇某一种，都是错误的，尽管苹果放弃了拟物进入扁平化，也不一定代表扁平就是最好，毕竟二者始终相辅相成。不敢否认，新拟物风格在今后是否变得「真香」，但对于设计师来说，从用户体验、产品出发的优秀设计，都值得被认可与尊敬。

文章来源：优设    作者：UX辞典

新拟物化设计只是一种风格吗？

最近正火的新拟物化风格（Neumorphism）在 2019 年底，设计师 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不仅被选为 2020 年界面趋势，又称为 soft UI。但这种风格在真实世界落地时，可视性上受到许多争议。

确实，新拟物化风格它算是一种风格，但又不是只有视觉上的风格这么简单，它延伸出来的议题，其实是扁平化跟拟物化之间的战争。

拟物化与扁平化的瑜亮情结

拟物化是 Apple 在早期设计中大量使用在界面上呈现对象属性、材质的方式。然而在 2013 年 ios7 发布时，Apple 开始为了画面简洁大量将界面元素扁平化，紧接着 Google 在 2015 年发布了 Material Design，宣示扁平化在 UI 设计中扮演着主导趋势的角色。2020 年真是百家争鸣的一年，首先是 BMW 发表的扁平化新 logo，接着是这一波新拟物化的反击。究竟代表新拟物化可能夺回界面风格主导权？或仅是 2020 年昙花一现的视觉风格呢？

扁平化VS 拟物化，我们可以思考的五件事

我认为新拟物化的概念其实是融合扁平化与拟物化的集大成，它建立在扁平化风格之上，又将组件带入了拟物化的元素，提高用户的判断力。不过在纠结于扁平化与拟物化哪个比较好时，有五个议题是可以让 UI、UX 设计师去思考的。

1. 多数年长者对于扁平化界面提供的视觉元素暗示无法理解。

大家身边一定都有那种已经把 Line 操作得滚瓜烂熟，但是每次要用 Line 加好友时，还是不知道怎么操作的长辈。最早期当人类还没进入屏幕时代前，我们所使用的界面大多是实体产品上的控制界面，而这些界面上的每个开关、按钮，都只有一个输入源，对应到一个功能（一对一），我们因此就这样与产品进行简单的交互动作。然而在屏幕上这个简单的交互模式被改变了，像是用键盘跟鼠标可以辅助我们，在系统中进行抽象与复杂的无限多任务（一对多）。

△ 你偏好用哪个微波炉加热咖啡呢？Image credit:Bence Mózer

让我们再来看看对长辈最重要的 Line 加好友功能，我们先不论这个功能在整个 APP 中被埋得多深，因为找到加好友的入口真的对长辈来说是看缘分～

在我引导长辈找出二维码画面的经验中，发现他们都是用死记的方式，把下一步要按哪个键、在画面的哪一个角落，记下来。但由于加好友功能并不是每天都会操作的，因此在学习上的效果，就像是高中时没有把课文理解、吸收就硬死背下来一样困难。

我们来看看「显示行动条码」在扫描二维码画面中，是否真的具有可以被点选的暗示。在扫描画面背景单纯的时候（如下图情况 1），「显示行动条码」的 button 底色是有透明度的黑、扁平化后没有阴影提供可以按的暗示，不过因为有大圆角的造型，勉强还是可以诱使人点点看；但一般情况下，扫面画面背景不会那么理想的无其他干扰（如下图情况2），button 原本的透明黑完全融入了后面的背景，这时候只剩下「显示行动条码」的文字，已经不具备可以被点选的提示。

△ 情况 2 中，显示行动条码的 button 看起来可以按吗？

扫描画面中的外框有一定的透明度，在可操作暗示（affordance）上已经不具有实体的特征，如果又放上有透明度的 button 在上面，让人充满不确定性，年长者无法将这样的情况与现实生活中的经验联想在一起。

2.以颜色做区别真的是最好的方法吗？

你知道同一个颜色，每个人看起来会不一样吗？而不同颜色在不同环境下，却又能看起来像同一个颜色吗？

不同意新拟物化设计的人中，有人主张运用颜色的引导用户操作界面的色彩元素不能从界面设计中抽离。但事实上，不同年龄、性别，视觉锥细胞中的活跃程度不一样。同一个颜色，不同人看，明度跟彩度会有差异。基于种种现实，由色彩的引导是好还是坏呢？

例子1：关于人类的视觉锥细胞

同一个颜色，不同人居然会看成不同颜色？

为什么阿嬷喜欢买大红大紫的衣服？这个偏好除了受到个人喜好影响外，也关系到阿嬷视觉锥细胞的活跃度。老年人在上了年纪后，部分视觉锥细胞开始退化，因此对于蓝色、绿色这类冷色系的颜色，老年人会开始接受不到这个区段的光带来的刺激。因为视觉锥细胞对冷色系的刺激降低，导致阿嬷在菜市场逛街时会被偏暖色系的物品吸引。所以会买热情系服饰不是阿嬷本人的意图，而是老化的锥细胞在作祟。

例子2：关于学习观察颜色这件事

不同颜色居然看成同一个颜色？

不同颜色却看起来很像，有可能是光线造成，也有可能是使用者必须学习去观察才知道的。日本的 JR 跟 Metro 系统，有着完整且细腻的视觉辨识系统。设计师理想中的情况是，我们将每条路线定义成不同颜色，可以让使用者更容易学习辨识路线。

但实地走访过东京的地下铁跟 JR，常常会发现跟错指示，才发现是潜意识辨认错文字或是颜色。我自己遇到过的经验是，在新宿站想要找都营大江户线时，因为在改札口看到了同样粉红色的标志，原本已经要哔卡进去，才发现那是京王新线的 IC 入口标志。

△ 新宿驶的改札口前，有两个同为粉红色的引导指标

所以说，高龄者或是天生视觉锥细胞有缺陷的人对于颜色无法清楚辨认外；大部分人可以借由学习来增强色彩辨识，除了可以对相似颜色进行更细节的判别外，也可以学着辨认不同光线（暖光、冷光）下造成的色彩差异。

但是，当我们在设计中，迫使用户学习、习惯我们制定颜色的意义。可能会在新手 onboarding 时造成适应上的负担，也有可能让他们在使用别的系统造成错乱。

3. 对于颜色被定义的意义各个文化、区域、种族都相同吗？

在不同文化之下，对于色彩的观察与运用也不一样，举个大家可能都有发现的例子，当你在不同城市旅游的时候，有没有发现不同城市的优先座颜色不一样？你能猜得出来，哪一个是台北捷运上优先座的颜色吗？

△ Image credit:wikipedia.org

当颜色在不同约定成俗下，有不一样的意义，又刚好缺乏文字或图像引导的时候，可能会让使用者解读成不同的意义。例如：红色具有热情、喜气、带来财运的意涵，但同时又具有危险的警示意义。

当设计师觉得红色可以引起使用者的注意，而把 button 设计为红色时，却可能让没看清楚文字的用户，认为按下这个 button 是危险的举动。

△ Image credit:photoAC

4. 光与影（明亮面跟阴暗面）给使用者的可操作暗示（affordance）一样吗？

新拟物化设计中假设了人在使用界面时，会运用与生俱来能判断光影效果的能力。这是真的吗？让我们来做个小实验：

为什么在台北车大厅席地而坐的人，会选择坐在黑色的棋盘格上呢？如果根据人类从大自然中所得到的可操作暗示来说，有阴影的地方可以提供人类休憩的功能，例如树阴下的阴影处。

△ Image credit:中央社、wikipedia.org

如果这样说得通的话，代表光亮的区域对人来说是可以行走、活动的地方；而阴影处则是休息与暂停处。

根据以上的推测，我们做个小实验，把车站中的 2 个不同区域的地面上分别涂上白色与黑色，来让受测者选出哪些区域可以暂停，哪些区域可以走动：

问题Ａ：假设你要在车站的大厅等朋友，你会选择站在哪里等他呢？

假设：受测者会选 2，因黑色区域（影子）让人觉得可以暂停、休憩。

结果：符合假设

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

问题Ｂ：哪一边的楼梯是往上的方向呢？

假设：大家会选 1，因为黑色区域（影子）让人觉得可以踩上去。

结果：符合假设

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由实验Ａ、Ｂ可得证，虽然实验结果符合先前假设，大多数的受测者可从阴影判断要走哪条路，但还是有不少（30%以上）的受测者不认同。所以在用使用光亮阴影的设计暗示时，还是会遇到使用者感知的不同的问题。

5. 深度认知不同是导致判断物体距离的能力受影响，也就是所谓的视差。

新拟物化设计中，将界面组件以类 3D 的方式呈现，使用户在操作界面时必须去感知界面组件的远近以判断重要性，而在深度认知上有障碍的用户此时就会受到挑战。用户可能会遇到，不知道哪个组件才是浮在最上面、最重要的；若界面中的组件有三种以上的阴影深浅，会让用户在判断时要更花脑力判定物件在立体空间中的深浅。

总结

新拟物化风格中的光影表现提供了使用者人类最原始的操作意图：可操作暗示，是一个好的出发点，然而必须针对 APP 性质的不同而有所改良。在设计较走生活风格理念，而操作界面不复杂的 APP 时，非常适合用新拟物化风格来诠释：例如电子书服务、音乐软件；但在设计功能导向，且有大量信息化图表的界面，例如：移动网银，还是需要以扁平化的界面为主要信息架构，新拟物风格可能会是极少量界面元素中，拿来呈现生活中真实物的质感（例如：用户的信用卡）、或是作为亮点（例如：优惠卡片）的呈现方式，此类型 APP 中最重要的卡片与图表对于此种风格，一定要谨慎使用，必定三思三思再三思。

文章来源：优设    作者：Muse Chang