正文

ui設(shè)計(jì)三要素（ui設(shè)計(jì)三大原則）

發(fā)布時(shí)間：2023-04-28 01:09:48 稿源：創(chuàng)意嶺閱讀： 545

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于ui設(shè)計(jì)三要素的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶(hù)遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、web前端開(kāi)發(fā)技術(shù)三要素的含義和功能
2、ui設(shè)計(jì)學(xué)出來(lái)好嗎，在重慶哪里學(xué)好呢？
3、色彩知識(shí)系列——色彩三要素
4、三原色與三間色換一副四季主題作品？

ui設(shè)計(jì)三要素（ui設(shè)計(jì)三大原則）

一、web前端開(kāi)發(fā)技術(shù)三要素的含義和功能

web前端開(kāi)發(fā)技術(shù)包括三個(gè)要素：HTML、CSS和JavaScript，想要系統(tǒng)學(xué)習(xí)web前端開(kāi)發(fā)技術(shù)可以去千鋒教育，教學(xué)水平高，保障每位學(xué)子學(xué)到真才實(shí)學(xué)。

HTML、CSS、JavaScript這三個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。

想要了解更多有關(guān)web前端的相關(guān)信息，推薦咨詢(xún)千鋒教育。千鋒教育成立教研學(xué)科中心，推出貼近企業(yè)需求的線下技能培訓(xùn)課程。課程包含HTML5大前端培訓(xùn)、JavaEE+分布式開(kāi)發(fā)培訓(xùn)、Python人工智能+數(shù)據(jù)分析培訓(xùn)、全鏈路UI/UE設(shè)計(jì)培訓(xùn)、云計(jì)算培訓(xùn)、全棧軟件測(cè)試培訓(xùn)、大數(shù)據(jù)+人工智能培訓(xùn)、智能物聯(lián)網(wǎng)+嵌入式培訓(xùn)、Unity游戲開(kāi)發(fā)培訓(xùn)、網(wǎng)絡(luò)安全培訓(xùn)、區(qū)塊鏈培訓(xùn)、影視剪輯包裝培訓(xùn)、游戲原畫(huà)培訓(xùn)、全媒體運(yùn)營(yíng)培訓(xùn)。采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，非常值得選擇。

二、ui設(shè)計(jì)學(xué)出來(lái)好嗎，在重慶哪里學(xué)好呢？

學(xué)設(shè)計(jì)不如學(xué)【視頻剪輯】。理由很簡(jiǎn)單，容易學(xué)（不像其它行業(yè)學(xué)習(xí)成本高，難度大），適合短期3-4個(gè)月短期學(xué)習(xí)，而且行業(yè)缺口非常大，無(wú)論是找工作還是自己在家里接私單，月收入輕松過(guò)萬(wàn)，兩三萬(wàn)也是稀松平常?！军c(diǎn)擊進(jìn)入】免費(fèi)“短視頻剪輯后期”學(xué)習(xí)網(wǎng)址：

www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=313&zdhhr-11y17r-1368478978262353939

因?yàn)楝F(xiàn)在【短視頻】的崛起，任何企業(yè)，任何工作室或者個(gè)人都需要制作剪輯大量的短視頻來(lái)包裝品牌，發(fā)抖音，發(fā)朋友圈，發(fā)淘寶等自媒體渠道做展示。因?yàn)槊刻於家虏l(fā)布新內(nèi)容，所以剪輯師根本招不夠，，供需失衡就造成了剪輯師高薪水。

而且剪輯這個(gè)技術(shù)并不需要高超的電腦技術(shù)，也不需要美術(shù)音樂(lè)造詣，基本都是固定套路，要什么風(fēng)格的片要什么節(jié)奏，經(jīng)過(guò)三四個(gè)月的培訓(xùn)都可以輕松掌握。但凡有點(diǎn)電腦基礎(chǔ)會(huì)用鼠標(biāo)拖拽，會(huì)點(diǎn)擊圖標(biāo)，會(huì)保存除非自己不想學(xué)，沒(méi)有學(xué)不會(huì)的。但是要學(xué)好學(xué)精，就一定要找專(zhuān)業(yè)負(fù)責(zé)的培訓(xùn)機(jī)構(gòu)了，推薦這個(gè)領(lǐng)域的老大——【王氏教育】

在“短視頻剪輯/短視頻運(yùn)營(yíng)/視頻特效”處理這塊，【王氏教育】是國(guó)內(nèi)的老大，每個(gè)城市都是總部直營(yíng)校區(qū)。跟很多其它同類(lèi)型大機(jī)構(gòu)不一樣的是：王氏教育每個(gè)校區(qū)都是實(shí)體面授，老師是手把手教，而且有專(zhuān)門(mén)的班主任從早盯到晚，爆肝式的學(xué)習(xí)模式，提升會(huì)很快，特別適合0基礎(chǔ)的學(xué)生。王氏教育全國(guó)直營(yíng)校區(qū)面授課程試聽(tīng)【復(fù)制后面鏈接在瀏覽器也可打開(kāi)】： www.huixueba.com.cn/school/yingshi?type=2&zdhhr-11y17r-1368478978262353939

大家可以先把【繪學(xué)霸】APP下載到自己手機(jī)，方便碎片時(shí)間學(xué)習(xí)——繪學(xué)霸APP下載： www.huixueba.com.cn/Scripts/download.html

三、色彩知識(shí)系列——色彩三要素

隨著生活水平的提高，我們對(duì)生活中美的追求也越來(lái)越高。

隨著經(jīng)濟(jì)的發(fā)展，各行業(yè)都誕生了專(zhuān)業(yè)的設(shè)計(jì)師，例如UI設(shè)計(jì)師、平面設(shè)計(jì)師、室內(nèi)設(shè)計(jì)師等。各行業(yè)的設(shè)計(jì)工作都有一項(xiàng)基礎(chǔ)的硬技能，而這個(gè)技能正是辨別設(shè)計(jì)師水平高低的辦法之一。

它就是——色彩。

所以今天開(kāi)始向各位設(shè)計(jì)師小伙伴系統(tǒng)的分享一些色彩方面的專(zhuān)業(yè)知識(shí)。也期望能幫助到剛進(jìn)入設(shè)計(jì)行業(yè)的同學(xué)系統(tǒng)的提升自己的色彩能力。

色彩是人腦識(shí)別反射光的強(qiáng)弱和不同波長(zhǎng)所產(chǎn)生的差異感覺(jué)，生活中看到的所有“色彩”都不是物體本身的顏色，并且人類(lèi)肉眼所能看見(jiàn)的光只是光譜中的很小一部分，人類(lèi)所能感知的色彩稱(chēng)為“可見(jiàn)光”，可見(jiàn)光是電磁波譜中人眼可以感知的部分，一般在380納米到780納米波長(zhǎng)范圍內(nèi)，包括從紫色到紅色的所有色彩的光。不少生物能看見(jiàn)的光波范圍和人類(lèi)不一樣，例如蜜蜂能看到紫外線波段，便于尋找花蜜。

以下說(shuō)的色彩的概念是人眼可感知的”可見(jiàn)光“。

色彩大體上可以分為“有彩色”（擁有色彩三屬性的全部色彩）和“無(wú)彩色”（指黑、白和各種明度的灰色，這三種色彩沒(méi)有色相和純度屬性）兩類(lèi)。

色彩三屬性：色相、明度、純度。

色相：顏色的相貌，是顏色間彼此區(qū)分的明顯特征。指物理學(xué)或心理學(xué)上能區(qū)別的基本顏色“紅、橙、黃、綠、青、藍(lán)、紫”，黑白灰沒(méi)有色相屬性。

色相帶給人的感受大體分為三種：冷色系（藍(lán)色、藍(lán)綠色等）、暖色系（紅色、橙色、黃色等）、中間色系（紫色系和綠色系），中間色基本上不能單獨(dú)營(yíng)造冷暖印象。

明度：色彩的明亮程度，添加白色會(huì)使明度升高，添加黑色則使明度下降。明度也是決定文字可讀性和物體外觀的重要元素。明度分為兩種：1.相同色相的不同明度 2.不同色相的不同明度。

在有彩色中明度最高的是黃色，明度最低的是紫色。明度越高，色彩越白越亮，反之則越暗。

純度：又稱(chēng)色彩的飽和程度或鮮艷程度，色彩的純度越高，顏色越鮮艷，就更容易形成強(qiáng)勁有力、充滿(mǎn)朝氣的印象，而純度越低，顏色越蒼白，就更容易形成成熟、穩(wěn)重的印象。

總結(jié)一下，這次主要講了色彩三要素：色相、明度、純度的概念，以及他們之間變化時(shí)對(duì)色彩的影響。

四、三原色與三間色換一副四季主題作品？

編輯導(dǎo)語(yǔ)：一款好的產(chǎn)品不止需要隨著市場(chǎng)背景和用戶(hù)需求進(jìn)行更新迭代，符合產(chǎn)品定位、美觀且舒適的產(chǎn)品設(shè)計(jì)也尤為重要。而對(duì)產(chǎn)品設(shè)計(jì)的色彩把握可能便是設(shè)計(jì)的基礎(chǔ)之一。本篇文章里，作者就對(duì)產(chǎn)品設(shè)計(jì)中的色彩運(yùn)用進(jìn)行了詳細(xì)的介紹和梳理，相信讀完之后會(huì)對(duì)你有所幫助。

一幅優(yōu)秀作品，用對(duì)顏色、顏色用好，提升品質(zhì)感。

界面設(shè)計(jì)中，色彩的搭配比例，使得界面信息層級(jí)準(zhǔn)確，方便用戶(hù)閱讀。

一、色彩的基礎(chǔ)知識(shí)

配色、排版、字體是視覺(jué)設(shè)計(jì)中重要的三大因素。三個(gè)因素都可以影響到視覺(jué)設(shè)計(jì)的呈現(xiàn)。

在設(shè)計(jì)中，色彩是整個(gè)畫(huà)面中最能影響用戶(hù)體驗(yàn)情感的元素之一，一起來(lái)體驗(yàn)色彩的世界。

1. 色彩的基本知識(shí)

在設(shè)計(jì)與繪畫(huà)藝術(shù)中，將冷暖色分為三種色調(diào)：

暖色調(diào)：紅色、橙色、黃色；
冷色調(diào)：青色、藍(lán)色；
中性色調(diào)：紫色和綠色相對(duì)中性色調(diào)。

冷暖色

在設(shè)計(jì)中的應(yīng)注意其比例、輕重、色環(huán)的位置，最后的視覺(jué)呈現(xiàn)要符合人們視覺(jué)上和心理上的舒適感。

冷色會(huì)讓人想到大海、冰雪等，讓人產(chǎn)生廣闊、平靜、冷的感覺(jué)；暖色則會(huì)讓人聯(lián)想到太陽(yáng)、篝火等，讓人產(chǎn)生了溫暖、熱情的感覺(jué)。

三原色

傳統(tǒng)美術(shù)色彩的三原色是：紅，黃，藍(lán)。簡(jiǎn)稱(chēng) RGB，R（紅Red）、G（綠Green）、B（藍(lán)Blue）。原色的色彩純度最高、最純凈，也最鮮艷，可以調(diào)配出絕大多數(shù)色彩，是一種加色模型。而其他顏色則不能調(diào)配出三原色。

間色是兩種原色配合成的顏色。如紅和黃配合成的橙色，黃和藍(lán)配合成的綠色，紅和藍(lán)配合成的紫色。

橙、綠、紫三種顏色又叫“三間色”。

復(fù)色是用原色與間色相調(diào)或用間色與間色相調(diào)而成的”三次色”。

復(fù)色是最豐富的色彩家族。復(fù)色包括了除原色和間色以外的所有顏色。因含有三原色，所以含有黑色成分，純度低，復(fù)色種類(lèi)繁多，千變?nèi)f化。比如：紅色和紫色混合而成紫紅色，黃色和橙色混合而成得到橙黃色。

互補(bǔ)色/同類(lèi)色/對(duì)比色

互補(bǔ)色是色相環(huán)中呈180度角的兩種顏色，如紅色與綠色、藍(lán)色與橙色、黃色與紫色等?；パa(bǔ)色能補(bǔ)充色彩情感表達(dá)的缺失感，調(diào)節(jié)互補(bǔ)色的明度和飽和度能改變情感的走向。
同類(lèi)色是同一色相中不同傾向的系列顏色，如黃色系里的橘黃色、中黃、淡黃色等顏色。色相環(huán)內(nèi)是15°以?xún)?nèi)。
對(duì)比色是色相環(huán)中呈120度至150度的任意兩種顏色，如紅色與藍(lán)色等。

互補(bǔ)色、同類(lèi)色與對(duì)比色，如下圖所示。

冷色/暖色/無(wú)彩色

冷暖色(Cool/Cold & Warm colour) 指色彩心理上的冷熱感覺(jué)。

色彩的冷暖感覺(jué)又被稱(chēng)為冷暖屬性。色彩的冷暖感覺(jué)是相對(duì)的，色彩的冷暖感覺(jué)都是相對(duì)存在的。比如說(shuō)紫色和黃色，紫色中的紅紫色較暖，而藍(lán)紫色則較冷。

無(wú)彩色（achromatic color）指除了彩色以外的其它顏色，常見(jiàn)的有黑、白、灰。明度從0變化到100，而飽和度很小接近于0。

無(wú)彩色是指金、銀、黑、白、灰。試將純黑逐漸加白，使其由黑、深灰、中灰、淺灰直到純白，分為11個(gè)階梯，成為明度漸變，做成一個(gè)明度色標(biāo)（也可用于有彩色系），凡明度在0°～3°的色彩稱(chēng)為低調(diào)色，4°～6°的色彩稱(chēng)為中調(diào)色，7°～10°的色彩稱(chēng)為高調(diào)色。

暖色和冷色的視覺(jué)感受，如下圖所示。

色彩三要素：色相/純度/明度

色相是指不同的顏色的相貌，與亮度、飽和度無(wú)關(guān)。在通常的使用中，色相由顏色的名稱(chēng)標(biāo)識(shí)，如紅色、橙色或綠色等色相。

純度通常是指色彩的鮮艷的飽和程度。色彩含有色成分的比例越大，則純度越高。含有色成分的比例越小，純度越低。當(dāng)一種顏色摻入白色時(shí)，純度就會(huì)降低。

明度是指色彩的明暗程度。

同一顏色在強(qiáng)光照射下顯得較明亮，而在弱光照射下顯得較灰暗、模糊。針對(duì)同一種顏色，深入不同的黑色或白色后，會(huì)產(chǎn)生不同的明暗層次感。

黃色明度最高，藍(lán)紫色明度最低，紅色和綠色的明度中等。同時(shí)，一般純度發(fā)生改變時(shí)，明度也會(huì)隨之改變。

色相、純度和明度。如下圖所示。

2. 色彩在界面設(shè)計(jì)中的作用

彩色文字會(huì)告訴用戶(hù)可以點(diǎn)擊的文字鏈接，而灰色的按鈕則會(huì)讓用戶(hù)認(rèn)為此按鈕不可點(diǎn)擊。

1）整體思考色彩在設(shè)計(jì)中的構(gòu)成元素

圖形化用戶(hù)界面，用戶(hù)在看到一個(gè)界面時(shí)，是一個(gè)由背景色、矩形按鈕及圖標(biāo)ICON 設(shè)計(jì)、卡片等設(shè)計(jì)元素構(gòu)成的。在設(shè)計(jì)界面時(shí)，借助色彩可以直觀的展示背景色、導(dǎo)航欄、狀態(tài)欄和操作按鈕等構(gòu)成的設(shè)計(jì)元素，并讓產(chǎn)品設(shè)計(jì)的界面的邏輯架構(gòu)和信息層級(jí)得到很好地展現(xiàn)。

如圖所示，明確的模塊內(nèi)容和色彩，可以讓用戶(hù)更好地閱讀內(nèi)容，同時(shí)信息層級(jí)明確、排版都會(huì)很不錯(cuò)。

2）明確視覺(jué)層級(jí)關(guān)系

產(chǎn)品界面設(shè)計(jì)中，不同的內(nèi)容應(yīng)該呈現(xiàn)出不同的層級(jí)關(guān)系。例如，任務(wù)與背包間的同級(jí)關(guān)系，螞蟻森林與內(nèi)容間的叢屬關(guān)系等。

利用同色系、色彩之間的色相差異可非常直觀的區(qū)分內(nèi)容的層級(jí)關(guān)系，同時(shí)還可以通過(guò)色彩間的強(qiáng)對(duì)比突出關(guān)鍵內(nèi)容。

如圖所示，螞蟻森林通過(guò)色彩的強(qiáng)弱區(qū)分視覺(jué)層級(jí)，綠色在視覺(jué)上層級(jí)最高，重要按鈕與文字使用綠色，可以讓畫(huà)面內(nèi)容的層級(jí)關(guān)系更清晰明確。

3）突出產(chǎn)品風(fēng)格

色彩的搭配可以直接反映出這種產(chǎn)品的風(fēng)格和產(chǎn)品屬性。

例如，金融類(lèi)App 界面中常用的藍(lán)色，工具類(lèi)App 界面中常用的藍(lán)色等。

如圖所示。左邊金融App界面中的藍(lán)色與右邊美團(tuán)買(mǎi)菜App界面中的多色圖標(biāo)的設(shè)計(jì)，都是通過(guò)色彩來(lái)營(yíng)造產(chǎn)品氛圍的，提升用戶(hù)體驗(yàn)設(shè)計(jì)感，展示產(chǎn)品設(shè)計(jì)中的功能。

3. 色彩的對(duì)比

在界面設(shè)計(jì)中，色彩的對(duì)比形式豐富多彩。

1）色相對(duì)比

同類(lèi)色對(duì)比

使用同類(lèi)色對(duì)比的優(yōu)點(diǎn)是，可以營(yíng)造出和諧統(tǒng)一的界面效果。

在界面設(shè)計(jì)中，一些品牌格調(diào)比較鮮明的產(chǎn)品一般都使用同類(lèi)色對(duì)比。

如下圖所示，產(chǎn)品設(shè)計(jì)的界面效果，整個(gè)界面基本貫穿使用了綠色這一種色相，并且僅通過(guò)調(diào)整綠色的明度和純度來(lái)適應(yīng)不同的場(chǎng)景需求，產(chǎn)品格調(diào)令人記憶深刻。

互補(bǔ)色對(duì)比

使用互補(bǔ)色對(duì)比的優(yōu)點(diǎn)是，可以讓畫(huà)面更具張力，營(yíng)造出視覺(jué)上的反差，吸引用戶(hù)關(guān)注。

常見(jiàn)的互補(bǔ)色有紅色與綠色、黃色與紫色、以及橙色與藍(lán)色等。

因此，在使用互補(bǔ)色對(duì)比時(shí)，設(shè)計(jì)師通常需要遵循大調(diào)和、小對(duì)比的原則，即將一種顏色大面積使用，然后將其對(duì)比色局部使用。

同時(shí)，將明度相同、彩度很高的等量互補(bǔ)色搭配在一起，可以使界面看起來(lái)鮮明，如紅色配綠色等。

黃色與紫色由于明度差距較大，不會(huì)產(chǎn)生刺眼的效果，因此黃色與紫色的對(duì)比搭配方式也經(jīng)常被用到。

如圖所示，App的界面設(shè)計(jì)的效果，在主色為紫色的情況下，將一些按鈕設(shè)置為黃色，可以提升按鈕的視覺(jué)層級(jí)，增強(qiáng)用戶(hù)的點(diǎn)擊欲望。

2）純度對(duì)比

使用純度對(duì)比的優(yōu)點(diǎn)是，讓頁(yè)面分清主次。若將比較重要的元素設(shè)置為純度較高的顏色，則可以被人優(yōu)先注意到。

如圖所示為，不同純度下 “小米金融” App設(shè)計(jì)，品類(lèi)區(qū)的圖標(biāo)設(shè)計(jì)效果的對(duì)比。圖標(biāo)的顏色純度都較高，界面信息層級(jí)都很明確。

在純色搭配中，純度對(duì)比越弱，畫(huà)面沖擊力也越弱，畫(huà)面效果較溫和，適合長(zhǎng)時(shí)間和近距離觀看；純度對(duì)比越強(qiáng)，畫(huà)面越明朗富有生氣，畫(huà)面表達(dá)越直觀。

如圖所示為：純度強(qiáng)對(duì)比在插畫(huà)中的應(yīng)用效果。通過(guò)純度的強(qiáng)對(duì)比表現(xiàn)，可以強(qiáng)化畫(huà)面視覺(jué)的前后關(guān)系和主次關(guān)系，平衡畫(huà)面的視覺(jué)感受，突出主體物的表達(dá)。

3）明度對(duì)比

明度對(duì)比是指色彩的明暗程度的對(duì)比，也指色彩的黑白灰的對(duì)比。在心理學(xué)中，明度對(duì)比也稱(chēng)明暗對(duì)比或亮度對(duì)比。物體受不同明度背景的影響，可以產(chǎn)生不同的視覺(jué)感受?；疑ㄔ诎咨尘跋赂杏X(jué)變暗。在黑色背景下，感覺(jué)變亮了。

在明度對(duì)比中，黑色和白色是最強(qiáng)的對(duì)比組合，而黑色與深灰色、白色與淺灰色是較弱的對(duì)比組合。

在同一色相、同一純度的顏色中混入的黑色越多，明度就越低；在同一色相、同一純度的顏色中混入的白色越多，明度就越高。利用明度對(duì)比，可展現(xiàn)出色彩的前后空間感、畫(huà)面的層次感、體積感等。

明度對(duì)比越強(qiáng)，光感越強(qiáng)，界面的表達(dá)越明確主題。如下圖所示。

明度對(duì)比合理，可以讓信息層級(jí)展現(xiàn)更清晰和直觀，提升用戶(hù)的閱讀效率和愉悅感。

視覺(jué)設(shè)計(jì)心理學(xué)，明度越低的物體越往后，明度越高的物體越靠前。在進(jìn)行界面設(shè)計(jì)時(shí)，一般不能將深色卡片懸浮在淺色背景上，不符合用戶(hù)的視覺(jué)體驗(yàn)設(shè)計(jì)習(xí)慣。

如圖所示，將白色卡片放在灰色背景上時(shí)，會(huì)感覺(jué)到灰色背景上的白色卡片，界面層次感很明確；微信讀書(shū)的白色卡片的內(nèi)容在界面上屬于最高層級(jí)，而灰色背景給人以后退的感覺(jué)。

4）面積對(duì)比

藍(lán)色和黃色 1:1 的搭配，視覺(jué)感官不舒服。但是大面積的藍(lán)色搭配一點(diǎn)黃色，就會(huì)有不錯(cuò)的視覺(jué)效果。

色彩搭配時(shí)，調(diào)整出合理的色彩面積比。色彩上的層次感，增加了節(jié)奏感，給用戶(hù)帶來(lái)畫(huà)面的視覺(jué)沖擊感。

如圖所示，左邊界面背景顏色中，藍(lán)色面積占比比較大，主色調(diào)明顯，黃色為輔助色，界面視覺(jué)較和諧舒適感。

界面設(shè)計(jì)中的用色，運(yùn)用簡(jiǎn)約設(shè)計(jì)的風(fēng)格，文字運(yùn)用無(wú)彩色，重點(diǎn)的按鈕等運(yùn)用有彩色設(shè)計(jì)。

配色時(shí)，只需要著重考慮不同色相的面積對(duì)比就可以了。例如：導(dǎo)航欄的面積較大，會(huì)用到品牌主題色。

4. 色彩的性格

1）冷色與暖色的運(yùn)用

在界面設(shè)計(jì)中，冷色會(huì)讓用戶(hù)產(chǎn)生平靜、安全、高科技的感受，因此在人工智能和社交類(lèi)產(chǎn)品的界面設(shè)計(jì)中較常用。暖色會(huì)讓用戶(hù)產(chǎn)生積極、喜慶、美食的感受，因此在美食類(lèi)、母嬰類(lèi)等產(chǎn)品界面設(shè)計(jì)中常用。

電商類(lèi)App界面中使用的暖橙色給界面營(yíng)造出一種積極、活潑和歡樂(lè)的視覺(jué)氛圍。

工具類(lèi)App 界面中使用的藍(lán)色給界面營(yíng)造出一種冷靜的視覺(jué)氛圍感，是一種配色的設(shè)計(jì)規(guī)律。

2）不同色彩賦予產(chǎn)品的不同性格

白色的運(yùn)用

白色代表著純潔、神圣、信任和安靜、樸素、雅致，是一種充滿(mǎn)純凈的顏色。白色被稱(chēng)為無(wú)彩色，它與任何色彩進(jìn)行和諧的搭配。大多數(shù)的背景使用的是純粹的白色，如下圖所示。

藍(lán)色的運(yùn)用

藍(lán)色代表著廣闊的天空、冷靜、誠(chéng)實(shí)、希望與科技、視覺(jué)上很舒服的色彩。藍(lán)色給人自由和平靜的感覺(jué)。在科技資訊、職場(chǎng)等類(lèi)別的產(chǎn)品界面設(shè)計(jì)中使用較多，如：36Kr、釘釘?shù)裙ぞ哳?lèi)產(chǎn)品，如下圖所示。

紅色的運(yùn)用

紅色象征著熱情、喜慶、自信、斗志、能量，是一種充滿(mǎn)能量的顏色，在電商類(lèi)、新聞資訊類(lèi)等需要營(yíng)造活躍氛圍的產(chǎn)品界面較常使用，如圖所示。

橙色的運(yùn)用

橙色給人感覺(jué)很親切、很有活力。橙色有增加食欲和激發(fā)消費(fèi)欲望的作用，橙色代表著溫暖、陽(yáng)光、健康、歡樂(lè)，因此在社會(huì)服務(wù)類(lèi)、電商類(lèi)的產(chǎn)品界面設(shè)計(jì)中較常使用，如淘寶產(chǎn)品、平安、滴滴出行、大眾點(diǎn)評(píng)等產(chǎn)品。如圖所示。

黃色的運(yùn)用

黃色代表著希望、溫暖、青春、活力和樂(lè)觀，明度高，是一種活力顏色。在旅游類(lèi)或目標(biāo)用戶(hù)為年輕人的產(chǎn)品界面設(shè)計(jì)中較常使用，如馬蜂窩、OFO 共享單車(chē)圖標(biāo)、好好學(xué)習(xí)等產(chǎn)品設(shè)計(jì)，如圖所示。

綠色的運(yùn)用

綠色代表著健康、安全、生命力、青春，給人一種充滿(mǎn)希望的溫和色彩。因此綠色強(qiáng)調(diào)安全感。如拉勾圖標(biāo)、種子習(xí)慣、醫(yī)鹿等產(chǎn)品，如圖所示。

紫色的運(yùn)用

“紫色，象征高貴的顏色。略帶種憂(yōu)郁而富有魅力的色彩，代表聲望、深刻和高雅。

中國(guó)傳統(tǒng)中紫色代表圣人，帝王之氣。如北京故宮又稱(chēng)為“紫禁城”。這都是源于古代對(duì)北極星的崇拜。

在西方，紫色亦代表尊貴，常成為貴族所愛(ài)用的顏色。這源于古羅馬帝國(guó)蒂爾人，常用的紫色染料僅供貴族穿著。

界面設(shè)計(jì)中，紫色由溫暖的紅色和冷靜的藍(lán)色混合而成的顏色，是極佳的刺激色。網(wǎng)頁(yè)運(yùn)用紫色為主色調(diào)，魅力十足，非常符合這個(gè)網(wǎng)頁(yè)設(shè)計(jì)的定位。

5. 色彩的重量

1）色彩的重量

一般由明度決定，明度較高的顏色的給人較輕的感覺(jué)，明度較低的顏色給人以重的感覺(jué)。

美國(guó)心理學(xué)家戴爾·卡耐基教授，經(jīng)過(guò)多種復(fù)雜的實(shí)驗(yàn)后得出結(jié)論；各種顏色在人的大腦里代表一定的重量，并且由重到輕可排列成黑、紅、紫、綠、黃、白。

在界面設(shè)計(jì)中，針對(duì)一些含有較多圖片的界面，其導(dǎo)航欄就可以使用淺色。

如圖所示，B站視頻App的界面由于含有大量圖片，因此其他控件的顏色就會(huì)淡雅了很多。

2）不同色彩的應(yīng)用場(chǎng)景

色彩搭配原則：6：3：1的設(shè)計(jì)原則，主色、輔助色、點(diǎn)綴色在界面設(shè)計(jì)中的應(yīng)用。有彩色一般被應(yīng)用在按鈕、圖標(biāo)等提示性的元素上，而無(wú)彩色一般應(yīng)用在字體上、分割線和背景色上。

主題品牌色的使用

主題品牌色是一款產(chǎn)品給用戶(hù)留下的第一印象的顏色。針對(duì)產(chǎn)品的主圖標(biāo)、標(biāo)題欄、底部導(dǎo)航按鈕，產(chǎn)品標(biāo)簽和標(biāo)簽文字等需要色相呈現(xiàn)的控件上，主題色占60%左右。

如圖所示，京東金融App的設(shè)計(jì)，其主題品牌色為紅色，并且應(yīng)用在按鈕、底部導(dǎo)航按鈕和選中狀態(tài)的文字。

輔助色的使用

當(dāng)界面中需要被提示的內(nèi)容不止一種時(shí)，就可以用輔助色加以區(qū)分。當(dāng)界面中主題色占比過(guò)大，需要使用輔助色讓視覺(jué)達(dá)到平衡。輔助色與主題色的色相差距通常不會(huì)太大，并且在產(chǎn)品中用色不超過(guò)30%。

如下圖所示，作業(yè)幫App界面，品牌主色在滾動(dòng)符等圖標(biāo)、卡片上有所區(qū)分時(shí)，輔助色青綠色、黃色等可以更好地展示品類(lèi)區(qū)的功能圖標(biāo)等。

點(diǎn)綴色的使用

點(diǎn)綴色的出現(xiàn)可以滿(mǎn)足主題色與輔助色滿(mǎn)足不了的視覺(jué)要求。點(diǎn)綴色可以起到平衡畫(huà)面冷暖的作用。與此同時(shí)，由于點(diǎn)綴色與主題色一般色相差距較大，因此點(diǎn)綴色通常出現(xiàn)的頻率較低，并且占據(jù)產(chǎn)品內(nèi)有彩色的比例一般不會(huì)超過(guò) 10%。

補(bǔ)充一下，界面設(shè)計(jì)的操作順序：

內(nèi)容呈現(xiàn)；
應(yīng)用場(chǎng)景與信息層級(jí)優(yōu)化；
設(shè)計(jì)的排版；
色彩與細(xì)節(jié)的設(shè)計(jì)。

二、UI 界面設(shè)計(jì)色彩的運(yùn)用技巧

色彩對(duì)于人的大腦的沖擊力大于造型。比如淘寶，我們會(huì)記憶起淘寶的主色是橙色。

色彩是影響人類(lèi)視覺(jué)思維的重要因素，色彩能直觀地體現(xiàn)產(chǎn)品的性格和氣質(zhì)，運(yùn)用好色彩對(duì)UI設(shè)計(jì)師很重要。

1）色調(diào)一致

互聯(lián)網(wǎng)App設(shè)計(jì)，色調(diào)一般由主色、輔助色、點(diǎn)綴色為基準(zhǔn)來(lái)搭配的。一致性的色調(diào)界面設(shè)計(jì)，能給用戶(hù)始終如一的視覺(jué)體驗(yàn)。

2）60-30-10原則

空間色彩設(shè)計(jì)的搭配原則一般是3種，界面中60%是主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)、標(biāo)題等關(guān)鍵元素中，使之成為整個(gè)App的視覺(jué)焦點(diǎn)和色彩聯(lián)系；30%為輔助色，可以避免界面單一的主色而單調(diào)；10%為點(diǎn)綴色，用在一些不太重要的元素。

色彩層次、鄰近色的應(yīng)用，讓界面看上去和諧和平衡。360金融將綠色的主色運(yùn)用到導(dǎo)航欄、圖標(biāo)和插畫(huà)上，黃色的輔助色運(yùn)用到按鈕上，主次關(guān)系處理的非常清晰明確。

3）遵循色彩心理學(xué)

色彩對(duì)于人類(lèi)的情緒和行為的影響，紅色讓人聯(lián)想到生命、熱情、自信、力量。綠色讓人聯(lián)想到健康、生命、青春、自然，藍(lán)色會(huì)讓人聯(lián)想到科技、未來(lái)。了解到色彩心理學(xué)知識(shí)，有助于我們?cè)谶M(jìn)行App設(shè)計(jì)時(shí)提供依據(jù)。

例如：網(wǎng)頁(yè)使用藍(lán)色作為主色，傳遞給一種年輕、親切、感性的色調(diào)感。

4）從大自然中獲得靈感

大自然擁有世界上最美麗的風(fēng)景，藍(lán)色的天空、紅色的朝霞、金黃的麥穗，還有姹紫嫣紅的花朵。提取色彩運(yùn)用到設(shè)計(jì)中，完美的搭配呈現(xiàn)出來(lái)的和諧的美感，就能瞬間打動(dòng)人心。

5）良好的可讀性

一個(gè)有著好的可讀性的界面設(shè)計(jì)為用戶(hù)提供主次分明、層次清晰的內(nèi)容瀏覽。確保界面瀏覽的可讀性，需要界面設(shè)計(jì)中色彩搭配的對(duì)比，例如在淺色背景上使用深色文字，在深色背景上使用淺色文字。

蝦米音樂(lè)的主要功能入口、標(biāo)簽欄圖標(biāo)、按鈕都使用了高純度的橙色，與界面中的灰色文字形成很好的對(duì)比，提升了界面中內(nèi)容的易讀性。列表中，圖標(biāo)和文字組合讓用戶(hù)瀏覽直觀和高效。

6）控制色彩數(shù)量

色彩影響著用戶(hù)的情緒和行為，講究主次之分和情緒影響用戶(hù)的想法。

設(shè)計(jì)中流傳著：色不過(guò)三。即在一個(gè)界面中不要使用超過(guò) 3 種顏色搭配，可以有主色、輔助色、點(diǎn)綴色。

色彩本身，可以調(diào)整出三種色彩的飽和度、明度的變化用來(lái)搭配更豐富的色彩。比如：ANT DESIGN，文章中第四部分會(huì)談到。

7）色彩運(yùn)用盡量不使用純黑色和純灰色

黑白強(qiáng)烈的對(duì)比，會(huì)讓用戶(hù)感覺(jué)很生硬。但是在白色上加上一點(diǎn)藍(lán)色等色調(diào)的色彩，那就感覺(jué)畫(huà)面很通透。

感受黑白無(wú)彩色之外的插畫(huà)色彩的魅力價(jià)值，插畫(huà)更好的觸動(dòng)人內(nèi)心的感受，滿(mǎn)足人性的情感需求的插畫(huà)。

和諧的色彩搭配，讓界面看上去生動(dòng)、和諧。

8）柔和集中的配色

從用戶(hù)的心理學(xué)角度思考，界面可以選擇使用一些柔和的色彩，調(diào)整其色相、飽和度、明度就能搭配出和諧的色彩。比如：首頁(yè)核心功能圖標(biāo)，使用了不同的色彩，呈現(xiàn)了產(chǎn)品設(shè)計(jì)的年輕感、時(shí)尚感、律動(dòng)感。

多種色彩來(lái)搭配，又保證了整體色彩搭配的和諧、統(tǒng)一感。

9）背景色和白色卡片的色彩的對(duì)比

背景色為了襯托內(nèi)容，因此藍(lán)色的背景色，白色作為背景的對(duì)比色，區(qū)分畫(huà)面的視覺(jué)層次。

整個(gè)界面呈現(xiàn)出一種柔和的、舒適的色彩設(shè)計(jì)感。

10）漸變色的使用等優(yōu)秀配色案例設(shè)計(jì)拆解

大自然中有很多美麗的漸變色，比如晴空萬(wàn)里的藍(lán)色漸變，大自然中提取美麗的漸變色彩，不要超過(guò)90度的漸變，畫(huà)面感比較和諧、有美感。

在APP設(shè)計(jì)中，常見(jiàn)的 UI 配色有，即單色搭配、鄰近色搭配、互補(bǔ)色搭配等色彩搭配。

單色搭配

單色搭配是指單一色系的搭配，它運(yùn)用色彩的飽和度、明度而形成視覺(jué)的層次關(guān)系，將同一色彩貫穿App的始終，通常這個(gè)色彩來(lái)自品牌色。單色搭配的視覺(jué)風(fēng)格，整體感好。因此呈現(xiàn)給用戶(hù)統(tǒng)一的感覺(jué)。

比如微信讀書(shū)的產(chǎn)品設(shè)計(jì)，主色應(yīng)用在關(guān)鍵元素上看，帶給用戶(hù)友好的品質(zhì)體驗(yàn)感。

鄰近色搭配

鄰近色搭配是由主色和鄰近色的色系組成的搭配，可以在同一個(gè)色調(diào)中構(gòu)建出豐富的視覺(jué)層次感和質(zhì)感。

例如：京東健康選擇與綠色臨近的黃色和藍(lán)色作為輔助色，賦予不同的功能含義，信息表達(dá)明確，和諧統(tǒng)一感很好，視覺(jué)上的趣味性，顏色的搭配顯得很柔和。

互補(bǔ)色搭配

互補(bǔ)色是由主色和其互補(bǔ)色的兩個(gè)色彩的搭配，該色彩可以為鄰近色，例如：藍(lán)色和黃色、橙色的搭配。

這種搭配既能保持互補(bǔ)色搭配強(qiáng)烈的對(duì)比度，區(qū)分關(guān)鍵信息，次要信息，又能增加視覺(jué)上的趣味性，色彩看上去豐富多彩。

例如：36 Kr 將藍(lán)色作為主色，互補(bǔ)色黃色作為輔助色應(yīng)用在圖標(biāo)、標(biāo)簽上，再選擇黃色的鄰近色橙色作為另外一個(gè)輔助色，應(yīng)用在不同的關(guān)鍵信息上，有助于用戶(hù)更好的閱讀產(chǎn)品的功能和內(nèi)容。

不同模式背景下的界面設(shè)計(jì)

用戶(hù)體驗(yàn)中運(yùn)用了夜間模式這功能，用戶(hù)喜歡深夜使用手機(jī)這種場(chǎng)景。比如：閱讀資訊類(lèi)產(chǎn)品，金融產(chǎn)品等也會(huì)選擇夜晚進(jìn)行閱讀和使用。

當(dāng)需要沉浸式地專(zhuān)注工作內(nèi)容時(shí)，建議使用暗黑模式，可以幫助使用者更關(guān)注凸顯出來(lái)的內(nèi)容和操作。

比如：百度網(wǎng)盤(pán)的界面設(shè)計(jì)，白天和夜晚的使用場(chǎng)景很豐富，因此支持夜間模式很有必要，保證使用者的體驗(yàn)上的舒適感。

和諧的漸變色，美麗舒服，畫(huà)面豐富，層次感好，可以應(yīng)用到圖標(biāo)設(shè)計(jì)上，導(dǎo)航背板上。

漸變色搭配的網(wǎng)站推薦：https://webgradients.com/

網(wǎng)站的特色不僅可以提供漂亮的漸變配色，而且還有更多格式選擇，比如 PSD、Sketch、PNG 以及可直接復(fù)制成一段 CSS 漸變代碼，設(shè)計(jì)師們就可以很方便的使用這個(gè)配色方案。

扁平化設(shè)計(jì)配色網(wǎng)站推薦：http://flatuicolors.com/

這個(gè)網(wǎng)站會(huì)定期更新一些扁平化設(shè)計(jì)中很受歡迎的色彩組合，里面的配色都很棒。

可生成一套色板的網(wǎng)站推薦：http://www.colorfavs.com/

上傳一張你最喜歡的圖片，然后根據(jù)這張圖片自動(dòng)生成一套色板，非常具有實(shí)用性。

三、近兩年來(lái)的流行色欣賞

權(quán)威趨勢(shì)預(yù)測(cè)機(jī)構(gòu)WGSN發(fā)布了2020年春夏流行色。

萬(wàn)物復(fù)蘇的春日，枝繁葉茂的夏季，如果要用一個(gè)顏色來(lái)形容這兩個(gè)季節(jié)，那么一定是綠色。

綠色代表著自然、清新、朝氣、蓬勃。

綠色是生命的顏色。而綠色大家族中的薄荷綠尤以小清新定位，個(gè)性獨(dú)特，辨識(shí)度極高。

追波的：Hydroponic Plant App，如下圖。

在移動(dòng)端 UI 界面設(shè)計(jì)中，綠色在移動(dòng)端產(chǎn)品設(shè)計(jì)的應(yīng)用上。

近日，潘通發(fā)布了19年的流行色——樂(lè)觀和愉悅珊瑚橘。

Pantone 選出了這款極具生命力的 Living Coral——「活力珊瑚橘」作為2019年的潘通年度流行色。

PANTONE 16-1546 活珊瑚，還代表了現(xiàn)代生活的融合，是自然環(huán)境中出現(xiàn)的一種滋養(yǎng)色，同時(shí)也在社交媒體中的生動(dòng)呈現(xiàn)。

潘通色彩研究中心的執(zhí)行董事 Leatrice Eiseman 在聲明當(dāng)中提到：

色彩是一個(gè)平衡的鏡頭，透過(guò)它我們體驗(yàn)自然與數(shù)碼的實(shí)境，活珊瑚橘色尤其如此。消費(fèi)者渴望人際互動(dòng)與社交關(guān)系，歡樂(lè)的活珊瑚橘呈現(xiàn)出人性化、振奮人心的特質(zhì)，打動(dòng)人們的心弦。

在移動(dòng)端 UI 的界面設(shè)計(jì)中，橙色也是一種超級(jí)飽和、充滿(mǎn)活力的選擇，可以在任何社交媒體上流行——因?yàn)槌壬窃谧匀唤缰邪l(fā)現(xiàn)的一種美麗的色彩。

四、阿里 ANT DESIGN的官網(wǎng)的配色學(xué)習(xí)

Ant Design 色彩體系解讀成兩個(gè)層面：系統(tǒng)級(jí)色彩體系和產(chǎn)品級(jí)色彩體系。

系統(tǒng)級(jí)色彩體系主要定義了螞蟻中臺(tái)設(shè)計(jì)中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。
產(chǎn)品級(jí)色彩體系則是在具體設(shè)計(jì)過(guò)程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。

1. 系統(tǒng)級(jí)色彩體系

Ant Design 系統(tǒng)級(jí)色彩體系同樣源于「自然」的設(shè)計(jì)價(jià)值觀。設(shè)計(jì)師通過(guò)對(duì)自然場(chǎng)景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的 12 色。

進(jìn)一步又通過(guò)大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對(duì) 12 個(gè)顏色進(jìn)行了衍生。

在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出來(lái)的。

1）基礎(chǔ)色板

Ant Design 的基礎(chǔ)色板共計(jì) 120 個(gè)顏色，包含 12 個(gè)主色以及衍生色。這些顏色基本可以滿(mǎn)足中后臺(tái)設(shè)計(jì)中對(duì)于顏色的需求。

Ant Design 的色板還具備進(jìn)一步拓展的能力。經(jīng)過(guò)設(shè)計(jì)師和程序員的精心調(diào)制，結(jié)合了色彩自然變化的規(guī)律，我們得出了一套色彩生成工具，當(dāng)有進(jìn)一步色彩設(shè)計(jì)需求時(shí)，設(shè)計(jì)者只需按照一定規(guī)則，定義好主色，便可以自動(dòng)獲得一系列完整的衍生色。

2）中性色板

中性色包含了黑、白、灰。在螞蟻中后臺(tái)的網(wǎng)頁(yè)設(shè)計(jì)中被大量使用到，合理地選擇中性色能夠令頁(yè)面信息具備良好的主次關(guān)系，助力閱讀體驗(yàn)。Ant Design 的中性色板一共包含了從白到黑的 13 個(gè)顏色。

2. 產(chǎn)品級(jí)色彩體系

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺(jué)元素之一。

在色彩選取時(shí)，需要先明確品牌色在界面中的使用場(chǎng)景及范圍。在基礎(chǔ)色板中選擇主色，我們建議選擇色板從淺至深的第六個(gè)顏色作為主色。

Ant Design 的品牌色取自基礎(chǔ)色板的藍(lán)色，應(yīng)用場(chǎng)景包括：關(guān)鍵行動(dòng)點(diǎn)、操作狀態(tài)、重要信息高亮、圖形化等場(chǎng)景。

功能色代表了明確的信息以及狀態(tài)，比如成功、出錯(cuò)、失敗、提醒、鏈接等。

功能色的選取需要遵守用戶(hù)對(duì)色彩的基本認(rèn)知。

我們建議在一套產(chǎn)品體系下，功能色盡量保持一致。Ant Design 的功能色板如圖：

Ant Design 的中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線、等場(chǎng)景中也非常常見(jiàn)。產(chǎn)品中性色的定義需要考慮深色背景以及淺色背景的差異，同時(shí)結(jié)合 WCAG 2.0 標(biāo)準(zhǔn)。

Ant Design 的中性色在落地的時(shí)候是按照透明度的方式實(shí)現(xiàn)的，具體色板如圖：

3. 企業(yè)級(jí)產(chǎn)品設(shè)計(jì)中的色彩應(yīng)用