- 相關(guān)推薦
網(wǎng)頁設(shè)計(jì)中顏色的使用技巧
一個(gè)擁有美麗配色的網(wǎng)頁設(shè)計(jì)總是容易令人著迷，不同的色彩可以有不同的傳達(dá)意義，對(duì)于網(wǎng)頁設(shè)計(jì)也是如此，通過好的顏色搭配，不僅可讓網(wǎng)頁美觀，也能有效傳達(dá)正確的含義。以下就是小編精心推薦網(wǎng)頁設(shè)計(jì)中顏色的使用技巧，希望對(duì)大家有幫助
在網(wǎng)頁設(shè)計(jì)中，對(duì)目前的網(wǎng)站配色(Landscape of color)認(rèn)真琢磨一下還是非常有趣的。大多數(shù)網(wǎng)站或多或少相同，但是顏色的設(shè)計(jì)搭配卻是一個(gè)非常給力的工具。
我并不想嘗試去闡述一些具有革命性的東西或者是特別的發(fā)現(xiàn)。但如果大部分網(wǎng)站都采用同樣的配色方案，那對(duì)顏色意味著什么呢?實(shí)際上，遠(yuǎn)超出你的想象�；孟胍幌抡麄�(gè)世界的每一個(gè)網(wǎng)站都是非常漂亮和五彩繽紛的，但它同時(shí)也意味著千篇一律。這就像你文章中每一個(gè)段落的粗體。
因此，當(dāng)配色方案比較柔和的時(shí)候，它允許有更多的機(jī)會(huì)。
許多網(wǎng)站都有一個(gè)基本的灰度配色方案-白色的背景和黑色的字體。(網(wǎng)頁中)想讓你看到的部分會(huì)賦予顏色作為強(qiáng)調(diào)。這就是為什么網(wǎng)頁不會(huì)充滿顏色—它們使用在想讓你看到的按鈕，標(biāo)題或者鏈接上面。
Vibrant ，當(dāng)你第一次登陸它們的主頁，主頁的背景和圖片是黑白的，網(wǎng)站標(biāo)志，可點(diǎn)擊的按鈕和漢堡菜單是亮黃色，這些可以很快的(在灰度背景中)脫穎而出，吸引你的注意力。
另一個(gè)例子是Takeit; 當(dāng)你第一次登錄他們的主頁就看一個(gè)大大的藍(lán)色背景。然而，其他的都是白色的。最前面并且居中的大標(biāo)題會(huì)讓你的注意力集中在中間。同時(shí)，你的眼睛在很短的時(shí)間內(nèi)就能注意尺寸較小但是仍然明顯的APP商城的按鈕。你可以從中研究一下是顏色如何引導(dǎo)用戶的注意力的。
創(chuàng)造個(gè)性
顏色是非常奇妙的，因?yàn)樗梢哉宫F(xiàn)一個(gè)網(wǎng)站或者品牌的語氣和情緒。Beagle(很 遺憾，譯者訪問的時(shí)候，網(wǎng)站已經(jīng)不在了)提供創(chuàng)建項(xiàng)目簡(jiǎn)介的服務(wù)，他們的網(wǎng)站使用了較輕的茶色。當(dāng)你向下滾動(dòng)他們的主頁時(shí)，你會(huì)看到棕色,炭色，綠色，甚 至粉紅色這樣一些愉快的色調(diào)。世俗的色調(diào)(earthly tones)看起來專業(yè)和優(yōu)雅，給人對(duì)于其所代表的公司(留下)一個(gè)非常好的印象。
An Interesting Day 網(wǎng)站它特指“在奧斯陸峽灣(Oslofjord)的一個(gè)小島上舉辦的一個(gè)不可思議的，為期一天的會(huì)議”( “a weird, one-day conference on a tiny island in the Oslofjord”)。當(dāng)紅色的背景和紅色的字體在上面的時(shí)候，你一定會(huì)有一種怪異的不協(xié)調(diào)的感覺。因?yàn)檫@不是我們每天看到的東西。實(shí)際上，這看起來挺不錯(cuò)的，但更重要的是這種配色方案?jìng)鬟_(dá)了一種很明顯的“怪異的”(weird)個(gè)性。
寫一個(gè)非常重要的聲明
通過顏色做一個(gè)聲明(statement)會(huì)很有趣。但你必須保證這個(gè)顏色很顯眼并且能抓住用戶的注意力。這很簡(jiǎn)單的說~。但對(duì)于語句來說也必須是 一個(gè)很好的顏色選擇。你不能只是隨便選取了一種亮色，(反之)它的外觀和感覺必須對(duì)整個(gè)頁面來說具有意義和目的性。舉個(gè)栗子，這是Gaga Symphony的登錄頁面。當(dāng)你登錄到他們的界面，你會(huì)被亮麗的粉紅色背景所包圍。你也許會(huì)覺得交響樂給人的感覺應(yīng)該是比較高雅的，應(yīng)該使用比較柔和，穩(wěn)重或是較靜謐的顏色。但是，Gaga比較特別，它的交響樂充滿活力，趣味和創(chuàng)造性。因此，(其所使用的)桃紅色(hot pink)是非常契合它的音樂風(fēng)格的的。
提供內(nèi)聚(Cohesion)和流動(dòng)(Flow)
顏色也可以指導(dǎo)用戶如何使用流式頁面。在上面的Takeit的例子中，Takeit的顏色搭配用比較溫和的方式去引導(dǎo)用戶的注意力。事實(shí)上，顏色在指導(dǎo)用戶方面，它可以變得敏感 (subtle)但不需要戲劇性(dramatic)或者過分夸大(over the top)。尤其當(dāng)各種顏色之間開始緊密結(jié)合時(shí)特別有效。這基本就是品牌顏色工作的原理。
看Marvel或者Dropbox。他們APP的配色方案都使用了明顯的藍(lán)色，但是你看在它們圖形中的其他顏色，像綠色，橘黃色或者紅色，非常恰當(dāng)?shù)拇钆湓谝黄?這樣就讓他們變得有意義了。
一個(gè)不同的例子是Innovation Project Canvas。他們使用了綠色來指引用戶(操作)沿著他們的頁面進(jìn)行滾動(dòng)。你不需要使用許多顏色來創(chuàng)建一個(gè)漂亮的流式頁面;僅僅使用一種顏色也可以做得更好。Innovation Project Canvas僅僅使用他們的綠色就達(dá)到了極佳的參與指導(dǎo)用戶的效果。
圖片中的顏色
一個(gè)關(guān)于顏色的有趣的小竅門是在圖片里去體現(xiàn)顏色。UI設(shè)計(jì)的基礎(chǔ)不僅是給網(wǎng)站添加一些顏色而已。隨著網(wǎng)頁使用高清圖片做背景和大產(chǎn)品圖片使用的興起，多使用合成的圖片為你的設(shè)計(jì)帶來色彩也是一個(gè)不錯(cuò)的主意。
CartoDB 是一個(gè)能夠讓你將地理位置數(shù)據(jù)可視化的APP。(CartoDB是一個(gè)開源的允許你在web上存儲(chǔ)和虛擬化地理數(shù)據(jù)的工具,這個(gè)數(shù)據(jù)庫(kù)通過靈活方式讓開發(fā) 者更容易的創(chuàng)建地圖和設(shè)計(jì)自己的應(yīng)用。)有什么最好的方法可以炫耀它們的服務(wù)有多好而不是炫耀他們的地圖有多美嗎?-那就是他們的主頁。這是一個(gè)非常好的方法去展示他們的產(chǎn)品，同時(shí)為他們的頁面增加視覺效果和色彩。
說到產(chǎn)品為它們自己說話,ETQ讓他們的鞋子大大勝過了他們的UI設(shè)計(jì)。這個(gè)網(wǎng)站風(fēng)格非常簡(jiǎn)潔，整個(gè)網(wǎng)站以最低限度去延伸他們的配色方案。他們把頁面設(shè)計(jì)的重心放在他們的產(chǎn)品上。盡管他們不是所有的鞋子都像例子 中的一樣顏色鮮艷，而仍然要讓他們的鞋子成為其設(shè)計(jì)中最大的顏色板塊(仍然延續(xù)這一種設(shè)計(jì)風(fēng)格)，還有一段很長(zhǎng)的路要走。不可否認(rèn)。ETO真正的讓鞋子脫穎而出。
誰需要顏色呢?
有趣的是有些網(wǎng)站反其道而行，他們嘗試使用盡量少的顏色進(jìn)行設(shè)計(jì)。網(wǎng)站沒有亮麗的色彩點(diǎn)綴也可以變得很華麗。灰度配色方案可以為品牌創(chuàng)建必要的外觀和感覺以及展示核心的思想。
Visual Soldiers就是一個(gè)優(yōu)秀的例子，其配色方案非常的簡(jiǎn)單，甚至是單調(diào)，就像Tomasz Wysocki’s portfolio。 這兩個(gè)網(wǎng)站有同樣的優(yōu)雅。因?yàn)樯蕟握{(diào)，所以他們反而抓住了你的注意力。也許你會(huì)想在他們頁面中的一個(gè)CTA(引起用戶動(dòng)作)或是一個(gè)鏈接中找到一些輕微的藍(lán)色或者綠色的提示，但是這里沒有。使用盡可能少的顏色是這兩個(gè)網(wǎng)站品牌的一部分。就算僅有黑和白兩種顏色，他們看起來也同樣的時(shí)髦和美觀。
結(jié)論
就像你所看到的，顏色是非常強(qiáng)大的。如果你能讓顏色自己去做一個(gè)設(shè)計(jì)，它的本領(lǐng)會(huì)遠(yuǎn)遠(yuǎn)超出你的想象。顏色可以通過流式(flow)和重要的聲明(statement)引導(dǎo)用戶的注意力，幫助指導(dǎo)用戶。顏色充滿個(gè)性，也可以十分有趣。對(duì)我而言，我認(rèn)為顏色，或缺乏(色彩)，賦予了設(shè)計(jì)生命。
So have fun with it.
【網(wǎng)頁設(shè)計(jì)中顏色的使用技巧】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)中光的特效使用技巧05-07
網(wǎng)頁設(shè)計(jì)中圖片有哪些常見的使用技巧03-21
網(wǎng)頁設(shè)計(jì)中顏色的情感含義09-20
網(wǎng)頁設(shè)計(jì)中圖片常用的技巧08-17
如何使用網(wǎng)頁設(shè)計(jì)中的圖片敘事07-28
網(wǎng)頁設(shè)計(jì)中色彩搭配的原則與技巧10-02