1. 簡介
上次更新時間：2022 年 4 月 18 日
應用程式可以採用基線配置、使用者產生的動態色彩或品牌色彩。
先前的 Material You 顏色實驗室探討了如何在設計模擬中以視覺化方式呈現動態色彩，但您也可以使用 Material Design 主題設定，以品牌顏色自訂應用程式。使用新的色彩系統和品牌顏色，即可建立無障礙色彩配置，並採用更多動態功能！
課程內容
- 如何使用 Material Design 主題設定建構工具建立自訂主題。
- 對設計模擬套用自訂主題。
- 可結合動態和自訂顏色。
必要條件
本研究室建立在以下基礎設計概念上：
- 基礎設計概念相關知識：調色盤
- 瞭解目前的 Android 色彩配置和角色
- Figma 相關知識
- 選用：應用程式的視覺化動態色彩程式碼研究室
軟硬體需求
- Figma 帳戶
- Figma Designlab 檔案
- Figma 外掛程式「Material Theme Builder」
2. 開始操作
設定
如要開始操作，請先存取這個 Designlab Figma 檔案。本研究室所需素材都在這個 Figma 檔案當中。您可以下載並匯入這個檔案，或從 Figma 社群複製。
首先，登入 Figma 或建立帳戶。
從 Figma 社群複製
前往「Customizing Material 」檔案，或在 Figma 社群內搜尋「Visualizing dynamic color in your app with Material Design」。按一下右上角的「複製」，將檔案複製到你的檔案中。
檔案版面配置
瀏覽檔案時，您會發現這個檔案內容獨立完整，開頭是簡介。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。章節和練習彼此相輔相成，因此應該依序完成。
本程式碼研究室會逐步詳細說明這些概念和練習。請參閱程式碼研究室，進一步瞭解 Material You 新功能！
從「Intro」畫板開始，有數個依序連結畫板的按鈕。按一下按鈕即可存取連結。
安裝 Figma 外掛程式
本程式碼研究室會大量使用新的 Figma 外掛程式，產生動態色彩配置和符記。直接從 Figma 社群頁面安裝 Figma 外掛程式，或在 Figma 社群中搜尋「Material Theme Builder」。
3. Material 色彩配置
首先，請先瞭解 Material 中色彩的使用方式，以及新色彩系統的運作方式。
顏色的用途是表現風格，以及傳達對使用者、品牌或在語意上重要的意義。色彩系統會根據使用者輸入內容造成的色彩配置動態變更，處理相關變化情形。色調關係和色相與彩度的變化邏輯，為彈性套用色彩奠定基礎。
色彩空間提供一種方式，可從來源顏色產生 5 種主要顏色和色調調色盤，然後選取特定色調步驟，藉此產生無障礙的淺色和深色色彩配置。
這項色彩轉移技術不僅提供無障礙色彩配置，還提供建立品牌配置的方法，確保配置無障礙且與使用者產生的色彩配置一致。
色彩配置會從 5 種主要顏色生成色調調色盤，以建立無障礙配置
品牌主題
M3 支援系統性地套用自訂參數，協助定義及維護可傳達品牌形象的樣式。
自訂配置並非衍生自使用者裝置桌布的色彩配置，而是來自應用程式開發人員。M3 色彩系統和自訂配置是啟用應用程式動態色彩的基礎。
自訂配置會設定必要的權杖 (顏色位置)，彌合 M2 和 M3 之間的差距，方便您輕鬆遷移，並打造更具品牌特色的體驗。
在 Material Design 主題設定建構工具中新增品牌顏色
4. 色彩配置：強調色
色彩配置的基礎是五組主要顏色，每組皆與 13 種色調的個別調色盤相關。每個色調調色盤中的特定色調會指派給 UI 中的顏色角色。首先，開啟 Material Design 主題設定建構工具外掛程式，然後設定第一個強調色：主要。
如果只輸入主要顏色，系統會將其做為來源，產生完整的色彩配置。
- 在外掛程式模式中，按一下「自訂」。這樣就會將主題切換為自訂主題。在本實驗室中，我們將使用已產生的 Material Design 主題，但您也可以視需要建立新主題，詳情請參閱動態色彩視覺化。
- 接著設定主要按鍵顏色。主要顏色可以是主要品牌顏色，也可以是最常使用的主要強調色。系統會根據主要顏色填入其餘主要顏色。也就是說，如果不需要其他顏色，就不必新增。
5. 建構主題的其餘部分
主要顏色用於產生主題，但您可能需要強調色來支援主要品牌顏色。
- 在外掛程式模式中，按一下「次要顏色」色塊，即可新增次要顏色。次要角色用於 UI 中較不顯眼的元件，同時擴大色彩表現的機會。色彩示意圖和應用程式 UI 中的次要顏色會隨即更新。
- 對「次要」執行相同操作。三次色角色用於對比強調色，可平衡原色和二次色，或加強對某個元素的關注。製作者可自行決定是否使用第三種顏色角色，目的是在產品中支援更廣泛的顏色表達方式。
- 現在中性色角色用於介面和背景，以及高強調文字和圖示。
提供次要色、第三色和中性色，全面自訂色彩配置。
現在，您的品牌顏色會納入核心色彩配置，並配合 M3 色彩空間調整、完全無障礙，且可匯出並在程式碼中實作為主題。
6. 套用主題
角色和符記
每個強調色 (原色、二次色和三次色) 都會提供一組四種不同色調的相容顏色，可用於配色、定義強調效果及呈現視覺效果。這個群組由強調色、對比色、容器和容器對比色組成。
中性角色用於介面、背景、高強調文字和圖示。
設計符記代表構成設計系統視覺風格的小型重複設計決策。符記會將靜態值 (例如顏色的十六進位代碼) 替換成容易理解的名稱。設計符記可有意義地連結樣式選項，否則這些選項之間不會有明確關係。
Figma 外掛程式會建立權杖，並以 Figma 樣式的形式輸入您自己的來源顏色，以便連結現有的模擬、品牌樣式指南，甚至是設計系統。
設計符記會在顏色角色和實作之間建立通用語言。
色彩階層
將顏色角色套用至模擬時，請考量元素的重要性順序或階層。這項概念有助於將品牌顏色指派至其各別角色，以及在 UI 中建立對應關係。通常，飽和度較高或較集中的顏色會先吸引使用者的注意力，這就是為什麼主要顏色角色會對應到更著重於行動號召的元件。雖然 Material Design 主題設定建構工具會使用 M3 色彩系統產生合適的顏色，但如果提供的次要或第三重要顏色飽和度較高，產生的顏色亮度就會高於主要顏色。請根據您希望使用者與 UI 和內容互動的順序，指派顏色角色，並非所有元件都應使用 Primary。
飽和的實心色彩最能吸引目光。
7. 切換至主題
如要將建立的自訂主題套用至設計，我們需要將模擬設定為現有 material-theme 中的符記。
Material Design 元件已預先對應角色，可自動與 Material Design 主題建立工具搭配使用。
從 Material Design 主題設定建構工具模式切換至主題。
- 選取版面配置的影格，然後按一下「交換」，即可在右側版面配置中設定所有權杖 (Figma 樣式)，以使用這個主題。選取顏色時，您會看到樣式前置字元更新。
- 並非所有內容都已更新？自訂元件 (例如植物照護提示資訊卡) 必須先套用 Figma 樣式。選取照護提示容器，然後按一下 4 點圖示指派樣式，並選取「次要容器」。對「照護提示」資訊卡的內容執行相同操作，但要指派 on-tertiary container。清單中的小型標籤也是自訂元件，但我們稍後會再回顧這些標籤！
- Material Design 元件使用的是預設對應項，但您可以嘗試指派樣式，找出最適合 UI 的做法。請花點時間嘗試不同的顏色階層和品牌表現。
(程式碼的匯出檔案只會包含主題。如果與工程師合作，請分享模擬畫面來傳達權杖對應，因為這不會包含在匯出內容中)
如果開啟外掛程式時沒有主題，系統會顯示設定畫面，方便您開始使用。「開始使用」會產生預設的基準「material-theme」，做為 Figma 樣式群組，可連結至模擬或搭配 Material Design 套件使用。
8. 擴展核心架構以外的範圍
您現在已將品牌顏色主題對應至元件和設計模擬，但可能還有其他顏色需要納入。這時，您可以使用擴充配置新增自訂顏色。
這些顏色可以是語意色、品牌專屬色，甚至是產品專屬色，必須指派角色並透過色彩演算法轉移，或保留為輸入的顏色。
擴充色彩配置也引進了將動態 (使用者產生) 色彩與品牌色彩結合的可能性。允許核心配置具有個人化使用者影響力，而品牌顏色則設定在擴充配置中。也就是說，UI 元素可以更符合使用者需求，且品牌顏色在應用程式中能更精準地發揮影響力。
核心配置可擴充，納入自訂顏色。
9. 擴充和自訂
使用自訂顏色擴充配置，即可新增語意或額外品牌顏色等顏色。
新增自訂顏色的自訂配置。
- 在外掛程式模式中，按一下主要顏色下方的「新增顏色」。
- 目前的佈景主題會更新，並新增 Custom0 列。按一下色井，然後選取新顏色，即可更新這個顏色。
- 這些擴充顏色會以「Custom0」Custom0的形式，顯示在唯讀樣式中。兩者的色調和配色都存在。讓我們選取標籤背景，並指派其中一個新增顏色的角色 (on-custom0 container)，將部分清單標籤對應至新顏色。
在所選顏色中設定自訂顏色。
- Material Design 主題設定建構工具會自動產生顏色，並命名為「Custom#」。如要重新命名新增的自訂顏色，請在樣式面板中展開主題的樣式群組 (未選取任何項目時會顯示)。然後在來源子群組中尋找 Custom0。在此重新命名來源，外掛程式模式中的顏色也會重新命名。
自訂顏色樣式會顯示在樣式面板中。
- 如要刪除新增的顏色，請以類似方式按一下滑鼠右鍵，然後刪除樣式。下次開啟外掛程式時，系統會移除新增的顏色。重新命名和刪除的動作可能不會反映在顏色圖中。
10. 恭喜
您已學會如何使用 Material Design 主題設定建構工具建立自訂顏色主題、將其套用至設計模擬，以及新增至色彩配置，真是太棒了！全新的 Material 3 色彩系統可為設計帶來無障礙、彈性且一致的色彩，我們很期待看到您如何運用這些色彩！
如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。
更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！