第三章節《樣式》
一、顏色（Color）
Material Design的色彩受大膽活潑的色調啟發，並配合柔和的環境，陰影和高光組成。
顏色工具（Color Tool）
顏色工具可以幫助你在UI中建立、分享和使用調色盤，以及測試不同顏色組合的可訪問（accessibility）級別。
建立配色方案
建立配色方案，其中包括主、次色較暗和較亮的配色版本。
測試可訪問性
檢查在不同顏色背景下文字的易讀程度，以 web內容可訪問性指南 的易讀性標準來評定。
在顏色中預覽UI
通過Codepen中的可編輯 html、css 或 javas cript，並結合Material Design中的元件佈局來預覽配色方案。
Color Tool（Create color palettes for your UI and test color accessibility）
調色盤（Color palette）
調色盤包括主色（Primary color）、強調色（Accent color）。調色盤可以用於插畫或品牌顏色。它能夠幫助你配合其他人的工作。調色盤以主色為基準，通過填充spectrum（光譜）形成一套完整可用的顏色。Google建議用“500”作為主色，其它的顏色作為強調色。
通過統一色調、陰影和透明度能夠讓應用看起來更統一。
下載色板 0.02MB（.zip）
顏色系統（Color system）
選擇一個配色方案
你的應用可以根據相應的品牌特性去自定義一個合適的配色方案。或者，你也可以使用material design的調色盤建立整個新的配色方案。
建立配色方案時：
- 使用顏色工具建立的色板應用到你的應用中去
- 確保應用中的元素之間有足夠的對比區分（應用需符合可訪問性標準）
Expressing Brand in Material（A step-by-step guide to staying on-brand with Material Design）
Material Design的顏色系統
在Material Design中，主色是應用中最常用的顏色。輔助色則是為了凸顯應用中的部分UI。
可以選擇或可以不選擇使用Material Design調色盤中的顏色。
主色（Primary color）
主色是應用中介面和元件使用最頻繁的顏色。如果頁面中沒有輔助色存在，那麼主色也可用於強調元素。
如果需要建立元素之間的對比，可以使用主色的更淺或更深的色調版本。更淺和更深色調間的對比有助於區分面與面之間的關係，例如狀態列和工具欄之間的區分。
輔助色（Secondary color）
輔助色一般用於突出UI中的某些元素。輔助色可以是你主色的互補色或與主色相近的顏色，但不可以是你主色的更淺或更深的顏色。輔助色與周邊元素顏色必須形成對比，它作為強調元素之用必須謹慎使用。
輔助色最好用於：
- 按鈕，浮動按鈕和文字按鈕
- 文字欄位，游標和文字選擇
- 進度條
- 選擇控制元件，按鈕和滑塊
- 連結
- 標題（Headlines）
如果你使用主色的“變種”顏色（如比主色更淺或更深的色調）作為強調元素之用，那麼可以不使用輔助色去突出元素。也就是說，是否使用輔助色關鍵看你自己的需要。
在你的應用中使用顏色
主色用於大面積的UI及元素。輔助色可用於突顯小面積的UI。如果沒有輔助色的話，你可以使用主色代替。
使用主色突顯元素，例如突顯按鈕或核取方塊。
很少出現的元素（例如警告）不要使用主色，應與其他元素區分開。
輔助色和用於突顯UI元素的任何東西都需要謹慎對待和使用。
關於顏色在字型排版易讀性方面的指導請看 顏色工具 。
備用的輔助色
如果你的輔助色相對於背景色太深或者太淺，與背景顏色形成了太過於強烈的對比，預設的做法是選擇一個相對這個顏色更淺或者更深的顏色作為備用色。
可用性
層級
層次結構指的是根據不同層級的重要性對內容進行組織。合理利用顏色可以向使用者表達哪些內容是重要的，哪些內容相對沒那麼重要。
例如，在無色的背景上（黑或白）， 一個顏色鮮豔的按鈕會顯得非常突出。
意義
顏色可用於傳遞頁面中各種元素的含義。天氣應用可以使用顏色來表示當前天氣的狀況，而地圖應用可以使用顏色來表示交通情況（路況顏色為紅色或綠色）。
狀態
顏色可以提供以下資訊：
- 元素的當前狀態, 如開啟或禁用按鈕
- 一個應用或元素的狀態變化
表示狀態變化的顏色應該是引人注目的，因為差異細微的顏色使用者可能注意不到。為了確保使用者能夠注意到狀態的變化，最好使用多種方式來表示狀態變化，例如使用icon或移動元素的位置。
對比
應用的主色和輔助色應確保元素之間的顏色擁有足夠的對比度，進而使所有使用者都能看到和能使用你的應用。
要了解有關顏色、對比度和可訪問性（無障礙）設計的詳細資訊，請閱讀 Material Design的可訪問性/無障礙 。
考慮顏色的功能可見性（affordances）。站在更高層次來看待顏色，你需要使用顏色去向使用者傳遞資訊。
對於患有白內障的個體來說，小文字閱讀起來非常困難，在他們眼中你的UI是模糊不清的。
為適用於所有使用者，提供放大文字的設定。
背景中的文字
文字需要在其背景中突顯出來，因此建議：
- 暗灰色文字應用在淺色背景上
- 淺灰色文字應用在深色背景上
如果你的應用有淺色和深色主題，那麼文字的顏色就需要對應主題的顏色。
易讀性
文字在有色背景上需滿足可訪問性標準保證文字的易於辨別。背景和文字必須使用顏色和不透明度，並遵循可訪問性標準。網站內容可訪問性指南（AA） 要求普通文字要有4.5:1的對比度，大文字需要有3:1的對比度。
深色文字在淺色背景上
文字背景是深色還是淺色決定了文字自身的不透明度。對於淺色背景上的深色文字，使用如下不透明度：
- 最重要的文字使用87%不透明度
- 次級文字的可視等級較低，所以使用54%不透明度
- 文字提示（如文字欄位和標籤）和禁用文字的可視等級更低，所以使用38%不透明度
| 深色文字（#000000） | 不透明度 |
|---|---|
| 主色 | 87% |
| 輔助色 | 54% |
| 禁用文字，提示文字 | 38% |
| 分隔線 | 12% |
淺色文字在深色背景上
白色文字在有色背景上的不透明度需要是100%。
| 淺色文字（#FFFFFF） | 不透明度 |
|---|---|
| 主色 | 100% |
| 輔助色 | 70% |
| 禁用文字，提示文字 | 50% |
| 分隔線 | 12% |
Icons和其他元素
像icons這樣的元素得益於它在38%的不透明度上有一個黑色或白色的十六進位制值(而不是一個特定的顏色)，所以它可以運用在任何顏色的背景之上。
| 深色icons（#000000） | 不透明度 |
|---|---|
| 被觸發icons | 54% |
| 未被觸發icons | 38% |
| 淺色icons（#FFFFFF） | 不透明度 |
|---|---|
| 被觸發icons | 100% |
| 未被觸發icons | 50% |
有色的文字和背景
在有色背景上使用有色文字需要限制使用重要的文字元素。有色文字一般用於表示重要性和突出選擇。
請參考 顏色工具 確定用於排版的某些前景色是否符合在不同顏色背景上的可訪問性標準。
主題
主題能夠讓你的應用有一個統一的基調。主題規定了明暗，陰影和透明度，為了提高應用間的一致性，提供兩種主題選擇：淺色和深色。
下載主題 （1.23 MB(.ai)）
淺色主題
1.狀態列
2.應用欄
3.背景
4.卡片/對話方塊
淺色主題調色盤
深色主題
1.狀態列
2.應用欄
3.背景
4.卡片/對話方塊
相關:
Using the Material Theme（Customize the design to your brand identity）