新拟态设计未来的设计趋势？

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

二、什么是新拟态

首先理解“拟态化”，它用于描述界面对象，反响了现实天下中的工具对应到数字界面中的显示办法。
此设计观点利用了用户对实际工具现有认知和思维，该设计风格让用户无需花费额外韶光学习新的界面，当UI元素与显示天下类似物结合时，可以减轻用户的认知包袱。

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

三、新拟态特点

图片源自Dribble @Alexander Plyuto

新拟态风格特色：

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

②克制的色彩利用；

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

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

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

常见样式较大略，有时也会采取渐变手腕表现元件质感。
此处笔者通过PPT制作了大略的效果图。

常见样式：

添加渐变的样式：

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

四、新拟态的局限性

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

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

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

《天下当代设计史》引用

无障碍设计始于1974年，是联合国组织提出的设计新主见，强调的是在科学技能高度发展的社会，统统有关人类衣食住行的公共空间环境以及各种建筑举动步伐、设备的方案设计，都必须充分考虑具有不同程度身体上毛病的人和正常活动能力衰退者 （如老人）群众的利用需求。
设计能知足这些人需求的做事装置，营造一个充满爱与关怀，切实保障人类安全、方便、舒适的当代生活环境。
设计上考虑残障群体的需求，让他们更平等地利用互联网，哀求设计师的同理心和任务感。
无障碍设计原则：可感知、可操作、可理解、全面、可靠。

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

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

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

当页面短缺信息层级关系时，会影响到用户的决策过程，如果同一个页面涌现多个可操作性内容，但信息层级关系模糊，随意马虎利用户在当前页面/流程中的某一步产生困惑，终极可能导致缺点操作；

④新拟态具有一定的隐喻性。
即 它会勾引用户点击或者会让人认为这是一个功能按钮。

例如 一款产品在界面中仅有一个新拟态卡片展现，那么用户随意马虎被勾引对卡片进行点击这一交互行为。
但大概该卡片仅仅用于展示卡片内容，此时新拟态卡片的设计问题就显露出来了。
工具推举:https://neumorphism.io/#55b9f3

五、新拟态的适用性

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

新拟态风格设计须要把稳：繁芜页面或者繁芜控件中，要谨慎利用新拟态风格；稠浊利用，考虑风格兼容问题；新拟态的隐喻性须要考量，避免用户误解；考虑该风格对残障人士的影响以及在分外场景下的实用性。

海内干系例子：有道云条记，详细的体验报告在笔者的下一篇文章。

本文由 @产品秘阁 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议。