谷歌剛剛在上周的Android Show上發(fā)布了 Material Design 的一項最大更新，這讓我這個 UX 設(shè)計師感到非常興奮（同時也有點擔(dān)心），因為它正在發(fā)生著變化和發(fā)展。

格谷歌 (OOGLE) 最近對其現(xiàn)有的設(shè)計語言和系統(tǒng)進行了大規(guī)模升級，用于為全球數(shù)十億用戶構(gòu)建應(yīng)用和產(chǎn)品。此次更新包含許多有趣的新效果和風(fēng)格，但最重要的是，它凸顯了公司在用戶體驗方面的思維轉(zhuǎn)變。

讓我為您總結(jié)一切，并展示這將如何為空間帶來新的設(shè)計趨勢。

有趣的元素、按鈕和控件

如果你覺得之前的 Material Design 已經(jīng)不遺余力地讓元素看起來更有趣了，那么這次的更新絕對更上一層樓。從形狀相互轉(zhuǎn)換的創(chuàng)意加載器，到隨處可見的滑動條，這次更新將為設(shè)計師提供豐富的選擇和自由度，讓他們盡情發(fā)揮創(chuàng)意。

不一致是關(guān)鍵？——這是我在 Android Show 上注意到的！作為設(shè)計師，我們通過網(wǎng)站和應(yīng)用程序宣揚一致的設(shè)計，然而 Material Expressive 卻打破了大量規(guī)則。

• 標(biāo)簽現(xiàn)在會改變形狀以突出顯示并顯示高亮狀態(tài)。
• 浮動菜單現(xiàn)在具有可變的寬度來容納其內(nèi)容，而不是一個一致的寬度。
• 擴展的形狀庫可以為部分或按鈕增添樂趣。
• 在屏幕上的同一空間內(nèi)使用可變的邊框半徑（半徑的復(fù)數(shù)）來提供更高水平的視覺區(qū)分。
• 標(biāo)題中使用多種排版方式來增強視覺層次并注重“大膽”的設(shè)計。
• 諸如此類的例子還有很多。

除了微小的元素之外，我們還可以在應(yīng)用程序中的整個卡片和列表中看到這一點：

標(biāo)題真正體現(xiàn)了風(fēng)格并打破了界限

我們見過網(wǎng)站標(biāo)題的奇特風(fēng)格，設(shè)計師們也利用標(biāo)題來契合主題，使其成為重要的圖形元素。谷歌似乎也試圖在其設(shè)計系統(tǒng)中做同樣的事情。

一個很好的例子是他們?nèi)绾吻擅畹厥褂每勺兊淖煮w高度和大小來創(chuàng)建這個簡潔的鬧鐘應(yīng)用程序。

一些有趣的標(biāo)題和文字非常有意義，尤其是在標(biāo)題扮演特定角色的應(yīng)用中。然而，一些大而粗的標(biāo)題和元素的使用卻很糟糕。以下是谷歌正在做的一個很好的例子顯示為“不該做什么”：

我們還沒有看到谷歌在動畫標(biāo)題和效果方面做出太多的貢獻(xiàn)，所以我們只能拭目以待。

注重節(jié)省時間

從上面的對比中，您可以注意到 Gmail 移動應(yīng)用的一些重大變化。電子郵件部分現(xiàn)在變成了素材卡片，并且操作菜單移到了鍵盤上方。除了位置的變化之外，加粗的發(fā)送按鈕和擴展的菜單還允許用戶快速操作并將元素添加到電子郵件中。研究表明，這可以將用戶的瀏覽體驗提升 4 倍。

不同元素使用不同的色調(diào)不僅讓應(yīng)用程序感覺更有趣，而且還為重要元素創(chuàng)建了良好的視覺層次和對比度。

根據(jù)谷歌研究團隊的調(diào)查，無論年輕用戶還是年長用戶，都能更快地發(fā)現(xiàn)關(guān)鍵交互和行動號召 (CTA)，并減少采取行動的時間。簡而言之，用戶和界面之間的摩擦將會減少。

動畫和交互得到升級

谷歌將他們的新動畫系統(tǒng)和指南稱為“運動物理系統(tǒng)”，該系統(tǒng)致力于使微交互和過渡更加流暢、更具表現(xiàn)力。谷歌還致力于使動畫更容易被用戶理解。

一些主要區(qū)別如下：

• 基于彈簧的動畫本質(zhì)上意味著動畫結(jié)束時會有彈跳，以使其感覺更自然。
• 您可以使用新的運動方案來定制您的設(shè)計。
• 空間效果，其中元素將在屏幕上從一個位置移動到另一個位置。
• 他們還采用了新的命名方案，以“expressive”作為動畫名稱的前綴。
• 標(biāo)準(zhǔn)緩和動畫已成為過去！

所有這些如何協(xié)同工作的一個很好的例子就是這個非常自然且富有表現(xiàn)力的動畫：

在上面的例子中，仔細(xì)觀察關(guān)閉一條通知時，所有其他通知都會做出相應(yīng)的反應(yīng)。這感覺就像一本書被從書架上拉下來，旁邊的書也會微微滑出。這比之前的 Android 更新更加自然，也更符合物理定律。

您可以使用這些新動畫及其動畫指南和設(shè)置列表 - https://m3.material.io/styles/motion/overview/how-it-works

隨處可見的形狀和變形

谷歌確實非常依賴變形形狀來展現(xiàn)設(shè)計元素的狀態(tài)變化。無論是卡片的展開，還是計時器的移動，這些變形形狀隨處可見。

• 藥丸會增加邊框半徑，以從其他選項中脫穎而出。
• 許多 SVG 圖形會通過變化和變形來顯示事物的增加或減少。這些圖形可以是計時器、加載器和進度條。
• 卡片變成圓形以顯示選定狀態(tài)并與其他卡片區(qū)分開來。
• 當(dāng)卡片在滑塊或旋轉(zhuǎn)木馬中進入焦點時，它們會擴大。
• 圓形裝載機從無聊的舊圓形變?yōu)樽冃涡螤睢?/span>

他們還推出了一個新的形狀庫供設(shè)計師使用和探索——https: //m3.material.io/styles/shape/overview-principles。

這些形狀不僅僅是工藝品。谷歌鼓勵設(shè)計師將其用于個人資料圖片以增加個性，將其添加到用戶交互和元素中，以及使用 2.5D 形狀來增加深度。

不過，谷歌也警告設(shè)計師要謹(jǐn)慎使用形狀，以避免混亂和混淆。

我為什么擔(dān)心？

1. 過度游戲化：由于 Google 專注于有趣和明亮的元素，一些設(shè)計師可能會過度使用并破壞一些常見的 UX 原則，從而妨礙用戶的體驗。
2. 主觀設(shè)計：說到底，設(shè)計本身就是主觀的。我在推特上看到過很多關(guān)于 Android 16 和 Material Expressive 的帖子，有些人覺得某些顏色和實現(xiàn)方式不太吸引人。
3. 舊硬件的問題：流暢的動畫效果很棒，但耗電耗電。由于不同設(shè)備之間缺乏一致性，Material Expressive 可能無法在所有設(shè)備上正常工作，并且可能不適用于此類網(wǎng)站。我可能完全錯了，所以請在評論中指正。
4. 開發(fā)人員會更加討厭我們：我們經(jīng)常會遇到動畫或交互設(shè)計工作量大，開發(fā)團隊或產(chǎn)品經(jīng)理可能會縮短或忽略這些工作的情況。值得慶幸的是，大多數(shù)開發(fā)人員也都掌握了 Material Design 的精髓，所以說服他們并非難事。

你對 Material Expressive 有什么看法？請在評論區(qū)留言，我們可以好好討論一下！另外，記得點個贊支持我哦 :)

蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan