新拟态时代开端？_ui设计教程

1、前言
有道云笔记在11月24日也就是一周前进行了云笔记的版本升级，然而一周不到的时间内，云笔记又进行了界面优化紧急改版上线，恰好CC都在使用中，经历了两版的改版体验，想和大家一起来拆解一下最新的界面设计，我们一起来预测一下网易 是否会引领大众跳脱出扁平化时代。

2、网易首发-新拟态的流行
平时有道云笔记也有过升级但是这两次非常的 与众不同，到底什么让CC这么兴奋呢，我们来看一下这两次改版界面就明白了：
很多小伙伴已经发现啦，这次有道云笔记采用了我们之前设计圈里非常火热的 “新拟态”风格。
对于新拟态设计风格的流行我们在年初就已经初见端倪，但是当时只局限于概念图，设计来源于乌克兰设计师AlexanderPlyuto在Ins上发布的一张设计作品，引起了全球非常大的轰动，迅速的火爆了全网。

相信我们国内的小伙伴也被这阵风刮的晕头转向，但很快这种设计风格就因对比度低、缺少层次、克制的色彩使用、很难适应多变的潮流，渐渐的销声匿迹起来。
虽然包括三星在内很多品牌也使用这种风格在制作自己的宣传视频，但是在移动设备和客户端的界面上缺乏大厂的先驱者引领，大家都不敢贸然的尝试，甚至有些设计论坛开始提出  “新拟态设计风格已经过时了” 的看法。
这次有道云笔记的大胆尝试，算是给“新拟态”设计风格制造了一个开端，毕竟有道云笔记作为国内大佬级公司网易旗下的产品，从2011年开始到现在积累了超过5000万的高粘度用户，是国内用户量最大的云笔记产品。可谓是让“新拟态”风格出尽了风头。

3、新拟态风格和扁平化的结合
新拟态英文名Neumorphism，也被很多设计师称为SoftUI，是一种具有优美的流线感，介于扁平和投影之间，类似于浮雕效果的设计风格。
不知道大家有没有在这种感觉，虽然这些设计一眼看上去都很特别，但是看久了总觉得不够清爽，有一种喝了糖水回味的时候总有点骺得慌的感觉。
有道云笔记作为一款大厂出品的新拟态设计产品，对新拟态的优缺点做出了权衡，既然成为一款上线产品也意味着进行了全面的考虑。CC带大家一起来拆解一下，它到底是怎样设计新拟态图标和控件的。
我们先观察一下新版在哪些地方使用了“新拟物”，哪些地方没有。
-头部操作栏
-搜索功能
-新建按钮和主要功能
-语音记录的Button及头部语音识别切换button
沿用扁平化的部分：
-卡片式文章列表
-底部导航栏
-个人中心的功能小图标
-更多操作的辅助功能点
-语音记录小气泡
根据我们的归类整理，可以发现，在 主要的操作按钮部分，均采用了“拟物化的”风格Button，但是在大面积的 展示区域和非功能性按钮依然沿用了简洁的扁平化设计。 在保证“新拟物”质感的同时，保证主体内容的可阅读性，和整体页面的清爽感。
这可以说是一种保守做法，综合拟态化，不至于让页面显得过分繁琐。居然也相得益彰，这点也回应了此前大家对新拟态场景化运用的质疑。所以我们在新拟物的设计中注意要有松有驰，综合的看待页面中可能出现的设计元素。

4、“新拟态”的实际运用？
在实际运用中我们应该怎样设计参数呢？首先拆解一下“有道云笔记”的按钮效果。在UI设计中，按钮Button会分 “默认状态”和 “点击状态”。
默认状态十分像一个凸起地面的圆柱体，他是有厚度，有柔和的边缘界定，但是又没有完全脱离平面的设计，有一种粘连的流线感，有点像我们的硅胶键盘膜的质感，看起来顺滑却又有形状。左上角有亮色投影，右下角有暗色投影，明暗形成了立体的浮雕效果。
这里我们就要提到新拟态图标的特点： 界面所有的按钮有且只有一个光源照射。所以我们首先需要设定一个预设光源，自左上向右下进行照射，这就能很好的解释投影的亮暗分布了。
要注意 投影的柔和过度，进行柔和度的调节会使边缘看起来更加自然。
其次我们还注意到对于有道云笔记的一个非常重要的功能“搜索”功能，区分于按钮的凸起，在能够进行文字输入的搜索区域采用的是内凹陷的视觉效果，仿佛是一个可以放置文字的沟渠， 暗示用户这里是可以进行输入的区域而不仅仅是一个button而已。
“新建功能按钮”同样是自左上至右下的统一光源，所以新建的button其实也是 新拟态的延伸，虽然不同于之前所说的不脱离平面本身的新拟态风格，而是作为投影和新拟态的结合产物，依旧是打破了扁平化的设计局限，做出了独具风格的新拟物按钮。
可以见得，2021年究竟是否是拟物化设计的回归，我们应该也有些头绪了。

5、新拟态组件的延伸
那既然网易已经将新拟物推上舞台，很可能这就会成为以后拟物化卷土重来成为全新的新拟物的标志，可以思考一下， 我们在其他的地方还可以用到新拟态的设计吗？CC总结了目前适用新拟物设计风格的一些产品：
1.物联网产品
2.工具类产品
3.基础类的功能性产品
我们可以思考一下，既然app有了这样的先例， 在web端我们能做到什么呢？大家可以发挥想象力了，CC搜罗了一些web端的新拟态设计，或许对大家发散思维和学习新拟态的设计方法可以有所帮助，还 整理了一些新拟态UIKit源文件在文末可以领取～
至于开始提到的紧急改版，CC其实也有关注，在开始第一版推出后的反响比较大，加上文字标题像苹果手机字体一样越来越大号，可能大家一时半会也比较难以接受突然的巨大风格转换