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

今天讓我們繼續完成 Color 顏色章節中的顏色使用、文字清晰與深色主題，讓我們繼續看下去吧。

Color

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

在顏色章節使用了相當多的範例，看完介紹及內容後如果對於使用情況及目標對象還不清楚時，都可以參考官方的圖片或動畫，可以更快的幫助我們理解使用情境。

Color usage 顏色使用

顏色有助於展現畫面結構層次，建立品牌形象，賦予含義並表現元素狀態。

顏色可以傳達多種主題風格的感受，例如: 大膽、明亮、簡約和柔和...等等，在某個元素上與周圍顏色形成對比時可以吸引注意力，由不同的方式表現元素的重要性。例如: 明暗對比的黑色與白色，彩度對比的暗紅色與飽和的紅色，多色系配上單色時都會引起注意。通過限制文字、圖像及按鈕的顏色，可以更輕易區別元件區塊，也可以透過顏色及形狀的改變表示已選擇項目或是吸引注意力。

本圖片截取自 Material Design。

在關鍵時刻使用品牌色彩，除了與特定行為結合也能強調其存在，品牌色彩可以根據品牌特性與商品走向規劃不同的色彩應用，可以大膽、輕鬆、古怪和復雜或正規。使用大膽的配色能傳達能量和興奮感，保持清楚易用的同時注入了活力和刺激感。大膽的配色可以運用在啟動程式的開啟畫面或是被選取項目的顏色改變和突顯新功能。

使用細微的顏色配色來規劃區塊時，可以在比較複雜項目中強調內容，讓該區快成為頁面上最重要的元素。使用主要色在應用程式尚未完成開啟時顯示進度條或是內容區域，適當的提示及告知進度能避免使用者因等待而關閉應用程式，也在應用程式變更狀態時使用主要色可以巧妙地增強品牌映像。

顏色也能傳達不同的含義，例如: 氣象軟體可以用顏色來顯示當前天氣狀態，雨天為藍色、晴天為黃色，導航軟體則使用顏色表達交通狀況，紅色為塞車、綠色為路況順暢。在同一個頁面上下文顯示的顏色需要具備一致性，藉此來表達同一件事情或同一個區塊，在顏色的使用上應注意既有的顏色定義，警告通常顯示紅色、注意區域則顯示黃色，當品牌顏色為紅色時警報顏色可以改成橘色，請不要使用品牌顏色傳達警告。

顏色可以提供有關元件及元素的訊息與狀態，包括當前按鈕是啟用還是關閉、應用元件的狀態更改，狀態更改變化時應使用明顯的顏色搭配多種狀態得更改來強調差異，例如: 通過顯示圖示或更改元素位置，再搭配上顏色更改來強調差異。

Text legibility 文字清晰

無障礙網頁指南（WCAG 2.0） 要求在背景跟文字之間對比度為 4.5:1，較大的文字則為3:1

本圖片截取自 Material Design。

在彩色背景上的文字使用黑色字體，在深色背景上的文字則使用白色字體，如果您同時具有淺色和深色主題，請確保每個主題內文顏色與背景呈現良好的對比效果。

在設計還未確認整體畫面及應用狀態顯示還會修改時，使用不透明度來做輔助色的設計，能有效的減少更換主題顏色後續修改的時間。

在彩色背景上使用灰色文字及圖示，不如使用具有透明度的黑色或白色文字建立更好的對比度，具有透明度的字體也帶有富含品牌顏色的效果，若不使用透明度來調整文字顏色，也可以使用 16 進制色碼上色。淺色背景上的深色文字會應用以下不透明度級別：

• 高強調性的文字不透明度為 87%
• 中強調性的文字和提示文字不透明度為 60%
• 輔助文字得不夠明度為 60%
• 停用和關閉的文字不透明度為 38%
• 在錯誤狀態的文字不透明度為 100%

WCAG 色彩對比檢查表

在標題、按鈕和連結等文字使用具有高對比的顏色來引起注意，也可以選擇性的強調元素，文字和背景需要較高的顏色對比程度，避免內文難以閱讀，選取文字的反白字顏色可以使用主要色的配色，反白字的配色應與背景形成對比，或是使用框選輪廓、動態示意或選取標記來表示被選中的文字段落。

圖示和其他元素不需要符合 WCAG 易讀性標準，但應盡可能保持閱讀性、指示功能或傳達信息。深色圖示或淺色背景上的其他元素可以應用以下不透明度級別：

• 選取中圖示不透明度為 87%
• 未選取的圖示不透明度為 60%
• 禁止使用或關閉的圖示不透明度為 38%

Dark theme 深色主題

顯示深色畫面為主的主題畫面，降低了設備螢幕的亮度，同時滿足最低的顏色的對比度。在黑暗的環境中偵測環境光的照明條件調整亮度來減少眼睛疲勞，具有 OLED 的螢幕設備可以通過減少亮度節省電池電量。在畫面區塊使用灰色而不是黑色來表示深度和環境中的高度與空間。在深色的主題中運用有限的顏色強調空間專用於深色區塊。深色主題為視力不佳的用戶提供了高對比的畫面。

在產品上設計可以切換淺色與深色主題的開關或選項，供使用者選擇需要的顯示主題顏色，深色主題的屬性定義：

• 對比度：深色畫面和 100％ 白色文字的對比度至少為 15.8:1
• 深度：在較高的高度下，元件使用較淺的顏色來表示深度
• 減少飽和度：原色經過減少飽和度在所有高度上至少達到 4.5:1 的 WCAG AA標準。
• 有限的顏色：大面積使用深色，在畫面中使用的顏色有限 (淺色、低飽和色、明亮色和飽和色)

本圖片截取自 Material Design。

深色主題使用灰色而不是黑色作為元件的主體色，灰色可以表示高度和深度的範圍，也更容易看到灰色陰影 ( 而非黑色陰影 )。相較純黑色主體色，灰色主體色對比度較低，可以減輕眼睛疲勞。在深色主題的元件表面使用具有透明度的色塊覆蓋，元件高度越高顏色也就越淺 ( 淺色主題使用陰影表達高度 )，除了分辨不同高度也提高可讀性。

元件覆蓋色塊的透明度範圍從最低級 0% 到最高 16% ，本圖片取自 Material Design。

覆蓋色塊來表現高度的原理不適用於使用主要色和次要色的元件，也避免使用光暈效果來表示陰影，光暈效果無法表示高度。在深色主題文字和背景至少使用 15.8:1 的對比度，這樣可以確保內文在最高及最低的高度時，通過 WCAG 的 4.5:1 的 AA 標準。

深色主題應避免使用高度飽和的文字顏色，飽和的顏色在深色的背景上會產生光學振動引起眼睛疲勞，降低飽和度可以使內文更清晰。在深色背景上使用主要色是在整個應用程式中最常出現的顏色，在 Material 深色主題使用 200 基準的顏色 ( 在所有高度上都通過 WCAG AA 標準 )；在深色主題上越淺 ( 50~200 基準的顏色 ) 的顏色能幫助突顯需要強調的元素，而不使用大於 500 基準的顏色。

在深色主題使用少量品牌顏色，讓元素在畫面中保持突出，其餘元件使用減少飽和度的配色，Material 提供淺色及深色主題搭配的元件色彩建議：

• 顏色（主要色、次要色和主要色變體）
• 區塊顏色（背景和元件）
• 狀態（例如: 錯誤狀態）
• 內容（字體和圖示）

Material 提供淺色及深色主題搭配的元件色彩建議。本圖片截取自 Material Design。

盡可能不要再大面積區塊 ( 背景或應用列 ) 使用主要色，可以在較小的面積使用主要色，並確保通過 WCAG 15.8:1 的對比度，可以搭配淺色主題的區塊結合深色主題來設計排版。

使用背景及主要色搭配，在元件上覆蓋淺色透明色塊來傳達互動元件的狀態，分別在能動及不能動的區塊，還有聚焦和按住拖移的區塊使用，在禁止使用或關閉的圖示使用不透明度為 38% 的白色來顯示，區塊顏色及邊框使用 12% 的白色來顯示。

Material 提供的設計文件包含: 用於深色主題的狀態列、應用列、底部工具列、區塊、下拉式選單、側拉式導覽列、對話框及互動操作按鈕...等等，可以下載 SKETCH 、 下載 FIGMA ，在現有主題創建深色主題的部分也提供了許多教學。各裝置目前只有 Android 系統支援深色主題的呈現。 iOS、Web、Flutter 都還在規劃中。

今天我們了解到顏色在搭配使用上呈現不同的色彩感受，在互動元件上巧妙的搭配能吸引注意力，顏色也能代表程式狀態，在不同的配色下仍然需要保持內文能清晰閱讀，在淺色及深色主題下有不同的設計方法及色彩運用，色彩的飽和度及對比度都關乎整個應用程式的易讀性。

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

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