每當(dāng)我看到一個(gè)漂亮，優(yōu)雅并且簡(jiǎn)潔美觀的界面，就會(huì)忍不住保存下來(lái)?，F(xiàn)在，我已經(jīng)收集了100多個(gè)美不勝收的UI 界面。在一次次觀摩，欣賞和學(xué)習(xí)后，我發(fā)現(xiàn)這些界面有很多共同點(diǎn)。可究竟是什么讓我對(duì)它們一見(jiàn)鐘情呢？現(xiàn)在我找到了答案，是色彩。

本文中，結(jié)合自身經(jīng)歷，我總結(jié)了一些UI 設(shè)計(jì)配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計(jì)師，但是我保證，這些為你量身打造的UI 設(shè)計(jì)配色技巧，定會(huì)讓你受益匪淺。

1. 色彩的魔力

色彩是會(huì)說(shuō)話(huà)的，甚至可以像語(yǔ)言一樣強(qiáng)大。回想以下，每當(dāng)你初見(jiàn)一個(gè)網(wǎng)站或產(chǎn)品，給你留下第一印象的是什么呢？是視覺(jué)外觀，而視覺(jué)外觀很大程度上是取決于色彩運(yùn)用。

那么，在UI設(shè)計(jì)中，色彩究竟可以做些什么？

1）反映品牌的內(nèi)涵和品質(zhì)

顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項(xiàng)研究表明，用戶(hù)在評(píng)估一款在線(xiàn)商品時(shí)，只需花費(fèi)短短90秒，而判斷的依據(jù)高達(dá)62％至90％將取決于配色方案。

2）實(shí)現(xiàn)更佳的用戶(hù)體驗(yàn)

色彩的有效運(yùn)用能提升整體美感，提供更優(yōu)的閱讀體驗(yàn)，創(chuàng)造清晰和諧的風(fēng)格。

3）影響購(gòu)買(mǎi)決策

根據(jù)Kissmetrics的說(shuō)法，產(chǎn)品的視覺(jué)外觀是影響消費(fèi)者購(gòu)買(mǎi)決策的首要因素。此外，QuickSprout的研究也表明，90％的產(chǎn)品評(píng)估都與顏色有關(guān)。Neil Patel曾寫(xiě)到，“顏色在你購(gòu)買(mǎi)特定產(chǎn)品的原因中占據(jù)85％的分量”。正因如此，顏色已成為當(dāng)今重要的營(yíng)銷(xiāo)手段之一。

2. 色彩的基本概念

色彩被長(zhǎng)久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨(dú)特的語(yǔ)言和象征。解讀色彩的語(yǔ)言，請(qǐng)看下表：

點(diǎn)擊此處添加圖片說(shuō)明文字

3. UI 設(shè)計(jì)配色技巧

1） 色彩使用也講究“天時(shí)地利人和”

存在即合理，沒(méi)有哪一個(gè)色彩本身就是丑陋和不具備美感的，只能說(shuō)，如果我們錯(cuò)誤的使用了色彩，那么它的美一旦被破壞，就只剩下丑陋和別扭了。

想象一下，如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對(duì)他們的炸雞充滿(mǎn)饑腸轆轆的感覺(jué)嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對(duì)，為什么？因?yàn)檫@樣會(huì)讓她們看起來(lái)性感迷人。

不同的顏色傳達(dá)不同的含義和感覺(jué)。如何明智地進(jìn)行選取和搭配呢？這里請(qǐng)注意5點(diǎn)：選取合適的顏色，運(yùn)用于合適的設(shè)計(jì)場(chǎng)景，注意時(shí)間變化，關(guān)注目標(biāo)用戶(hù)，明確想要達(dá)到的目的。

這里請(qǐng)認(rèn)真查看上圖，明確顏色的意義。但如果你非要冒險(xiǎn)追求獨(dú)一無(wú)二的設(shè)計(jì)，那么祝您好運(yùn)。

點(diǎn)擊此處添加圖片說(shuō)明文字

2）留心藍(lán)色

為什么專(zhuān)門(mén)談藍(lán)色？藍(lán)色不是海洋天空的專(zhuān)屬色，藍(lán)色也是UI 設(shè)計(jì)的青睞色。

看看你常用的一些比較有名的APP或者網(wǎng)站，比如Facebook，Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢？是的，它們的界面都是藍(lán)色，各種層次的藍(lán)色。

有研究表明，藍(lán)色是唯一一種讓女性和男性都鐘愛(ài)的顏色。藍(lán)色幾乎無(wú)處不在，大自然中，各網(wǎng)站的UI界面，服飾衣物等，藍(lán)色隨處可見(jiàn)。包括我此刻寫(xiě)入文章的Microsoft Word，界面也是藍(lán)色的。

藍(lán)色無(wú)疑是一種安全的顏色，它能最大程度上獲得用戶(hù)的信任并被廣泛接受，藍(lán)色可以說(shuō)是UI配色中的典型例子。如果你的UI界面沒(méi)有更好的選擇，請(qǐng)用藍(lán)色。

點(diǎn)擊此處添加圖片說(shuō)明文字

3）背景色和元素之間的色彩變化技巧

看看以下的界面：

（來(lái)源）

這里暫且不談這又是關(guān)于藍(lán)色的UI界面，讓我們專(zhuān)注于它的色彩變化。主題顏色是藍(lán)色，其他元素是較暗的藍(lán)色和更明亮的藍(lán)色。整體看上去，各層次的顏色平衡和諧且又脈絡(luò)清晰。

怎么做到自然而又極具美感的色彩變化？

只是一個(gè)簡(jiǎn)單的黃金法則：通過(guò)降低亮度和增加飽和度可以使色彩變得更深；通過(guò)增加亮度和降低飽和度來(lái)使色彩變得更淺。

4）色彩組合的黃金比例——（6：3：1）規(guī)則

在設(shè)計(jì)時(shí)，色彩組合必不可免。組合顏色很容易，但組合后如何避免色彩混亂和累贅？如何既能夠不顯得單調(diào)又展示設(shè)計(jì)感？

記住二個(gè)原則：

第一個(gè)：6：3：1規(guī)則

60％+ 30％+ 10％的比例是為了平衡顏色。這個(gè)公式能創(chuàng)造出一種平衡的感覺(jué)，并能提供更佳的用戶(hù)體驗(yàn)，可以讓用戶(hù)的實(shí)現(xiàn)從一個(gè)點(diǎn)舒緩的移動(dòng)到另一個(gè)點(diǎn)。

第二個(gè)：最多3個(gè)原色

這個(gè)規(guī)則與黃金（6：3：1）規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。

5）顏色組合和互補(bǔ)

提供和諧的配色方案時(shí)，需要注意些什么？在這個(gè)過(guò)程中需要考慮以下方面：

第一， 色調(diào)

您可以在色環(huán)上生成單個(gè)“色度”的許多變體。通過(guò)添加白色，黑色和灰色來(lái)生成不同的色調(diào)。

實(shí)現(xiàn)平衡色調(diào)，最簡(jiǎn)單的方案是單色（單色）方案。

第二， 對(duì)比

顏色的不同對(duì)比可以喚起不同的情感反應(yīng)。色輪上相對(duì)的兩種顏色可以提供最高的對(duì)比度，比如黑色和白色。強(qiáng)烈的對(duì)比度可以讓人集中精力，并且產(chǎn)生緊張的心情; 柔和的對(duì)比度則適用于輕松、休閑的UI設(shè)計(jì)。

注意：對(duì)比的使用不要過(guò)火，這樣容易使用戶(hù)產(chǎn)生困擾。

6）黑白色搭配不過(guò)時(shí)

黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。黑色是一個(gè)很好的選擇，有種高端和永恒的感覺(jué)，而白色可以帶給用戶(hù)自由，寬敞和透氣的感覺(jué)。如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營(yíng)造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。

7）從自然和藝術(shù)中獲得靈感

自然與藝術(shù)是靈感的主要源泉。抬頭看看天空，你會(huì)發(fā)現(xiàn)藍(lán)色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計(jì)更加切合用戶(hù)的審美，非常自然，不帶刻意的痕跡。而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。

8）顏色心理學(xué) – 避免性別誤區(qū)

或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛(ài)藍(lán)色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍(lán)色，綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶(hù)群是男性時(shí)，選擇能傳達(dá)男性氣概的色彩。如果你把運(yùn)動(dòng)類(lèi)App的界面使用了女性色彩，結(jié)果可想而知。

還有一個(gè)誤區(qū)，人們以為粉色是女性的喜愛(ài)，但結(jié)果也許會(huì)讓你大跌眼鏡。

4. 工具和模板

這里我總結(jié)了一些有助于UI配色的工具和模板，希望對(duì)您有所幫助：

1）Coolors.co

Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。

2）Mockplus

Mockplus是一款非常方便的UI / UX設(shè)計(jì)工具，其啟動(dòng)頁(yè)面加入了配色精美的示例項(xiàng)目和模板，可直接導(dǎo)入桌面客戶(hù)端。其編輯器中，可對(duì)組件進(jìn)行多樣的色彩設(shè)置和編輯，內(nèi)部也包含完整的顏色選擇器，支持導(dǎo)入圖片和GIF，如果您是要在原型設(shè)計(jì)過(guò)程中產(chǎn)出精美的UI 界面，Mockplus能滿(mǎn)足您的需求。

3）Paletton

Paletton有點(diǎn)類(lèi)似于Kuler，但又不僅限于5個(gè)色調(diào)。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時(shí)，Paletton將會(huì)是您很好的選擇，它可以創(chuàng)建協(xié)同色彩組合工作，是強(qiáng)大的UI調(diào)色板。

4）Check my Color

Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具，也是一款能夠檢查不同網(wǎng)頁(yè)自己的顏色亮度和對(duì)比度差異的工具。

5）Chinaz

該網(wǎng)站提供了豐富的配色資源，包括在線(xiàn)調(diào)色板，網(wǎng)頁(yè)常用色彩，web安全色以及網(wǎng)頁(yè)顏色選擇器，會(huì)使您UI 配色的一個(gè)很好的幫助。建議對(duì)色彩運(yùn)用比較初級(jí)的設(shè)計(jì)師可以做一個(gè)參考。

注意：可用性是關(guān)鍵

創(chuàng)建華麗的UI界面永遠(yuǎn)不是最終的目標(biāo)。提供卓越的用戶(hù)體驗(yàn)，為用戶(hù)的生活增添快樂(lè)和幸福才是我們?cè)O(shè)計(jì)的目的。因此，在UI 設(shè)計(jì)配色上，每位UI設(shè)計(jì)師應(yīng)該記住，界面應(yīng)該是符合高度實(shí)用和并且清晰明了的。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)