振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
淺析各類網站中的色彩使用與情感聯想
2010/04/23
淺析各類網站中的色彩使用與情感聯想

  在設計網頁之前,客戶或產品經理會提出對網頁視覺風格設計的期望:活躍、大氣、穩重、信賴、都市化….. 設計師一聽到關鍵字或許很自然地在心裡蹦出幾個配色與“關鍵字”相匹配了。網頁的色彩,是訪問者登錄頁面時的第一印象,好的頁面色彩能給使用者留下深刻的印象,並且能產生很好的視覺效果和營造網站整體氛圍的作用。

  色彩是我們接觸事物的第一直觀認知,在流覽一個新的網頁時,第一認知的不是頁面的具體結構和資訊內容,而且是頁面色彩搭配的視覺效果。色彩對於每個人、地域或國家都有不同的情感認知和聯想意義,從某種程度看,大多數人對色彩認知和聯想是一致的,如紅色,人們感覺得喜慶,熱鬧……具體到事物會聯想到紅心桃、草莓等等。在這裡簡單介紹色彩的情感聯想。

  色彩的情感聯想

  色彩的情感聯想,主要從具體聯想和抽象聯想兩個維度劃分:

  色彩的情感聯想是人們對事物的不斷的積累和認知,瞭解這些不但對網頁設計有幫助,還對市場行銷有幫助。如設計一個環保教育類網站,“環保教育”首先聯想到生命、自然、綠色生態,而這些聯想的事物共同色系是綠色,如果網站採用人們已認知的色彩會讓人們在初次訪問網站時,會對網站的主題產生共鳴和信賴感。

  那設計師就憑自己“經驗和色彩原理”就對網頁進行色彩設計?我們先慢鏡頭往回看整個網站的設計流程–設計師在著手視覺設計的前期流程:

  如果視覺設計師忽視前期的工作,網站最後視覺設計輸出或許會與客戶期望存在出入的風險。所以視覺設計師需要先瞭解和參與網站的定位、目標使用者、內容規劃的基礎上才能更好把握頁面的視覺設計。

  各類網站色彩應用

  網站的類型很多,按照分類,其各自的目的和側重點不同,對用戶的情感訴求心理也會不同。下面主要從網站的類型層面上來簡單探討色彩在網頁上的應用:

  1.門戶類:其主要需求是如何方便使用者在堆砌的資訊中有效、快速進行目標選擇,而頁面色彩可傾向于清爽,簡潔。

  雅虎,Google等門戶採用清爽簡潔的淺色調來降低資訊快速獲取時的視覺干擾。同性質的同類網站主要是沿用自己公司主色系或logo來做區分,便於用戶對品牌的識別。

  2. 產品類:主要目的需求展示產品的特性,促進流覽者消費欲望,頁面色彩可根據具體產品定位做多樣化設計。

  細化產品具體定位,如apple,韓國手機iriver高科技電子產品,其簡潔灰白色調給網站帶來科技感和現代感。

  http://www.apple.com/

  http://www.iriver.co.kr/

  3.社區類:其需求是操作簡單易用,長時間使用的舒適度,頁面色彩也傾向清爽,簡潔。

  主要以分享、交流資訊為主的社區網,有如上面門戶網資訊獲取性質,所以配色上比較簡潔清爽。但各社區網又各自有自己的核心目標使用者群,所以在配色方面帶有各自的特點。如校友核心使用者是在校學生,頁面頂端上的banner運用活潑的綠色調來渲染青春朝氣的氛圍.

  http://xiaoyou.qq.com/ http://facebook.com/

  4. 公司、企業類:展示企業形象,加深提高品牌印象,可應用logo的主色系設計,達到品牌統一。

  http://www.tencent.com

  5. 電子商務類:其目的在滿足方便快捷地查看商品和進行交易,同時運暖色調渲染氣氛,讓用戶感受到網站整體的活躍氛圍和愉悅感。

  當然,黑色調的電子商務網站同樣給讓人時尚、炫酷的潮流感

  6. 個人類:滿足用戶的自我個性展示和駕馭能力的需求,頁面色彩設計更是多樣化和個性化。現在有很多網站設置了換膚、自訂裝扮等功能來滿足用戶需求,如個人空間、博客、社區等等,就連門戶類網站也開始滿足用戶的色彩喜好設置護膚。所以各類網站的色彩應用沒有固定的模式,以按自身定位來靈活設計網頁色彩。

   7.其他類:工具類、活動類等.這裡就不一一展開了,原理同上,都要考慮目的、目標使用者等因素。
最後更新 ( 2010/05/01 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇