互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)（網(wǎng)頁、UI等）時(shí)，如何給產(chǎn)品選擇配色？

時(shí)間：2024-02-15 04:20:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-15 04:20:01 來源：網(wǎng)站運(yùn)營(yíng)

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)（網(wǎng)頁、UI等）時(shí)，如何給產(chǎn)品選擇配色？：?如何更好的協(xié)調(diào)UI元素，通過配色優(yōu)化UI設(shè)計(jì)？今天想和大家分享的是UI設(shè)計(jì)中的配色秘訣～

原則

一致性 與品牌相對(duì)應(yīng)。在整個(gè)UI的設(shè)計(jì)過程中，顏色應(yīng)始終保持一致性，并與其所代表的品牌兼容。

特殊性顏色應(yīng)在元素之間形成區(qū)分，并使它們之間具有足夠的對(duì)比度。

目的性應(yīng)該有目的地應(yīng)用顏色，因?yàn)樗梢酝ㄟ^多種方式傳達(dá)含義，例如元素和層次結(jié)構(gòu)之間的關(guān)系。

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

將顏色應(yīng)用于頂部和底部應(yīng)用程序欄的方式可幫助用戶識(shí)別它們并了解其與周圍元素的關(guān)系。1、識(shí)別應(yīng)用欄頂部和底部的應(yīng)用欄使用應(yīng)用程序的原色。系統(tǒng)欄可以使用原色相對(duì)應(yīng)的深色或淺色來將系統(tǒng)內(nèi)容與頂部應(yīng)用欄內(nèi)容分開。

此頂部應(yīng)用欄上使用原色（紫色500），系統(tǒng)欄上使用同一色系更深的顏色（紫色700）。

要強(qiáng)調(diào)應(yīng)用欄和其他表面之間的區(qū)別，請(qǐng)?jiān)诟浇慕M件（例如浮動(dòng)操作按鈕（FAB））上使用輔助顏色。

該底部應(yīng)用欄上使用原色（藍(lán)色700），而在浮動(dòng)操作按鈕上使用第二色（橙色500）。

如果底部應(yīng)用欄和浮動(dòng)操作按鈕的顏色相同，請(qǐng)使用陰影或其他方式在它們之間建立足夠的區(qū)別

2、將應(yīng)用欄與背景融合當(dāng)應(yīng)用程序頂部或底部的應(yīng)用欄顏色與背景顏色相同時(shí)，它們會(huì)融合在一起，從而將重點(diǎn)放在應(yīng)用程序的內(nèi)容而非結(jié)構(gòu)上。

此應(yīng)用程序的頂部應(yīng)用程序欄顏色和背景色均為原色：白色。但是，在滾動(dòng)時(shí)，頂部的應(yīng)用欄會(huì)獲得陰影，顯示其高度高于在其后滾動(dòng)的內(nèi)容。

此應(yīng)用程序使用其主藍(lán)（藍(lán)色700）顏色代表應(yīng)用程序欄，底部導(dǎo)航和背景色，因此各

個(gè)元素的突出程度較小，內(nèi)容則突出。激活狀態(tài)使用輔助黃色。它在底部導(dǎo)航中包括一個(gè)陰影，以顯示曲面之間的劃分。

二、背景

背景具有正面和背面。為了區(qū)分這兩個(gè)層，基線后層顏色是原色，基線前層顏色是白色。

此應(yīng)用在背景的背層使用其原色（紫色800）。文本字段是淺色的（紫色700）。將第二種顏色（紅色700）用作航班票價(jià)的重要內(nèi)容。

此應(yīng)用使用背景色的后層的原色（粉紅色100）和用于版式和圖標(biāo)的深色主色（粉紅色900）。此外，第二色（粉紅色50）用于表層的擴(kuò)展頁。

三、工作表和表面

工作表和表面（例如底部工作表，導(dǎo)航抽屜，菜單，對(duì)話框和卡片）的基準(zhǔn)顏色為白色。這些組件可以合并顏色以在其他表面之間形成對(duì)比度。對(duì)比度可使表面邊緣明顯，表明表面重疊時(shí)的高程差異。

本產(chǎn)品已將底部工作表和導(dǎo)航欄中的默認(rèn)白色更改為原色。

本產(chǎn)品在底頁的一部分中使用原色（紫色500）代替基線白色。該產(chǎn)品的導(dǎo)航欄使用其原色（紫色500）代替基線白色。1、導(dǎo)航切換在臨時(shí)出現(xiàn)在屏幕上的表面（例如導(dǎo)航抽屜和底頁）上使用對(duì)比色。通常這些表面是白色的，但是可以使用應(yīng)用程序的原色或第二色。

此應(yīng)用程序在底部導(dǎo)航中使用其原色藍(lán)色（藍(lán)色700），在帳戶切換器中使用較為深的顏色（藍(lán)色800），并在選擇時(shí)使用副色（橙色500）。

此應(yīng)用程序?qū)⒃ò咨┯糜谄淠Ｊ綄?dǎo)航抽屜，從而在深色字體和導(dǎo)航之間創(chuàng)建了最大的對(duì)比度。由于導(dǎo)航抽屜的背景顏色與白色相同，因此使用白色的蒙版使后面的內(nèi)容不太引人注意。

這個(gè)應(yīng)用程式會(huì)在右下方顯示一張工作表，并以原色顯示（粉紅色500）。輕按時(shí)，頁面會(huì)擴(kuò)展。

2、卡片卡的基準(zhǔn)顏色為白色?？梢远ㄖ拼祟伾珌肀磉_(dá)品牌或提高可讀性。卡片文本和圖標(biāo)還可以使用顏色主題來提高可讀性。

這些卡的表面使用原色（紫色500）。該應(yīng)用程序的背景色為白色。次要顏色（深綠色200）用于數(shù)據(jù)可視化。

卡片可以使用顏色以展示選擇或重要性。

當(dāng)卡片的文本和圖標(biāo)出現(xiàn)在圖像的前面時(shí)，可能很難閱讀。為了提高清晰度，可以使用顏色為文本和圖標(biāo)創(chuàng)建表面

此卡使用彩色蒙版來確保文本清晰易讀。

四、按鈕，選擇控件

1通過將按鈕、選擇控件應(yīng)用原色或副色，可以突出顯示它們。顏色類別

• 包含按鈕，文本按鈕和輪廓按鈕的基準(zhǔn)顏色是主要顏色。
• 浮動(dòng)操作按鈕和擴(kuò)展的浮動(dòng)操作按鈕的基準(zhǔn)顏色是輔助顏色。
• 選擇控件的基準(zhǔn)顏色是輔助顏色。

此應(yīng)用程序的顏色主題包括原色（紫色500）和深色主色（紫色600）和第二色（藍(lán)綠色200）。

1。此產(chǎn)品使用底部應(yīng)用欄的原色（紫色500）和使用副色（深200）作為浮動(dòng)操作按鈕和選擇控件的重點(diǎn)。

2.該產(chǎn)品將輔助色（深200）用作所選列表項(xiàng)的重點(diǎn)。

2按鈕，選擇控件可以通過原色或第二色來強(qiáng)調(diào)。

此應(yīng)用將其原色（粉色100）用于其擴(kuò)展的浮動(dòng)操作按鈕。它對(duì)滑塊使用其主要的深色變體（粉紅色900）。

浮動(dòng)動(dòng)作按鈕（FAB）浮動(dòng)操作按鈕（FAB）應(yīng)該是屏幕上最容易識(shí)別的項(xiàng)目之一。使用顏色在FAB和周圍的元素（例如應(yīng)用程序欄）之間創(chuàng)建對(duì)比度。輔助顏色是FAB上使用的基準(zhǔn)顏色。如果畫布使用多種顏色，則FAB可以改用單色著色，以從內(nèi)容中脫穎而出。

此應(yīng)用的輔助顏色（橙色500）應(yīng)用于FAB，與周圍的UI形成對(duì)比。

此應(yīng)用程序的顏色主題對(duì)所有按鈕，選擇控件和圖標(biāo)使用主要白色和次要黑色。這些組件之所以脫穎而出，是因?yàn)樗鼈兣c鮮艷的多色內(nèi)容形成了鮮明的對(duì)比。

五、版式和圖標(biāo)

顏色可以表示文本相對(duì)于其他文本具有更大或更小的重要性。顏色還可以確保將文字放在圖像或背景上方時(shí)仍清晰易讀，這可能會(huì)使閱讀前邊的文字變得困難。1、印刷層級(jí)顏色可以增加文本的可見性和重要性。

此應(yīng)用程序的顏色主題包括原色（紫色500）和次要顏色（橙色600）?？ǖ臉?biāo)題上用橙色裝飾，選項(xiàng)卡和按鈕上用紫色顯示。

2、標(biāo)題和標(biāo)簽

重要文字（如標(biāo)簽和標(biāo)題）可以使用您的主要或次要顏色。

此應(yīng)用使用其輔助顏色（橙色800）來強(qiáng)調(diào)并引起注意。

此應(yīng)用程序?qū)⑵湓ňG色800）用于標(biāo)簽，其粗細(xì)變化指示選中和未選中狀態(tài)。

3、文字清晰

將文字放在圖像上方時(shí)，通常會(huì)導(dǎo)致易讀性問題。在文本和圖像之間創(chuàng)建彩色圖層可以確保文本清晰易讀。

此應(yīng)用在圖像上方應(yīng)用了蒙版，以確保其上方的文字清晰易讀。

4、圖示

圖標(biāo)有助于識(shí)別動(dòng)作并提供信息。它們的顏色應(yīng)與背景形成對(duì)比，以確保它們清晰可辨。

此應(yīng)用程序使用其圖標(biāo)的原色（綠色800）和輔助色（橙色800）。

Shrine使用其主色較深的色系（粉紅色900）作為圖標(biāo)。

>>>

---

本文由WELLDESIGN獨(dú)家編譯，經(jīng)授權(quán)請(qǐng)勿轉(zhuǎn)載。