格谷歌 (OOGLE) 最近對其現有的設計語言和系統進行了大規模升級,用于為全球數十億用戶構建應用和產品。此次更新包含許多有趣的新效果和風格,但最重要的是,它凸顯了公司在用戶體驗方面的思維轉變。
讓我為您總結一切,并展示這將如何為空間帶來新的設計趨勢。
有趣的元素、按鈕和控件
如果你覺得之前的 Material Design 已經不遺余力地讓元素看起來更有趣了,那么這次的更新絕對更上一層樓。從形狀相互轉換的創意加載器,到隨處可見的滑動條,這次更新將為設計師提供豐富的選擇和自由度,讓他們盡情發揮創意。
不一致是關鍵?——這是我在 Android Show 上注意到的!作為設計師,我們通過網站和應用程序宣揚一致的設計,然而 Material Expressive 卻打破了大量規則。
- 標簽現在會改變形狀以突出顯示并顯示高亮狀態。
- 浮動菜單現在具有可變的寬度來容納其內容,而不是一個一致的寬度。
- 擴展的形狀庫可以為部分或按鈕增添樂趣。
- 在屏幕上的同一空間內使用可變的邊框半徑(半徑的復數)來提供更高水平的視覺區分。
- 標題中使用多種排版方式來增強視覺層次并注重“大膽”的設計。
- 諸如此類的例子還有很多。
除了微小的元素之外,我們還可以在應用程序中的整個卡片和列表中看到這一點:
卡片和列表如何應對不一致
標題真正體現了風格并打破了界限
標題如何在不同的應用中扮演不同的“角色”
我們見過網站標題的奇特風格,設計師們也利用標題來契合主題,使其成為重要的圖形元素。谷歌似乎也試圖在其設計系統中做同樣的事情。
一個很好的例子是他們如何巧妙地使用可變的字體高度和大小來創建這個簡潔的鬧鐘應用程序。
資料來源:9to5Google
一些有趣的標題和文字非常有意義,尤其是在標題扮演特定角色的應用中。然而,一些大而粗的標題和元素的使用卻很糟糕。以下是谷歌正在做的一個很好的例子顯示為“不該做什么”:
我們還沒有看到谷歌在動畫標題和效果方面做出太多的貢獻,所以我們只能拭目以待。
注重節省時間
從上面的對比中,您可以注意到 Gmail 移動應用的一些重大變化。電子郵件部分現在變成了素材卡片,并且操作菜單移到了鍵盤上方。除了位置的變化之外,加粗的發送按鈕和擴展的菜單還允許用戶快速操作并將元素添加到電子郵件中。研究表明,這可以將用戶的瀏覽體驗提升 4 倍。
不同元素使用不同的色調不僅讓應用程序感覺更有趣,而且還為重要元素創建了良好的視覺層次和對比度。
在經過測試的 10 款應用中,M3 Expressive 設計使老年用戶能夠像年輕用戶一樣快速地發現屏幕上的關鍵交互元素。
根據谷歌研究團隊的調查,無論年輕用戶還是年長用戶,都能更快地發現關鍵交互和行動號召 (CTA),并減少采取行動的時間。簡而言之,用戶和界面之間的摩擦將會減少。
動畫和交互得到升級
谷歌將他們的新動畫系統和指南稱為“運動物理系統”,該系統致力于使微交互和過渡更加流暢、更具表現力。谷歌還致力于使動畫更容易被用戶理解。
一些主要區別如下:
- 基于彈簧的動畫本質上意味著動畫結束時會有彈跳,以使其感覺更自然。
- 您可以使用新的運動方案來定制您的設計。
- 空間效果,其中元素將在屏幕上從一個位置移動到另一個位置。
- 他們還采用了新的命名方案,以“expressive”作為動畫名稱的前綴。
- 標準緩和動畫已成為過去!
所有這些如何協同工作的一個很好的例子就是這個非常自然且富有表現力的動畫:
新的 Android 通知動畫
在上面的例子中,仔細觀察關閉一條通知時,所有其他通知都會做出相應的反應。這感覺就像一本書被從書架上拉下來,旁邊的書也會微微滑出。這比之前的 Android 更新更加自然,也更符合物理定律。
您可以使用這些新動畫及其動畫指南和設置列表 - https://m3.material.io/styles/motion/overview/how-it-works
隨處可見的形狀和變形
谷歌確實非常依賴變形形狀來展現設計元素的狀態變化。無論是卡片的展開,還是計時器的移動,這些變形形狀隨處可見。
- 藥丸會增加邊框半徑,以從其他選項中脫穎而出。
- 許多 SVG 圖形會通過變化和變形來顯示事物的增加或減少。這些圖形可以是計時器、加載器和進度條。
- 卡片變成圓形以顯示選定狀態并與其他卡片區分開來。
- 當卡片在滑塊或旋轉木馬中進入焦點時,它們會擴大。
- 圓形裝載機從無聊的舊圓形變為變形形狀。
他們還推出了一個新的形狀庫供設計師使用和探索——https: //m3.material.io/styles/shape/overview-principles。
這些形狀不僅僅是工藝品。谷歌鼓勵設計師將其用于個人資料圖片以增加個性,將其添加到用戶交互和元素中,以及使用 2.5D 形狀來增加深度。
不過,谷歌也警告設計師要謹慎使用形狀,以避免混亂和混淆。
我為什么擔心?
- 過度游戲化:由于 Google 專注于有趣和明亮的元素,一些設計師可能會過度使用并破壞一些常見的 UX 原則,從而妨礙用戶的體驗。
- 主觀設計:說到底,設計本身就是主觀的。我在推特上看到過很多關于 Android 16 和 Material Expressive 的帖子,有些人覺得某些顏色和實現方式不太吸引人。
- 舊硬件的問題:流暢的動畫效果很棒,但耗電耗電。由于不同設備之間缺乏一致性,Material Expressive 可能無法在所有設備上正常工作,并且可能不適用于此類網站。我可能完全錯了,所以請在評論中指正。
- 開發人員會更加討厭我們:我們經常會遇到動畫或交互設計工作量大,開發團隊或產品經理可能會縮短或忽略這些工作的情況。值得慶幸的是,大多數開發人員也都掌握了 Material Design 的精髓,所以說服他們并非難事。