當前位置:才華齋>設計>美工設計>

網站美工色彩設計運用技巧

美工設計 閱讀(1.19W)

顏色可以對人的態度和情緒產生重大影響。網站美工色彩設計運用有哪些技巧呢。下面是小編為大家整理的網站美工色彩設計運用技巧,歡迎參考~

網站美工色彩設計運用技巧
  網站美工色彩設計運用技巧

QuickSprout的調查結果顯示,90%的產品評估都會將顏色納入其中。“顏色,”其分析師尼爾·帕特爾寫道,“當你決定購買某件特定產品時,85%的原因是源自顏色。”同樣,色彩會對網站的轉化率有所影響,這是一個顯而易見的事實,那麼就看看這篇文章,準備大幹一場吧。

我們的底線就是:選對顏色,造就成功。

什麼是色彩心理學?

為了能夠更好地體會下文中所提到的技巧,你最好是從瞭解一些與色彩心理學相關的資訊入手。

色彩心理學是一門研究色彩如何對人類行為產生影響的學科。色彩心理學實際上是行為心理學廣泛領域的一個分支。簡單地說,它是一個相當複雜的領域。由於理論檢驗的困難,一些懷疑主義者甚至對整個色彩心理學充滿蔑視。在色彩心理學領域,我自己的研究也正如文中所提到的那樣,缺乏科學證據來支援每一個論點。但是就色彩對人有著深刻且無可爭辯的影響的這一點,也並沒有理由可以輕蔑地將其駁回。

色彩心理學中有一些關鍵事實是不容置疑的。在一篇同行評審的期刊論文中,作者薩蒂延德拉·辛格指出,顧客對一件商品形成看法只需要90秒的時間。並且,62%-90%的互動僅來自於產品顏色本身。

色彩心理學是企業主、業務經理、建築師、園藝家、主廚、產品設計師、包裝設計師、商店老闆,甚至是為新生兒佈置嬰兒房的準父母都必須學習的課程。色彩是決定性的,我們的成功取決於對色彩的運用。

我們應該在什麼地方對色彩進行運用?

讓我們回到本文。正因為顏色是無處不在的,所以我們需要明白應該在哪裡將這些色彩小技巧投入使用。本文將就色彩在網站設計中的運用進行討論。具體來說,我們是在對網站的配色方案進行討論,這將包括頭圖、標題型別、邊界、背景、按鈕以及彈出視窗的顏色選擇。

在下面的例子中,NinjaJump在其logo、電話號碼、視訊、選單欄、圖片、分類選單、子標題以及側邊欄中使用了綠-黃-紅的配色方案。我們接下來討論的技巧可以在諸如選單、側邊欄配色方案等類似方面進行應用。

以恰當的方式選擇適合的顏色

運用色彩是一件棘手的事。你必須以恰當的方式在合適的時間以恰如其分的理由面向目標受眾對它進行使用。

舉個例子,如果你的網站是有關供兒童玩耍的充氣房的銷售,那麼你就不會考慮使用黑色的頁面,而是會與的色彩選擇相類似。

對於兒童充氣房的網站而言,你會傾向於使用大量明亮且充滿活力的色彩,可能是一些紅色、綠色,再加上一抹黃色進行填充。然而,在另一方面,如果你的目標是將商品出售給女性顧客的話,你就應該避開棕色或是橙色。這或許就是為什麼歐萊雅的網站會選擇黑白兩色為主並輔以紫色的原因。

我將對以下技巧進行逐一解讀。為了能夠成功地運用正確的色彩心理學,你需要遵循以下幾個核心原則:

恰當的方式

合適的時間

目標受眾

恰如其分的理由

這裡是一些專業人士在處理轉化和色彩時會使用的技巧。

色彩技巧將會提升你網站的轉化率

1.女性對灰色、橙色和棕色不感興趣,她們更喜歡藍色、紫色和綠色。

色彩偏好中的社會學差異是這整個分支學所研究的主體。帕特爾在引用有關兩種性別的色彩好惡時做出了正確的選擇。

在一項有關色彩與性別的調查中,35%的女性表示藍色是她們最喜歡的顏色,其次是紫色(23%)和綠色(14%)。而女性受訪者所不喜歡的顏色前三位則是橙色(33%)、棕色(33%)和灰色(17%)。

其它的研究也證實了這些發現,揭示了女性厭惡泥土色系,更喜歡原色系的事實。看一看這些理論是如何被應用到實踐中去的吧。點開任意一家目標受眾是女性群體的電子商業網站,你會發現這些女性所偏好的顏色都得到了充分應用。

Milani Cosmetics是一家以女性客戶為基礎的網站。因此,主頁上見不到任何的橙色、灰色或是棕色。

三種女性所青睞的顏色(藍色、紫色和綠色)在Woman’s Day網站的首頁上都可見其身影,網站這樣做的目的就是為了對目標受眾形成吸引。

絕大多數的人認為女性所喜愛的大眾色會是粉色,但現實卻不是。事實上,僅僅有一小部分的女性將粉色選做了自己最喜歡的顏色。因此,雖然粉色在色彩心理學中可能與女性特質相關聯,但這並不意味著粉色能夠對所有女性造成吸引,甚至不會引起絕大多數女性的興趣。選擇一些粉色以外的顏色,例如藍色、紫色和綠色,或許可以提高你的電子商務網站對女性訪問者的吸引力,從而提高轉化率。

2.男性不喜歡紫色、橙色和棕色。他們對藍色、綠色和黑色更感興趣。

如果你的銷售目標是針對男性顧客的話,那麼網站就一定要遠離紫色、橙色和棕色。與之相反的是,選擇藍色、綠色和黑色。藍色、綠色和黑色這些顏色是傳統意義上的男性色彩。然而,讓人稍感意外的是一些男性受訪者並沒有把棕色視作喜歡的顏色。

3.藍色有助於培養使用者的信任感

藍色是最被廣泛使用的顏色之一,理由很充分,許多人都喜歡藍色。

閱讀一些關於藍色的文獻,你會得到以下資訊:

藍色是一種代表著信任、和平、有序和忠誠的顏色

藍色是美國公司的代表色,它的潛臺詞是“冷靜,請相信並信任我……請對我所說的話充滿信心!”

藍色讓人頭腦冷靜並帶給人平靜的感覺。經常被描述為和平、寧靜、可靠和有序的代名詞。

對於藍色的心理學作用在學術界已經達成了廣泛的共識。它所傳遞的值得信任和寧靜的微妙資訊是真實的。你可以將藍色運用到優化你的網站及登陸介面上。

世界上最大的社交媒體網路使用的就是藍色。對於一家核心價值就是透明和信任的公司而言,這種色彩的選擇絕非偶然。

為數十億美元提供支付轉賬服務的PayPal公司同樣也是藍色的擁躉。這將有助於提高其網站的信任度。如果PayPal公司將紅色或是橙色用作外觀主題顏色和商標顏色的話,他們可能不會達到如今的網站轉化水平。

藍色實際上也被多家銀行廣泛使用。一家大型的網際網路銀行就使用了藍色。

儘管藍色是一種挑不出問題的顏色,但它決不能被用到與食品相關的事物上。用藍色盤子用餐的節食者就能成功地剋制繼續進食的慾望。進化理論則認為,藍色是一種與毒素相關的顏色。世界上沒有什麼食物是藍色的,藍莓和李子也只是表皮是藍色而已。因此,如果你是做食物銷售行業的話,網站上就不要出現藍色。

4.黃色表示警告

黃色是表示警告的顏色。因此,在警告標誌、交通訊號和地板溼滑的提醒上經常能夠看到黃色的身影。

關於黃色,有種看似奇怪的現象,那就是一些色彩心理學家認為黃色是與幸福有關的顏色。Business

Insider的報告稱“使用黃色的品牌是為了展現自身的趣味以及表示友好。”這說明黃色可以表示活潑。然而,因為黃色能夠刺激大腦的興奮中心,活潑的感覺可能只是一種情緒高亢的狀態,並不是純粹的快樂

色彩心理學與記憶和經歷有著密切聯絡。所以,如果某人曾與一位身著黃色T恤的人有過愉快經歷的話,他會在有著黃色拱門的快餐店吃飯,或是住在有著黃色牆壁的房屋中,因為黃色可能會讓他回想起那段愉快的記憶。

最被廣泛引用的有關黃色的“事實”之一就是它會使嬰兒變得愛哭,成人也會更易怒。迄今為止,我還沒找任何能支援這種論調的研究,儘管每個人都非常樂意反覆的`提及它。

我曾讀到過“黃色能引起反胃”的觀點,但是我對此持懷疑態度。

如果你能找到與“暴躁的嬰兒和易怒的成人是因為長期住在有著黃色牆壁的房子裡”有關的研究,請告訴我。我非常確定嬰兒啼哭和人們易怒,與牆上的塗料顏色無關。但無論是哪種情況,正如某位色彩學家所指出的,“黃色能啟用大腦焦躁中心”的論調似乎是真的。

在瀏覽網頁時情緒極度焦躁,這從來都不是一件好事情,除非焦躁的感覺非常細微。因此,黃色的行動號召或許可以使使用者產生一絲的焦躁情緒,從而促使訪問者對網站希望他們關注的行動號召進行點選。

一定要控制好黃顏色的使用量,除非你想要引起不必要的焦躁。

5.綠色是環保和戶外產品的理想顏色

或許最直觀的色彩是綠色,綠色是戶外的顏色,代表著環保、自然和環境。綠色實質上就是自然本身的顏色象徵。

除了相當明顯的戶外暗示性,綠色同樣也是提高創造性的顏色。一份名為“綠色效應”的研究表明,參與者在看到綠色時要比看到其它顏色迸發出更多的創造力。

如果你的網站專注於與自然、環境、有機或是戶外有關的產品或資訊時,綠色應該是你的首選。

綠色卻不僅僅只與自然有關。綠色同樣也是一種很好的行動呼籲色,特別是在與“孤立效應”一起使用時,孤立效應也被稱作馮雷斯托夫效應,是指我們傾向於記住那些與眾不同的事物。你能記住自由女神像是因為它又高又大並且是綠色的,而且這種物體在紐約港中並不常見。在色彩心理學中,孤立效應會發生在重點關注的條目上,例如轉化步奏,它是唯一一個具有特定顏色的條目。對於那些渴望進行活動號召的技術產品而言,綠色是種理想選擇。

看看Conrad Feagin是如何使用綠色的:

戴爾網站上的所有轉化按鈕都是綠色的:

“綠色”這個詞語本身就是與環保意識和環境欣賞相關的流行語。使用這個詞語和顏色能夠為你的網站帶來環保氛圍,提高你在那些熱衷於環境問題的使用者之間的聲譽。

6.橙色是一種可以引起匆忙或衝動感覺的有趣顏色。

橙色的積極一面是它可被用作“趣味”顏色。對於一些人來說,橙色有助於“激發人們參與體育鍛煉、進行比賽的慾望,並能使人變得更有信心。”這也許是為什麼橙色會被運動隊和兒童產品製造商廣泛使用的原因。

實際上,有很多的運動隊中都有橙色的存在,例如:佛羅里達大學短吻鱷隊、克萊姆森大學老虎隊、博伊西州立大學野馬隊、錫拉庫扎隊、紐約尼克斯隊、紐約大都會隊、迭戈閃電隊等等。

亞馬遜在他們的限時優惠板塊使用了橙色。這種顏色給人一種很急迫的感覺,這種感覺會使資訊更加引人注意,並更具可操作性。這點言之有理。橙色意味著活躍。橙色代表著趣味。橙色象徵著親密無間。因為它是一種明亮且溫暖的顏色。然而,網站中的橙色元素可以適當的多一些。一篇發表在的文章建議道:“可以謹慎地利用橙色來轉移注意力,但是不要過多,避免掩蓋了廣告的實際資訊。”

有時,橙色被解讀成“廉價”的代名詞。(與被認為是奢華的黑色相比。詳情見下方。)福布斯雜誌曾在一篇名為《色彩對於產品銷售影響》的文章中提及該問題,“橙色意味著廉價嗎?”得到的響亮回答是“的確如此”。如果你的產品定位於平價,或是你想讓它們看上去如此的話,橙色或許是個不錯的選擇。Big Lots就是這樣。

7.黑色給人一種奢華和有價值的感覺。

我們內部的色彩心理學家表示色調越暗,奢華感越強。一篇來自於Lifescript的文章將黑色描述為“優雅、精緻、力量”,這就是奢侈品設計師和高階電子商務網站想要使用者產生的感覺。文章中還進而將黑色視作“永恆、經典”的代表色,這更進一步解釋了為什麼高價值產品會選擇黑色的原因。

在Business Insider上一篇關於顏色與品牌的文章中,作者闡述了黑色的意義:

“黑色可被視作是奢華的顏色。‘黑色,在使用得當時,可以傳遞出有魅力、成熟、排他的感覺。’”

LV的手袋並不便宜。該品牌的網站上並沒有出現任何代表異想天開和趣味的顏色,這就是價值的體現:

普遍好於天美時的西鐵城手錶,網站同樣也是用了深色調的設計:

蘭博基尼也是如此。黑色是遊戲的名稱:

如果你網站上出售的是高附加值的奢侈消費品的話,黑色或許是個不錯的選擇。

8.使用明亮的原色來進行行動號召。

在嚴格的測試環境中,能夠號召行動的轉化率最高的顏色是明亮的原色和二次色,包括紅色、綠色、橙色、黃色。

黑色、深灰色、棕色或是紫色等深色的轉化率很低,而明亮色的轉化率就很高。

Women’s Health就使用了明亮的紫紅色調彈窗來進行行動號召。他們採用了與女性相關的紫色和粉色,並且都是以明亮色調的方式呈現。

GreenGeeks的按鈕設為了黃色:

世界最大的零售商將著名的“加入購物車”按鈕設為了黃色:

一些最好的轉化色是“很醜”的顏色——橙色和黃色。上的一篇文章說到,“從心理學角度來看,‘與美學相悖’的顏色或許可以比那些符合美學標準的顏色更能引發人們的關注。”因為一個轉化專案的目標是獲得關注,你或許可以用大的橙色(或是黃色)按鈕實現它。

9.別忽略了白色。

在我所讀到的大多數色彩心理學材料中,有一種顏色一直處在被遺忘的狀態。或許是因為色彩心理學家們無法在白色是否是一種顏色的問題上達成共識。我其實並不在意它算不算一種顏色。我所知道的是,大量使用白色空間是一種非常強大的設計方式。例如,這個世界上最受歡迎的網站,它基本就是全白色的:

白色是經常被忘記的顏色,因為它的主要用途是作為背景色。現如今大多數設計良好的網站都大量使用白色空間,是為了創造一種自由、空靈以及透氣的感覺。

結語

網際網路是一個充斥著色彩的世界,許多內容都可以通過恰當的方式,在合適的時間,以恰如其分的理由,面向目標受眾對色彩進行運用而實現。

自然而然,這篇文章會導致你公司辦公環境的改變。公司制訂一本特定的顏色風格指南怎麼樣?將logo的顏色確定為某一色調怎麼樣?讓首席設計師決定色彩要求怎麼樣?你該怎麼處理這些問題呢?

你可能沒有重寫公司色彩風格指南、選擇網站色調或是郵件模板中字型顏色的機會。所以,你如何在這些情況對色彩心理學加以運用呢?以下是些選項:

如果色彩改動真的是非常棘手並且困難的話,在這些情況下,你可能需要在原有的基礎上製造一些不同。如果你是一位目標定位在高階女性消費者身上的高跟鞋設計師,但是公司的logo卻是橙色,那麼就向公司的決策者如實講出你的擔憂吧。人們有時在涉及顏色的問題上會做出愚蠢的決定,這個時候就應該委婉地告訴他們一個殺手鐗級別的配色方案是如何改變轉化率的,以及原因是什麼。

使用心理學上所偏好的顏色來搭配現有的配色方案。誠然,你需要遵循原有的配色方案,但是你仍舊可以在這裡或那裡使用一抹戰略色彩。舉個例子,你有一家藍色是主色調的網站。不錯。你可以開發一個獲取電子郵件地址的彈窗,並將按鈕設定為明亮的黃色。這個按鈕能夠贏得使用者的心理偏好,並且它也不會與公司商標的顏色產生不協和感。

你在配色方案中擁有的自由度越大,結果往往越好。這有一些可靠的技巧可以讓你將色彩心理學融入到你的網站設計中去:

多嘗試幾種顏色。不管別人怎麼說,對於轉換文字或是按鈕而言並沒有正確的顏色一說。可以試試綠色、紫色或是黃色的按鈕。探索一下黑色背景配色方案與白色背景方案的各自優點。找出最適合你受眾和產品的顏色。

不要將顏色的選擇權全部交給設計師。我尊敬網站設計師們。我曾與他們中的很多人一起工作過。然而,別讓設計師決定你網站應該使用哪種顏色。顏色是一個轉化的問題,不僅僅是“噢,這看起來不錯”的問題。色彩美學不是萬能的。色彩轉換的效果非常重要!為了提高你的網站轉化率,你應該高度參與到登入頁面的顏色選擇中去。

避免顏色過多。我剛剛用了3000多字來告訴你顏色的重要性和神奇性。現在,你應該走出去並開始著手色彩設計。但是別過於狂熱。請記住我的最後一點。我把它放在最後是有原因的。白色是一種顏色,它同樣也應該是成為你在色彩選擇上永遠的好朋友。用大量的白色來控制你的色彩熱情。過多的顏色會讓人感到困惑。

你的色彩改變已經對你網站的轉化率產生影響了嗎?