上海創(chuàng)新互聯(lián)設(shè)計資訊：網(wǎng)站設(shè)計之色彩注意要點(diǎn)

網(wǎng)頁設(shè)計色彩搭配原理

• 色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。
• 色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對你的印象強(qiáng)烈。
• 色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。
• 色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想。藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。

確定主體色

在網(wǎng)頁設(shè)計之初，首先要考慮的就是這個網(wǎng)站要確定的顏色，一般會根據(jù)網(wǎng)站的類別和確定的網(wǎng)頁，進(jìn)行大致顏色取向，在頁面上，除白色為背景外，大量使用的顏色，就是這個網(wǎng)頁的主體顏色。比如農(nóng)業(yè)類網(wǎng)站，一般都會選擇綠色，藝術(shù)類的網(wǎng)站，大都會選擇色彩張揚(yáng)的顏色或黑色，工商類網(wǎng)站很多選擇使用紅色。因此，不同的顏色帶給人不同的感覺，同時給瀏覽者感受到設(shè)計者的情緒，每種色彩當(dāng)飽和度或透明度上，發(fā)生略微改變就會讓人的心境，產(chǎn)生不同的變化。

• 紅色：可以讓人思想活躍，讓人振奮，充滿活力和熱情。
• 綠色：介于冷色與暖色之間，讓人感覺和諧、寧靜、健康、環(huán)保。金黃、常與白色搭配，讓人感覺舒適、優(yōu)雅。
• 橙色：容易營造輕松、溫馨、時尚的氛圍。
• 藍(lán)色：體現(xiàn)專業(yè)主題，讓人感覺清爽、清新，淡藍(lán)色結(jié)合白色還可營造浪漫、溫馨的氛圍。
• 白色：通配色，讓人產(chǎn)生明凈、清新的感覺。
• 黑色：容易讓人產(chǎn)生壓抑、悲傷感，同時使人感覺神秘、深沉。
• 灰色：營造高雅、溫和的氛圍，也同時也會讓心情受到壓抑，產(chǎn)生頹廢感。

選擇相近色

在網(wǎng)頁配色時，盡量控制在三種色彩以內(nèi)，選擇了主體色之后，再配以相近的配色，如黃色配以淡黃色，深粉配以淡粉色，這樣容易讓網(wǎng)頁色彩和諧統(tǒng)一。

• 網(wǎng)頁頭部：可以采用主體色的反色，一般采用深色，放在方便瀏覽者，第一時間能看到的位置。
• 正文：網(wǎng)頁的正文部分要求對比度要高一些，比如白底配深灰色字，黑底配淡灰色字。
• 導(dǎo)航欄：選擇深色的背景色和背景圖像，再配以反差強(qiáng)的文字顏色，讓導(dǎo)航清晰、準(zhǔn)確引導(dǎo)瀏覽者，在網(wǎng)站中的方位。
• 側(cè)欄：可以選擇左側(cè)或右側(cè)，大都二級頁面選擇左側(cè)欄，也不有少的三級頁面選擇右側(cè)欄，也起到引導(dǎo)讀者網(wǎng)站信息瀏覽的作用，讓其正文部分的顏色有所區(qū)分。尾部：可以考慮與側(cè)欄使用同色，或與頭部相呼應(yīng)的顏色，避免網(wǎng)頁整體看起來頭重腳輕才好。

使用跳躍色

在網(wǎng)頁中，用來引導(dǎo)視線的顏色，可以使用一些跳躍色，比如一些細(xì)線，按鈕等，可以讓網(wǎng)頁增加靈活性，減少審美疲勞。

使用黑白色

無論網(wǎng)站的主體色調(diào)是什么，都會使用到黑白兩種顏色，適當(dāng)用白色調(diào)整網(wǎng)頁的空白區(qū)域，讓頁面布局更加科學(xué)合理。黑色與白色表現(xiàn)的是兩個極端的亮度，黑白搭配可以表現(xiàn)出強(qiáng)烈的藝術(shù)感，只要搭配得當(dāng)，所體現(xiàn)的效果往往會比彩色的頁面，更能生動展示個性，常用于現(xiàn)代派的站點(diǎn)當(dāng)中。因?yàn)榘咨哂泻軓?qiáng)的親和力，最能體現(xiàn)出如雪般的純潔和柔軟;而黑色透露出的神秘感，任何一種顏色都無法比擬，還可用黑色展示出高貴的氣質(zhì)。

色彩使用忌諱

• 不要將所有顏色都用到，盡量控制在三種色彩以內(nèi);
• 背景和前文對比盡量要大，絕對不要用花紋繁復(fù)的圖案作背景，以便主要文字內(nèi)容;
• 根據(jù)文化背景適當(dāng)?shù)倪x擇顏色黃色在信仰基督教的國家是下等色。

網(wǎng)頁設(shè)計中的色彩使用

色彩影響人類心情與思考這件事情是真的，當(dāng)眼睛看到某種顏色時，會將此訊息傳回大腦的下視丘，經(jīng)由一系列的神經(jīng)傳達(dá)，刺激甲狀腺分泌賀爾蒙，進(jìn)而造成情緒、情感或是實(shí)際反應(yīng)。經(jīng)由線上網(wǎng)站 QuickSprout 的研究顯示，顏色可以影響 90% 的產(chǎn)品評價;數(shù)位行銷專家 Neil Patel 指出，85% 購買產(chǎn)品的原因是出自于顏色，而色彩對于網(wǎng)路上各式各樣的網(wǎng)站設(shè)計當(dāng)然也具有一定影響。跟相親一樣，第一印象很重要;只要抓住色彩使用的箇中奧妙，就等于抓住讀者的心。

色彩用地方才能穿透人心

既然顏色這么重要，那要用在哪里才能真正發(fā)揮功效?本文將討論各種網(wǎng)頁上的顏色設(shè)計運(yùn)用，最主要將著重在網(wǎng)站的主色調(diào)上，包含網(wǎng)頁主圖、標(biāo)題、隔線、背景色、連結(jié)紐以及彈出視窗都在討論范圍內(nèi)。例如下圖，NinjaJump 在 logo、電話號碼、分類連結(jié)、副標(biāo)題連結(jié)、側(cè)邊連結(jié)都使用綠、黃、紅三色，我們要討論的重點(diǎn)也可以運(yùn)用到選項(xiàng)欄位、側(cè)邊欄位與色彩策略等等。色彩學(xué)真的非常精妙，不僅要用對地方，連天時地利人為因素都要加進(jìn)去考量，才能展現(xiàn)威力。如果要在網(wǎng)頁上賣跳跳床，你絕對不會想到要用黑色，看NinjaJump 網(wǎng)站。

身為一個賣跳跳床的網(wǎng)站，我們可以預(yù)期的是明亮有活力的配色，紅色、綠色、再加上一點(diǎn)亮澄澄的黃色對孩童與父母而言都是不錯的選擇。若今天的消費(fèi)主要客群是女性，可能這招就不管用，L’Oreal 的網(wǎng)站就僅使用簡單的黑與白色，加上些許紫色增添層次感。

關(guān)于為何 L’Oreal 使用黑白兩色是正確的，我留到稍后解釋，首先再一次提醒運(yùn)用色彩要注意：用對地方、用對時間、針對客群、針對目的，我們先來看看以下幾點(diǎn)撇步。女性不喜歡灰、橘與棕色;她們喜歡藍(lán)、紫與綠色。Patel 利用性別來分類男女對于顏色有何不同的喜好，在一項(xiàng)顏色與性別的研究中，35% 的女性表示她們最喜歡藍(lán)色;再來是紫色佔(zhàn) 23%、綠色佔(zhàn) 14%。33% 的女性表示橘色是她們最不喜歡的顏色，再來是棕色 33% 與灰色 17%。

其他研究也顯示女性較不偏好大地色系，只要看看瞄準(zhǔn)女性做為主要客群的線上購物網(wǎng)站就可證實(shí)。化妝品牌 Milani Cosmetics 專供女性市場，其網(wǎng)站首頁上沒有任何一點(diǎn)橘、棕、灰色。

Woman’s Day 則是把所有女性最愛的顏色 (藍(lán)、紫、綠) 都放上網(wǎng)頁設(shè)計了。

還是有人以為女生最愛粉紅色，請容我在這先翻個白眼，事實(shí)上只有少數(shù)女性會將粉紅色選為最喜愛的顏色，雖然粉紅色與女性柔若有相關(guān)聯(lián)，但使用藍(lán)、紫、綠色，反而能夠有效增進(jìn)女性購物者的造訪率。男性不喜歡紫、橘、棕色;他們喜歡藍(lán)、綠與黑色。如果男性才是網(wǎng)站的主要針對客群，最好別用紫、橘、棕色。藍(lán)、綠與黑色在傳統(tǒng)上較常與男性氣息連結(jié)在一起，棕色竟然不在此列倒是讓人有點(diǎn)訝異。

藍(lán)色可以增進(jìn)使用者的信任

藍(lán)色事實(shí)上是最被普遍使用的顏色，而且很多人喜歡，所以藍(lán)色是最溫暖的顏色。只要看看有關(guān)藍(lán)色的文獻(xiàn)探討，就可以發(fā)現(xiàn)藍(lán)色被認(rèn)為是信任、和平、秩序、忠誠的象徵;也會讓人有冷靜下來的作用;甚至還可以將藍(lán)色直接代表寧靜。在顏色對于心理影響的調(diào)查中，藍(lán)色傳達(dá)信任感與寧靜的作用是被證實(shí)過的，所以看看 Facebook 就知道，將藍(lán)色運(yùn)用在主頁面上用以傳達(dá)核心價值：透明與信任。

如果 Facebook 的例子還不夠明顯，我們再來看看 Paypal，作為一個線上支付平臺，同樣也選擇藍(lán)色增進(jìn)使用者的信任。如果他們用的是紅色或橘色，大概讓人以為是在跳樓大拍賣的機(jī)率還會高一點(diǎn)。

許多銀行也大量使用藍(lán)色作為視覺主軸，看看建設(shè)銀行

雖然藍(lán)色被大量使用，不過千萬切記別將藍(lán)色套用在與食物有關(guān)網(wǎng)站上，多半只有節(jié)食的人用藍(lán)色來幫助節(jié)食，而且從演化的角度來看，藍(lán)色的食物通常都被認(rèn)為是有毒的，除了藍(lán)莓之外，能想到什么藍(lán)色食物是無害的嗎?好像沒有。

黃色代表警告

警告標(biāo)志、交通號志、小心地滑等告示通常都是用黃色，因?yàn)楹茱@眼容易引起注意。

關(guān)于黃色，大家的意見比較分歧，有人說黃色代表快樂，Business Insider 就報導(dǎo)使用黃色的品牌，展現(xiàn)出他們的風(fēng)趣與親和力，黃色也代表童心，不過黃色能夠直接刺激大腦的興奮區(qū)塊，大腦很可能只是以高昂的情緒作為反應(yīng)，而不代表喜悅。顏色心理學(xué)與記憶和經(jīng)驗(yàn)有極高的關(guān)聯(lián)，所以說如果某人的開心記憶，是有關(guān)于穿著黃衣的麥當(dāng)勞叔叔，做在黃紅配色的速食餐廳里吃炸得黃澄澄的數(shù)條，那么自然日后他看到黃色就會喚起當(dāng)初的開心回憶。

還有另外一項(xiàng)說法，認(rèn)為黃色會引起小嬰兒哭泣，讓成人憤怒，到目前為止我并未找到證明此項(xiàng)說法的實(shí)證。還有人說黃色會引起噁心反應(yīng)，這到底是為何呢?如果有鄉(xiāng)民找到證實(shí)黃色會引起小嬰兒大哭，或是讓人感到噁心的科學(xué)實(shí)證的話，歡迎在下方留言。如果真像這篇所說，黃色可能引起焦慮的話，那在網(wǎng)頁設(shè)計時，就要將此因素納入考量，不要大量使用，酌量即可。

為環(huán)境或戶外產(chǎn)品選用綠色吧

綠色不用多說了，戶外、環(huán)保、自然、環(huán)境等等議題的萬年愛用色。綠色就是自然，自然就等于綠色，相信沒人會有異議。除了綠色與戶外活動的直接關(guān)連外，也可以增進(jìn)創(chuàng)意。綠色效應(yīng)實(shí)驗(yàn)中，綠色顯著的增進(jìn)受試者的創(chuàng)造力，效果超過其他顏色。話到這里，如果你的網(wǎng)站是有關(guān)自然、環(huán)境、有機(jī)或是戶外活動的話，綠色絕對是上乘之選。做個小結(jié)，綠色就是環(huán)保意識的代表色，使用綠色還可以提昇顧客對于此網(wǎng)站的環(huán)保評價，可謂一舉多得。當(dāng)然綠色與雷斯多夫效應(yīng)( von Restorff effect)結(jié)合的話，效果更能加成。雷斯多夫效應(yīng)就是個人對于大量資訊，最容易記住最特殊的部份。大家記得自由女神就是因?yàn)槟鞘且粋€非常高聳的綠色雕像，而且周邊景物中就他最顯眼，在色彩心理學(xué)中，雷斯多夫效應(yīng)只會發(fā)生在顯眼的目標(biāo)上，所以工程師若想要吸引使用者點(diǎn)擊某個按鈕，就把那個按鈕做得又大又綠吧。

看看 Conrad Feagin 怎么做：

戴爾電腦的加入購物車按鈕也是綠的

橘色激發(fā)熱情與沖動

橘色可以讓人覺得有趣新奇，甚至可以為活動帶來刺激、競爭、以及自信，這大概也是為何許多運(yùn)動隊(duì)伍或是孩童產(chǎn)品會使用橘色做招牌。

看看這些logo、以及使用橘色的運(yùn)動代表隊(duì)， Florida Gators、Clemson Tigers、Boise State Broncos、Syracuse、New York Knicks、New York Mets、San Diego Chargers 都是例子。

Amazon 使用橘色作為限時特價的促銷，讓人忍不住想要馬上購入一臺特價的 Kindle Fire。

橘色代表的主動積極、團(tuán)結(jié)精神成為一種具象化刺激，因?yàn)檫@個顏色看起來非常鮮艷有活力，但有時候橘色的影響又會顯得太超過。Psych Answers.com就建議，橘色的確可以吸引注意，但是若是使用太過則會造成反效果。

有時候，橘色也意味著廉價，F(xiàn)orbes 就曾經(jīng)在文章中提出橘色是否意味著廉價的問題，答案是肯定的，如果你的產(chǎn)品不走高端路線，又想要使用低價策略宣傳，用橘色就對了，看看樂透 Big Lots 即明瞭。

黑色為網(wǎng)站增加奢華質(zhì)感

根據(jù)色彩心理學(xué)，越深的色調(diào)質(zhì)感越好，一篇來自 Lifescript 的文章中，描述黑色代表優(yōu)雅、復(fù)雜、力量，這也是許多高端精品設(shè)計師或是時尚網(wǎng)站希望表現(xiàn)的成果。那篇文章也描述黑色代表永恆、經(jīng)典，因此被廣泛運(yùn)用在精品中，例如 Chanel 的小黑洋裝就是一例。在 Business Insider 文章中，更加闡述黑色的重要性：黑色是代表奢華的顏色，被正確使用時，可以傳達(dá)無限風(fēng)華，以及其好、不可取代性。Louis Vuitton 2014 春夏系列的包款廣告就使用深色來呈現(xiàn)品牌獨(dú)特性，這同時也是 Marc Jacobs 待在 Louis Vuitton 的最后一季作品。

就連藍(lán)寶堅尼的網(wǎng)站也是一片黑，但跑車烤漆在全黑網(wǎng)站的設(shè)計下，仍然閃耀光彩。

所以，高端精品的網(wǎng)站設(shè)計中，黑色絕對是個最常被使用來表達(dá)品牌質(zhì)感、精緻獨(dú)特性的愛用色之一。

如果想要吸引注意，使用明亮色。在許多測試中，結(jié)果發(fā)現(xiàn)使用明亮的底色，例如白色，配上鮮艷的紅、綠、橘、黃等色，最能引起注意力;而深色在這方面的成效遠(yuǎn)遠(yuǎn)輸于明亮色彩。Women’s Health 網(wǎng)站就使用這樣的策略，他們使用白色做底色，與女性相關(guān)的桃紅色作為標(biāo)語。

GreenGeek 則使用黃色作為按鍵顏色。

還有黃色的加入購物車按鈕

有時候最能引起注意力的顏色，反而是那些丑的顏色，ColorMatters.com網(wǎng)站就提到，在心理學(xué)上違反美感的顏色，有時更能吸引人們注意，在這樣的情況下，就可以使用黃色或是橘色。

別忽略白色

在大多數(shù)有關(guān)色彩研究的文獻(xiàn)中，我發(fā)現(xiàn)有一個顏色被大量忽略，或許是色彩學(xué)家無法認(rèn)定白色到底算不算一種顏色，但不管怎樣，留白是一種藝術(shù)，更是一種極佳策略?？纯? Google 首頁

白色常被忽略，因?yàn)樘１挥脼榛镜咨墒谴蟛糠钟性O(shè)計感的網(wǎng)站都會適當(dāng)?shù)牧舭?，?chuàng)造出自由感、空間感。

結(jié)論

網(wǎng)站中的網(wǎng)頁設(shè)計基本上就是顏色運(yùn)用的戰(zhàn)場，本文的用意就是希望大家檢視自家網(wǎng)站的顏色運(yùn)用是否正確，并且開始思考然后做出調(diào)整。如果你的網(wǎng)站顏色真的一團(tuán)糟那就換掉吧若對于網(wǎng)站色調(diào)能有更大的調(diào)整空間那自然最好，你可以這樣做：嘗試不同的顏色。試試看綠色、紫色、黃色，嘗試黑色背景，或是白色背景哪個比較好，總而言之，尋找哪種組合對你的網(wǎng)站、瀏覽者最有效。

不要把色彩選擇全部丟給網(wǎng)站工程師決定，當(dāng)然工程師有他們的專業(yè)部分，但是自己的視覺架構(gòu)自己想!顏色關(guān)乎到網(wǎng)站成效與顧客滿意與否，至少在選色的時候，多多為自己的網(wǎng)站發(fā)表些意見。避免視覺超載，過與不及都不好，請記得留白的藝術(shù)，我們不想讓瀏覽者看到一個失控的調(diào)色盤對吧。

網(wǎng)站欄目：網(wǎng)頁設(shè)計之色彩注意要點(diǎn)
網(wǎng)站路徑：http://jinyejixie.com/news21/163771.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、面包屑導(dǎo)航、電子商務(wù)、網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)