首頁 > 網頁教程 > 設計分享 > 網頁色彩搭配教程:三個實用方法搞定網頁配色設計

網頁色彩搭配教程:三個實用方法搞定網頁配色設計

時間:2014-12-03    來源:優設網

編者按:最值得收藏的色彩設計方法!色彩搭配是一門花樣繁多的學問,但任天下奇招再多,獨孤九劍總有破法,今天阿里的同學這篇色彩設計方法,僅有簡單3大類,但囊括了眾多頂尖的配色技巧,不可多得的集大成篇,別錯過咯。

小編推薦:網頁配色設計教程專題 【網頁配色理論、配色工具一網打盡!】

為什么要整理設計色彩方法?

在色彩設計應用中,我們對顏色不同程度的理解,影響到設計頁面的表現,熟練地運用色彩搭配,設計時豈不事半功倍。一張優秀的設計作品,它的色彩搭配必定和諧得體,令人賞心 悅目,反思我們在設計過程中,怎樣的色彩搭配更容易達到設計目的,又是什么影響了我們的配色思維呢?

以下幾點常會影響色彩搭配思維:

  1. 僅關注色彩表象
  2. 搭配方法不夠系統
  3. 色彩與構成掌握不到位

首先,我們簡單理解一下色相和色調概念:

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

接下來我們按三個大類的配色方法,結合一些案例 ,分析色彩在頁面中的應用手法。

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

一、色相差而形成的配色方式

1.1 有主導色彩配色

這是由一種色相構 成的統一性配色。即由某一種色相支配、統一畫面的配色,如果不是同一種色相,色環上相鄰的類似色也可以形成相近的配色效果。當然,也有一些色相差距較大的做法,比如撞色的對比,或者有無色彩的對比,但這里先講述帶主導色的配色案例。

1.1 -1 同色系配色

同色系配色是指主色和輔色都在統一色相上,這種配色方法往往會給人頁面很一致化的感受。

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

twitter的案例

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

整體藍色設計帶來統一印象,顏色的深淺分別承載不同類型的內 容信息,比如信息內容模塊,白色底代表用戶內容,淺藍色底代表回復內容,更深一點的藍色底代表可回復操作,顏色主導著信息層次,也保持了twitter的品牌形象。

觀點:顏色差分割頁面層次和模塊,并代表不同功能任務屬性。

1.1-2 鄰近色 配色

近鄰色配色方法比較常見,搭配比同色系稍微豐富,色相柔和過渡看起來也很和諧。

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

ALIDP的案例

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

純度高的色彩,基本用于組控件和文本標題顏色,各控件采用鄰近色使頁面不那么單調,再把色彩飽和度降低用于不同背景色和模塊劃分。

觀點:基于品牌色的鄰近色運用,靈活運用到各類控件中。

1.1-3 類似色配色

類似色配色也是常用的配色方法,對比不強給人色感平靜、調和的感覺。

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

BENMAPT的案例

網站色彩搭配 網站設計 色彩搭配 網站色調 網站策劃

紅黃雙色主導頁面,色彩基本用于不同組控件表現,紅色用于導 航控件、按鈕和圖標,同時也作輔助元素的主色。利用偏橙的黃色代替品牌色,用于內容標簽和背景搭配。

觀點:基于品牌色的類似色運用,有主次地用到頁面各類控件和主體內容中。

相關推薦
酷站欣賞之歐美棕色調網站設計案例賞析
網頁設計的文字色彩與可讀性分析
30個出色的網頁設計色彩搭配案例欣賞
網頁設計的色彩理論與案例淺析
18個國外經典優雅黑白色調的酷站欣賞
網頁配色經驗分享:疊柔配色技巧及圖解分析
網頁配色之色彩搭配技巧與色彩對用戶的心理作用
色調心理效應 顏色在網頁設計中的重要性分析
網頁設計新趨勢:撞色風(Color Blocking)風格的網站欣賞
6個步驟讓你快速打造一個有設計感的網站
網頁排版設計如何才能讓頁面文字閱讀更舒適?
創造視覺沖擊力的網頁設計配色技巧
色彩情感對用戶體驗設計的影響
11個網頁配色超棒的網站案例欣賞
移動應用圖標配色訣竅 APP界面配色設計教程
如何巧妙運用色彩心理學來提高網站轉化率
網頁設計教程:讓頁面活躍起來的四個技巧
秒變配色高手!六條網頁設計黃金配色原則
10個實用方法幫你搞定網頁柔和色調設計
2015年網頁設計配色趨勢預測
QQ空間配色變遷解密:“殺集取卵”!
網頁配色教程:六條網頁設計安全配色指南
網頁配色教程:什么樣的配色方案才有高端的感覺?
色彩搭配教程:顏色對用戶究竟有哪些影響?
走心的技巧!如何為色盲用戶提升網頁的可用性?
網頁配色設計:紅色空間如何設計才好看?
網頁配色設計:如何運用黃色來表達網頁的光感?
網頁配色設計:如何用藍色調搭配出天空和大海的感覺?
3個使用鮮艷配色來制作WEB/APP界面的技巧分享
5個色彩進階技巧!幫你創造更優質的網頁用戶體驗
雙色調配色、分屏式設計、空間共享式排版的網頁設計趨勢

精彩推薦

熱門教程

重庆时时开奖直播app 铁板鱿鱼现在还能赚钱吗 天涯明月刀寻宝不赚钱 全民彩票游戏 广东福利彩票短信投注 晚上怎么用专车赚钱 pk10免费计划软件安卓 大神棋牌游戏官网下载 自己赚钱自己花余生自己瞎几把过 新疆时时彩开奖号码结果 在股市怎么才能赚钱 金属探测仪怎样赚钱 体彩网四川金7乐 赌场百乐门玩法 秦始皇守城赚钱修长城小游戏 开宠物粮店赚钱吗 女人赚钱教育