UI設計中顏色設計如何應用

UI設計中顏色設計如何應用？當文字在圖片上方時，會引起易讀性問題。在文本和圖像之間創建一個彩色層，確保文本是清晰的。想知道UI設計中顏色設計如何應用嗎?不妨接著往下看吧~

在材料設計中，顏色以一致且有意義的方式應用于UI元素和組件。

用法

這些指南描述了對顏色應用程序非常重要的各種UI組件和元素。

頂部和底部的應用程序欄

在頂部和底部的應用程序欄中應用顏色可以幫助用戶識別和理解它們與周圍元素的關系。

識別應用程序欄

頂部和底部的應用程序欄使用應用程序主色。系統欄可以使用主色的深顏色或淺顏色來區分系統內容和頂部應用程序欄內容。

要強調應用程序欄和其他結構層之間的區別，可以在附近的組件上使用第二種顏色，比如浮動操作按鈕(FAB)。

混合應用程序欄與背景

當程序頂部或底部的應用程序欄顏色與背景顏色相同時，它們將混合在一起，并且應該強調內容而不是層次結構。

背景

背景有一個前后層。為了區分這兩層，基本內容層顏色為原色，而基本內容層上面的顏色為白色。

紙張和表面

紙張和表面的基本顏色，如底頁、導航抽屜、菜單、對話框和卡片，都是白色的。這些組件可以與顏色相結合，與其他層形成對比。對比使表面邊緣可見，表明表面重疊的差異。

模態框

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

卡片

卡片的底色是白色。這種顏色可以定制來表達品牌或提高可讀性。卡片文本和圖標也可以使用顏色主題來提高可讀性。

當卡文本和圖標顯示在圖像上方時，它們可能難以閱讀。為了提高可讀性，你可以在文本和圖標的表面使用顏色。

按鈕、標簽和選擇控件

按鈕、標簽和選擇控件可以通過應用主色或副色來強調。

顏色分類

1.包含，文本的基色和按鈕大綱為主色

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

3.選擇控件的基色為次要色

浮動操作按鈕

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

使用顏色創建浮動按鈕和周圍元素(如應用程序欄)之間的對比，第二個顏色是浮動按鈕上使用的基本顏色。如果你在畫布上使用多種顏色，你的浮動按鈕可以是單色的，并在內容中脫穎而出。

字體和圖標

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

排版的層次結構

顏色可以增加文本的可見性和重要性。

標題和選項卡

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

文本的易讀性

當文字在圖片上方時，會引起易讀性問題。在文本和圖像之間創建一個彩色層，確保文本是清晰的。

圖標

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