案例分析|通過配色吸引用戶注意力的四點(diǎn)技巧
色彩在任何一種設(shè)計中都起著很重要的作用,相差不多的色彩卻能給用戶帶來完全不同情感效果。因此,好好利用色彩與生俱來的魅力,就能讓你的設(shè)計更出彩。
互聯(lián)網(wǎng)和手機(jī)的興起給我們的生活帶來了極大的便利,但是也使我們產(chǎn)生了強(qiáng)烈的依賴性。我們發(fā)現(xiàn)自己現(xiàn)在已經(jīng)離不開手機(jī)了,我們的時間被各式各樣的社交媒體所占據(jù)。我們變得越來越浮躁,越來越缺乏耐心,沒有足夠的時間去獨(dú)處,去思考。在這樣的一個社會大環(huán)境下,加之日益嚴(yán)重的同質(zhì)化競爭,一款產(chǎn)品能夠贏得用戶的注意力可謂成功了一大半。那么,如何才能吸引用戶的注意力呢?人類是視覺生物,我們天生就對色彩具有極強(qiáng)的感知力,可以在一瞬間判斷出顏色的差異,我們可以通過配色來吸引用戶的注意力。
接下來,我們通過一些具體例子來分析如何通過配色來吸引用戶注意力:
1、極簡風(fēng)格,少即是多
Storq是一個主要面向孕婦的購物網(wǎng)站,主要產(chǎn)品是孕婦和嬰幼兒衣服。從總體上來看,網(wǎng)站并沒有使用過多的配色。比如,在下面的這個產(chǎn)品詳情頁面,頁面主體是產(chǎn)品圖片,配以一些說明性文字。
從用戶的角度來說,這種極簡風(fēng)格的界面更容易讓他們找到重點(diǎn)。因為用戶的注意力是有限的,應(yīng)該得到合理的分配。我遇到過很多客戶,他們說這里要使用大紅色突出,那里要放大字體吸引用戶注意。在他們的設(shè)想中,頁面里的任何一個元素都要強(qiáng)調(diào)出來,但是殊不知頁面中視覺重點(diǎn)有且只有一個,過多的給予對于用戶來說其實是一種負(fù)擔(dān)。少即是多,這是互聯(lián)網(wǎng)時代的信條。
對于用戶來說,任何的文字描述都無法比圖片來的更加直觀。如果我對這款感興趣,點(diǎn)擊進(jìn)入產(chǎn)品詳情頁面,那么產(chǎn)品的圖片和一些說明性文字就足夠我對該產(chǎn)品有一個大致的了解。如果我還想繼續(xù)了解更多,點(diǎn)擊“更多詳情”即可。此外網(wǎng)站主要目標(biāo)用戶是準(zhǔn)媽媽,她們在購物的時候會更加的理性。她們在挑選商品更加注重的是產(chǎn)品的質(zhì)量——這個毛巾被的棉絮是否正規(guī)的?衣服的質(zhì)地會不會引起寶寶皮膚過敏?所以在這里,也沒有必要像一般電商網(wǎng)站一樣通過大紅大紫來吸引用戶的眼球。
Logo shop這個網(wǎng)站的配色同樣值得我們來研究。網(wǎng)站首頁的背景是飽和度很低的粉紅,字體只用了一個顏色。整個頁面看起來十分的簡單,但是我們要知道,對于網(wǎng)站而言,最成功的要素莫過于對目標(biāo)用戶群的準(zhǔn)確定位和精準(zhǔn)營銷。一個優(yōu)秀的logo應(yīng)該簡潔明了,具有很強(qiáng)識別性,而且易于傳播。所以如果一個用戶要訂制一款logo,他打開網(wǎng)站發(fā)現(xiàn)界面配色很凌亂的,他們會對這個網(wǎng)站的專業(yè)性產(chǎn)生懷疑。
2、使用裝飾,營造頁面視覺焦點(diǎn)
我們可以通過一些形狀和圖案給頁面做一些裝飾,同樣可以達(dá)到吸引用戶注意力的目的。以下面這張圖片為例子,這個頁面主體是不同膚色的用戶手持手機(jī)的圖片。在這個主體背后,設(shè)計師添加了降低的透明度的藍(lán)色和紅色色塊,而且還有一些零散分布的小泡泡。
接下來我們再看一下,沒有裝飾效果的頁面。
很明顯,有無裝飾效果頁面給我們的感覺是完全不一樣的。背景裝飾的使用可以很好的將用戶的注意力吸引到用戶手持手機(jī)這個主體上。此外藍(lán)色和粉色小泡的使用看似沒有關(guān)聯(lián),但是我們可以看出它們可以很好的提升頁面的趣味性。
3、建立設(shè)計語言體系
視覺語言體系也可以理解為設(shè)計規(guī)范或者設(shè)計中的一致性原則,主要包括文字、圖標(biāo)、配色、動效、組件(控件)和版式等一系列構(gòu)成元素。一款產(chǎn)品的視覺語言體系的建立,主要基于兩個方面。首先對于用戶來說,規(guī)則性和一致性的界面不僅方便了操作,而且十分美觀。對于設(shè)計師和開發(fā)來說,可以極大的提升功能迭代時設(shè)計與開發(fā)效率。
Wyre總部位于舊金山,是一家從事跨境支付業(yè)務(wù)的初創(chuàng)公司。該企業(yè)的logo就是三個樹葉疊加在一起。在這個企業(yè)的網(wǎng)站中,我們可以處處看到這片“樹葉”,從首頁banner中背景點(diǎn)綴小元素到按鈕。
例如用戶首次進(jìn)入這個網(wǎng)站,要從下面Get Started按鈕開始,再到注冊/登錄頁面。這個流程走下來,用戶會發(fā)現(xiàn)行為召喚按鈕全部是一種樣式:藍(lán)色樹葉形狀加上文案。這個會培養(yǎng)用戶的操作習(xí)慣,在他們看來,這個網(wǎng)站所有的行為召喚按鈕都是這個樣式。而且因為界面配色只有藍(lán)色、黑色和白色,所以藍(lán)色作為行為召喚元素可謂相當(dāng)顯眼,用戶可以在很短時間內(nèi)發(fā)現(xiàn),用戶的使用效率可以得到很好的提升。
4、提升文字可讀性
當(dāng)頁面中出現(xiàn)大段文字的時候,我們可以通過使用配色來提升內(nèi)容的可讀性。
YummyGun網(wǎng)站主頁對主標(biāo)題使用了藍(lán)色來突出,而且給每一個段落的標(biāo)題都加深了顏色。因為現(xiàn)在用戶都是缺乏耐心的,他們進(jìn)入你的主頁,看到這樣一大段文字很少會通讀完的。所以我們要文字進(jìn)行處理,讓用戶瞬間分清標(biāo)題與正文的區(qū)別。標(biāo)題即是對于內(nèi)容的總結(jié),用戶可以通過標(biāo)題即可了解正文大致內(nèi)容。當(dāng)然提升文字可讀性光靠配色是不夠,還應(yīng)該有字體尺寸和留白的共同作用。在上面這個例子中,即使我們不使用藍(lán)色,通過字體的尺寸我們也能看出來Let’s talk and turn your idea into something memorable.這句話是主標(biāo)題。但是如果不使用藍(lán)色,這個頁面會顯得過于單調(diào)。
5、總結(jié)
以上我是對于配色的一些看法,設(shè)計是一個包容性很強(qiáng)的行業(yè),允許不同的聲音存在。我認(rèn)為配色少即使多,極簡風(fēng)格可以吸引用戶注意力。但是我也承認(rèn)配色多,奢華風(fēng)的頁面同樣也很出彩。配色一定要考慮產(chǎn)品定位,具體問題具體分析,不能死搬硬套。
色彩在任何一種設(shè)計中都起著很重要的作用,相差不多的色彩卻能給用戶帶來完全不同情感效果。因此,好好利用色彩與生俱來的魅力,就能讓你的設(shè)計更出彩。
本文由 @王M爭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
支持 ??
?? ?? ??