昨天我們了解到 Machine learning 機器學習模式能提供用戶使用圖像進行搜尋及條碼掃描，看似簡單的操作步驟，在每項操作時預先想好流程中用戶可能會遇到的問題，在用戶無法完成操作時提供幫助，保持任務的進度，在搜尋過程中提供用戶搜尋時間回饋，搜尋也可能因為環境因素造成掃描失敗，藉由提示幫助建議用戶更好的操作方式，讓用戶能持續完成動作。

今天進入新的單元從 Material Guidelines 準則 開始介紹。

建立自訂的 Material 主題讓您的產品具有獨特性。Material 主題簡化了制定產品和使用組件的過程，這些組件具有功能性和易用性的基礎，通過 Material 主題實現您的設計。

易用性及平台指南介紹，提供您瞭如何提供所有用戶使用。平台指南也可幫助您詳細決定多種平台適用性的規範。

本圖片截取自 Material Design。

接下來進入 Material Theming 主題的章節，就讓我們繼續看下去吧。

Material Theming 主題

Overview 概要
Implementing your theme 主題實施

Overview 概要

Material 主題使用自訂材質設計來反映品牌。 Material 主題通過有系統的製定材料反映您的產品品牌。當您開始著手設計 UI 的各個方面（例如: 顏色和排版）時，Material 主題工具可以將您的設計運用於用戶體驗。

Material 主題通過制定屬性提供特定數值，這些工具可輕鬆在設計和程式碼之間進行切換，讓您能更快速的開發產品。制定這些數值將為您的產品創建一個 Material 主題。

本圖片截取自 Material Design。

Material 主題包含三個主要操作：主題、將主題應用於整個設計以及在程式碼中使用它。

Material Design 提供內建的基本主題，可以不需更改直接使用，還可以根據自己的喜好進行修改，使主題具有特色風格。

主題設定會影響整個介面，包括單個組件（例如: 按鈕），下列範例提供如何定義按鈕數值。您可以調整按鈕的顏色、類型和形狀，調整為適合您品牌的樣式。預設的情況下按鈕具有以下定義:

• 顏色色碼是＃6200EE
• 文字尺寸為 14pt，字型 Roboto，字體粗細 Medium 和全部大寫
• 邊緣的圓角半徑為 4dp

本圖片截取自 Material Design ，左側為 Material 預設樣式，可以更改預設樣式調整為適合您品牌的樣式，如右側範例。

可以點選連結前往 Material 自訂按鈕範例，觀看更多按鈕細節的設定。

按鈕具有屬性和預設值，範例設定以粗體字顯示。設計的部分可以根據不同的主題或風格來設置，在基本的清晰易讀的原則下，可以運用各種顏色、形狀、邊框、圖示和文字來傳達品牌。

Implementing your theme 主題實施

Material 提供預設主題包含: 顏色、文字樣式、形狀及圖示供您選擇。

本圖片截取自 Material Design。

色彩系統提供 12 種顏色狀態，可以運用於組件、文本、圖示和元件表面。
若還在思考品牌顏色的相關搭配可以參考 "Material 選色工具" 來調配顏色。或是直接從 2014 Material Design 調色盤 直接選取您所需要的顏色。

1. 主要色
2. 主要色變體
3. 次要色
4. 次要色變體
5. 背景顏色
6. 元件表面
7. 錯誤
8. 在主要色上 ( On Primary )
9. 在次要色上 ( On Secondary )
10. 在背景上 ( On Background )
11. 在表面上 ( On Surface )
12. 在錯誤上 ( On Error )

主要色和次要色通常會使用它們來代表您的品牌。最常運用到主要色的組件和元件，分別為應用列表選單和按鈕。而最常使用次要色的組件和元件，分別為浮動按鈕和操控元件。主要色變體和次要色變體可以用於補充和提供更豐富的顏色選項。

常用於元件表面的顏色 ( 例如: 材質、選單 )，在所有物件後方可以到背景顏色，在組件中表現錯誤的顏色為錯誤顏色 ( 例如: 文字段落 )，元件表面、背景和錯誤顏色不代表品牌顏色。

在元件已使用主要色、次要色、背景、元件表面和錯誤顏色時，當這些元件上方需要擺放其他元素時，元素需要使用帶有前贅詞的 " on " 顏色保持元素清晰可見，這類顏色主要用在文字、圖示、筆畫或是元件表面。

帶有前贅詞的 " on " 類別顏色應用於使用主要色、次要色、背景、元件表面和錯誤顏色上方的文字或圖示 ( 有時運用於元件表面 )。

本圖片截取自 Material Design - " on " color。

如果對顏色章節還不熟悉可以複習以下這兩天的內容
UI / UX 設計白皮書 / Material Design 導讀_Day07 Color 顏色
UI / UX 設計白皮書 / Material Design 導讀_Day08 Color 顏色

文字樣式尺寸支持 13 種樣式組合，樣式組合可以依據不同需求套用文字樣式在畫面排版上，每一種樣式都具有非常良好清晰度與可見度。文字樣式可以個別設定字型、英文字母大小寫、尺寸。

本圖片截取自 Material Design - Typography。

有多種自訂字體的方法：

• 使用 Material 樣式尺寸產生器 來選擇標題和文字的樣式，您選擇的任何字型都會自動調整文字大小提高易讀性，點選樣式尺寸產生器分頁 CODE 還可以看到 CSS 樣式語法中的字型和字體大小，可以直接複製使用。
• 或是直接從 Google 字型 中選擇可以反映產品的字型。

標題 ( Headlines ) 的文字樣式範圍是 H1~H6 ，標題是畫面中最大的文字也可以是簡短重要的內文或數字。副標題 ( Subtitles ) 的文字小於大標題，通常使用在長度較短的強調句子。內文 ( Body ) 通常用於文字內容較多的段落，針對較小的文字尺寸去設定。說明文字和眉題是樣式尺寸中最小的字體尺寸，用於圖片解說或是標題上方的引文。文字按鈕直接使用外觀輪廓作為按鈕樣式。

如果對文字樣式章節還不熟悉可以複習以下的內容
UI / UX 設計白皮書 / Material Design 導讀_Day09 Typography 文字排版

形狀系統支援圓形和切割邊角的類型，將形狀運用於組件邊角搭配您的品牌風格和應用程式。元件邊角形狀可以分為對稱或不對稱的設定方式，對稱的邊角形狀是將所有邊角設定相同形狀和相同數值，而非對稱的邊角形狀可以在每個邊角設定不同的形狀和數值，

可以使用 Material 自訂形狀工具，來選擇小、中、大組件的邊角形狀及尺寸，根據組件大小分類，更改類別數值時會同時更改運用於類別的所有組件，對於單一組件修改數值時會覆蓋形狀類別的數值，產生與類別不同數值的形狀來強調組件。

本圖片截取自 Material Design - Shape。

圓形組件的尺寸半徑為 50% ( 例如: 藥丸形狀的芯片標籤和圓形浮動按鈕)，而使用 4dp 圓角邊框的常見組件為: 區塊、選單、通知框、幫助提示、對話框及按鈕。

正方形形狀的組件不具有任何圓角，例如: 正方形或 90 度角的全螢幕畫面。若圓形邊角設定為 0dp 時則顯示為方形。

切割邊角可以從直角開始切割形狀，從 0dp 開始沿著形狀的輪廓設定不同角度的切割。例如: 區塊這樣較大的元件可以設計較大的切口，按鈕這類小組件則使用較小的切口。根據您應用程式的風格考慮每個組件最適合使用得形狀及邊角類型。

如果對形狀章節還不熟悉可以複習以下這兩天的內容
UI / UX 設計白皮書 / Material Design 導讀_Day13 Shape 形狀
UI / UX 設計白皮書 / Material Design 導讀_Day14 Shape 形狀

除了預設填滿的圖示之外，還有其他四種圖示外型。在介面設計中統一選用一種圖示外型保持統一的視覺，不會同時混用多種圖示外型。

本圖片截取自 Material Design - Icons。

1.填滿的圖示 Filled
2.銳利的圖示 Sharp
3.圓潤的圖示 Rounded
4.外框圖示 Outlined
5.雙色圖示 Two-Tone

1. 預設圖示設計外型為填滿的圖示。
2. 銳利的圖示消除了填滿圖示的圓角半徑。
3. 圓潤的圖示與其填滿的圖示邊角使用相同的 2dp 半徑筆劃，內角區域還有 1dp 半徑。
4. 外框圖示消除了大多數填色區，將大多數輪廓轉換為 2dp 筆劃，減少了圖示的視覺重量。外框圖示可以用來表示狀態，例如: 搭配填滿的圖示可以顯示被選擇或沒被選擇的狀態。
5. 雙色圖示在填色和筆劃上色時可以使用不同的顏色。

如果對圖示章節還不熟悉可以複習以下的內容
UI / UX 設計白皮書 / Material Design 導讀_Day12 Iconography 影像學

今天我們了解到 Material Theming 主題，提供了一套基本的主題樣式，在設計時可以觀察 Material 主題樣式的細節，甚至可以直接下載修改為符合品牌特色的主題，Material 主題包含顏色、文字樣式、形狀及圖示供您選擇，在不同主題也提供了許多小工具，在設計上能更快速的找到最適合品牌風格的搭配。

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

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