Material Design 中顏色以一致且有意義的方式應用于UI元素和組件。

用法

這些指南描述了顏色應用很重要的各種UI組件和元素。

頂部和底部應用欄

將顏色應用于頂部和底部應用欄有助于用戶識別并了解他們與周圍元素的關系。

識別應用欄

頂部和底部應用欄使用應用主色。系統(tǒng)欄可以使用主色的深或淺色同色系將系統(tǒng)內容與頂部應用欄內容區(qū)分開。

要強調應用欄和其他結構層的區(qū)別，請在附近的組件上使用輔助顏色，例如浮動操作按鈕（FAB）。

將應用欄與背景混合

當程序頂部或底部應用欄顏色與背景色相同時，他們會混在一起，此時應強調內容而不是層次結構。

背景

背景有一個前后層。要區(qū)分這兩個圖層，基礎內容層顏色是主色，基礎層之上的顏色是白色。

紙張和表面

紙張和表面（如底頁、導航抽屜、菜單、對話框和卡片）的基礎顏色為白色。這些組件可以結合顏色與其它層之間來創(chuàng)建對比。對比可以使表面邊緣可見，表示表面重疊時的差異。

模態(tài)框

在臨時出現(xiàn)在屏幕上的表面上使用對比色，如導航抽屜和底頁。通常這些表面是白色的，但你可以使用你應用的主色或者次要色。

卡片

卡片的基礎色是白色。這種顏色可以定制來表達品牌或提高易讀性?？ㄆ淖趾蛨D標也可以使用顏色主題來提高易讀性。

當卡片文字和圖標在圖片上面顯示時，它們可能較難閱讀。要提高閱讀性，可以在文字和圖標表面使用顏色。

按鈕，標簽和選擇控件

通過將主色或次要色應用于它們，可以強調按鈕，標簽和選擇控件。

顏色分類

·包含，文本和按鈕輪廓的基礎色是主色

·浮動操作按鈕和擴展浮動操作按鈕的基礎色是輔色

·選擇控件的基礎色是次要色

浮動操作按鈕

浮動操作按鈕應該是屏幕上最容易識別的項目之一。

用顏色在浮動按鈕和周圍元素之間建立對比，比如應用欄。您的輔助色是浮動按鈕上使用的基礎色。如果您的畫布上使用多種顏色，那您的浮動按鈕可以使用單色，在內容中突出。

排版和圖標

文字可以使用顏色，相對于其他文字具有更大或更小的重要性。當放置在圖像或背景上面時，使用顏色可以確保文字清晰，但這會使在圖像或背景前面閱讀變困難。

排版層次結構

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

標題和選項卡

重要文本（如選項卡和標題）可以使用主色或次要色。

文字易讀性

當文字在圖片上方的時候，它會導致易讀性問題。在文本和圖像之間建立彩色圖層可以確保文字清晰。

圖標

圖標有助于識別操作和傳遞信息。它們的顏色應與背景形成對比，以確保清晰可辨。

作者：Clien

公眾號：行設視覺