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