現在進去 Material Design，會發現他們今年有一個大更新。不但單獨搞了一個網站，并且取名為 Material You。

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）：

上圖來源：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

歡迎關注作者的微信公眾號：「體驗進階」