知識分享

網站設計配色基礎:色彩設計方法

發表日期:2019-11-11 16:11:52 文章編輯: 瀏覽次數:60

網站設計中由于對比色相互對比構成的配色,可以分為互補色或相反色搭配構成的色相對比效果,由白色、黑色等明度差異構成的明度對比效果,以及由純度差異構成的純度對比效果。

雙色對比

色彩間對比視覺沖擊強烈,容易吸引用戶注意,使用時經常大范圍搭配。

1.png

VISA的案例:http://www.visa.cn/

 2.jpg

VISA是一個信用卡品牌,深藍色傳達和平安全的品牌形象,黃色能讓用戶產生興奮幸福感。另外藍色降低明度后再和黃色搭配,對比鮮明之余還能緩和視覺疲勞。

觀點:不管是整體對比還是局部對比,對比色給人強烈的視覺沖擊,結合色彩心理學對品牌傳達效果更佳。

3.1-2 三色對比

三色對比色相上更為豐富,通過加強色調重點突出某一種顏色,且在色彩面積更為講究。

5

NAVER的案例:www.naver.com

大面積綠色作為站點主導航,形象鮮明突出。使用品牌色對應的兩種中差色作二級導航,并降低其中一方藍色系明度,再用同色調的西瓜紅作為當前位置狀態,二級導航內部對比非常強烈卻不影響主導航效果。

觀點:三色對比中西瓜紅作為強調色限定在小面積展現非常關鍵,面積大小直接影響畫面平衡感。

3.1-3 多色對比

多色對比給人豐富飽滿的感覺,色彩搭配協調會使頁面會非常精致,模塊感強烈。

7

Metro的案例:http://www.microsoft.com/

9

Metro風格采用大量色彩,分隔不同的信息模塊。保持大模塊區域面積相等,模塊內部可以細分出不同內容層級,單色模塊只承載一種信息內容,配上對應功能圖標識別性高。

觀點:色彩色相對比、色彩面積對比,只要保持一定的比例關系,頁面也能整整有序。

3.2 純度對比

相對與色相對比,純度差對比,對比色彩的選擇非常多,設計應用范圍廣泛,可用于一些突出品牌、營銷類的場景。

10

PINTEREST的案例:http://www.pinterest.com/

11

頁面中心登錄模塊,通過降低純度處理制造無色相背景,再利用紅色按鈕的對比,形成純度差關系。與色相對比相較,純色對比沖突感刺激感相對小一些,非常容易突出主體內容的真實性。

觀點:運用對比重要的是對比例的把握,面積、構圖、節奏、顏色、位置等一切可以發生變化的元素,形成視覺的強烈沖突。

3.3 明度對比

明度對比接近生活實際反映,通過環境遠近、日照角度等明暗關系,設計趨于真實。

12

ARKTIS的案例

14

明度對比夠構成畫面的空間縱深層次,呈現遠近的對比關系,高明度突出近景主體內容,低明度表現遠景的距離。而明度差使人注意力集中在高亮區域,呈現出藥瓶的真實寫照。

觀點:明度對比使頁面顯得更單純、統一,而高低明度差可產生距離關系。

 

總結:

色彩是最能引起心境共鳴和情緒認知的元素,三原色能調配出非常豐富的色彩,色彩搭配更是千變萬化。設計配色時,我們可以摒棄一些傳統的默認樣式,了解設計背后的需求目的,思考色彩對頁面場景表現、情感傳達等作用,從而有依據、有條理、有方法地構建色彩搭配方案。

原文:http://mux.alimama.com/posts/1392


標簽: 網站設計
將文章分享到..
相關新聞
全新新聞
隨機新聞
最新網站設計案例

博天大業集團

生物科技公司 網站設計 網站開發

拼圖留學

為中國家庭提供海外教育系列產品與服務

人教社

人教教材中心有限責任公司教材中心

國際教育科技集團

新同文國際教育科技集團

中金智匯

新一代智能化商業應用軟件提供商

新奧集團-新奧財務有限責任公司

新奧集團成員單位提供財務管理服務的非銀行金融機構

北京大學-北京北大新世紀集團

北京大學旗下教育集團 網站建設 網站制作

國家文物局-水下文化遺產

中國水下文化遺產保護中心 網站建設

快乐12遗漏