洩漏：谷歌如何以及為何開發了 Material 3 Expressive 設計

在本月即將發布的公告之前，谷歌意外地發布了一篇部落格文章，詳細介紹了該公司最新設計方向 Material 3 Expressive 的設計想法和研究。

全文已由…保存在部落格上 Wayback機器（以下儲存版本中未顯示圖片）。要點如下：

Material 3 Expressive 代表了谷歌所說的“大膽的新設計方向”，也是“谷歌設計系統有史以來搜尋量最高的更新”。谷歌的目標是讓應用程式擺脫「簡潔」和「乏味」的設計，創造出能夠與用戶建立情感聯繫的介面。除了全名之外，它也被稱為“M3 Expressive”或簡稱“表現型設計”。

Material 3 Expressive 的誕生源於研究——不是那種依賴 41 種藍色色調，將設計決策委託給數據的研究方式，而是那種包含研究、設計和工程的協作探究。

2022 年，Material Design 團隊開始思考：“為什麼所有這些應用程式看起來都如此相似？如此乏味？難道沒有提升用戶體驗的空間嗎？”

過去三年，我們深入探索了這場對話的意義，反覆進行數十輪設計和研究，以尋求 Material Design 的下一個發展方向。透過 46 項獨立研究，涵蓋數百種設計方案，並吸引了來自世界各地的 18000 多名參與者，我們最終打造出一個美觀且高度易用的系統。 Material 3 的表達原則是基於嚴謹的研究，並建立在成熟的可用性最佳實踐之上，因此設計師可以自信地使用這些新組件和原則，因為他們知道自己正在建立易於用戶使用和互動的產品。

這些研究包括：

眼動追蹤： 分析使用者註意力集中的位置至關重要。眼動追蹤是了解使用者行為並找出設計改進方向的強大工具。
調查和焦點小組：這些方法可以衡量使用者對不同設計的情感反應，有助於了解使用者在情感層面上如何看待設計。
實驗： 收集用戶的情感和偏好。實驗對於識別使用者偏好的設計以及評估不同因素對使用者體驗的影響至關重要。
使用方便： 了解使用者掌握和使用介面的速度至關重要。易用性是衡量任何設計成功與否的關鍵指標，它決定了使用者實現目標的便利性和效率。

Google指出，「表現設計的核心要素是色彩、形狀、大小、動態和包容性的運用。」此外，「Material 3 Expressive 以大膽運用形狀和色彩為特色，旨在創造令人興奮的用戶體驗。」大膽的色彩和形狀運用是 Material Design 3 Expressive 的關鍵組成部分，旨在打造引人入勝、令人難忘的用戶體驗。

這些設計要素對於提升產品使用者友善性至關重要，它們能夠突出重要的介面元素，例如高亮顯示關鍵操作和將相似元素分組在一起。這可以增強用戶體驗，使其更加流暢高效。

浮動工具列是 Material 3 Expressive 的一個元件。在概念設計中，我們看到一個形狀像藥丸的底部欄，它不會橫跨整個螢幕寬度。因此，我們只能看到背景的一小部分，而全螢幕顯示設計變得越來越重要。它類似於目前 Google Chat 中的浮動工具列。

谷歌的研究表明，“富有表現力的設計更容易使用”，並且可以幫助用戶“快速發現每個螢幕上的主要操作並更快地進行導航”。

參與者識別關鍵使用者介面元素的速度提升了四倍，這表明這些設計有效地引導使用者將注意力集中到螢幕最重要的部分。我們已經看到許多應用程式達到了這種優化水平，而且這不僅僅體現在用戶注視時間上。在我們測試的各種設計中，我們也觀察到點擊關鍵操作所需的時間縮短了數秒。

再次強調，這些只是概念設計圖，並不代表最終產品。（更確切的信息，請參閱洩露圖） Google Watch 重新設計（週末期間。）然而，下面的「之前」範例顯然是當前的 Gmail 使用者介面。

當我們觀察具體的介面設計，例如下方所示的電子郵件應用程式案例研究中的螢幕時，我們可以直觀地看到表現力強的設計原則帶來的優勢。例如，新設計中的「發送」按鈕更大，位於鍵盤正上方，並使用輔助顏色來吸引使用者的注意。我們可以將其與非表現力強的設計進行比較，後者將較小的「發送」按鈕放置在螢幕頂部的工具列中，與其他控制項（例如文件附件）並列。當參與者被要求在應用程式中「發送電子郵件」時，他們在表現力強的設計中看到按鈕的速度是非表現設計的四倍。這凸顯了表現力強的設計在提升使用者體驗的重要性。