當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >UI 設(shè)計(jì)界面配色指南

UI 設(shè)計(jì)界面配色指南

發(fā)布時(shí)間：2024-03-25 18:19:24 瀏覽量：277次

配色優(yōu)秀、合適的 UI 設(shè)計(jì)界面，能有效地傳達(dá)產(chǎn)品的設(shè)計(jì)理念，達(dá)到吸引用戶(hù)注意力的目的。做好 APP、網(wǎng)頁(yè)等 UI 設(shè)計(jì)界面的配色，掌握設(shè)計(jì)配色技巧是重點(diǎn)，一起來(lái)看看吧。

巧用對(duì)比色、互補(bǔ)色

對(duì)比色指的是在色卡中相隔 120° 至 180 °的顏色，互補(bǔ)色指的是在色卡中相隔 180° 的顏色，對(duì)比色和互補(bǔ)色的組合配色對(duì)比強(qiáng)烈，吸睛第一名。

對(duì)比色和互補(bǔ)色在 UI 中也常常被使用，黃藍(lán)、紅藍(lán)等顏色組合在界面設(shè)計(jì)中經(jīng)常出現(xiàn)，帶給人有活力、年輕的印象。

比如這個(gè)電影購(gòu)票 APP，主色調(diào)為藍(lán)色，訂購(gòu)頁(yè)的【預(yù)定】按鈕是購(gòu)票頁(yè)的第一關(guān)注點(diǎn)，于是采用紅色，與界面中的藍(lán)色產(chǎn)生強(qiáng)烈對(duì)比，促進(jìn)用戶(hù)購(gòu)買(mǎi)。

但是，對(duì)比色雖好卻要慎用，大面積的對(duì)比色容易影響用戶(hù)閱讀，造成審美疲勞。

在 UI 設(shè)計(jì)中應(yīng)用對(duì)比色最好的方法是：根據(jù)產(chǎn)品目標(biāo)，提煉設(shè)計(jì)的重點(diǎn)，在需要突出的元素上使用對(duì)比色。

用色主次分明

UI 設(shè)計(jì)界面的配色講究主次分明，APP、網(wǎng)頁(yè)的界面設(shè)計(jì)通常有一套固定的配色，除了中性色黑白灰外，包含主色、輔助色、點(diǎn)睛色，三種色彩的搭配比例一般為 7：2：1。

主色：指的是在配色中處于支配地位的色彩，一般來(lái)說(shuō)，是配色中運(yùn)用最多的色彩（除中性色黑白灰），決定了界面的整體風(fēng)格。

輔助色：指為了襯托主色的色彩。

點(diǎn)睛色：通常用在 icon、消息提醒等位置，起引導(dǎo)閱讀和強(qiáng)調(diào)的作用。

例如，這個(gè) APP 的主色為藍(lán)色，輔助色為淺藍(lán)、灰白，點(diǎn)睛色為紅色。雖然用了紅藍(lán)色，但因?yàn)榕渖裱?7：2：1 的黃金比例，整體看起來(lái)依然很和諧。

相鄰色組合不易出錯(cuò)

在色卡中相隔距離在 90° 內(nèi)地屬于相鄰色，相鄰色組合構(gòu)成的配色方案會(huì)帶給人穩(wěn)定、和諧、統(tǒng)一、舒適的印象。

相鄰色組合在 UI 界面設(shè)計(jì)中被廣泛運(yùn)用。例如這個(gè)食譜 APP，采用了類(lèi)似色的組合，大面積的杏橘色，搭配強(qiáng)調(diào) icon 的珊瑚橘，深淺不一的橘色相輝映，界面層次分明，看起來(lái)舒適、溫暖。

需要注意的是：APP、網(wǎng)頁(yè)界面中的 icon、消息提示等需要突出，如果配色是類(lèi)似色的組合，要注意類(lèi)似色之間明暗深淺以及飽和度的對(duì)比。如果明暗深淺差距小，容易造成界面缺乏層次感，主次不明。

抓住用戶(hù)情緒

色彩是一門(mén)語(yǔ)言，是有性格的的，人類(lèi)的大腦對(duì)色彩的反應(yīng)敏感且多樣，對(duì)色彩會(huì)產(chǎn)生聯(lián)想，并感到冷或者暖。

產(chǎn)品是為用戶(hù)服務(wù)的，抓住用戶(hù)心理才能博得他們的信賴(lài)和喜愛(ài)。不同的產(chǎn)品需要傳達(dá)給用戶(hù)的情緒不用，UI 界面設(shè)計(jì)用的顏色也不同，比如：

購(gòu)物類(lèi) APP 為了促進(jìn)用戶(hù)購(gòu)買(mǎi)，一般會(huì)采用紅色、黃色等容易激發(fā)購(gòu)物欲望的顏色；

金融類(lèi) APP 需要傳達(dá)可信賴(lài)、穩(wěn)重的印象，如果你去搜索相關(guān) APP，一定會(huì)發(fā)現(xiàn)其中 80% 的界面設(shè)計(jì)都用到了藍(lán)色。

另外，UI 設(shè)計(jì)在選擇顏色時(shí)要考慮文化差異。比如，紅色在中國(guó)是象征著喜慶、快樂(lè)，但在西方，卻象征暴力。

使用品牌色，增加記憶點(diǎn)

APP 市場(chǎng)接近飽和，各類(lèi)產(chǎn)品競(jìng)爭(zhēng)激烈，各個(gè)產(chǎn)品為了加深用戶(hù)對(duì)自身的記憶，都有建立品牌色，在 APP、網(wǎng)站等設(shè)計(jì)中加以運(yùn)用。

比如藍(lán)湖的品牌色是藍(lán)白，除了網(wǎng)頁(yè)客戶(hù)端外，藍(lán)湖的各大網(wǎng)頁(yè)、Axure 客戶(hù)端、設(shè)計(jì)規(guī)范云等產(chǎn)品，乃至海報(bào)、Banner 設(shè)計(jì)中都會(huì)運(yùn)用品牌色，一次次加深用戶(hù)對(duì)藍(lán)湖的印象。

根據(jù)品牌色搭建顏色、字體、Logo 、icon 的設(shè)計(jì)規(guī)范體系，保持設(shè)計(jì)一致性，有助于提升品牌認(rèn)知度，通過(guò)藍(lán)湖【設(shè)計(jì)規(guī)范云】即可輕松搭建，便于產(chǎn)品設(shè)計(jì)研發(fā)團(tuán)隊(duì)的管理和使用。

色彩是 UI 設(shè)計(jì)的重要元素，正確的配色能賦能品牌，對(duì)外傳達(dá)豐富的信息，直戳人心。