1. 簡介
上次更新時間：2021 年 9 月 21 日
應用程式可以採用基線配置、使用者產生的動態色彩或品牌色彩。
準備好深入瞭解 Material You 推出的全新動態色彩功能了嗎？在本實驗室中，您將建立動態調色盤，瞭解色彩系統的運作方式、建立無障礙調色盤的驅動概念，以及使用最新設計工具，以動態色彩呈現應用程式的方法。
課程內容
- Material Design 顏色新功能
- 如何將使用者產生的顏色套用至應用程式
- 實用工具
必要條件
本研究室建立在以下基礎設計概念上：
- 基礎設計概念相關知識：調色盤
- 瞭解目前的 Android 色彩配置和角色
- Figma 相關知識
軟硬體需求
- Figma 帳戶
- Figma 動態色彩 Designlab 檔案
- Figma 外掛程式「Material Theme Builder」
2. 開始操作
設定
如要開始操作，請先存取這個 Designlab Figma 檔案。本研究室所需素材都在這個 Figma 檔案當中。您可以下載並匯入這個檔案，或從 Figma 社群複製。
首先，登入 Figma 或建立帳戶。
從 Figma 社群複製
前往「Visualizing dynamic color in your app with Material Design」檔案，或在 Figma 社群內搜尋「Visualizing dynamic color in your app with Material Design」。按一下右上角的「複製」，將檔案複製到你的檔案中。
檔案版面配置
請大致瀏覽這個檔案。您會發現這個檔案內容獨立完整，開頭是簡介。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。章節和練習彼此相輔相成，因此應該依序完成。
本程式碼研究室會逐步詳細說明這些概念和練習。建議您詳閱這個程式碼研究室，進一步瞭解 Material You 新功能。
從「Intro」畫板開始，有數個依序連結畫板的按鈕，請點選按鈕前往連結。
安裝 Figma 外掛程式
本程式碼研究室會大量使用新的 Figma 外掛程式，產生動態色彩配置和符記。直接從 Figma 社群頁面安裝 Figma 外掛程式，或在 Figma 社群中搜尋「Material Theme Builder」。
3. 色彩概念
什麼是動態顏色？
Material You 將色彩重新想像成更個人化的體驗。透過動態色彩擷取功能，可呈現的色彩體驗範圍大幅擴展。
動態色彩是 Material You 的關鍵部分，其中演算法會從使用者的桌布衍生自訂色彩，並套用至其應用程式和系統 UI。
明亮度
動態色彩的設計宗旨，是為了在不可預測的環境中運作。如要在各種觀看情境中管理對比度，亮度等級是重要屬性，即使產品團隊未測試每個特定顏色組合，也能讓顏色順利組合。
亮度相近的元素無法提供適當的對比度，因此難以辨識；亮度值不同的元素則較容易區分。
色調調色盤
色調調色盤是將單一色相 (動態擷取的顏色) 轉換為一系列相關色調。將顏色轉換為十三種色調後，即可在不同情境中套用一組色調範圍 (稱為色調調色盤)，從元件內的個別元素到整個應用程式主題皆適用。
轉換為色調範圍的顏色。
4. 擷取顏色
從種子到架構
我們來看看動態色彩如何搭配 Material Design 主題設定建構工具運作。
- 開啟 Material Design 主題設定建構工具。選取「動態」後，放入圖片或從檔案瀏覽器選取圖片。請注意，種子顏色會根據圖片更新。
- 系統會從桌布擷取顏色值，並指派「類型」，決定顏色在配色方案中與其他顏色的關係。這些「主要顏色」(右側) 已更新，可反映這些值。
- 接著，這些顏色會轉換為以亮度為準的色調調色盤，產生五種色調範圍，從淺色到深色都有。色調調色盤會在顏色輸出中標示。
- 從五個色調範圍中，將特定色調 (根據亮度) 放入組成配置的預先定義角色。顏色會透過設計權杖對應至配置。
從三次色調範圍建立三次色角色，並對應至元件。
5. 主題和符記
設計符記可讓設計師在 UI 中指派元素的顏色角色，而非設定值，因此能確保產品的彈性和一致性。權杖可做為元素指派角色與角色所選顏色值之間的橋樑。導入動態色彩後，設計時應著重色彩的角色，而非特定色彩，這點更顯重要。
主題包含顏色和字型的 Material Design 符記，可確保設計和程式碼具有單一的基準事實來源，以及使用者產生的調色盤和自訂值。
在 Figma 中，外掛程式會將這些權杖產生為樣式，也就是說，如果使用產生的樣式，就會使用 MD 權杖。
色調調色盤中的顏色會透過設計符記對應至淺色或深色配置。
對應系統會為元件中的每個元素指派色調。
設定權杖
如要將動態顏色套用至設計，我們需要將模擬設定為現有 Material Design 主題中的符記。
- 選取版面配置的影格，然後點選「swap」，即可在右側版面配置中設定所有權杖 (Figma 樣式)，以使用這個主題。選取顏色時，您會看到樣式前置字元更新。
按一下「切換」即可更新所選設計中使用的已連結主題。
- 現在請放入圖片，或從檔案瀏覽器選取圖片。模擬裝置的值會採用從圖片擷取的動態顏色。
- 按一下隨機播放按鈕，系統就會隨機選擇種子顏色，並從中推斷出其他顏色，而非從圖片擷取。這是另一種快速查看動態色彩對設計模擬稿影響的方式。
按一下隨機播放按鈕，即可隨機產生種子顏色。
如果開啟外掛程式時沒有主題，系統會顯示設定畫面，方便您開始使用。「開始使用」會產生預設基準「material-theme」，做為 Figma 樣式群組，可連結至模擬或搭配 Material Design 套件使用。
6. 套用至 UI
提供的版面配置是使用 Material Design Kit 建立，該套件會運用 Material Design 符記，但有幾個未對應的自訂元素。
- 選取文章資訊卡。在填滿中，將樣式 (四點圖示) 設為 material-theme/surface。(你也可以搜尋「表面」)。
- 以類似程序選取資訊卡中的類型，並設為「on-surface」和主要核取方塊。
設計卡片中使用的 Figma 樣式。
接下來，我們要建立其他模擬，以便逐一查看其餘的架構。
建立主題並反覆修正
我們現在已將模擬稿完全連結至動態色彩，但我們也可以建立多個主題，並將這些主題換到不同的模擬稿上，一次顯示一系列的動態色彩。
- 在外掛程式模式中，按一下下拉式選單，然後選取「新增主題」。
- 建立專屬主題名稱，然後按一下「建立主題」。系統也會為每個建立的主題產生新的色碼圖。
透過下拉式選單新增主題。
- 新增圖片或隨機調整主色。
- 在外掛程式模式中，選取模擬裝置 (應用程式 UI 元件)，然後按一下「交換」。這樣一來，樣式值就會更新為下拉式選單中顯示的目前主題。
- 複製模型 (按 Cmd + D 鍵)。
按一下「切換」即可更新所選設計中使用的已連結主題。
- 重複步驟 1 至 5。
現在您有多個設計，且動態色彩的疊代次數不同！
7. 恭喜
恭喜您學會並套用動態色彩！Material Design 主題設定建構工具可讓您輕鬆使用 Material Design 的色彩功能，包括顯示動態色彩、建立自訂主題，以及匯出程式碼。
如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。
更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！