你有疑難，我有方法

藍(lán)湖有方，提供價(jià)值參考

幫你更快更好地達(dá)成目標(biāo)

疫情好轉(zhuǎn)，《信條》、《八佰》等電影紛紛在院線上映，你去看了嗎？設(shè)計(jì)師對(duì)一部電影的關(guān)注，除了劇情、畫面，還有海報(bào)設(shè)計(jì)。

電影海報(bào)通過(guò)設(shè)計(jì)語(yǔ)言表達(dá)故事，優(yōu)秀的海報(bào)能將觀眾帶入情境，激發(fā)觀眾想去看電影的沖動(dòng)。UI 設(shè)計(jì)也是如此，通過(guò)配色向用戶傳達(dá)吸引力，設(shè)計(jì)使產(chǎn)品更有力量。

和湖湖一起跟著電影海報(bào)學(xué) UI 設(shè)計(jì)的配色技巧吧~

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

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

正在熱映的《信條》海報(bào)設(shè)計(jì)就運(yùn)用了互補(bǔ)色的搭配，海報(bào)中的紅藍(lán)配色與電影色調(diào)相呼應(yīng)，突出了電影中提到的逆向時(shí)空和正向時(shí)空之間的反差。? ? ?

對(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)用戶購(gòu)買。

但是，對(duì)比色雖好卻要慎用，大面積的對(duì)比色容易影響用戶閱讀，造成審美疲勞。在 UI 設(shè)計(jì)中應(yīng)用對(duì)比色最好的方法是：根據(jù)產(chǎn)品目標(biāo)，提煉設(shè)計(jì)的重點(diǎn)，在需要突出的元素上使用對(duì)比色。

2.?用色主次分明

賈樟柯導(dǎo)演的電影《一直游到海水變藍(lán)》海報(bào)設(shè)計(jì)非常精妙。畫面中，海水藍(lán)占了海報(bào)的 60%是主色調(diào)，山的深藍(lán)色是輔助色，天空白是點(diǎn)睛之筆。主次分明的配色營(yíng)造出巧妙的畫面：海報(bào)正看為海，反過(guò)來(lái)看則是山。

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)依然很和諧。

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

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

比如上世紀(jì) 70 年代的老電影《不結(jié)婚的女人》的海報(bào)設(shè)計(jì)，運(yùn)用了咖啡色、淺卡其等類似色，海報(bào)整體給人和諧、舒適感。?

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

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

4.?抓住用戶情緒

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

通過(guò)色彩傳遞情緒給觀者是電影海報(bào)設(shè)計(jì)的慣用戲碼，比如經(jīng)典電影《末代皇帝》的海報(bào)設(shè)計(jì)，采用了大面積的黑色和龍袍黃，塑造莊嚴(yán)、肅穆感。? ?

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

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

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

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

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

《英國(guó)病人》的電影海報(bào)大面積應(yīng)用沙漠黃，看過(guò)電影的觀眾一看便會(huì)聯(lián)想到電影里男主角乘飛機(jī)飛躍撒哈拉沙漠的情景，對(duì)電影留下了深刻印象。??

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

比如藍(lán)湖的品牌色是藍(lán)白，除了網(wǎng)頁(yè)客戶端外，藍(lán)湖的各大網(wǎng)頁(yè)、Axure 客戶端、設(shè)計(jì)規(guī)范云等產(chǎn)品，乃至海報(bào)、Banner 設(shè)計(jì)中都會(huì)運(yùn)用品牌色，一次次加深用戶對(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ì)和海報(bào)設(shè)計(jì)最重要的元素，正確的配色能賦能品牌，傳達(dá)豐富的信息，并直戳人心。當(dāng)你沒(méi)有配色靈感時(shí)，不妨看看電影海報(bào)。

你最喜歡哪部電影海報(bào)的配色呢？快來(lái)評(píng)論中發(fā)表你的看法吧，比心~

注：文中配圖均源自網(wǎng)絡(luò)僅供學(xué)習(xí)，如有侵權(quán)請(qǐng)聯(lián)系我們刪除，謝謝。

用藍(lán)湖，不加班

藍(lán)湖網(wǎng)址：LanhuApp.com

藍(lán)湖，高效的產(chǎn)品設(shè)計(jì)協(xié)作平臺(tái)