這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。
以下方法可用于自定義顏色、文本和形狀。還有五種獨特的圖標選擇方法。
目錄
顏色
文本
形狀
圖標
顏色
顏色系統支持12種顏色，可應用于組件、文本、圖標和表面。
- 主色
- 主色變體
- 輔色
- 輔色變
- 背景
- 表面
- 錯誤
- 主色之上
- 輔色之上
- 背景之上
- 表面之上
- 錯誤之上
顏色的主題
要將材料顏色主題化，首先選擇合適的顏色用于UI。可以通過多種方式選擇顏色：
- 用顏色選擇內嵌工具生成顏色
- 從材料調色板的和諧配色方案中選擇顏色
主色和輔助色
在用戶界面的關鍵之處謹慎選用主色。通常選擇能夠代表你的品牌的配色。
主色體現在諸如應用欄和按鈕的組件和元素中。輔助色最常用于強調如FAB和選擇控件等組件。
最后，變體的顏色也可作為備選用于補充主色和輔助色。
表面、背景和錯誤提示顏色
表面、背景和錯誤提示顏色通常不代表品牌色。
通常，它們占據UI的以下區域：
- 表面顏色體現在卡片、面板和菜單等組件
- 背景顏色用在可滾動內容后面
- 錯誤提示顏色提示組件中的錯誤，例如文本字段
“之上”色
應用中的元素顏色選自于你調色板中特定的類別，例如主色。每當其他屏幕元素（如文本或圖標）出現在使用這些顏色的表面之前時，這些元素應使用專門設計的顏色，以清晰地從其背后的顏色中脫穎而出。
這類顏色被稱為“之上”的顏色，是指帶這些顏色的元素有時會置于使用主色、輔助色、表面顏色、背景顏色或錯誤提示顏色的關鍵表面之前。給這些原始類別名稱（例如主色）標以“之上”的后綴。
“之上”的顏色主要用于文本、圖標和邊框。有時也用于表面。
“之上”色命名
|
類別 |
類別“之上” |
|
主色 |
主色之上 |
|
輔助色 |
輔助色之上 |
|
表面 |
表面之上 |
|
背景 |
背景之上 |
|
錯誤提示 |
錯誤提示之上 |
“之上”類顏色應用于出現在：主色、輔助色、表面顏色、背景顏色或錯誤提示顏色之前的某些文本和圖標（有時是表面）。
文本
字體系統有13類字體，這些類別在組合時形成字體格式。從正文到按鈕，這種方案很明顯體現在界面中的各種文本樣式和尺寸中。字體無所不在：如在組件和表面中。
文本屬性由自定義值控制，可以自定義字體、字型，大小寫，字號和字距。
主題化方法
自定義并應用文本
有多種方法選擇文本：
- 使用“材料主題編輯器”從本地系統的字體生成字體風格，然后將其應用于平臺
- 從Google Fonts中選擇體現你產品的字體
標題(Headlines)
Headlines1-6是字體格式中最大的尺寸。它們僅用于簡短但有影響力的文本，也用于數字。
副標題(Subtitles)小于標題(Headlines)。它們通常用于較短文本字符串中的中等強調文本。
正文(Body)和較小的文字
正文（Body）1-2通常用于長段文字。它應適配小字號文本。
說明（Caption）和上劃線（OVERLINE）是最小的字體。它們偶爾用于注釋圖像或簡要介紹標題。
按鈕（BUTTON）字號通常用于文字按鈕，線框按鈕和實心按鈕。
形狀
形狀系統目前支持兩類形狀，可運用在組件的角上，來適配你的品牌和App：圓角或切割的角。
- 圓形狀的角是有曲度的
- 切割的形狀的角是直角
這些形狀運用在組件的角上時，可以對稱（所有角都形狀一致）也可不對稱（并非所有角形狀都一致）。這些角都可以自定義。
1.圓角（0dp），2.圓角（4dp），3.圓角（16dp），4.圓角（24dp）
放大了500%。1-3的高度為36dp，4的高度為64dp。
1.切割角（0dp），2. 切割角（2dp），3. 切割角（8dp），4. 切割角（12dp）
放大了500%。1-3的高度為36dp，4的高度為64dp。
形狀主題化
使用“材料主題編輯器”更改UI組件的形狀。可以修改形狀以適配你的品牌和應用，例如把形狀從尖銳調到圓潤，以及進行切割。
鋒利類和屬性覆蓋
組件按照他們尺寸被歸類。每當一個類的屬性值（而非某一個組件）發生變化，該類下的所有組件都相應變化。
某個類下的某個特定組件的值可以單獨發生變化，而不是永遠保持該類的屬性值不變。
圓角
卡片、菜單、Snackbar、工具提示、對話框和按鈕等組件半徑為4dp。
1.放大2000％，2.放大400％
最圓的組件的圓角半徑為50%，例如藥片形狀的紙條和圓形的FAB。
1.放大2000％，2.放大400％
1.放大2000％，2.放大400％
方形角
方形角的組件，角曲率為0dp，例如全屏底部動作條的角就是方形，或者說，90度。
0dp的切割角和0dp的圓角也都屬于方角，可以互換使用。
1.放大2000％，2.放大400％
切割的角
組件的角可以被45度切割。這些角的切口長度不一，從0dp到完全切割組件的側邊不等。
1.放大2000％，2.放大400％
例如，較大的表面如卡片可能切割得較大，而按鈕可能切得較小。
先考慮品牌設計、組件尺寸，以及需要的易讀面積，再確定每種元素的最佳切割尺寸。
1.放大2000％，2.放大2000％
圖標
- 填充型
- 鋒利型
- 圓型
- 線框型
- 雙色型
除了原始的填充材料設計圖標外，還有四個額外的圖標主題可用。應在整個App中圖標主題要一致以保持視覺一致性，不要在單個用戶界面中混合多種圖標主題。
圖標主題化
從五個不同的圖標主題中選擇一個：
- 填充型圖標
- 鋒利型圖標
- 圓型圖標
- 線框型圖標
- 雙色型圖標
圖標類型
填充型圖標
填充型圖標是原始的材料圖標主題。
1.網格結構，2.填充型圖標示例
鋒利型圖標
鋒利型圖標去掉了填充型圖標的圓角半徑。
1.網格結構，2.鋒利型主題示例
圓型圖標
圓型圖標與填充型圖標的外圓角半徑都是2dp。此外內描邊、內圓角和內部區域半徑為1dp。
1.網格結構，2.圓型圖標示例
線框型圖標
線框型圖標集去掉了大部分填充，將大多數圖標轉換為2dp筆畫，減輕了視覺重量。這些也可用于表示狀態，例如將它與填充圖標組合以顯示選定狀態。
1.網格結構，2.線框型圖標示例
雙色型圖標
雙色型圖標的邊框和填充顏色相同但不透明度不同。
1.網格結構，2.雙色圖標集示例
原文地址：Material Design
譯者：珠珠
轉載請注明：學UI網 » Implementing your theme 實施主題
