轉(zhuǎn)載色彩在網(wǎng)頁(yè)設(shè)計(jì)中的有哪些重要角色?

2018-5-10    博博

在生活中,不管是瀏覽網(wǎng)頁(yè)還是使用APP,我們都能看到色彩是其中重要的設(shè)計(jì)元素。每一年我們都能看到很多“流行趨勢(shì)預(yù)測(cè)”之類的文章,而這些流行趨勢(shì)里無(wú)一不包含色彩。

隨著時(shí)間的推移,設(shè)計(jì)師們?cè)谏实氖褂蒙细哟竽?,更加有策略。有時(shí),色彩用來(lái)突出某個(gè)元素,有時(shí)用來(lái)講好一個(gè)故事,有時(shí)用來(lái)強(qiáng)化品牌的輸出。今天我們就來(lái)舉幾個(gè)例子。


強(qiáng)化背景

幾年前有一個(gè)很流行的趨勢(shì)是采用大膽的背景,現(xiàn)在還是能看到很多例子。在一個(gè)好的設(shè)計(jì)里,豐富多彩的背景能夠讓某一區(qū)域成功吸引注意力。不管你認(rèn)為流行趨勢(shì)是什么,不可否認(rèn)的是,好的背景色能讓一個(gè)部分脫穎而出。

下面這個(gè)設(shè)計(jì)來(lái)自Root工作室,使用黃色背景來(lái)突出切斯特動(dòng)物園的案例研究。黃色背景設(shè)定了這個(gè)案例研究的基調(diào)。當(dāng)然了,并不是所有的案例都使用像切斯特動(dòng)物園黃色這樣鮮艷的顏色,因?yàn)檫@個(gè)案例的設(shè)計(jì)是極簡(jiǎn)風(fēng)格,并沒有需要特別突出的內(nèi)容,所以鮮艷背景恰到好處。

接下來(lái)這個(gè)例子是Mambo Mambo,它使用色彩來(lái)突出組合的不同部分。有些部分是霓虹黃色,有些是深藍(lán),有些甚至是黑色。在截圖中,我們可以看到,霓虹黃色與綠色搭配,藍(lán)色和膚色搭配,看起來(lái)非常和諧。

在整個(gè)頁(yè)面中,正是這些背景色的使用使不同部分都變得獨(dú)特而有趣。同時(shí)呢,也起到了品牌宣傳的效果。


突出內(nèi)容

顏色運(yùn)用得當(dāng)可以更好地突出想要突出的部分。讓我們從優(yōu)步手語(yǔ)登錄頁(yè)面開始,橙色的漸變背景肯定會(huì)吸引用戶的注意力。這是一個(gè)很棒的設(shè)計(jì)策略,因?yàn)檫@個(gè)頁(yè)面的目的就是教人們基本的手語(yǔ),很大程度上是依賴視覺線索實(shí)現(xiàn)的。

接下來(lái)是Kickpush 設(shè)計(jì)工作室的頁(yè)面??磮D上的文字我們就知道,Kickpush希望展示自己與眾不同的個(gè)性。這個(gè)配色方案的選擇就很有目的性,將Kickpush的個(gè)性快速直觀地表達(dá)出來(lái)了。


講好故事

色彩有助于講好一個(gè)故事,Bloom的主頁(yè)就是個(gè)很好的例子。在整個(gè)設(shè)計(jì)中,他們使用的是同樣的電子藍(lán)。相同的配色與其他視覺元素一起,幫助用戶從頁(yè)眉滾動(dòng)到頁(yè)腳。如果所有不同的部分都有不同的主色,那么故事的完整性就會(huì)被打破了。

對(duì)于Adobe的營(yíng)銷云登錄頁(yè)面,效果也是差不多的。整個(gè)設(shè)計(jì)是一個(gè)很大的版面,每個(gè)部分都有自己的配色方案,從最頂部的淺藍(lán)色一直到最底部的深紫色。我們可以看到,整個(gè)配色不僅僅是純的UI顏色,照片選用的色調(diào)也與每一種背景色相配。

因?yàn)檫@個(gè)設(shè)計(jì)是一個(gè)很長(zhǎng)的頁(yè)面,顏色有助于講述每個(gè)部分的故事。


激發(fā)興趣,強(qiáng)化個(gè)性

有時(shí),顏色是專門用來(lái)給設(shè)計(jì)增添趣味性的。為了更有效的使用色彩,有時(shí)大膽的顏色并不一定要在設(shè)計(jì)的前面和中心。

例如,Designmodo自己的Qards著陸頁(yè)面使用了各種各樣的小色塊,從而使得登陸頁(yè)看起來(lái)更令人愉快。


提升品牌

強(qiáng)化品牌,我認(rèn)為這是色彩最有力的作用了,當(dāng)然了,我不是指上文中Kickpush 或是Bloom那種使用大塊背景色的方式,而是批判性的、策略性的使用顏色。

我們很多人都見證了Asana的改版,在新版本中加入了不少顏色。在網(wǎng)站的某些部分,顏色被大量地使用,而在其他部分則不是那么多,這是為了在總體上實(shí)現(xiàn)平衡。Asana選用的顏色多變而充滿活力,搭配的也非常好?,F(xiàn)在,Asana的品牌色彩由亮粉色,橙色和紫色組成,充滿活力??梢哉f(shuō),顏色策略似乎是Asana品牌定位的關(guān)鍵。

Stripe公司的策略也差不多,使用相鄰顏色之間的漸變,比如藍(lán)色和綠色,這可能是這種顏色使用的一個(gè)大趨勢(shì)。品牌整體上是藍(lán)色,同時(shí)也包含綠色、粉色、紫色和橙色。這么多顏色共同配合,增強(qiáng)了Stripe公司的品牌影響力。

最后一個(gè)例子是Goulburn山谷的網(wǎng)站。他們的品牌使用了一些不同尋常的顏色,不過(guò)整個(gè)設(shè)計(jì)看起來(lái)不錯(cuò)。

登錄頁(yè)面中使用的顏色和照片中的截圖是一樣的:綠色略帶橙色。由于照片中色彩的協(xié)調(diào),整個(gè)著陸頁(yè)都很流暢。

總結(jié)

無(wú)論是Asana,用顏色創(chuàng)造更好的品牌;還是Kickpush,使用明亮的紅色背景突出內(nèi)容,讓用戶意識(shí)到它的與眾不同,我們看到了顏色在網(wǎng)站中的戰(zhàn)略性意義。

最重要的是,顏色有助于塑造個(gè)性,尤其是品牌形象。當(dāng)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)發(fā)生變化時(shí),網(wǎng)頁(yè)設(shè)計(jì)中色彩的使用只會(huì)變得越來(lái)越好。


分享本文至:

日歷

鏈接

個(gè)人資料

存檔