新拟态它有什么特点

在说新拟态有什么特点之前，我们先看几个比较典型代表的视觉作品，以便于更好的了解这一风格

                      

我们看下上面的一些视觉作品，第一眼看到比较明显的是，在一些可点击区域做了一些“浮雕”效果，点击状态和非点击状态，在视觉处理上是未选中状态是凸出来的，已经选中状态是凹进去的，但显然凹凸之间是有很多质感细节处理的，等下再实操组件部分会讲解到。

1.通过观察，总结新拟态设计风格的处理方式大概有一下几点

1. 左上角亮色投影，右下角深色投影（有且只有一个光源照射）

2. 元素与背景对比度比较弱

3. 常常用于按钮组件和卡片

4. 按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态

   
   

2.特点详解

1.有且只有一个光源照射

                       

那作者在追波上按钮也好还是卡片处理也好，仔细观察不难发现，它定了一个光源，是从左上向右下照射的，所以，越靠近光源的部分，越亮，远离光源的越暗（素描的绘画时常常用到）。因为新拟态的光源是唯一的，是从左上角照射的，所以就不难解释，或者分析得到，左上角亮色投影，右下角深色投影。这一基础规律，不单单适用于新拟态风格的按钮，它还适用于所有新拟态风格表现手法的视觉组件。

可以看到下图，卡片、转盘、按钮，他们的受光面都是在左上角。

                       

2.组件与背景对比度比较弱

这里就要讲一下，另一个叫法了soft ui，即软ui。软，有柔和的意思。为什么这么命名呢？其实就是由于新拟态的组件与背景的对比度很弱，我把收集到的几千张素材中，挑选一部分进行进行色值对比，可以发现无论是亮色模式下和暗色模式下对比度都是很低的。

按钮、投影、背景之间的关系都处理的非常柔和，这是新拟态的特征之一

                       素材库

3.常常用于卡片和按钮

基于这一点，其实我们只要建立好卡片的和按钮的样式组件，新拟态在设计层的表现就可以高效率的实现，可能稍微麻烦的就是，在一些质感细节上做一些优化，前面也说到，新拟态是一种无纹理的拟物风。所以想要表现卡片/按钮的质感，在光影、厚度细节上，需要做更多的细节处理。

比如卡片的厚度感细节的处理，为了体现银行卡的厚度感，在卡片增加了一个对角渐变描边，从渐变色块可以看到，渐变的规律，也是遵循“有且有个光源”定义的，靠近光源的是纯白，近暗色投影端是比投影更重的一点的描边色。

这样做的好处不单单是为了体现卡片的厚度，因为我们前面讲到，新拟态是软ui，是对比很弱的。风格柔和带来的另个一个不太好的就是，界面清晰度不够，很容易把视觉处理“糊掉”。所以，增加对角渐变描边在一定程度上也起到了，让界面的视觉层级更加清新的作用。在实操部分，将会一一拆解各种情况的一些处理方式。

                       

4.按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态

在新拟态中，视觉上凸出代表未选中，凹进去表示已选中状态。是大部分人的处理方式，在这一小节里，先讨论大部分的，在实操部分在列举其他的处理手法。

这里可以明显感受到，按钮状态的区别，凸出/悬浮的是没有选中状态，凹陷下去的是选中状态。

细节观察，新拟态风格，在按钮上面的元素是做了内阴影处理的，看起来有一点点雕刻的感觉，

在选中状态按钮的处理，首先是在光源的处理上是统一的，加上光影的处理，就很容易做出来凹进去的感觉，想要是凹槽的厚度感、质感看起来更加舒服，这里的处理方式和卡片的处理方式原理一样，添加渐变描边就可以解决。

                       

实操部分

整体会进行新拟态风格细节组件的拆解，会在亮色模式和暗色模式上做详细的讲解，除去前面讲到的卡片、按钮，还会继续剖析按钮上的元素，文本字体、带其他颜色样式的处理方法。                                                                                                                      

简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。

其实他也是算拟物风格的一种，只不过表现形式不一样，最早出现在追波上,后面陆续被收录在2020设计趋势预测里面，在2019年的年末慢慢被大家熟知，讨论，重视起来。暂且不论是不是未来的必然趋势之一，一个事物的兴起多少是有些道理，我们持辩证的眼光去看到，去学习、去了解便好。

 

整体上，新拟态风格偏向使用圆角矩形/圆形。

并且新拟态元素的色彩单一，且和背景接近。

 局部上，新拟态元素一边是白色高光，一边是暗色投影。

同时，你也会发现新拟态风格的局限，为了体现白色高光、暗色投影，新拟态风作品的颜色都很浅，配色上很难吸引人的眼球。

“新拟物”风格优势在于新鲜感，在扁平化占主导地位的今天，“新拟态”的设计风激发了设计师的创作灵感，为未来的设计趋势带来了更多新的不确定性。

01.工具类

工具类的APP内容相对固定，不需要时时更新，这样设计师在视觉风格方面的表达空间更大一些。在追波上，发现大部分的作品都是偏工具类的

02.简单的功能性页面

和工具类APP一样，这些类页面上运营性质的东西相对较少，内容的形式相对可控。

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

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

新拟态风格特征：

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

②克制的色彩使用；

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

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

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