### 介紹 Material 3
- Material 3 是 Google 最新的 Material Design 標準
- 取代舊版 Material 2，帶來新設計風格與功能
- 本影片介紹 Material 3 的色彩理論，下一部影片示範如何將 Jetpack Compose 應用程式從 Material 2 遷移到 Material 3

### Material 3 的主要特色



- Google 官方應用已遷移至 Material 3，如 Google Drive、計算機等
- 支援動態色彩（Dynamic Colors），Android 12+ 可根據桌布自動生成應用程式主題顏色
- 讓所有 Material 3 應用程式風格統一
- 用戶可在「桌布與風格」設定中選擇系統推薦顏色

### 動態色彩示範
- 當變更系統主題顏色（如選擇橙色）時，支援 Material 3 的應用程式（如計算機）會同步變更
- 具備動態淺色主題與動態深色主題，會根據系統設定（深色/淺色模式）自動適應

### Material 3 色彩系統概覽
- 新增更多主題顏色，比 Material 2 更加細緻
- 主要色彩分類包括 Primary（主要顏色）、Secondary（次要顏色）、Tertiary（第三顏色）

### 顏色應用原則

- Primary（主要顏色）用於最重要的 UI 元素（如按鈕、標題），但不宜過度使用
- Secondary（次要顏色）輔助主要顏色，提供層次感，與 Primary 顏色有一定對比但不過於突出
- Tertiary（第三顏色）可選擇性使用，如計算機中的 AC（清除）按鈕，讓特定元素突出但不搶走 Primary 的注意力

### 新增的 Container 顏色概念

- Container 顏色用於 UI 元件的背景，而非元件本身
- 主要 Container 顏色包括 Primary Container（主要容器色）、On Primary Container（主要容器前景色）
- 與 Material 2 不同，在 Material 3，Floating Action Button（FAB）建議使用 Primary Container 而非 Primary 色，以讓設計更柔和

### Material 3 讓 UI 設計更靈活
- 透過動態色彩，提供一致的使用者體驗
- 透過擴展的色彩系統，提升 UI 的層次與可讀性
- Container 概念讓按鈕與其他元件的背景更有區隔性
### 中性色與背景色

- 中性色用於背景與表面（Surface）元素
- 表面（Surface）可用於卡片、對話框等，顏色可能與背景相同或不同
- On Background 用於顯示在背景色上的文字或圖示
- On Surface 用於顯示在表面色上的文字或圖示
- Surface Variant 可作為 Surface 的變體，提供額外的顏色選擇

### 錯誤顏色（Error Colors）

- 用於顯示應用程式中的錯誤狀態
- Error 主要錯誤顏色，通常為紅色
- Error Container 適用於錯誤訊息框，通常為較淺的紅色
- On Error Container 用於錯誤容器上的文字或圖示

### 產品特定的自訂顏色

- 可用於品牌顏色，不受動態色彩影響
- 例如 Google 應用程式的標誌色（藍、紅、綠、黃）不會隨系統主題變更

### 反向顏色（Inverse Colors）

- 主要用於對比背景，如淺色主題的深色 Snackbar
- Inverse Surface 為 Surface 的反向顏色
- Inverse On Surface 為 Inverse Surface 上的文字或圖示顏色
- Inverse Primary 用於反向環境中的主要顏色

### 輪廓顏色（Outline Colors）

- Outline 用於邊框，如輸入框的外框線條
- 確保 UI 元素邊界明確，提升可讀性

### 色調選擇與亮度調整

- Material 3 根據色調（Tone）來選擇顏色
- 亮度值（0% - 100%）影響顏色深淺，0% 為黑色，100% 為白色
- HTML Color Picker 可用來挑選顏色並查看不同亮度的變化
- Google 提供 Jetpack Compose 參考應用，展示不同顏色如何應用於 UI

### 形狀（Shape）

- 可在主題中統一設定 UI 元件的形狀
- 常見形狀類型包括 Rectangle（無圓角）、Extra Small（極小圓角）、Small / Medium（小 / 中等圓角）、特殊形狀（如特定 UI 元素的自訂形狀）
- 例如聊天應用可設定對話框的統一形狀

### 字體與排版（Typography）

- Material 3 提供不同層級的字體樣式
- 主要分類包括 Display（大標題）、Headline（標題）、Title（子標題）、Label（標籤）、Body（內文）
- 每種分類均有 Large、Medium、Small 變體，適用於不同需求

# Terminology
- **Material 3**：Google最新的Material Design標準，用於設計現代化應用程式UI。
- **Material 2**：Material Design的上一代版本，提供較少的色彩選擇和樣式。
- **Jetpack Compose**：Android的現代UI工具組，允許開發者使用Kotlin建立直覺化的UI。
- **主色（Primary Color）**：應用程式的主要色彩，用於突顯重要元素。
- **次要色（Secondary Color）**：輔助主色的色彩，通常用於較不突出的元件。
- **第三色（Tertiary Color）**：額外的可選色彩，通常用於特殊用途的元件。
- **動態色彩（Dynamic Colors）**：根據使用者的桌布生成的主題色彩，提供一致的視覺體驗。
- **主題色彩（Theme Colors）**：應用程式整體配色方案的集合，包括主色、次要色等。
- **亮色模式（Light Mode）**：應用程式的淺色主題，適合日間使用。
- **暗色模式（Dark Mode）**：應用程式的深色主題，適合低光環境使用。
- **主色容器（Primary Container）**：比主色更淡的顏色，適用於背景或次要按鈕。
- **次要色容器（Secondary Container）**：比次要色更淡的顏色，適用於次要背景。
- **第三色容器（Tertiary Container）**：比第三色更淡的顏色，適用於特殊元件。
- **錯誤色（Error Color）**：用於表示錯誤或警告的紅色調。
- **表面色（Surface Color）**：應用程式表面（如卡片背景）的主要顏色。
- **背景色（Background Color）**：應用程式的主要背景色，通常比表面色更淺。
- **輪廓色（Outline Color）**：用於邊框或分隔線的顏色，提供視覺區分。
- **反向表面色（Inverse Surface）**：用於對比強烈的背景，以確保可讀性。
- **主要文本顏色（On Primary）**：應用於主色之上的文字或圖示顏色。
- **次要文本顏色（On Secondary）**：應用於次要色之上的文字或圖示顏色。
- **主要容器文本顏色（On Primary Container）**：適用於主色容器的內容顏色。
- **錯誤容器（Error Container）**：錯誤訊息的背景色，提供較柔和的錯誤提示。
- **錯誤容器文本顏色（On Error Container）**：適用於錯誤容器的文字顏色。
- **適應性字體（Adaptive Typography）**：根據裝置螢幕大小自動調整字體大小。
- **材質主題（Material Theming）**：可客製化Material Design元件的系統。
- **形狀系統（Shape System）**：控制按鈕、卡片等元件的邊角半徑和形狀。
- **高光層（Elevation Overlay）**：在暗色模式下模擬陰影效果，使UI更具層次感。
- **按鈕變體（Button Variants）**：Material 3提供不同類型的按鈕，如Filled、Outlined等。
- **填充按鈕（Filled Button）**：實心背景的按鈕，適用於主要操作。
- **描邊按鈕（Outlined Button）**：僅有邊框的按鈕，適用於次要操作。
- **文本按鈕（Text Button）**：無邊框的按鈕，適用於次要操作或連結。
- **浮動操作按鈕（FAB, Floating Action Button）**：懸浮在畫面上的主要行動按鈕。
- **擴展式FAB（Extended FAB）**：帶有標籤的浮動操作按鈕。
- **導航列（Navigation Bar）**：應用程式底部的導航欄，可快速切換頁面。
- **導航抽屜（Navigation Drawer）**：側邊滑出的選單，用於切換不同區域。
- **分頁欄（Tab Bar）**：頂部的分頁切換控制元件。
- **卡片（Card）**：顯示資訊的容器，通常帶有陰影效果。
- **對話框（Dialog）**：彈出式視窗，用於提示使用者或要求輸入。
- **通知橫幅（Snackbar）**：短暫顯示的訊息，用於提示操作結果。
- **進度條（Progress Indicator）**：顯示操作進度的元件，可為圓形或線性。
- **拉動刷新（Pull-to-Refresh）**：向下滑動重新整理內容的手勢。
- **可折疊元件（Collapsible Components）**：可展開與折疊的元件，如手風琴式列表。
- **拖曳手勢（Drag Gesture）**：支援拖曳操作的UI互動。
- **動態色彩適用性（Dynamic Color Adaptation）**：確保動態色彩在各種UI元素上的可讀性。
- **系統色彩對應（System Color Mapping）**：將動態生成的顏色映射到Material 3的色彩系統。
- **佈局自適應（Responsive Layout）**：根據螢幕大小自動調整佈局。
- **語意色彩（Semantic Colors）**：根據用途（如成功、警告、錯誤）定義顏色，而非純粹視覺效果。
- **可存取性（Accessibility）**：確保UI符合無障礙標準，如對比度與文字大小。
- **動畫與轉場（Motion & Transitions）**：Material 3提供的動畫效果，如漸變與縮放。
- **區塊陰影（Shadow Elevation）**：控制元件的陰影高度，以營造層次感。
- **透明度變化（Opacity Variation）**：根據使用情境改變元件的不透明度。
- **適應性圖示（Adaptive Icons）**：可根據不同設備與主題自動調整的應用程式圖示。
- **中性色（Neutral Colors）**：用於背景和表面顏色，確保UI的穩定性和可讀性。
- **表面（Surface）**：指的是應用程式內的可視區域，如卡片或容器。
- **表面變體（Surface Variant）**：表面的變化版本，可用於次要背景或區隔內容。
- **背景色（Background Color）**：應用程式的主要背景色，與表面色類似但用途更廣。
- **表面上的顏色（On Surface）**：應用於表面上的文字或圖示，確保可讀性。
- **背景上的顏色（On Background）**：應用於背景上的文字或圖示，確保對比度適當。
- **錯誤色（Error Color）**：用於錯誤訊息的顏色，通常為紅色或警告色。
- **錯誤容器（Error Container）**：用於錯誤訊息背景的顏色，提供更柔和的顯示方式。
- **錯誤容器上的顏色（On Error Container）**：適用於錯誤容器內的文字或圖示。
- **產品專屬顏色（Product-Specific Colors）**：品牌或產品固定的顏色，不受動態色彩影響。
- **反向顏色（Inverse Colors）**：用於強調特定UI元素，例如深色背景上的淺色按鈕。
- **反向表面色（Inverse Surface）**：與表面色相反的顏色，用於對比設計。
- **反向表面上的顏色（Inverse On Surface）**：適用於反向表面上的文字或圖示。
- **反向主色（Inverse Primary）**：與主要顏色相對應的反向色，可用於強調UI元素。
- **輪廓色（Outline Color）**：用於邊框或分隔線，使元素更易於識別。
- **色調系統（Tonal System）**：根據顏色亮度（0-100%）選擇適合的色調。
- **HTML顏色選擇器（HTML Color Picker）**：工具可用來查找不同亮度的顏色代碼。
- **亮度百分比（Lightness Percentage）**：控制顏色的亮度範圍（0%為黑，100%為白）。
- **顏色變體（Color Variants）**：從基礎顏色生成不同亮度與飽和度的版本。
- **主要色調（Primary Tone）**：應用程式主要的標誌性色調。
- **次要色調（Secondary Tone）**：用於輔助主色的調和色調。
- **第三色調（Tertiary Tone）**：額外可用的顏色變化，可用於區分重要性較低的元素。
- **形狀系統（Shape System）**：定義應用程式中UI元素的形狀與邊角樣式。
- **形狀類型（Shape Type）**：包含矩形、圓角、圓形等不同形狀。
- **額外小型形狀（Extra Small Shape）**：最小的圓角設定，通常接近矩形。
- **小型形狀（Small Shape）**：帶有輕微圓角的形狀。
- **中型形狀（Medium Shape）**：適中的圓角設定，常見於按鈕或輸入框。
- **自訂形狀（Custom Shape）**：開發者可以定義特殊形狀以符合應用需求。
- **文字排版（Typography）**：定義應用程式內各類文字的大小、字重與風格。
- **標題字體（Headline Typography）**：用於主要標題，字體較大，具有強調作用。
- **顯示字體（Display Typography）**：適用於特大字體，主要用於標誌或大型標題。
- **標題大（Headline Large）**：最大的標題樣式，適用於主要標題。
- **標題中（Headline Medium）**：標題大小適中，適用於次要標題。
- **標題小（Headline Small）**：最小的標題樣式，適用於一般標題。
- **標題與副標（Title & Subtitle）**：較標題小一級，通常用於區分內容區塊。
- **標籤字體（Label Typography）**：用於按鈕或標籤的文字。
- **正文字體（Body Typography）**：應用於一般內文，確保可讀性。
- **類別分級（Type Scale & Tokens）**：Material 3 提供的字體等級與預設風格。
- **顯示字體大（Display Large）**：特大標題字體，通常用於應用程式的主標題。
- **顯示字體中（Display Medium）**：次大標題，適用於強調內容。
- **顯示字體小（Display Small）**：適用於次要標題或大型說明文字。
- **標題字體（Headline）**：應用於較重要的標題，如區塊標題或主要導航。
- **標題大（Headline Large）**：主要標題，較顯示字體小但仍有強調作用。
- **標題中（Headline Medium）**：適用於次標題，提供較佳的層次感。
- **標題小（Headline Small）**：適用於較細緻的標題，如小型區塊標題。
- **標籤字體大（Label Large）**：適用於按鈕或標籤，清楚標示功能。
- **標籤字體小（Label Small）**：適用於較小的標籤，如輔助資訊顯示。
- **正文大（Body Large）**：適用於一般內文，確保可讀性。
- **正文中（Body Medium）**：適用於次要內文，適合長篇內容。
- **正文小（Body Small）**：適用於較細緻的內文，如註釋或額外資訊。
- **動態主題（Dynamic Theming）**：允許應用程式根據系統或用戶設置變更主題色彩。
- **全局樣式（Global Styles）**：可在整個應用程式內使用的顏色、字體與形狀設定。
- **系統級主題（System-Level Theming）**：允許應用程式依照系統的顏色與設定自動調整UI。