研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解

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

1、前言

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

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图

| 图片源自有道云笔记Plyuto

2、网易首发-新拟态的流行

平时有道云笔记也有过升级但是这两次非常的与众不同,到底什么让CC这么兴奋呢,我们来看一下这两次改版界面就明白了:

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图1

很多小伙伴已经发现啦,这次有道云笔记采用了我们之前设计圈里非常火热的“新拟态”风格。

对于新拟态设计风格的流行我们在年初就已经初见端倪,但是当时只局限于概念图,设计来源于乌克兰设计师AlexanderPlyuto在Ins上发布的一张设计作品,引起了全球非常大的轰动,迅速的火爆了全网。

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图2

| 图片源自Dribble @Alexander Plyuto

相信我们国内的小伙伴也被这阵风刮的晕头转向,但很快这种设计风格就因对比度低、缺少层次、克制的色彩使用、很难适应多变的潮流,渐渐的销声匿迹起来。

虽然包括三星在内很多品牌也使用这种风格在制作自己的宣传视频,但是在移动设备和客户端的界面上缺乏大厂的先驱者引领,大家都不敢贸然的尝试,甚至有些设计论坛开始提出“新拟态设计风格已经过时了”的看法。

这次有道云笔记的大胆尝试,算是给“新拟态”设计风格制造了一个开端,毕竟有道云笔记作为国内大佬级公司网易旗下的产品,从2011年开始到现在积累了超过5000万的高粘度用户,是国内用户量最大的云笔记产品。可谓是让“新拟态”风格出尽了风头。

3、新拟态风格和扁平化的结合

新拟态英文名Neumorphism,也被很多设计师称为SoftUI,是一种具有优美的流线感,介于扁平和投影之间,类似于浮雕效果的设计风格。之前我们看到的设计稿都是这样的:

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图3

这样的:

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图4

这样的:

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图4

不知道大家有没有在这种感觉,虽然这些设计一眼看上去都很特别,但是看久了总觉得不够清爽,有一种喝了糖水回味的时候总有点骺得慌的感觉。

有道云笔记作为一款大厂出品的新拟态设计产品,对新拟态的优缺点做出了权衡,既然成为一款上线产品也意味着进行了全面的考虑。CC带大家一起来拆解一下,它到底是怎样设计新拟态图标和控件的。

我们先观察一下新版在哪些地方使用了“新拟物”,哪些地方没有。

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图5
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图6

|采用新拟物的部分:

-头部操作栏

-搜索功能

-新建按钮和主要功能

-语音记录的Button及头部语音识别切换button

|沿用扁平化的部分:

-卡片式文章列表

-底部导航栏

-个人中心的功能小图标

-更多操作的辅助功能点

-语音记录小气泡

根据我们的归类整理,可以发现,在主要的操作按钮部分,均采用了“拟物化的”风格Button,但是在大面积的展示区域和非功能性按钮依然沿用了简洁的扁平化设计。在保证“新拟物”质感的同时,保证主体内容的可阅读性,和整体页面的清爽感。

这可以说是一种保守做法,综合拟态化,不至于让页面显得过分繁琐。居然也相得益彰,这点也回应了此前大家对新拟态场景化运用的质疑。所以我们在新拟物的设计中注意要有松有驰,综合的看待页面中可能出现的设计元素。

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图7
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图8

4、“新拟态”的实际运用?

在实际运用中我们应该怎样设计参数呢?首先拆解一下“有道云笔记”的按钮效果。在UI设计中,按钮Button会分“默认状态”“点击状态”

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图9

默认状态十分像一个凸起地面的圆柱体,他是有厚度,有柔和的边缘界定,但是又没有完全脱离平面的设计,有一种粘连的流线感,有点像我们的硅胶键盘膜的质感,看起来顺滑却又有形状。左上角有亮色投影,右下角有暗色投影,明暗形成了立体的浮雕效果。

这里我们就要提到新拟态图标的特点:界面所有的按钮有且只有一个光源照射。所以我们首先需要设定一个预设光源,自左上向右下进行照射,这就能很好的解释投影的亮暗分布了。

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图10
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图11

要注意投影的柔和过度,进行柔和度的调节会使边缘看起来更加自然。

其次我们还注意到对于有道云笔记的一个非常重要的功能“搜索”功能,区分于按钮的凸起,在能够进行文字输入的搜索区域采用的是内凹陷的视觉效果,仿佛是一个可以放置文字的沟渠,暗示用户这里是可以进行输入的区域而不仅仅是一个button而已。

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图12

“新建功能按钮”同样是自左上至右下的统一光源,所以新建的button其实也是新拟态的延伸,虽然不同于之前所说的不脱离平面本身的新拟态风格,而是作为投影和新拟态的结合产物,依旧是打破了扁平化的设计局限,做出了独具风格的新拟物按钮。

可以见得,2021年究竟是否是拟物化设计的回归,我们应该也有些头绪了。

5、新拟态组件的延伸

那既然网易已经将新拟物推上舞台,很可能这就会成为以后拟物化卷土重来成为全新的新拟物的标志,可以思考一下,我们在其他的地方还可以用到新拟态的设计吗?CC总结了目前适用新拟物设计风格的一些产品:

1.物联网产品

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图13
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图14
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图15

2.工具类产品

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图16
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图17
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图18

3.基础类的功能性产品

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图19

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图20
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图21

我们可以思考一下,既然app有了这样的先例,在web端我们能做到什么呢?大家可以发挥想象力了,CC搜罗了一些web端的新拟态设计,或许对大家发散思维和学习新拟态的设计方法可以有所帮助,还整理了一些新拟态UIKit源文件在文末可以领取~

研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图22
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图23
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图24
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图25
研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图26

至于开始提到的紧急改版,CC其实也有关注,在开始第一版推出后的反响比较大,加上文字标题像苹果手机字体一样越来越大号,可能大家一时半会也比较难以接受突然的巨大风格转换。

所以五天后的紧急发版,针对网络上用户提出的文字过大,标题过大,有衬线体难以接受”几个方面做出了修改。看来新拟态风格还需要经过时间的磨合,才能够完全的让用户适应,也能看出我们做设计一定要及时的吸取用户的反馈进行页面的优化,毕竟一个新风格的推出是会遇到重重磨难的,网易大厂也给我们做出了很好的示范。

福利源文件在此~有需要的小伙伴可以关注CC的公众号「达芬奇的火柴盒」,后台回复“新拟态”即可领取。

原文地址:达芬奇的火柴盒(公众号)作者:CC本人研究 | “新拟态”时代开端?(附源文件)有道云笔记深度拆解插图27

人已赞赏
UI设计

各个大厂APP,是如何保护打工人的隐私信息?

2020-12-3 16:03:24

UI设计

【蓝湖有方】需求方不讲武德,设计师如何应对?

2020-12-6 20:13:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索