這是一個翻譯系列,原文是谷歌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 實施主題