UI 設計師的信條:跟着電影海報學配色

你有疑難,我有方法

藍湖有方,提供價值參考

幫你更快更好地達成目標


疫情好轉,《信條》、《八佰》等電影紛紛在院線上映,你去看了嗎?設計師對一部電影的關注,除了劇情、畫面,還有海報設計。

電影海報通過設計語言表達故事,優秀的海報能將觀衆帶入情境,激發觀衆想去看電影的衝動。UI 設計也是如此,通過配色向用戶傳達吸引力,設計使產品更有力量。

和湖湖一起跟着電影海報學 UI 設計的配色技巧吧~


1. 巧用對比色、互補色

對比色指的是在色卡中相隔 120° 至 180 °的顏色,互補色指的是在色卡中相隔 180° 的顏色,對比色和互補色的組合配色對比強烈,吸睛第一名。       

正在熱映的《信條》海報設計就運用了互補色的搭配,海報中的紅藍配色與電影色調相呼應,突出了電影中提到的逆向時空和正向時空之間的反差。     

對比色和互補色在 UI 中也常常被使用,黃藍、紅藍等顏色組合在界面設計中經常出現,帶給人有活力、年輕的印象。

比如這個電影購票 APP,主色調爲藍色,訂購頁的【預定】按鈕是購票頁的第一關注點,於是採用紅色,與界面中的藍色產生強烈對比,促進用戶購買。

但是,對比色雖好卻要慎用,大面積的對比色容易影響用戶閱讀,造成審美疲勞。在 UI 設計中應用對比色最好的方法是:根據產品目標,提煉設計的重點,在需要突出的元素上使用對比色。

2. 用色主次分明

賈樟柯導演的電影《一直游到海水變藍》海報設計非常精妙。畫面中,海水藍佔了海報的 60%是主色調,山的深藍色是輔助色,天空白是點睛之筆。主次分明的配色營造出巧妙的畫面:海報正看爲海,反過來看則是山。

UI 設計中也講究主次分明,APP、網頁的界面設計通常有一套固定的配色,除了中性色黑白灰外,包含主色、輔助色、點睛色,三種色彩的搭配比例一般爲 7:2:1。

👉主色:指的是在配色中處於支配地位的色彩,一般來說,是配色中運用最多的色彩(除中性色黑白灰),決定了界面的整體風格。

👉 輔助色:指爲了襯托主色的色彩。

👉 點睛色:通常用在 icon、消息提醒等位置,起引導閱讀和強調的作用。

例如,這個 APP 的主色爲藍色,輔助色爲淺藍、灰白,點睛色爲紅色。雖然用了紅藍色,但因爲配色遵循 7:2:1 的黃金比例,整體看起來依然很和諧。

3. 相鄰色組合不易出錯

在色卡中相隔距離在 90° 內的屬於相鄰色,相鄰色組合構成的配色方案會帶給人穩定、和諧、統一、舒適的印象。 

比如上世紀 70 年代的老電影《不結婚的女人》的海報設計,運用了咖啡色、淺卡其等類似色,海報整體給人和諧、舒適感。 

相鄰色組合在 UI 界面設計中被廣泛運用。例如這個食譜 APP,採用了類似色的組合,大面積的杏橘色,搭配強調 icon 的珊瑚橘,深淺不一的橘色相輝映,界面層次分明,看起來舒適、溫暖。

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

4. 抓住用戶情緒

色彩是一門語言,是有性格的的,人類的大腦對色彩的反應敏感且多樣,對色彩會產生聯想,並感到冷或者暖。

通過色彩傳遞情緒給觀者是電影海報設計的慣用戲碼,比如經典電影《末代皇帝》的海報設計,採用了大面積的黑色和龍袍黃,塑造莊嚴、肅穆感。   

產品是爲用戶服務的,抓住用戶心理才能博得他們的信賴和喜愛。不同的產品需要傳達給用戶的情緒不用,UI 界面設計用的顏色也不同,比如:

購物類 APP 爲了促進用戶購買,一般會採用紅色、黃色等容易激發購物慾望的顏色;

金融類 APP 需要傳達可信賴、穩重的印象,如果你去搜索相關 APP,一定會發現其中 80%  的界面設計都用到了藍色。  

另外,UI 設計在選擇顏色時要考慮文化差異。比如,紅色在中國是象徵着喜慶、快樂,但在西方,卻象徵暴力。

5. 使用品牌色,增加記憶點

《英國病人》的電影海報大面積應用沙漠黃,看過電影的觀衆一看便會聯想到電影裏男主角乘飛機飛躍撒哈拉沙漠的情景,對電影留下了深刻印象。  

​做 UI 界面設計亦是如此,APP 市場接近飽和,各類產品競爭激烈,各個產品爲了加深用戶對自身的記憶,都有建立品牌色,在 APP、網站等設計中加以運用。

比如藍湖的品牌色是藍白,除了網頁客戶端外,藍湖的各大網頁、Axure 客戶端、設計規範雲等產品,乃至海報、Banner 設計中都會運用品牌色,一次次加深用戶對藍湖的印象。

根據品牌色搭建顏色、字體、Logo 、icon 的設計規範體系,保持設計一致性,有助於提升品牌認知度,通過藍湖【設計規範雲】即可輕鬆搭建,便於產品設計研發團隊的管理和使用。

色彩是 UI 設計和海報設計最重要的元素,正確的配色能賦能品牌,傳達豐富的信息,並直戳人心。當你沒有配色靈感時,不妨看看電影海報。

你最喜歡哪部電影海報的配色呢?快來評論中發表你的看法吧,比心~

注:文中配圖均源自網絡僅供學習,如有侵權請聯繫我們刪除,謝謝。

用藍湖,不加班

藍湖網址:LanhuApp.com

藍湖,高效的產品設計協作平臺

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章