如何在介面設計中“色”誘使用者

佚名發表於2015-08-31

在設計過程中,如何最佳地搭配顏色,誘導使用者視線。

是不是在為圖示選擇什麼顏色而煩惱,反反覆覆地嘗試,總不能達到想要的效果。是不是總在羨慕“別人家的設計”,而苦於無從下手?

網站設計 介面設計 網站配色

在色彩的應用中,大家對顏色都會有不同程度的理解,從而影響到設計頁面的表現。

熟練地將色彩搭配運用到設計中去,會讓設計更為穩重和得體。優秀的設計它的色彩搭配非常的舒服,令人賞心悅目。那我們怎麼才能搭配出最貼合設計的色彩更好呢?

其實所有的顏色都有些小規律,今天MICU就和大家聊一聊“色”。

為何“色”?因為“生理”上有需求!

既然是平面設計,視覺刺激是最直觀的。比如當下流行的塗色書,為啥普普通通的圖案能展現出那樣美麗的效果,就是因為色,因為合理的顏色搭配。

再比如好的天氣是藍色,而灰色的天氣就霧霾的天了。

那麼馬路邊那些亮著紅燈的區域,那你想到啥?我就不說了。

所以在研究感官是為了從生理上得到“我們看到什麼樣的色彩時”會做出什麼樣的反映。

使用者雖然沒有上過色彩的相關課程,但是他們仍然能很直觀地看出什麼是符合他們審美的。

同樣顏色的選擇不僅詮釋了設計的表現方式也營造了使用者對產品的購買需求。需要從中滿足使用者最直觀的生理需求點。

我們就來看看下面的幾種方法吧,怎麼將使用者的慾望勾引起來。

從感受抓到色的重點(焦點) 並非這樣,我在設計過程中總結的經驗,畫面中色彩不要超過三種。表達出主題即可。

並非這樣,我在設計過程中總結的經驗,畫面中主要色彩不要超過三種,表達出主題即可。

太多的顏色會使頁面雜亂無章,干擾主要資訊。

這是12306的網站,顏色用的數量我是沒有數過來,重點在哪裡?想要凸顯的資訊太多,還總是閃閃閃。如果處處是焦點,那就真的沒焦點了。使用者最主要的是買票,掃來掃去地滿頁面地找,這不是好的使用者體驗,有些反智!!

網站設計 介面設計 網站配色

再看看其他網際網路公司做的三方刷票網站。為毛一下就這麼簡單~

設計有主色彩配色,色相構成是統一的配色,由綠色為色相支配、統一了畫面的配色。

網站設計 介面設計 網站配色

疑問二:疊加效果,能嘗試出好的顏色嗎?

很多同學在設計初期不知道選用色彩定位,常常用疊加來嘗試效果,結果發現越來越沒有頭緒。

色彩疊加本身確實很好,一般用海報等背景上比較多,不宜在互動的頁面。盲目使用色彩疊加,會使畫面變得複雜沉悶。表達上含義模糊,使用者會覺得雜亂,無法找到需要找到的資訊和功能。可見,疊加的效果不但沒有加分,反而減分。

疑問三:資訊量or簡潔,如何取捨?

簡潔、準確是色彩核心標準,簡單明瞭的色彩能快速被使用者解讀。

不要奢望使用者能夠在一個頁面上停留太多時間,一頁顯示N多資訊時代早就過去了。

疑問四:如果透過色彩氣氛,誘導使用者?

好的色彩搭配和選擇能激發使用者購買而定場景感和購買慾望。

比如暖色能激發使用者的食慾,在消費內的軟體中經常用到(淘寶)。藍色能給人帶來平靜,大部分的閱讀軟體則用到了藍色(知乎)

在介面色彩要學會做加減法

原則一:色的大小位置

大塊的色彩烘托氣氛和主題比較穩定,小塊的色彩用於點綴,豐富畫面。

統一顏色讓使用者認準店面

首先需要在不同的介面框架中統一招牌色,保證產品給使用者能一目瞭然的找到這個店。

那麼我和大家介紹一下一款不為人知的軟體“BIG”。首先名稱非常的霸氣,易於使用者記憶和傳播。整體採用了硃紅色貫徹了整個產品的設計。不管是LOGO還是選單欄非常的統一。讓使用者在使用完後對這個產品有了非常統一的印象。

網站設計 介面設計 網站配色

其實它是淘寶APP發現頁面中內建的一款軟體,所以說招牌色多麼的重要,在這麼豐富的軟體中怎麼讓使用者一目瞭然,用一次就記憶深刻!

原則二:嚴謹而有節奏

在介面中的可以運用相似性與來進行色彩呼應,這樣的畫面更有節奏感和舒適性。

運用顏色漸變穿插,讓介面平衡在一個頻率上。

網站設計 介面設計 網站配色

在頁面色彩關係的處理中,我們需要注意重色的運用,它對畫面的平衡有非常大的作用。下面是淺色選單欄和深色選單欄的區別。我們可以發現,有重色後的頁面,顯得更為穩定舒服。

網站設計 介面設計 網站配色

原則三:在相似中,找呼應

我們來看一組練習,找找色彩的呼應性。

網站設計 介面設計 網站配色

1.定義了色彩的基調,找到了形象店面色。

在設計中我們只採用了單一的顏色進行了設計,使用大小關係區分了功能的主次關係。視覺上比較平衡但是頁面顯得單調。

2.為了讓使用者聚焦在主要的功能上,在主要功能上使用了補色對比。這種方式比造型上的區分更為強烈。

3.但在採用過多的色彩會使介面沒有秩序性。這種色彩的搭配會給使用者一種混亂感。

4.用色上不僅需要聚焦,還有講究顏色的呼應性。同類色彩會彼此呼應,聚焦點只要在主要的點上。

所以說注意彩色的關係與功能的區別及其重要。這樣才能把握好色彩的節奏感。

如何用“色”?

用“色”,達到平衡。

人們渴望生活的穩定和安定,平衡感能滿足使用者的視覺需求。如果在介面設計中運用一對或多對的平衡色彩能讓使用者從心裡需求上得到滿足,這樣的設計能更容易讓使用者具有親近感,給使用者留下愉悅而舒服的美感。

在平衡色彩中的定義並不是面積相等就叫平衡。要講究主題性中找到色彩的平衡關係,以及版式等元素中的協調性。

一般在色彩運用中的“平衡色”有五種型別:

一:互補色之間的平衡

二:冷色和暖色的平衡

三:深色和淺色的平衡

四:有色彩和無色彩的平衡

五:花色與純色的平衡

互補色平衡法

在介面設計中,使用互補色彩的對比是最為強烈的,最易傳播的。

這種色彩能使使用者的視覺產生強烈的刺激,情感濃烈,給人留下鮮明的印象。這種方式是。適合在誇張的、張揚的場景下使用。

但這種顏色用的太過於平凡容易造成使用者的視覺疲勞。給人一種不安定的感覺。那麼在使用這樣的搭配方式時需要控制使用的位置和資訊的面積了,核心的地方可以這樣去使用。

主要的三對互補色:紅綠、藍橙、黃紫。

我們可以看到很多APP的icon為了吸引使用者的注意就用到了強烈對比的互補色。

番茄快點、QQ空間、相機360

網站設計 介面設計 網站配色

運用這種大膽的平衡色能使整個風格主題格外的鮮明。

這種平衡色彩最為強烈的情況就是使兩個色相的飽和度都調整到最高,面積比例也在1:1。此時的氣氛最為濃烈,衝擊感最強!

我們可以看到代購現場這款APP的LOGO設計採用了1:1的色彩關係比以上的APP icon更為突出。所以在應用市場中更為容易讓使用者找到,達到了品牌的傳播性。

相關文章