關(guān)于UI界面設(shè)計中的色彩使用原則

關(guān)于色彩的術(shù)語，是人們對色彩的基本知識，普遍的術(shù)語有，例如色相、色調(diào)和陰影...等，被視為我們可以用來開發(fā)獨特調(diào)色板的工具。

一、色彩術(shù)語
色相：指不加白色或黑色的飽和顏色
淡色：如果把白色加到顏色相中，就會產(chǎn)生顏色。

色度：如果將黑色添加到顏色相中，就會產(chǎn)生色度。

色調(diào)：一種色調(diào)是在將灰色(白色)或陰影(黑色)加入一種色調(diào)時產(chǎn)生的。

亮度：顏色的明暗度是指顏色的亮度。這代表了反射光量。
飽和度：指顏色的亮度和強(qiáng)度。高飽和顏色鮮艷，低飽和顏色則暗淡無光。

二、層次結(jié)構(gòu)

如果一種元素的外觀與其周圍環(huán)境相比較，則說明該元素的重要性，在UI界面設(shè)計中，我們可以使用顏色和顏色權(quán)重來建立層次結(jié)構(gòu)，利用色彩的色調(diào)，我們可以賦予元素不同的重要性，若一種元素比另一種元素更重要，則其視覺權(quán)重應(yīng)更高，便于用戶快速瀏覽網(wǎng)頁，區(qū)分重要信息和不重要信息。一個更加顯著和大膽的信息是，首先吸引用戶的視線，然后再轉(zhuǎn)向它下面的輔助信息。

三、表現(xiàn)能力

展示品牌色彩，在令人難忘的時刻，強(qiáng)化你的品牌獨特風(fēng)格，想象一下你的商標(biāo)顏色就像一盤牛油果烤面包里的鹽和胡椒。食鹽放多了，就會蓋過自然味道，放少了，就會顯得單調(diào)，用色彩來加強(qiáng)品牌形象的時候，一定要考慮到什么時候，什么地方可以加入。

四、包容

該產(chǎn)品的設(shè)計類似于修建圖書館或?qū)W校這樣的公共建筑，它需要包容所有人。

網(wǎng)上內(nèi)容無障礙指南(WCAG)提供了一些建議，以確保運動、聽覺和認(rèn)知障礙患者可以使用界面中的顏色。舉例來說，他們的書寫標(biāo)準(zhǔn)要求對比度至少為4.5:1。

為了確保你符合這些標(biāo)準(zhǔn)，下載Stark，它會檢查你的設(shè)計是否沒有任何障礙。您也可以使用他們的插件來模擬色盲，并根據(jù)需要進(jìn)行調(diào)整。

在設(shè)計產(chǎn)品時，我們常常會嘗試去設(shè)計一些好看的東西，而忽視了考慮交互的用戶。

當(dāng)我成熟為一名設(shè)計師時，我已經(jīng)接受了各種各樣的限制，它們會破壞我完美的設(shè)計理念。符合ADA就是這種限制之一。

如果我們想為Dribbble點贊，我們就能擺脫這種情況，但是當(dāng)我們?yōu)檎嬲娜祟愰_發(fā)產(chǎn)品時，這樣做就不好了。

五、意義

色彩能激發(fā)出不同的情感，因此，通過對色彩的心理理解，我們可以利用品牌色彩來與目標(biāo)受眾產(chǎn)生共鳴。

要知道，你的受眾是誰，記住，不同的文化背景和地域?qū)ι实恼J(rèn)知是不同的。舉例來說，在西方文化中，白色常與婚禮有關(guān)，而在亞洲文化中，白色則被視為哀悼的顏色，彩和它的意義你越了解，它的力量就越強(qiáng)大。

公司在品牌和營銷方面，總是用顏色來作為影響我們情緒的策略。請注意，幾乎所有的快餐店都會在商標(biāo)中使用紅色和黃色？因為紅色可以激發(fā)激情、食欲、饑餓感，可以引起人們的注意，而黃色可以激發(fā)快樂和友善的感覺。

六、限制色彩

由于在應(yīng)用程序中限制了顏色的使用，那些獲得顏色的區(qū)域?qū)⒌玫礁嗟年P(guān)注，比如文本、圖片和按鈕等單個元素。

您將注意到，在許多具有色彩豐富和不可預(yù)知內(nèi)容的應(yīng)用程序中，例如Instagram或Twitter，它們的界面通常很單調(diào)。它的精妙之處在于把焦點從界面轉(zhuǎn)移到了內(nèi)容上面。

七、不同狀態(tài)

色彩提供了應(yīng)用程序及其組件和元素的狀態(tài)信息。

色彩是一種顯示界面狀態(tài)變化的方式。如果淡化按鈕的顏色，表示按鈕已被禁用，或?qū)粹o顯示為紅色，則表明發(fā)生了錯誤。此外，我們也應(yīng)該在錯誤的顏色上加上錯誤的信息和圖標(biāo)，以確保清晰，并吸引色盲用戶。

八、協(xié)調(diào)一致

在界面上使用的顏色應(yīng)該是一致的，因此即使環(huán)境改變了，顏色的意義也總是一樣的。

假如我們的品牌使用了紅色，那么我們就應(yīng)該避免用它來通知相關(guān)的錯誤狀態(tài)。為了避免混淆，我們可以用黃色等替代色。

解決這個問題并不難，因此我們沒有理由不在商標(biāo)上使用紅或黃。

九、調(diào)色板

怎樣得到完美的調(diào)色板？

首先要對色彩理論和基本工具有一個簡單的了解。

步驟1-基本顏色和系統(tǒng)顏色：

我喜歡從主要的顏色開始，我會根據(jù)偏好，研究，或者以上我在5號分享的顏色的含義來決定。

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

得到主色之后，我需要文本的顏色、背景、容器等。

一般來說，我會為文本選擇一種深色，而背景的顏色是淡灰色。

十、創(chuàng)建調(diào)色板

在為用戶界面選擇了基本色之后，我將這些顏色放置到Google顏色工具中(接近底部)，以得到該顏色的不同色調(diào)和色調(diào)。

它不一定總是完美的，但是它是一種簡單的方式來生成一個近乎完美的調(diào)色板，我可以在需要時添加或調(diào)整。

當(dāng)我需要補(bǔ)充顏色或者測試易訪問性時，我可以使用Google顏色工具來做所有這些事情。它提供一站式服務(wù)。

十一、把所有的東西放在一起

60-30-10規(guī)則，主要顏色有60%，次要顏色有30%，重點顏色有10%。

”這條室內(nèi)設(shè)計原則是一項永恒的裝飾技巧，它能幫助你輕松組合出不同的顏色。為平衡色彩，60%+30%+10%為宜。這套方法很有效，因為它創(chuàng)造了一種平衡感，使人的視線可以舒服地從一個焦點移到另一個。

就像之前提到的，比如減少色彩來加強(qiáng)品牌力，60-30-10是個很粗糙的工具，它能保證我們在色彩方面不會走過場。

同時，我也喜歡在我的界面上后退幾步，瞇起眼睛。這張模糊的圖片讓我對層次結(jié)構(gòu)有了更好的理解，還有是否使用了太多的顏色。

最后關(guān)于配色工具和資源

Drbbble:  https://dribbble.com/colors/109173
Coolors.co： https://coolors.co/palettes/trending
Shaderade： https://prowe214.github.io/color-shader/