萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 淺析網頁色彩應用

淺析網頁色彩應用

淺析網頁色彩應用   三聯教程

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

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

  色彩的情感聯想

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

淺析網頁色彩應用

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

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

淺析網頁色彩應用

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

  各類網站的色彩應用

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

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

  騰訊網,雅虎,網易等門戶采用清爽簡潔的淺色調來降低信息快速獲取時的視覺干擾。同性質的同類網站主要是沿用自己公司主色系或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. 電子商務類:其目的在滿足方便快捷地查看商品和進行交易,同時運暖色調渲染氣氛,讓用戶感受到網站整體的活躍氛圍和愉悅感。

淺析網頁色彩應用

  http://www.fashionis.co.kr/

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

淺析網頁色彩應用

  http://www.yoho.cn/

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

  7.其他類:工具類、活動類等.這裡就不一一展開了,原理同上:目的、目標用戶…

        :更多精彩教程請關注三聯網頁設計教程 欄目,

copyright © 萬盛學電腦網 all rights reserved