Material Design

Material Design 是做什麼的？

數位表面就像有厚度與陰影的紙張，深度與動態說明了介面的層級結構。

一個由平坦彩色表面組成的系統，位於定義好的高度，並從左上角的主光源投射陰影；搭配大膽的色彩、8dp 網格以及有目的的動態。Google 在 2014 年 6 月的 I/O 大會上發表。

時間： 2014–至今 · 時代： 觸控螢幕 · 領域： 平面與 UI 設計 · 別名： Material、Google Material、Material 2

何時載入此技能

當使用者提及以下關鍵字時載入：「material design」、「material ui」、「google material」、「elevation」、「floating action button」、「fab」、「android style」、「ripple effect」、「app bar」、「paper and ink」、「md2」。

適用於：Android 應用程式、管理儀表板、有許多元件的網頁應用程式、設計系統、生產力工具。

請勿使用於：

• 品牌需要獨特風格時，因為預設外觀明顯來自 Google。
• 頁面為編輯導向且互動元件較少時。
• 設計需要完全無陰影的純 2D 風格時。

系統指令

當使用 Material Design 產生 UI 或圖形佈局時，你必須：

1. 將每個表面視為 1dp 厚的紙張，不會彎曲、不會伸縮變形、也不會穿過其他表面。
2. 使用 dp 高度展現層級：頁面為 0、卡片為 1、應用程式列為 4、浮動按鈕靜止時為 6、選單為 8、導覽抽屜為 16、對話框為 24。
3. 每個佈局都建立在 8dp 網格上，小型文字與圖示對齊使用 4dp，觸控目標為 48dp。
4. 使用主色與強調色的對比色調，狀態列使用主色的 700 色階，應用程式列使用 500 色階。
5. 使用 Roboto 字體，依照 12、14、16、20、34、45 與 56sp 的定義比例，並採用大字級。
6. 為每次觸控提供回應：一個從觸控點開始、持續 300ms 擴散的圓形漣漪。
7. 使用曲線路徑移動元素，搭配先快後慢的緩動曲線，且每個動畫都要解釋元素的來源。

護欄

以下每一行都違反了此風格。在回覆前，請檢查你的輸出是否符合這份清單。

• 永不： 在表面使用漸層與紋理。
• 永不： 沒有一致高度或不同光線方向的陰影。
• 永不： 相同高度重疊的表面。
• 永不： 小於 48dp 的觸控目標。
• 永不： 彩色背景上的彩色文字低於 4.5:1 對比度。
• 永不： 沒有動畫或漣漪回饋的即時狀態改變。
• 永不： 一個畫面超過一個浮動動作按鈕。

向量設定檔

軸線	分數	1 分代表	5 分代表
裝飾性	■■□□□ 2/5	純粹極簡	極致繁複
立體感	■■■□□ 3/5	嚴格 2D	完整 3D / 空間
網格剛性	■■■■□ 4/5	混亂 / 有機	嚴謹數學網格
擬物寫實	■■□□□ 2/5	抽象數位	擬真材質
字體表現力	■■□□□ 2/5	中性 / 隱形	實驗 / 說明性

請維持這些分數。如果一個請求使某個軸線偏離 2 分或以上，則表示你已脫離此風格：請前往「風格演進備援」。

空間與網格邏輯

• 網格機制： 一個 8dp 基準網格，圖示與文字使用 4dp；手機為 4 欄網格搭配 16dp 邊距，平板為 8 欄網格搭配 24dp 邊距，桌面為 12 欄網格；應用程式列在手機上為 56dp，桌面上為 64dp。
• 留白比例： 25–40% 的表面保持空白；間距比例為 4、8、16、24、32、48、56dp，卡片內距為 16dp。
• 對齊規則： 在包含頭像的清單中，內容從左側邊緣對齊 72dp 的關鍵線；否則對齊 16dp 的關鍵線。浮動動作按鈕位於距離右側與底部邊緣 16dp 處。
• 容器幾何： 卡片與按鈕使用 2dp 的圓角半徑；浮動動作按鈕為 56dp 的圓形，迷你按鈕為 40dp；對話框最小寬度為 280dp。

字體排印

• 分類： 新無襯線體 · 人文無襯線體
• 字距： 顯示尺寸（34sp 及以上）使用 0em 到 -0.01em；內文使用 +0.01em；按鈕為大寫並使用 +0.09em。
• 行高： 標題 1.2；內文 1.4 到 1.5（14sp 搭配 20dp 行高）；清單文字 24dp 搭配 16sp。
• 層級規則：
  • 使用 12、14、16、20、34、45 與 56sp 的比例，不使用介於這些數值之間的大小。
  • 使用 medium（500）字重作為標題與按鈕，regular（400）作為內文，light（300）作為 45sp 及以上的顯示尺寸。
  • 表面上的文字設定為：主要文字為 87% 黑色，次要文字為 54% 黑色，停用文字為 38% 黑色。
  • 按鈕標籤為大寫，14sp，字重 500。

字型搭配

顯示字型	內文字型	備註
Roboto	Roboto	Material 1 和 2 的系統字型，使用單一字體家族，重量從 300 到 900。
Roboto Condensed	Roboto	壓縮顯示字型，適合密集的標題，搭配標準內文字型。
Noto Sans	Noto Sans	非拉丁文字的備援字型，具有相同的重量與度量。

色彩與光照

• 色板結構： 一個主色（包含其 500 與 700 色階）、一個來自 A200 到 A400 範圍的強調色，以及中性灰色；主色覆蓋應用程式列與 10% 到 20% 的表面。
• 對比規則： 內文至少保持 4.5:1，大文字至少保持 3:1；白色文字在 Indigo 500 上達到 7.5:1，在 Pink A200 上達到 3.4:1，僅適用於 18sp 以上的文字。
• 表面處理： 不透明、純色、無漸層、無紋理的平面填色；遮罩在對話框後方使用 32% 不透明度的黑色。
• 光線與陰影： 來自上方的主光源與柔和的環境光；每個陰影都有半影區、本影區與環境層，其模糊與偏移量隨高度增加。

調色盤

名稱	十六進位顏色	角色
表面色	#FFFFFF	卡片與頁面表面
背景色	#FAFAFA	頁面背景
Indigo 500	#3F51B5	主色與應用程式列
Indigo 700	#303F9F	狀態列
Pink A200	#FF4081	強調色與浮動動作按鈕
Grey 900	#212121	87% 不透明度文字

材質與紋理

• 表面模擬： 數位紙張：一個 1dp 厚的平坦紙張，會投射陰影，但沒有紋理、沒有斜角、沒有材質。
• 邊框規則： 表面沒有輪廓線；分隔線為 1px 黑色 12% 不透明度，從邊緣內縮 72dp 或 16dp；文字欄位使用 1px 底部線條，聚焦時變為 2px。
• 模糊與高度： 高度陰影：1dp 為 0 1px 3px 20% 加上 0 1px 1px 14%；4dp 為 0 4px 5px 14% 加上 0 1px 10px 12%；12dp 為 0 9px 12px 14%；系統有 0 到 24dp 共 25 個層級。

裝飾與圖示

• 圖示： 系統圖示為 24dp，活躍區域 20dp，筆畫粗細 2dp，方形端點搭配 2dp 圓角，實心填充，單色，54% 黑色。
• 插圖： 使用調色盤中的平面向量形狀，與全版攝影搭配 20% 到 40% 的遮罩；無輪廓線、無透視。
• 裝飾元素： 浮動動作按鈕 · 漣漪 · 高度陰影 · 色塊應用程式列 · 全版主圖 · 卡片

動態與互動性

• 原生於螢幕： 是
• 轉場物理： 表面沿 Z 軸與螢幕平面以曲線路徑移動；元素快速加速並柔和減速，共享元素從起點移動到終點。
• 緩動曲線： cubic-bezier(0.4, 0, 0.2, 1)
• 持續時間（毫秒）： 300
• 懸停與點擊： 懸停時添加 4% 黑色覆蓋層；按下時顯示從觸控點擴散的 12% 黑色漣漪，持續 300ms；凸起按鈕在按下時從 2dp 提升到 8dp。

程式碼與記號入門

在根元素上設定 data-style="material-design" 並貼上記號。檔案 tokens.css 包含相同的記號與一組參考規則。

[data-style="material-design"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: rgba(0, 0, 0, 0.87);
  --color-muted: rgba(0, 0, 0, 0.54);
  --color-primary: #3F51B5;
  --color-accent: #FF4081;
  --color-border: rgba(0, 0, 0, 0.12);
  --font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --border-radius: 2px;
  --border-width: 1px;
  --shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --color-primary-dark: #303F9F;
  --shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  --shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  --touch-target: 48px;
  --color-on-bg: #212121;
  --color-on-surface: #212121;
  --color-on-primary: #FAFAFA;
  --color-on-accent: #212121;
  --color-muted-on-bg: #737373;
  --color-muted-on-surface: #757575;
  --color-link: #3F51B5;
  --color-link-on-surface: #3F51B5;
  --display-weight: 300;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 500;
  --label-weight: 500;
  --display-tracking: 0em;
  --display-leading: 1.15;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwind 模式：

元素	Classes
頁面	min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased
應用程式列	flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]
卡片	rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)]
按鈕	h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl
fab	h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)]

視覺包

此風格的圖片與圖示為檔案。請直接使用它們，或將它們作為規格閱讀，並用相同的語言自行繪製。

檔案	內容
pack/hero.svg	主圖版，800 x 600。一張符合此風格視覺語言的抽象圖片。
pack/pattern.svg	圖案磚，80 x 80。可雙向重複。
pack/icons.svg	圖示拼合圖：home、search、heart、star、bell、user、mail、calendar、image、bolt、play、check、close、sliders。

• 圖示： 實心、筆畫 2、24px 欄位、平頭端點、圓角連接、無容器。使用：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。圖示使用 currentColor。
• 圖示家族： 拼合圖取自 Material Symbols（Baseline, filled），由 Google 提供，授權 Apache 2.0。原因：此風格本身的系統填充圖示集，位於其 24dp 網格上。它是一個用於示範的開源替代品。對於正式產品，請使用品牌的圖示庫，並根據以下規則選擇家族。
• 顯示文字： 字重 300、字距 0em、行高 1.15、無大小寫轉換。
• 字重： 顯示 300、副標題 500、內文 400、粗體文字 500、標籤與按鈕 500。此風格僅使用 3 個字重（300、400、500），沒有其他。顯示字重比內文字重輕 100，因此由大小來承載層級。重點在於字重：較重的字是重點，因此各字重之間的差異很明顯。
• 內文： 16px，行高 1.5。
• 頁面： 主圖分割、左對齊、常規密度、強調傾斜 0°。
• 文字顏色： --color-text 僅用於主要閱讀區域。在每個區域，使用其對應的記號：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何選擇圖示包

圖示包是圖片的字體。請像選擇文字字體一樣謹慎選擇。這些規則適用於開源套件與授權庫。

1. 筆畫與主幹匹配。 將圖示與其文字大小的內文並列。圖示的線條與字母的主幹具有相同的粗細。
2. 端點與角落跟隨圓角記號。 平頭端點與斜接連接搭配半徑為零。圓頭端點與圓角連接搭配柔和的半徑。
3. 填充模式跟隨時代技術。 印刷時代使用實心形態。具有深度的螢幕時代會填充並為形態添加陰影。當前的產品介面則繪製輪廓。
4. 隱喻不應比風格更年輕。 每個圖片都是該時代已知的物件。帶有較晚時代隱喻的圖示會破壞風格。
5. 一個家族，一個網格。 所有圖示來自一個家族與一個變體，繪製在一個欄位上。請勿在同一個表面上混合不同的家族。
6. 家族涵蓋產品。 在決定之前，列出產品所需的每個概念。如果一個家族缺少其中任何一個圖示，那就是錯誤的家族。
7. 顏色是記號。 圖示使用 currentColor。第二種色調來自記號，而非檔案。
8. 授權允許使用。 閱讀套件的授權條款。在授權要求的地方給予註明。具有品牌的產品應使用其授權庫，並套用相同的規則來選擇家族。

風格演進備援

當使用者要求變化時，請勿即興創作。請朝此處命名的相鄰風格靠攏，並載入其技能。

• 如果使用者要求更平面：朝向 flat-design（平面設計）。移除所有高度陰影，僅透過顏色區分表面，保留色彩調色盤與 8dp 網格。
• 如果使用者要求更具質感：朝向 skeuomorphism（擬物化）。添加 5% 到 10% 的漸層、1px 的內緣高光與 5% 透明度的表面紋理；保留高度與佈局。
• 如果使用者

…

[因翻譯而截斷]