UI設(shè)計(jì)中顏色設(shè)計(jì)如何應(yīng)用

UI設(shè)計(jì)中顏色設(shè)計(jì)如何應(yīng)用？當(dāng)文字在圖片上方時(shí)，會(huì)引起易讀性問(wèn)題。在文本和圖像之間創(chuàng)建一個(gè)彩色層，確保文本是清晰的。想知道UI設(shè)計(jì)中顏色設(shè)計(jì)如何應(yīng)用嗎?不妨接著往下看吧~

在材料設(shè)計(jì)中，顏色以一致且有意義的方式應(yīng)用于UI元素和組件。

用法

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

頂部和底部的應(yīng)用程序欄

在頂部和底部的應(yīng)用程序欄中應(yīng)用顏色可以幫助用戶識(shí)別和理解它們與周圍元素的關(guān)系。

識(shí)別應(yīng)用程序欄

頂部和底部的應(yīng)用程序欄使用應(yīng)用程序主色。系統(tǒng)欄可以使用主色的深顏色或淺顏色來(lái)區(qū)分系統(tǒng)內(nèi)容和頂部應(yīng)用程序欄內(nèi)容。

要強(qiáng)調(diào)應(yīng)用程序欄和其他結(jié)構(gòu)層之間的區(qū)別，可以在附近的組件上使用第二種顏色，比如浮動(dòng)操作按鈕(FAB)。

混合應(yīng)用程序欄與背景

當(dāng)程序頂部或底部的應(yīng)用程序欄顏色與背景顏色相同時(shí)，它們將混合在一起，并且應(yīng)該強(qiáng)調(diào)內(nèi)容而不是層次結(jié)構(gòu)。

背景

背景有一個(gè)前后層。為了區(qū)分這兩層，基本內(nèi)容層顏色為原色，而基本內(nèi)容層上面的顏色為白色。

紙張和表面

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

模態(tài)框

使用對(duì)比色，比如導(dǎo)航抽屜和屏幕上臨時(shí)出現(xiàn)的底部頁(yè)面。通常這些表面是白色的，但是你可以使用應(yīng)用程序的主色或次要色。

卡片

卡片的底色是白色。這種顏色可以定制來(lái)表達(dá)品牌或提高可讀性。卡片文本和圖標(biāo)也可以使用顏色主題來(lái)提高可讀性。

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

按鈕、標(biāo)簽和選擇控件

按鈕、標(biāo)簽和選擇控件可以通過(guò)應(yīng)用主色或副色來(lái)強(qiáng)調(diào)。

顏色分類

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

2.浮動(dòng)操作按鈕和擴(kuò)展浮動(dòng)操作按鈕的基礎(chǔ)色是輔色

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

浮動(dòng)操作按鈕

浮動(dòng)操作按鈕應(yīng)該是屏幕上最容易識(shí)別的項(xiàng)目之一。

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

字體和圖標(biāo)

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

排版的層次結(jié)構(gòu)

顏色可以增加文本的可見(jiàn)性和重要性。

標(biāo)題和選項(xiàng)卡

重要的文本，如選項(xiàng)卡和標(biāo)題，可以使用主色或次要色。

文本的易讀性

當(dāng)文字在圖片上方時(shí)，會(huì)引起易讀性問(wèn)題。在文本和圖像之間創(chuàng)建一個(gè)彩色層，確保文本是清晰的。

圖標(biāo)

圖標(biāo)有助于識(shí)別操作和傳遞信息。他們的顏色應(yīng)該與背景對(duì)比，以確保清晰。