12月3日，这周又过了一半啦～来研究点新趋势吧，我是CC。
1.前言
有道云笔记在11月24日也就是一周前进行了云笔记的版本升级，然而一周不到的时间内，云笔记又进行了界面优化紧急改版上线，恰好CC都在使用中，经历了两版的改版体验，想和大家一起来拆解一下最新的界面设计，我们一起来预测一下网易 是否会引领大众跳脱出扁平化时代。
2.网易首发-新拟态的流行
平时有道云笔记也有过升级但是这两次非常的 与众不同，到底什么让CC这么兴奋呢，我们来看一下这两次改版界面就明白了：
很多小伙伴已经发现啦，这次有道云笔记采用了我们之前设计圈里非常火热的“新拟态”风格。
对于新拟态设计风格的流行我们在年初就已经初见端倪，但是当时只局限于概念图，设计来源于乌克兰设计师AlexanderPlyuto在Ins上发布的一张设计作品，引起了全球非常大的轰动，迅速的火爆了全网。
| 图片源自Dribble @Alexander Plyuto
相信我们国内的小伙伴也被这阵风刮的晕头转向，但很快这种设计风格就因对比度低、缺少层次、克制的色彩使用、很难适应多变的潮流，渐渐的销声匿迹起来。
虽然包括三星在内很多品牌也使用这种风格在制作自己的宣传视频，但是在移动设备和客户端的界面上缺乏大厂的先驱者引领，大家都不敢贸然的尝试，甚至有些设计论坛开始提出 “新拟态设计风格已经过时了” 的看法。
这次有道云笔记的大胆尝试，算是给“新拟态”设计风格制造了一个开端，毕竟有道云笔记作为国内大佬级公司网易旗下的产品，从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其实也有关注，在开始第一版推出后的反响比较大，加上文字标题像苹果手机字体一样越来越大号，可能大家一时半会也比较难以接受突然的巨大风格转换。
所以五天后的紧急发版，针对网络上用户提出的 “ 文字过大，标题过大，有衬线体难以接受”几个方面做出了修改。看来新拟态风格还需要经过时间的磨合，才能够完全的让用户适应，也能看出我们做设计一定要 及时的吸取用户的反馈进行页面的优化，毕竟一个新风格的推出是会遇到重重磨难的，网易大厂也给我们做出了很好的示范。
| 福利源文件在此～ 源文件放在了我的公众号「达芬奇的火柴盒」，后台回复 “新拟态”可以领取啦。其实不想做这样的硬广，但是，新鲜的新人一枚，支持我一下吧～CC敬礼。
作品图片版权归作者本人所有，此处仅供学习使用。
本文为原创文章，版权归本人所有，未经允许不得转载。
认真的写了好久～谢谢你的观看～
我是CC，下次见啦～
