您的位置:網站首頁 > 新聞原創 > 安鄉網頁設計

網頁設計中的色彩搭配原理

日期:2016-12-6 10:02:26 人氣: 標簽:
分享到:
網頁設計中的色彩搭配是個令人頭痛的問題,怎么樣才能搭配出賞心悅目的色彩組合?下面M姐就來介紹一些基本的色彩原理和幾個相關工具。

什么是色彩原理?
色彩原理包含諸多內容,但最基礎的是色彩的互補、對比和活力。

互補

色彩的互補是指我們看到的一種顏色與其他顏色之間的關系。當所選的顏色處于色譜兩極時,會中和出一種視覺上的愉悅感,這就是互補。色彩互補的方式主要有兩種:三色系和復合配色,下文中會詳細講到。掌握復雜的色彩互補技巧能夠幫助我們在設計上提升一個層次。

對比

色彩對比能減輕視覺疲勞,通過不同顏色元素的區分保持用戶的注意力。最常見的一種色彩對比運用就是文章背景色與字體顏色之間的對比。

假如看了上面幾張圖還對色彩對比在文字上的運用有疑惑,可以試下最簡單的:用淺色背景搭配深色文字,保證不會出問題。這是個色彩對比的例子。但在大多數項目中,文字部分并非發揮設計亮點的地方,因此設計風格保持簡潔清晰即可。
文字中的高亮效果原理同樣可以運用到網頁設計中。若網頁背景色為深色,則文字顏色使用淡色。反之亦然。


活力

色彩的活力的確能展現出設計中感性的一面。亮色系讓用戶感覺充滿活力,當推銷產品或尋求情感上的共鳴的時候,亮色系的使用就顯得尤為有效。深色使人放松,讓用戶的注意力集中到某個事情上。

怎樣選擇色彩搭配?
色彩搭配有三個被普遍接受的標準:三色系、復合配色和相似色。

三色系

色譜上的三個極端顏色的組合。有一種非常簡單的方法來確定一個三色系組合:
拿出色環,確定一種基礎色
以該基礎色為起點,在色環上畫一個等邊三角形
等邊三角形所在的三個定點所在位置就是你所要使用的色彩組合

復合配色(即分散的互補色)

復合配色基于一系列互補的顏色:如上圖在色環上選擇一組相對的顏色。使用這種方法,設計師有更多自由發揮的空間,同時又從互補色中得到良好的視覺效果。
相似色

相似色搭配是從色環上選擇相鄰的三種顏色進行搭配。通常所選的三種顏色通過色彩活力以及相互之間的色彩對比進行區分。

工具的使用
多虧有諸多工具的存在,讓色彩設計工作變得及其簡單。同時這些工具能幫助我們更好的理解色彩原理。在指導下進行試驗,學習如何將色彩法則運用自如。

Kuler
Kuler是一款Adobe公司發布的色彩搭配工具,旨在提供一種直覺的方式創造出調色板。點擊就可以進行操作,調色板上的每種顏色都可以被修改,也可以被選作基礎色。可以將調色板進行保存或者發布。Kuler網站同時提供了許多很棒的社區入口。每種顏色都有導出功能。但是界面交互比較復雜,調整一種顏色的活力可能會改變整個調色板。總之,像那些對概念有很好的把握并有足夠耐心進行操作的人使用。


Color Scheme Designer
對初學又缺乏耐心(或者趕deadline)的人來說,Color Scheme Designer是一款很適合的軟件。它提供了一個簡單而可控的選擇器,操作方便,并提供多種根據色彩原理顯示的色彩搭配,但不告訴用戶這些色彩搭配的原理和原因(從這點來說Kuler的動態色環更加有幫助)。

它的“高級選項”也非常實用:例如調整整個調色板的色彩飽和度和對比度,網頁預覽功能等,比Kuler要好用很多。但是對于需要學習色彩原理的人來說,不建議使用該工具,因為這個軟件已經幫助用戶完成了很多色彩選擇的工作,不利于用戶根據基礎原理來進行實驗而學習更多。
0
0
0
0
0
0
0
0
網友評論 Comments
下一篇:沒有資料