该篇转自我的公众号【产品秘阁】：新拟态设计

一、起源
 

在2019年11月5日，Dribbble一位设计师Alexander Plyuto发布的作品。
 

在该风格之前，产品普遍是扁平化风格，扁平化设计意味着将界面中所有元素做扁平处理，其特征是：去高光、去渐变、去阴影。

二、什么是新拟态

首先了解“拟态化”，它用于描述界面对象，反映了现实世界中的对象 对应到数字界面中的显示方式。此设计概念利用了用户对实际对象现有认知和思维，该设计风格让用户无需花费额外时间学习新的界面，当UI元素与显示世界类似物结合时，可以减轻用户的认知负担。

新拟态风格与扁平化风格完全相反，可以理解成“加高光、加渐变、加阴影”，其原理是为界面的UI元素赋予真实感。原生名词有几种叫法：Neumorphism/soft UI，翻译过来就是“新拟态”/软UI，是一种具有流线感的设计风格，介于扁平与投影之间。

三、新拟态特点

| 图片源自Dribble @Alexander Plyuto

新拟态风格特征：

①投影和高光的明暗形成了立体的“浮雕”效果，元素呈现有厚度感但又柔和的边缘，无纹理的拟物风。

②克制的色彩使用；

③整个界面中的元素只有一个光源照射。作者预设了一个光源，靠近光源的部分更亮，反之更暗。图片中作品的光源固定位置是从左上角向右下照射，即受光面在左上，故元素的左上 和 右下投影呈对比；

④元件与背景采用相近色。无论界面是浅色模式还是暗色模式，各个模式下的颜色对比度很低，整体视觉上非常柔和、甚至是模糊，易引起视觉疲劳；

⑤视觉上按钮状态采用“选中状态下按钮是凹进去的，未选中时是凸出来的”方式。对于选中状态，图片中作品的元素做了内阴影的处理方式，同时，选中状态的元素统一采用与未选中状态相反的光源。

常见样式较简单，有时也会采用渐变手法表现元件质感。此处笔者通过PPT制作了简单的效果图。常见样式：

添加渐变的样式：

Photoshop也可以实现该效果，双击图层，对“投影”进行设置：

转自公众号【产品秘阁】：新拟态设计

四、新拟态的局限性

新拟态意味着界面与实际事物的类似，但需要谨慎运用。新拟态风格的柔和特征也有很明显的缺点，即弱清晰度。故在设计时为了让层级在视觉上更清晰，会增加一些渐变描边等处理方式。

以此我们延伸一下该风格的局限性：

①弱清晰度；新拟态对视力低下、失明、色盲的用户来说，可辨识性较差。而产品设计需要尊重无障碍设计¹。

②尺度把握相比扁平风格更难。

例如 元件投影的轻重把控，太轻的投影不利于用户快速找到目标、太重的投影则容易让界面显得很脏；如果一定要用新拟态设计产品，则需要将元素通过增加渐变描边的方式提高识别度，便于信息传递；

③不够明了的视觉层级关系。新拟态风格的元素具有漂浮、脱颖而出的特点，元素会在一个界面空间竞争，对于用户而言很难理解界面中的视觉层次以及信息层级关系，造成页面混乱。

当页面缺少信息层级关系时，会影响到用户的决策过程，如果同一个页面出现多个可操作性内容，但信息层级关系模糊，容易使用户在当前页面/流程中的某一步产生困惑，最终可能导致错误操作；

④新拟态具有一定的隐喻性。即 它会引导用户点击或者会让人认为这是一个功能按钮。例如 一款产品在界面中仅有一个新拟态卡片展现，那么用户容易被引导对卡片进行点击这一交互行为。但也许该卡片仅仅用于展示卡片内容，此时新拟态卡片的设计问题就显露出来了。

工具推荐:https://neumorphism.io/#55b9f3

五、新拟态的适用性

前面讲述了新拟态风格的局限性，接下来了解下该风格的适用性。没错，虽然它的缺陷多且明显，但也有适用的产品。例如 目前市面上该风格多用于工具类产品（工具型产品具有“场景固定、需求明确、产品黏性相对较低”的特点，例如 笔记类、天气类、时钟类、遥控类），工具类产品相对固定，也无需过多的运营内容，更容易把控，因此视觉风格上的发挥空间更大；

新拟态风格设计需要注意：复杂页面或者复杂控件中，要谨慎使用新拟态风格；混合使用，考虑风格兼容问题；新拟态的隐喻性需要考量，避免用户误解；考虑该风格对残障人士的影响以及在特殊场景下的实用性。

转自公众号【产品秘阁】：新拟态设计