Material Design 最新改版，這4個方面變化好大！

現(xiàn)在進去 Material Design，會發(fā)現(xiàn)他們今年有一個大更新。不但單獨搞了一個網(wǎng)站，并且取名為 Material You。

Material Design 官網(wǎng)首頁截屏

Google 的 Material Design 和 Apple 的 Human Interface Guidelines 并列為移動端兩大規(guī)范。

雖然國內(nèi)很多公司以 iOS 為基準做設計，但是要論設計規(guī)范的細致嚴謹，還是 Material Design 更給力。所以對于初中級設計師來說，多看 Material Design 對學習提升是很有幫助的。

為了幫助中文設計師們學習最新的 Material 設計體系，我們知識星球里的 30+ 個小伙伴耗時兩周時間，整理出來了一份中文翻譯版免費送給大家：https://www.yuque.com/advancedux/xr6e1n

如果你想先快速了解一下 Material Design 的更新內(nèi)容，可以繼續(xù)往下讀～

改了成什么樣了？

畢竟 Android 和 Material Deisgn 都是同屬 Google 旗下，所以看看 Android 的官方視頻就很能 get 到了：

整體來說……不知道這句話對不對……我覺得是更像 iOS 了

其實 Material Design 之前就經(jīng)常被說不好看，被評價時也經(jīng)常用「嚴謹」、「技術」、「科學」之類的詞。

我記得之前發(fā)過一篇 Material Design 和 iOS 的對比文章，評論區(qū)就有人說更喜歡前者（iOS）：

上圖來源：iOS 規(guī)范與 Material Design 哪里不同？官網(wǎng)總結了這幾點

可能是 Material Design 的設計團隊終于想通，也要認真搞一搞視覺了？因為新版的 Material Design 顏值真的有明顯提升啊！

顏色變?nèi)岷土?/span>

只要是去過 Material Design 老版官網(wǎng)的人，肯定對那個紫色的標題欄記憶猶新：

雖說這個顏色理論上是可以自定義的，但這個亮紫色真的拉低了整個設計系統(tǒng)的顏值！

而且我如果想要在官網(wǎng)圖示里，找?guī)讉€有代表性的案例，都很難調(diào)出順眼的：

但是現(xiàn)在，官方給的圖示變成了這樣：

尤其是那種鮮艷的標題欄去掉了，原來的純灰色里也增加了一點色調(diào)：

以前顏色設置只需要幾種，而且很多都是黑白：

現(xiàn)在搞得更有層次了，但也復雜多了，而且還可以多搞一套深色主題：

圓角變大了

之前 Material Design 給人的感覺是比較鋒利的，卡片大多沒有圓角，按鈕大多是小圓角：

而現(xiàn)在，圓角都變大了，甚至圖片都加上圓角了：

不過，也不是所有圓角都簡單地加大尺碼了。

Material Design 原本標志性的懸浮按鈕，反而從圓形變成了圓角矩形：

老版

新版

而標簽，反而把圓角縮小了：

老版

新版

字體常規(guī)化了

以前 Material Design 的大標題很醒目：

老版

現(xiàn)在字體變細，最大尺寸也變小了。而且單獨一行時，會占用左上角圖標的那一列位置，更節(jié)約空間。

新版

這樣把所有文字樣式拿出來對比一下，還挺明顯的：

老版

新版

適配更強大了

Material Design 一開始就是用一套規(guī)范來同時適配 PC 端、平板端和手機端，這就挺不容易的：

新版的 Material You，適配能力更上一層樓：

更厲害的是，他們居然也為折疊屏做了適配，可謂是緊跟時代潮流了：

最近刷到好幾款折疊屏手機的新聞，產(chǎn)品設計對折疊屏適配真的越來越重要了。

資料奉上

這是老版和新版的官網(wǎng)，有條件的可以去看看：

• Material Design: https://material.io
• Material You: https://m3.material.io

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