1. 色彩術(shù)語

色彩術(shù)語構(gòu)成了我們色彩知識(shí)的基礎(chǔ)。把色彩術(shù)語，如色相，色調(diào)和陰影，看作是我們可以用來開發(fā)獨(dú)特調(diào)色板的工具。

Hue（色相）

色相是色彩的一個(gè)技術(shù)術(shù)語。色相是指母色--沒有添加白色或黑色的飽和色。

Tint（淡色；淡性）

當(dāng)白色加入到一個(gè)色相中時(shí)，就會(huì)產(chǎn)生一個(gè)色彩。

Shade（色度）

當(dāng)黑色加入到一個(gè)色相中時(shí)，就會(huì)產(chǎn)生一個(gè)色度。

tone（色調(diào)）

當(dāng)灰色，無論是色調(diào)（白色）還是陰影（黑色），都被添加到一個(gè)色調(diào)中時(shí)，就會(huì)產(chǎn)生一個(gè)色調(diào)。

color value（色彩明度）

色彩明度是指顏色的明暗程度。它表示反射光的數(shù)量。

Saturation（飽和度）

飽和度是指顏色的亮度和強(qiáng)度。高飽和度的色彩鮮艷奪目，而低飽和度的色彩則暗淡無光。

2. 層次結(jié)構(gòu)

當(dāng)一個(gè)元素的外觀與周圍環(huán)境形成對(duì)比時(shí)，說明該元素具有較高的重要性。我們可以使用顏色和顏色權(quán)重來建立界面中的層次結(jié)構(gòu)。

通過使用顏色的色調(diào)，我們可以給元素分配不同的重要性。

如果一個(gè)元素比另一個(gè)元素更重要，它的視覺權(quán)重就應(yīng)該更高。這樣可以方便用戶快速瀏覽頁面，區(qū)分重要和不重要的信息。

更突出、更大膽的信息是用戶的視線會(huì)首先被吸引到的，然后他們會(huì)轉(zhuǎn)向它下面的輔助信息。

3. 表現(xiàn)力

在令人難忘的時(shí)刻展示品牌顏色，以強(qiáng)化您的品牌獨(dú)特風(fēng)格。

想想你的品牌顏色就像一盤牛油果吐司上的鹽和胡椒粉。鹽放多了，就會(huì)蓋過天然的味道，放少了，就會(huì)顯得平淡無奇。

當(dāng)在界面上添加顏色來強(qiáng)化你的品牌時(shí)，要考慮好添加的時(shí)間和地點(diǎn)。

4. 包容性

設(shè)計(jì)產(chǎn)品與建造圖書館或?qū)W校等公共建筑類似--它需要包容所有人。

網(wǎng)絡(luò)內(nèi)容無障礙指南(WCAG)有一些建議，以確保我們界面中的顏色對(duì)有運(yùn)動(dòng)、聽覺和認(rèn)知障礙的人來說是無障礙的。例如，他們的文字標(biāo)準(zhǔn)要求至少有4.5:1的對(duì)比度。

要確保你符合這些標(biāo)準(zhǔn)，請(qǐng)下載Stark，它將檢查你的設(shè)計(jì)是否無障礙。你還可以用他們的插件模擬色盲，并根據(jù)需要進(jìn)行調(diào)整。

我們經(jīng)常試圖設(shè)計(jì)出好看的東西，而忽略了考慮與我們產(chǎn)品互動(dòng)的不同用戶。

隨著我作為一個(gè)設(shè)計(jì)師的成熟，我已經(jīng)接受了所有的各種限制，這些限制會(huì)破壞我的完美設(shè)計(jì)理念。ADA合規(guī)性就是這樣的制約因素之一。

當(dāng)我們?cè)噲D為Dribbble點(diǎn)贊時(shí)，我們可以擺脫這種情況，但當(dāng)我們?yōu)檎嬲娜祟愰_發(fā)產(chǎn)品時(shí)，這不是一個(gè)好的做法。

5. 含義

顏色會(huì)喚起不同的感覺或情緒，所以通過了解顏色的心理學(xué)，我們可以利用與目標(biāo)受眾產(chǎn)生共鳴的品牌顏色。

重要的是要認(rèn)識(shí)到你的受眾是誰，記住，不同的文化和地區(qū)對(duì)顏色的認(rèn)知是不同的。例如，在西方文化中，白色往往與婚禮聯(lián)系在一起，而在亞洲文化中，白色被認(rèn)為是哀悼的顏色。

你對(duì)顏色及其含義了解得越多，它的力量就越大。

企業(yè)在品牌和營銷中，無時(shí)無刻不在使用色彩作為影響我們情緒的策略。注意到幾乎每家快餐店都會(huì)在品牌中使用紅色和黃色嗎？這是因?yàn)榧t色能引發(fā)刺激、食欲、饑餓感，它能吸引人們的注意力--而黃色則能引發(fā)快樂和友好的感覺。

6. 限制顏色

通過限制應(yīng)用程序中顏色的使用，那些確實(shí)得到顏色的區(qū)域會(huì)得到更多的關(guān)注，例如文本、圖像和按鈕等單個(gè)元素。

你會(huì)注意到，在許多有大量彩色帖子和不可預(yù)測(cè)內(nèi)容的應(yīng)用程序中，如Instagram或Twitter，他們的界面往往非常平淡。這很微妙，但它將焦點(diǎn)從界面上移開，并將其集中在內(nèi)容上。

7. 狀態(tài)

顏色可以提供一個(gè)應(yīng)用程序、其組件和元素的狀態(tài)信息。

顏色是我們?cè)诮缑嬷酗@示狀態(tài)變化的一種方式。通過淡化按鈕的顏色，可以表明按鈕已被禁用，或者用紅色高亮顯示按鈕，則表明出現(xiàn)了錯(cuò)誤。我們還應(yīng)該為我們的錯(cuò)誤顏色配上錯(cuò)誤信息和圖標(biāo)，以確保清晰，并吸引色盲用戶。

8. 一致性

界面中的顏色使用應(yīng)該是一致的，所以即使上下文發(fā)生變化，顏色的含義也總是相同的。

如果在我們的品牌中使用紅色，那么我們應(yīng)該避免使用它來通知有關(guān)錯(cuò)誤狀態(tài)。我們可以使用黃色等替代顏色來避免混淆。

這是一個(gè)很容易解決的問題，所以沒有理由避免在我們的品牌中使用紅色或黃色。

9. 色彩調(diào)色板

我如何獲得完美的調(diào)色板？

這要從對(duì)色彩理論和基本工具的簡(jiǎn)單理解開始。

第1步--原色和系統(tǒng)色

我喜歡從一個(gè)主色開始，我會(huì)根據(jù)喜好、研究或上面我在#5中分享的顏色含義來確定。

我選擇的主色是我的品牌色。

一旦我有了主色，我就需要文字、背景、容器等的顏色。

通常情況下，我會(huì)選擇一個(gè)深色的顏色，用于我的文本，而背景則是淺灰色的顏色。

第二步 - 創(chuàng)建調(diào)色板

一旦我為我的用戶界面選擇了我的基礎(chǔ)顏色，我就會(huì)把這些顏色放入Google顏色工具（接近底部），以獲得該顏色的不同色調(diào)和色調(diào)。

這并不總是完美的，但這是一種簡(jiǎn)單的方法，可以生成一個(gè)近乎完美的調(diào)色板，以后我可以根據(jù)需要添加或調(diào)整。

如果我需要互補(bǔ)色或測(cè)試可訪問性，我可以用Google色彩工具來完成所有這些工作。這是一個(gè)一站式的服務(wù)。

第三步--把所有的東西合在一起

10. 60-30-10規(guī)則

60%是你的主導(dǎo)色，30%是輔助色，10%是重點(diǎn)色。

"這個(gè)室內(nèi)設(shè)計(jì)規(guī)則是一種永恒的裝飾技巧，可以幫助你輕松地將一個(gè)色彩方案組合起來。60％+30％+10％的比例是為了給色彩帶來平衡。這個(gè)公式之所以有效，是因?yàn)樗軇?chuàng)造出一種平衡感，讓人們的視線從一個(gè)焦點(diǎn)舒適地移動(dòng)到下一個(gè)焦點(diǎn)。”

與我之前提到的技巧類似，比如少用色彩來增加強(qiáng)調(diào)和強(qiáng)化品牌，60-30-10是一個(gè)粗略的工具，可以確保我們?cè)谏噬喜蛔哌^場(chǎng)。

我還喜歡從我的界面后退幾步，瞇起眼睛。模糊的圖像會(huì)讓我更好地了解層次結(jié)構(gòu)，以及我是否使用了過多的顏色。

色彩工具和資源

 [Dribbble.com/colors](https://dribbble.com/colors/109173) 

Dribbble是我最喜歡的獲取UI靈感的地方。他們的顏色搜索功能讓你很容易就能了解到其他設(shè)計(jì)師是如何在設(shè)計(jì)中使用特定顏色的。

 [Coolors.co](https://coolors.co/palettes/trending) 

Coolors是一個(gè)瀏覽流行調(diào)色板并快速復(fù)制到設(shè)計(jì)中的好地方。

 [Shaderade](https://prowe214.github.io/color-shader/) 

Shaderade是一個(gè)快速、簡(jiǎn)單的工具，它可以利用精確的數(shù)字色調(diào)和色相生成單色方案。

原文：https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004