谷歌設計系統 Material Design 改版成 Material You 後,變化有多大?
現在進去 Material Design,會發現他們已經大更新了。
不但單獨搞了一個網站,並且取名為 Material You。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393f700fcc41d82a3ee8c79c14add78068bf42ec5a5df8e3261c8895a4886482731.jpg)
Google 的 Material Design 和 Apple 的 Human Interface Guidelines 並列為移動端兩大規範。
雖然國內很多公司以 iOS 為基準做設計,但是要論設計規範的 細緻嚴謹 ,還是 Material Design 更給力。
所以對於初中級設計師來說,多看 Material Design 對 學習提升 是很有幫助的。
為了幫助中文設計師們學習最新的 Material 設計體系,我們知識星球裡的 30+ 個小夥伴耗時兩週時間,整理出來了一份 中文翻譯 版 免費 送給大家: Material Design 3 中文版 · 語雀
如果你想先快速瞭解一下 Material Design 的 更新內容 ,可以繼續往下讀~
改了成什麼樣了?
畢竟 Android 和 Material Deisgn 都是同屬 Google 旗下,所以看看 Android 的官方視訊就很能 get 到了:
整體來說……不知道這句話對不對……我覺得是更像 iOS 了
其實 Material Design 之前就經常被說不好看,被評價時也經常用「嚴謹」、「技術」、「科學」之類的詞。
我記得之前發過一篇 Material Design 和 iOS 的對比文章,評論區就有人說更喜歡前者(iOS): iOS 規範與 Material Design 哪裡不同?官網總結了這幾點
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c4f8286f280066c6837b075d4488c2db8c2a2ce37aca2b66193cd5115ef6e830.jpg)
可能是 Material Design 的設計團隊終於想通,也要認真搞一搞視覺了?
因為新版的 Material Design 顏值真的有明顯提升啊!
顏色變柔和了
只要是去過 Material Design 老版官網的人,肯定對那個紫色的標題欄記憶猶新:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b43bc30bae1e945c2b1712b1bef4093792c09afdf3f6294b7b3ca25e238a0e1e2.jpg)
雖說這個顏色理論上是可以自定義的,但是從現如今的審美,這個亮紫色真的不太好看了。
而且我如果想要在官網圖示裡,找幾個有代表性的案例,都很難調出順眼的:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf422e5479c1a3997c3c518fd11dff14f090775b568e37fa6c6d5c299f147744c.jpg)
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983939ab406e0bbc72c1070f58c1eae4666a0e22a53537bf3dbf6cebabd24edd7c767.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b859f8eb7bfef89ae1523102b6608a36d6c5ebcccde63bb2a182cf06bec0dd0a4.jpg)
但是現在,官方給的圖示變成了這樣:
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938ffb2af9014d215c8306a9ab13c043ccc0f8ca3981cc10e420839b4d94f34dc0.jpg)
尤其是那種鮮豔的標題欄去掉了,原來的純灰色裡也增加了一點色調:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be98f3cf5d0fcec0d508ae1901cac66ed950daab271c50a8e8a534be920aba06e.jpg)
以前顏色設定只需要幾種,而且很多都是黑白:
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983934cf67736a86c70922977d7e49c8911890a9b66ec38b1e3889e6e9a1c69802b8b.jpg)
現在搞得更有層次了,但也複雜多了,而且還可以多搞一套深色主題:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4ba98af86e0ef267cd96b0eaf5fad9d36602c479bf5228f05909c572fd35cad97d.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8d872880aaffbc0c5dd3881636df8bb5370ce98ed6a36f636a093267e81bd77b.jpg)
圓角變大了
之前 Material Design 給人的感覺是比較鋒利的,卡片大多沒有圓角,按鈕大多是小圓角:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b25f9c6da62316babb9e3a66ec94b8097a1c65251424e51cff13eec16e779b3b2.jpg)
而現在,圓角都變大了,甚至圖片都加上圓角了:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd955d94287eeda6845b81de533e07d5a9501d476bf3c02a3e6bb5a27d76f50b9.jpg)
不過,也不是所有圓角都簡單地加大尺碼了。
Material Design 原本標誌性的懸浮按鈕,反而從圓形變成了圓角矩形:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229be4cabd6110c0ac3791bc5ce5a47eace3728c79269290c325b387cb8cb6f4a45b.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229ba60ba80327f98cb8b5ae8684a8428317b89098114779b5b7b1991f39adc4dad1.jpg)
而標籤,反而把圓角縮小了:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b73635459b3883b97599bb1186fff287ba199c9e4c133fa46bcdf231147085e42.jpg)
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839325d02e06231f93a6e4863e4e001b71bd7c90723ed524307397b1558d954aad0e.jpg)
字型常規化了
以前 Material Design 的大標題很醒目:
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393dc0e100e3774a98db1022517d640f24b94f7a2a70e0c2e7ac85a666cdd6151ae.jpg)
現在字型變細,最大尺寸也變小了。
而且單獨一行時,會佔用左上角圖表的那一列位置,更節約空間。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bca98fb03389a06c5beccc3acb838eaa3e57b02396fa9fb8daff948f9d3c8aedf.jpg)
這樣把所有文字樣式拿出來對比一下,還挺明顯的:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be9a98c35992df861780408697ba6aa584694b6edee446f97deed257144ff14f2.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bde99766d08d6eddffd67bdda85817d6d738c615be3761f530d9affab99d718bd.jpg)
適配更強大了
Material Design 一開始就是用一套規範來同時適配 PC端、平板端和手機端,這就挺不容易的:
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938f8ba5df6db2a16d14ada75f3155a15fc87655b3bf82f47ced6e2483fd3e790a.jpg)
新版的 Material You,適配能力更上一層樓:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b5380cb84321c6ad843243f21ea18df02d8076b8e9a51b3b52a568a049bd80132.jpg)
更厲害的是,他們居然也為摺疊屏做了適配,可謂是緊跟時代潮流了:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf983cc2b5163426aeea73f2ae872f69b22df301e39a9419456cd63d15a58aa31.jpg)
最近刷到好幾款摺疊屏手機的新聞,產品設計對摺疊屏適配真的越來越重要了。
資料奉上
這是老版和新版的官網,有條件的可以去看看:
Material Design: http:// material.io
Material You: http://m3.material.io
下面是我們整理出來的中文翻譯版,歡迎閱讀(有素材包):
最後感謝一下參與此次編譯的小夥伴們 :heart:
小王是酸菜魚、WKL.、FredMac、王巨集遠、fa fa、jenny.、yuan媛媛、Loby、1792、Jojo、ellaw、荔灣、Yishan、siyuan、H姓小鮮肉、江文靜、米飯飯熙、餵魚、粵粵、我愛吃魚、韓三能、春天、大進、可樂瓶、Brian、大胖、大亭子、雪糕
- 為什麼大廠改版都在做使用者分層設計?
- 猛然發現,主流app都在褪色
- B端作品集與C端有什麼不同嗎?
- 谷歌設計系統 Material Design 改版成 Material You 後,變化有多大?
- 偷偷告訴你,我畫彈窗經常不加標題
- 谷歌 Material Design 的文字框為什麼沒人用?
- B端產品C端化,我之前想得太簡單!
- 紐約地鐵APP也就設計上完勝深圳了
- Git進階系列 | 6. 互動式Rebase
- 網友狂讚的Tesla設計,遭馬斯克公然反對
- 太注重使用者體驗,反而會喪失個性嗎?
- 一個拖拽,就暴露了國內外大廠的差距
- 菲茨法則,並沒有網上吹的那麼有用
- Git進階系列 | 6. 互動式Rebase
- 問卷設計有哪些雷區?
- C端設計師遇到B端筆試題,該怎麼應對?
- 有哪些消費心理學可以提高轉化率?
- iOS15的一些新設計,還挺神奇的
- 設計被說沒有目標感,該怎麼辦?
- 優步改版覆盤,做個高逼格官網有多不容易?