數位行銷

網頁配色基礎:色彩設計方法3-對比色調而形成的配色方式

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

3.1 色相對比

3.1-1 雙色對比

3.1-2 三色對比

3.1-3 多色對比

3.2 純度對比

3.3 明度對比

 

3.1-1 雙色對比

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

1

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

  4

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

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11號樓之1(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
點此加我們LINE
DMC Firewall is developed by Dean Marshall Consultancy Ltd