編輯導(dǎo)讀：在Material Design發(fā)布的7年之后，谷歌帶著全新的Material You進(jìn)入我們的的視野，即便I/O大會(huì)中甘當(dāng)了綠葉，但在設(shè)計(jì)圈依舊引發(fā)了不小的轟動(dòng)。相比Material Design，Material You到底有哪些變化呢？本文作者將從四個(gè)維度進(jìn)行分析，希望對你有幫助。

一個(gè)設(shè)計(jì)趨勢的翻新，大概需要 7 年的時(shí)間。

從初代Mac OS的像素黑白圖標(biāo)（1984年），到首次為圖標(biāo)加入立體質(zhì)感的Mac OS System7（1991年）；

從16-bit環(huán)境下擁有豐富色彩的XP（2001年），到Vista系統(tǒng)中首次運(yùn)用磨砂玻璃和實(shí)時(shí)動(dòng)畫的aero（2007年）；

從第一代iPhone中的aqua擬物風(fēng)（2007年），到iOS7轉(zhuǎn)型扁平（2013年）以及Material Design這一偉大語言的誕生（2014年）。

而在Material Design發(fā)布的7年之后，谷歌帶著全新的Material You進(jìn)入我們的的視野，即便I/O大會(huì)中甘當(dāng)了綠葉，但在設(shè)計(jì)圈依舊引發(fā)了不小的轟動(dòng)。

那么，相比Material Design，Material You到底有哪些變化呢？

下面，我簡單從四個(gè)維度，來為你揭開Material You的神秘面紗~

一、更大、更粗！

這大概是我粗看宣傳片后最直觀的視覺感受了~

拿控制中心舉例。以往的Android 11中，控制中心默認(rèn)6個(gè)圓形icon單行布局。但是??！使用了Material You的Android 12，將原本的圓形icon擴(kuò)展成了接近半個(gè)屏幕大小的超大按鈕。

粗略計(jì)算了下，同等分辨率設(shè)備下，面積足足大了將近七倍！

這么做無疑大幅提升了點(diǎn)擊體驗(yàn)。畢竟根據(jù)菲茨定律來看，移動(dòng)端設(shè)備中，點(diǎn)擊目標(biāo)越大或者距離手指越短，所花費(fèi)的點(diǎn)擊時(shí)間越短。Android 12的這種設(shè)計(jì)很好得滿足了面積和距離兩個(gè)條件，用戶點(diǎn)擊起來會(huì)非常得爽快。

另外，在一些不可控的場景（擠地鐵、走路等）下也可以降低誤觸的幾率。這一點(diǎn)是很棒，不過帶來的弊端就是空間的大量占用。

Google為了一屏內(nèi)能露出其他信息，默認(rèn)狀態(tài)下只能顯示四個(gè)控制選項(xiàng)，用戶想要查看更多得需要通過額外的下滑手勢觸發(fā)。

另外，滑塊相比以往也粗了一大截，和按鈕一樣的道理。

二、更圓、更豐富！

Google的這次翻新一改以往的小圓角風(fēng)格，幾乎所有的形狀都像iOS14那樣圓潤。

拿控制中心中的音樂播放器來說，應(yīng)用了Material You語言的Android 12系統(tǒng)的圓角，比Android 11多出了將近4倍。

而其他地方，也存在著大量全圓角形狀（即膠囊形狀）和圓形形狀的使用。比如音量和亮度滑塊、標(biāo)簽欄選中后的高亮色塊、voicemail的主次按鈕等等。

從圓角的特性來說，圓角越大，它所傳遞的親和感更為強(qiáng)烈，同時(shí)也更容易引導(dǎo)用戶聚焦到形狀內(nèi)的內(nèi)容中。所以變圓這個(gè)趨勢我猜測可能也與之相關(guān)。

另外，Material You打破了我們常規(guī)對UI形狀的認(rèn)知，它不會(huì)拘泥于特定的某一類形狀。圖形語言更加多變豐富。

不過，當(dāng)同一界面中出現(xiàn)了各種圓角不一的形狀后，無疑會(huì)給大腦增加認(rèn)知負(fù)擔(dān)。比如郵件列表頁中，標(biāo)簽導(dǎo)航選中態(tài)、FAB按鈕和頂部導(dǎo)航類使用了三種不一樣的圓角。也許Google有自己的某些考量，不過這種感知上的不一致確實(shí)讓我有些困惑。

三、更真實(shí)、更舒服！

Material Design貼近真實(shí)物理規(guī)律的動(dòng)畫一直是我很鐘意的一點(diǎn)，之前做概念項(xiàng)目時(shí)也有參考過。而這次的Material You，動(dòng)畫更加貼合我們在現(xiàn)實(shí)世界中的感知，讓人感覺非常真實(shí)和舒服。

舉三個(gè)???

比如，在用戶滑至內(nèi)容底部時(shí)，內(nèi)容用被拉伸的彈性動(dòng)畫代替了以往常規(guī)的高光反饋，讓用戶清晰感知到他們滑至盡頭時(shí)產(chǎn)生的拉扯感。想一想也是，當(dāng)我們在現(xiàn)實(shí)世界里，大半夜拉抽屜拉到底后，突然給你來道正義的光也是蠻詭異的。

比如，手機(jī)在充電后，會(huì)出現(xiàn)漣漪般擴(kuò)散的微光閃爍。同時(shí)，時(shí)間的字重也會(huì)出現(xiàn)同等節(jié)奏的變化。

比如，手機(jī)AOD（Always On Display，即息屏顯示動(dòng)態(tài)信息，比如miui在11代后可以在息屏狀態(tài)下顯示簽名、表盤）和鎖屏間的轉(zhuǎn)換動(dòng)畫會(huì)與現(xiàn)實(shí)世界的操作完美呼應(yīng)。

當(dāng)用戶拿起手機(jī)后，亮屏方向即來自設(shè)備拿起的方向，而鎖屏后，暗屏方向即來自按鍵的方向。動(dòng)畫整體讓人感覺非常得自然、絲滑和恰到好處。

四、更個(gè)性化、更自由！

個(gè)性化大概是Material You設(shè)計(jì)系統(tǒng)最核心、最引以為豪的一部分了。

畢竟在這之前，個(gè)性這玩意兒一直是被壓抑的狀態(tài)。

如果把手機(jī)系統(tǒng)比喻成土地，iOS在誕生之初就早已在自己規(guī)劃的土地上建好了建筑。而以工程師們?yōu)橹鲗?dǎo)的Android則是一篇無人管理的荒野，任何人都可以在上面建造自己想要的東西，混亂和無序就是那時(shí)Android的代名詞。

直到2014年I/O大會(huì)所發(fā)布的Material Design，才成功實(shí)現(xiàn)了Google的首次設(shè)計(jì)革命。

Material Design用以打造鮮明、美觀和統(tǒng)一的設(shè)計(jì)體驗(yàn)，為全世界的安卓產(chǎn)品提供一致的規(guī)則和組件框架。

但是，Material Design的問題就是——

太統(tǒng)一、太無聊了。

Michal Malewicz在《Aurora UI — new visual trend for 2021》文章中，也用了一個(gè)夸張的例子吐槽Material Design專為患有強(qiáng)迫癥的極簡主義者設(shè)計(jì)，成為了the king of boring UI。用戶不喜歡無聊，相比使用那些大規(guī)模量產(chǎn)的東西，用戶更樂于接受手工定制的產(chǎn)品。

Material Design的設(shè)計(jì)總監(jiān)Bethany Fony，也在宣傳片中講到：設(shè)計(jì)系統(tǒng)不該一成不變。嚴(yán)格遵循現(xiàn)代主義理念，進(jìn)行功能的構(gòu)建和設(shè)計(jì)，或者是一刀切的想法，都需要反思甚至推翻。

所以，個(gè)性化成為了Material You設(shè)計(jì)語言中的一大特征。畢竟最懂用戶審美需求的只有他們自己。

而且從Material Design到Material You的名稱變化就可以看出來，這次的設(shè)計(jì)翻新圍繞于每個(gè)使用者本身。每個(gè)人都可以DIY自己的手機(jī)。其實(shí)這個(gè)和星巴克把顧客名字寫杯子上而引發(fā)顧客好感是差不多的道理，杯子寫上了自己的名字后，個(gè)人身份的彰顯會(huì)讓使用者產(chǎn)生強(qiáng)烈的擁有感，從而感知到更高的價(jià)值。

（ btw，如果你有印象的話，這在之前的稟賦效應(yīng)文章中有提過）

Material You的個(gè)性化，主要體現(xiàn)在兩方面——動(dòng)態(tài)色彩和動(dòng)態(tài)UI。

1. 動(dòng)態(tài)色彩

講真，我一直覺得Material Design初期官方的色彩挺扎眼的，尤其是FAB按鈕，Google是怎么亮眼怎么來。

不過從宣傳片來看，色彩明顯更小清新了。而且動(dòng)態(tài)色彩系統(tǒng)的加入讓用戶有了徹底的色彩支配權(quán)。

簡單說，就是系統(tǒng)會(huì)從用戶自己設(shè)定的壁紙中，抓取一個(gè)主色。然后，將其轉(zhuǎn)化為不同明暗和飽和度的色階。之后，再將色階應(yīng)用到全部的UI當(dāng)中。另外，計(jì)算出的色彩也可以按照某種邏輯同時(shí)適配日間、夜間和高對比度主題。

從羅列的界面來看，色彩在感官上非常得統(tǒng)一和和諧，不再像Material Design那么扎眼。

2. 動(dòng)態(tài)UI

不僅僅是色彩，UI本身都都可以實(shí)現(xiàn)自定義。

Google基于contextual aware system（上下文感知系統(tǒng)，我承認(rèn)這個(gè)翻譯很拗口。。），讓全局UI樣式全部變得可自定義調(diào)節(jié)，從而解決用戶多樣化的訴求。

比如滑塊的面積、描邊的有無粗細(xì)、字重等等，都可以實(shí)現(xiàn)個(gè)性化定制。畢竟懂用戶審美需求的只有用戶自己，這種功能可以很大程度上緩和眾口難調(diào)的問題。

五、最后

Google設(shè)計(jì)師們在Material Design發(fā)布后的7年時(shí)光中，曾經(jīng)反思過一個(gè)很經(jīng)典的問題：“如果形式不僅追隨功能，還能追隨感覺，會(huì)怎樣？”

很明顯，設(shè)計(jì)師們在這次Material You中給予了我們答案。Google突破了傳統(tǒng)、經(jīng)典的包豪斯現(xiàn)代主義設(shè)計(jì)理念，賦予了Android全新的個(gè)性化語言。正如Material Design設(shè)計(jì)總監(jiān)Bethany Fony所說：我們正在設(shè)計(jì)這樣的未來。設(shè)計(jì)要解放個(gè)性，而非壓抑個(gè)性。

最后的最后，讓我們用一句話總結(jié)這次的Material You設(shè)計(jì)語言！！相比Material Design，Material You最大的變化就是

• 圖形更圓、更豐富！
• 按鈕更大、更粗！
• 動(dòng)畫更真實(shí)、更舒服！
• 色彩、UI更個(gè)性化、更自由！

不知不覺碼了3000多字了，很感謝你能看完。希望這篇解讀文章能夠給予你一些啟發(fā)。期待你的收獲和反饋。

我是Andrew，下期見。

參考資料：

https://uxdesign.cc/material-you-had-to-happen-this-year-248182c3b3b4

https://uxplanet.org/googles-material-you-new-design-system-for-android-ced2253155d4

https://www.material.io/blog/announcing-material-you

https://www.youtube.com/watch?v=rLKtIGY2Mgc

https://www.youtube.com/watch?v=UHQPdP8qgrk

https://www.youtube.com/watch?v=Lzh7K0WOhkc

https://mp.weixin.qq.com/s/PKvo8Ndpw1e44tcveeOKJg

作者：Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。