這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

顏色通過統一且有意義的方式應用在UI元素和組件中。

 

目錄

用法
頂部和底部應用欄
背景
動作條和表面
按鈕、紙片和選擇控件
文字和圖標

 

用法

指南說明了顏色應用在各種UI組件和元素中的重要性。

 

原則

 

頂部和底部應用欄

將顏色應用于頂部和底部應用欄,有助于用戶識別理解它們與周邊UI元素的關系。

 

識別應用欄

頂部和底部應用欄都使用app的主色。系統欄可使用主色的深淺衍生色來區分系統欄和頂部應用欄中的內容。

主色(紫色500)用于頂部應用欄,系統欄上使用主色的深衍生色(紫色700)

 

為了強調應用欄與其它表面的差異,可在相鄰組件(如FAB-浮動操作按鈕)上使用輔助色。

主色(藍色700)用于底部應用欄,輔色(橙色500)用于浮動操作按鈕

 

如果底部應用欄和浮動操作按鈕顏色相同,最好使用陰影或相關方式給它們創造足夠大的區別。

 

融合應用欄與背景

當app的頂部或底部應用欄的顏色與背景色一致時會融合在一起,從而突出內容而非結構。

這個app的頂部應用欄和背景顏色都是主色(白色),但在滾動時,頂部應用欄獲會產生一個陰影,表明它的海拔高于其背后的內容。

 

這個app在應用欄、底部導航欄和背景上使用主色(藍色700)對界面進行了明亮、無縫的布局,所以弱化了獨立元素,突出了內容。激活狀態使用了輔助色黃色。它的底部導航包含陰影,可以表示兩個面之間具有高度差。

 

背景

背景包含前后兩層。為區分這兩個圖層,現規定后層基準色是主色,前層基準色是白色。

 

這個app背景后層使用了主色(紫色800)。文本字段是主色淺色衍生色(紫色700)。輔助色(紅色700)用來突出機票費用。

 

這個app的背景后層使用了主色(粉紅100),文本和圖標使用了主色深衍生色(粉紅900)。另外,輔助色(粉紅50)用于前層動作條的擴展。

 

動作條和表面

動作條和表面(例如底部動作條、導航抽屜、菜單、彈框和卡片)的基準色都是白色。這些組件可以結合顏色與其它表面產生對比。對比可讓表面的相交邊緣明顯,在層疊時表現出海拔高度的差異。

 

這個產品在底部動作條和抽屜導航上將默認的白色改為了主色。

1. 產品在底部動作條上部分使用主色(紫色500)代替基準色白色

2. 產品在抽屜導航上使用主色(紫色500)代替基準色白色

 

模態動作條

對臨時出現在屏幕上的表面使用對比色,例如抽屜導航和底部動作條。通常這些表面是白色的,但是你也可以使用app的主色或輔助色。

 

這個app在底部抽屜導航上使用主色(藍色700),賬戶切換使用主色深衍生色(藍色800),選中狀態使用輔助色(橙色500)。

 

這個app在其模態抽屜導航上使用了主色(白色),使深色的文本與導航形成了最大對比。由于抽屜導航與背景顏色相同,所以使用了一個白色遮罩層來弱化后面的內容。

 

這個app右下角顯示了一個動作條,顏色為主色(粉紅500),點擊后會擴展。

 

卡片

卡片的基準色是白色,可以自定義這種顏色來表現品牌或提高可讀性??ㄆ瑑鹊奈谋竞蛨D標也可使用顏色主題來提高其可讀性。

這些卡片的表面使用主色(紫色500),app的背景是白色,輔助色(青色200)用于數據可視化。

 

卡片可通過顏色繼承來表示選中或重要性。

 

當卡片中的文本和圖標出現在圖片上時,可能難以閱讀。為提高可讀性,可在文本和圖標間創建一個顏色層。

 

按鈕、紙片和選擇控件

按鈕、紙片和選擇控件可以通過使用主色或輔助色來加以突出。

顏色分類

  1. 容器、文本和線框按鈕的基準色是主色。
  2. 浮動操作按鈕和可擴展浮動操作按鈕的基準色是輔助色。
  3. 選擇控件的基準色是輔助色。

這個app的顏色主題由主色(紫色 500)、主色深衍生色(紫色600)和輔助色(青色200)組成。

  1. 產品在底部應用欄使用主色(紫色500),而輔助色(青色200)用來強調浮動操作按鈕和選擇控件。
  2. 產品使用輔助色(青色200)來強調已選列表項。

 

按鈕、紙片和選擇控件

主色或輔助色可用來強調按鈕、紙片和選擇控件。

這個app在其已擴展的浮動操作按鈕和紙片上使用了主色(粉紅100),在滑塊上使用了主色深衍生色(粉紅900)。

 

 

浮動操作按鈕(FAB)

浮動操作按鈕(FAB)應是界面中最易識別的按鈕之一。

利用顏色在FAB與其相鄰元素(比如應用欄)之間創造對比。輔助色是FAB的基準色。如果你的界面有多種顏色,FAB可以選用單色來使其在內容中突出。

 

這個app的FAB使用了輔助色(橙色500),與周圍的UI形成鮮明對比。

 

這個app的顏色主題在所有按鈕、選擇控件和圖標上使用了主色(白色)和輔助色(黑色)。這些組件之所以突出是因為它們與色彩豐富生動的內容形成了鮮明的對比。

 

文字和圖標

顏色可以表示文本間的相對重要程度。當文本出現在各種使其難以閱讀的圖片或背景之上時,運用顏色可確保它們保持清晰可讀。

 

文字層級

顏色可提高文本的可見性和重要等級。

這個app的顏色主題由主色(紫色500)和輔助色(橙色600)組成。橙色強調了卡片的主題,紫色出現在選項卡和按鈕上。

 

標題和選項卡

重要文本(如選項卡和標題)可以使用主色和輔助色。

這個app使用了輔助色(橙色800)來強調和突出標題。

 

這個app在選項卡上使用了主色(綠色800),字體粗細的不同表明已選或未選狀態。

 

 

避免在正文上使用高明度的主色或輔助色。

 

文本可讀性

當文本置于圖像上時,經常會引起可讀性問題。在文本和圖像間創建一個顏色層可以確保文本清晰可讀。

 

這個app在圖片上使用了一個黃色半透明遮罩層,確保上邊的文本清晰可讀。

 

圖標

圖標有助于識別操作和提供信息。它們的顏色應與其背景色形成鮮明對比,以確保清晰易辨。

 

這個app在圖標上使用了主色(綠色800)和輔助色(橙色800)

 

Shine(一款電商類應用程序,見前面章節)在圖標上使用了主色深衍生色(粉紅900)。

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Applying color to UI 顏色的UI應用

登錄收藏
 
你可能喜歡的:
UI組件-滑塊 用戶超愛的選擇小助手UI組件-滑塊 用戶超愛的選擇小助手
啥?你說我不懂如何設計消息中心?啥?你說我不懂如何設計消息中心?
界面布局| 移動端常見8種界面布局的分析與運用界面布局| 移動端常見8種界面布局的分析與運用
砂之船奧萊數字化零售項目砂之船奧萊數字化零售項目
Material Design Shape and motion 形狀與動效Material Design Shape and motion 形狀與動效
Material Design Shape as expression 形狀表達Material Design Shape as expression 形狀表達
細說控件| Button按鈕的不同樣式與狀態細說控件| Button按鈕的不同樣式與狀態
Material Design Shape and hierarchy 形狀與層級Material Design Shape and hierarchy 形狀與層級
聊聊加載等待的那些事之“進度指示器”(原則篇)聊聊加載等待的那些事之“進度指示器”(原則篇)
Material Design About shape 形狀指南Material Design About shape 形狀指南
?
街机捕鱼城金库券