现在进去 Material Design,会发现他们今年有一个大更新。不但单独搞了一个网站,并且取名为 Material You。

Material Design 最新改版,这4个方面变化好大!

Material Design 官网首页截屏

Google 的 Material Design 和 Apple 的 Human Interface Guidelines 并列为移动端两大规范。

虽然国内很多公司以 iOS 为基准做设计,但是要论设计规范的细致严谨,还是 Material Design 更给力。所以对于初中级设计师来说,多看 Material Design 对学习提升是很有帮助的。

为了帮助中文设计师们学习最新的 Material 设计体系,我们知识星球里的 30+ 个小伙伴耗时两周时间,整理出来了一份中文翻译版免费送给大家:https://www.yuque.com/advancedux/xr6e1n

如果你想先快速了解一下 Material Design 的更新内容,可以继续往下读~

改了成什么样了?

毕竟 Android 和 Material Deisgn 都是同属 Google 旗下,所以看看 Android 的官方视频就很能 get 到了:

整体来说……不知道这句话对不对……我觉得是更像 iOS 了

其实 Material Design 之前就经常被说不好看,被评价时也经常用「严谨」、「技术」、「科学」之类的词。

我记得之前发过一篇 Material Design 和 iOS 的对比文章,评论区就有人说更喜欢前者(iOS):

Material Design 最新改版,这4个方面变化好大!

上图来源:iOS 规范与 Material Design 哪里不同?官网总结了这几点

可能是 Material Design 的设计团队终于想通,也要认真搞一搞视觉了?因为新版的 Material Design 颜值真的有明显提升啊!

颜色变柔和了

只要是去过 Material Design 老版官网的人,肯定对那个紫色的标题栏记忆犹新:

Material Design 最新改版,这4个方面变化好大!

虽说这个颜色理论上是可以自定义的,但这个亮紫色真的拉低了整个设计系统的颜值!

而且我如果想要在官网图示里,找几个有代表性的案例,都很难调出顺眼的:

Material Design 最新改版,这4个方面变化好大!

Material Design 最新改版,这4个方面变化好大!

Material Design 最新改版,这4个方面变化好大!

但是现在,官方给的图示变成了这样:

Material Design 最新改版,这4个方面变化好大!

尤其是那种鲜艳的标题栏去掉了,原来的纯灰色里也增加了一点色调:

Material Design 最新改版,这4个方面变化好大!

以前颜色设置只需要几种,而且很多都是黑白:

Material Design 最新改版,这4个方面变化好大!

现在搞得更有层次了,但也复杂多了,而且还可以多搞一套深色主题:

Material Design 最新改版,这4个方面变化好大!

Material Design 最新改版,这4个方面变化好大!

圆角变大了

之前 Material Design 给人的感觉是比较锋利的,卡片大多没有圆角,按钮大多是小圆角:

Material Design 最新改版,这4个方面变化好大!

而现在,圆角都变大了,甚至图片都加上圆角了:

Material Design 最新改版,这4个方面变化好大!

不过,也不是所有圆角都简单地加大尺码了。

Material Design 原本标志性的悬浮按钮,反而从圆形变成了圆角矩形:

Material Design 最新改版,这4个方面变化好大!

老版

Material Design 最新改版,这4个方面变化好大!

新版

而标签,反而把圆角缩小了:

Material Design 最新改版,这4个方面变化好大!

老版

Material Design 最新改版,这4个方面变化好大!

新版

字体常规化了

以前 Material Design 的大标题很醒目:

Material Design 最新改版,这4个方面变化好大!

老版

现在字体变细,最大尺寸也变小了。而且单独一行时,会占用左上角图标的那一列位置,更节约空间。

Material Design 最新改版,这4个方面变化好大!

新版

这样把所有文字样式拿出来对比一下,还挺明显的:

Material Design 最新改版,这4个方面变化好大!

老版

Material Design 最新改版,这4个方面变化好大!

新版

适配更强大了

Material Design 一开始就是用一套规范来同时适配 PC 端、平板端和手机端,这就挺不容易的:

Material Design 最新改版,这4个方面变化好大!

新版的 Material You,适配能力更上一层楼:

Material Design 最新改版,这4个方面变化好大!

更厉害的是,他们居然也为折叠屏做了适配,可谓是紧跟时代潮流了:

Material Design 最新改版,这4个方面变化好大!

最近刷到好几款折叠屏手机的新闻,产品设计对折叠屏适配真的越来越重要了。

资料奉上

这是老版和新版的官网,有条件的可以去看看:

欢迎关注作者的微信公众号:「体验进阶」

Material Design 最新改版,这4个方面变化好大!

点赞 46
收藏 48

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。