Material You是什麼?Material Design3 與2的比較

Material You是什麼?Material Design3 與2的比較
2014年由Google提出設計系統概念Material Design,制定Android App的UIUX規則,字體大小、icon、邊距、色彩、動態效果等等皆有詳細的文件說明,2018年時大幅更新,並不再侷限於APP,包含網頁設計也能使用,隨著2021年Android 12和Pixel 6 的發布, Google 也更新許多應用程式改為" Material You"新一代UI,同時釋出官方文件的 Material Design 3 由Google正式名稱,與前一版的Material Design 2有所區別,本篇文章將介紹Material Design 2和Material Design 3做了哪些變更

Material Design 3與2的不同之處
一、文字大小
Material Design 2
Material Design 2有6種標題變體、2種副標變體、2種正文變體、按鈕、標題和上劃線樣式Material Design 2
Material Design 3
與Material Design 2相較Material Design 3更有規則,以Small(小)、Medium(中)和Large(大)來做大小分類
Material Design 3

二、色彩分類
Material Design 3的色彩分類改為5種 ,Primary(主要色)、Secondary(次要色)、Tertiary(複色)、Neutral(中性色)、Neutral Variant(中性變體鍵顏色)
增加了色彩定義,如第三個主要顏色、錯誤顏色、錯誤顏色的容器等
色彩分類

三、新增Design tokens指引與工具管理色彩
Material Design 3製作了一個新的工具Material Theme Builder可安裝在Figma上使用方便設計者能取用色彩,或是使用web上面的工具即時看到調色與匯出色彩代碼
Material Theme Builder
 
四、Component 的更新
1. 導覽列(top app bar)
以往會用色塊與陰影來區分區塊,Material Design 3現在則是使用表面色調不同來區別

top app bar

2. 浮動操作按鈕(FloatingActionButton)
新的 FAB 的圓角半徑更小,類似圓角矩形,而不是現有 FAB 圓形。有預設樣式可以使用來自主色(primary)、輔助色(secondary)或表面顏色的色調來作為 FAB 色彩
FloatingActionButton

3. 按鈕(Button)
在M3版本預設按鈕使用大圓角,在M2版本時候預設是四周4dp圓角,讓整體更柔和。原本預設按鈕內字體全部大寫,M3改為可包含大小寫
Button  
4. 導航欄/底部導航(navigation bar)
底部導覽也拿掉了陰影部分,容器高度更高,M3時的使用狀態時是用如藥丸形狀的色塊,M2時是讓顏色不使用透明度
navigation bar

5. 卡片(Card)
包含3種形式,有提升的(elevated), 填滿(filled)、 邊框(outlined),在Material Design 3的預設中是無陰影、和具有較低的高度,因此以填滿的卡片式為常見預設樣式
card
Material Design 3 目前的文件主要是給Android開發使用,並且也考慮了摺疊裝置使用。但從其設計變化來看已不再強調陰影,轉而使用色調區塊來辨識,可能跟新的裝置色彩感度有關,以往Material Design 2所挑選的色票都為安全的飽和色,無論裝置的色彩感度如何都能清晰可見,隨著裝置越來越能處理細緻的顏色,也將陰影取消,改為色調不同來區別。未來或許文件會增加web的使用指南,讓我們期待Material Design的進步。
參考文章 :

Migrating to Material Design 3
Google details all the new Material Design 3

更多文章:

  1. 網頁配色怎麼選?使用配色工具挑顏色2
  2. 網頁配色怎麼選?使用配色工具挑顏色1
  3. Material Design-Android網站分析2
  4. Material Design-Android網站分析1
  5. 後台改版Material Design5