在 Navigation 導覽列的單元，我們了解到 Navigation 導覽列擺放的位子以及在不同頁面間導覽列的功能，在畫面切換間使用轉換動畫能加強關聯性減少突兀感，在用戶輸入搜尋字詞時提供相關的歷史搜索，可以幫助用戶快速的選取曾經搜尋過的項目，也可以提供使用者輸入到一半的單字建議，這些功能減少了使用者在應用程式裡迷路的可能性(找不到功能)。

今天我們進入到 Material Design 中 Color 顏色 的章節，由於內容涵蓋的範圍較廣，我們會分成兩天來介紹 Color 顏色，今天會先了解關於色彩系統、將顏色應用於 UI，這兩個部分，讓我們繼續看下去吧。

Color 顏色

The color system 色彩系統
Applying color to UI 將顏色應用於 UI
Color usage 顏色使用
Text legibility 文字清晰
Dark theme 深色主題

Material 可以幫助您創造符合您品牌或風格的色彩主題。

The color system 色彩系統

色彩系統創建出代表品牌的主要色和輔助色，通過不同的方式把顏色分類讓顏色附有含義，再將這些色彩應用在 UI 介面上，製作具有品牌特色的應用程式。品牌顏色制定可分為主要色、次要色、輔助色，分類後的顏色明確表現哪些元件可以互動，它們與其他元素的關係，重要元素應最突出。文字和重要元素（例如圖示）在背景上顯示時應注意其易讀性。

本圖片截取自 Material Design。

Material Design 有預設的參考線主題，可以直接使用，包含下列的配色 :

• 主要色、次要色
• 主要色、次要色的變體(加深或變淺)
• 輔助色-其他 UI 顏色，例如 : 背景、區塊、錯誤提示、文字排版和圖示的顏色。

主要色為應用程式裡面最頻繁使用的顏色，並可以使用主要色調配出加深或變淺的主色變體。要在元件間建立顏色對比，例如: 系統列、頂部應用程式列，可以使用主要色的加深或變淺的顏色變體，還可以用來區分元件中的元素，例如: 互動按鈕、或是容器中的 icon。

次要色適合用於互動按鈕、拉霸、開關、文字選取反白顏色、進度條、連結、標題，搭配加深或變淺的顏色變體，提供更多的方式強調跟區分產品，如果您沒有次要色，您也可以將主要色用於強調元素。

輔助色可以用於背景、畫面區塊、錯誤提示、文字排版、圖示或是替代顏色，在元件設計上使用相對於背景而言清晰易讀的顏色，在這些元素上定義每種狀態的輔助色，並在標的項目使用前缀詞 "on" ，"on" 顏色的默認值為 #FFFFFF(純白色) 和 ＃000000(純黑色) 。

此圖片來自於 Material Design

背景可以使用主要色和次要色的淺色或深色變體，深色背景使用白色內文，淺色背景使用黑色內文，背景與文字顏色需保持一定的對比使內文清晰易讀，在 Material 選色工具中以 400 色樣為區隔，大於 400 色樣使用白色內文，小於 400 色樣使用黑色內文。

在套件的應用或是不同的主題，可以使用替代顏色來取代主要色和次要色，某些應用程式同時提供深色和淺色主題讓使用者選擇，在保持可讀性時可以搭配不同得替代顏色使用，也可以在不同主題下使用更貼近目標對象感興趣的顏色，可以更好的定位主題，例如: 當同一頁面上顯示多個數據用不同顏色區分，能讓使用者更容易辨別區塊。

Material 選色工具可以通過調整色相、亮度產生調色板，根據主要顏色提供相似色、互補色和三合一色(相似色+互補色調和) 快速的提供不同選地的配色建議。讓我們一起來試用看看 Material 選色工具 (此工具只提供無法在手持裝置使用)，除此之外也提供了 2014 Material Design color 調色盤，可直接複製 16 進位色彩代碼使用在您的 UI 設計上。

本圖片截取自 Material Design - 選色工具。

Applying color to UI 將顏色應用於 UI

在 UI 設計和元件上使用一致且富有意義色彩，在顏色設計運用適當的對比度形成區隔，並通過顏色傳達含義、元素與層次之間的關係。本段落 Material 使用了相當多元的範例，可以前往觀賞實際範例在應用優缺點。

此圖片來自於 Material Design

系統列、頂部應用程式列使用主要色及其變體色來區分，在周圍的元件則使用次要色來區分，若統一使用主要色則可以加上陰影建立區別，當應用列顏色與背景相同時則會突顯內容。

預設底部應用列、導覽列、選單、對話框、視窗區塊的元件顏色為白色，這些元件可以合併顏色讓區塊形成對比度，使得相鄰不同區塊時邊緣更明顯，在底部應用列及導覽列上使用主要色、次要色及對比色，更容易吸引注意力；可以制定視窗區塊、文字及圖示顏色來傳達品牌及提高可讀性，需要注意在圖片上方放置文字及圖示時會難以閱讀，可以在文字及圖示底下設計帶有透明度的色彩區塊，提高可讀性。

在按鈕、開關和選項控制元件上使用主要色及次要色來強調它們，在選項控制元件的配色上可以使用相應的輔助色搭配，在訊息提醒及警告視窗上請勿使用品牌顏色，避免重要訊息無法被突顯。在應用列與互動按鈕上使用高對比色彩讓該區塊在設計上脫穎而出；顏色在文字樣式及圖示的運用上具有高度的重要性，顏色可以使得文字樣式及圖示可清晰辨認，運用不當時可能會使閱讀變得困難。

在主標題和標籤上使用主要色及次要色來強調並引起注意，並在主要動作和訊息旁放置圖示，使圖型意象提供訊息，在顏色選擇需與背景顏色形成對比，確保圖示可清晰辨認。

今天我們了解到色彩系統分為主要色、次要色、輔助色及替代顏色的基本概念及變體色的選擇，搭配不同的主題運用替代顏色進行色彩創作，在 UI 元件上建立高對比度的色彩搭配，除了傳達品牌更可以藉此吸引注意、突顯內容、保持清晰的辨識度、讓內容文字更容易閱讀。

明天讓我們繼續完成 Color (顏色) 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~