/Material Design 最新改版，变化好大！
最新文章2024-03-01

Material Design 最新改版，变化好大！

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

Material Design 官网首页截屏
Google 的 Material Design 和 Apple 的 Human Interface Guidelines 并列为移动端两大规范。
虽然国内很多公司以 iOS 为基准做设计，但是要论设计规范的细致严谨，还是 Material Design 更给力。

所以对于初中级设计师来说，多看 Material Design 对学习提升是很有帮助的。
为了帮助中文设计师们学习最新的  Material 设计体系，我们知识星球里的 30+ 个小伙伴耗时两周时间，整理出来了一份中文翻译版免费送给大家：

如果你想先快速了解一下 Material Design 的更新内容，可以继续往下读～
改了成什么样了？
毕竟 Android 和 Material Deisgn 都是同属 Google 旗下，所以看看 Android 的官方视频就很能 get 到了：


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


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



我记得之前发过一篇 Material Design 和 iOS 的对比文章，评论区就有人说更喜欢前者（iOS）：




上图来源：iOS 规范与 Material Design 哪里不同？官网总结了这几点
可能是 Material Design 的设计团队终于想通，也要认真搞一搞视觉了？



因为新版的 Material Design 颜值真的有明显提升啊！

颜色变柔和了
只要是去过 Material Design 老版官网的人，肯定对那个紫色的标题栏记忆犹新：


虽说这个颜色理论上是可以自定义的，但这个亮紫色真的拉低了整个设计系统的颜值！
而且我如果想要在官网图示里，找几个有代表性的案例，都很难调出顺眼的：

上下滚动查看更多
但是现在，官方给的图示变成了这样：



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





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

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




圆角变大了



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



而现在，圆角都变大了，甚至图片都加上圆角了：





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



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


老版



新版
而标签，反而把圆角缩小了：


老版

新版
字体常规化了


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




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

新版


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




老版

新版
适配更强大了


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




新版的 Material You，适配能力更上一层楼：

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


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


资料奉上
这是老版和新版的官网，有条件的可以去看看：
Material Design: https://material.io
Material You: https://m3.material.io


下面是我们整理出来的中文翻译版，欢迎阅读：

这里还整理了一些 Figma 和 Sketch 的组件库和图标库给大家：

最后感谢一下参与此次编译的小伙伴们 ❤️


小王是酸菜鱼、WKL.、FredMac、王宏远、fa fa、jenny.、yuan媛媛、Loby、1792、Jojo、ellaw、荔湾、Yishan、siyuan、H姓小鲜肉、江文静、米饭饭熙、喂鱼、粤粤、我爱吃鱼、韩三能、春天、大进、可乐瓶、Brian、大胖、大亭子、雪糕



如果你也想加入我们，参加各种学习打卡和训练营，欢迎扫码：



如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：







本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章