网页界面中的色彩设计.ppt

網頁界面中的色彩設計 大綱 色彩在網頁介面設計中的作用 色彩的基本原理 色彩的視覺現象及應用 色彩的心理效應 網頁介面設計中色彩的應用規律 色彩在網頁介面設計中的作用 視覺區域劃分：利用色彩分佈，可以將不同類型的信息分類安排，並利用各種色彩帶給人的不同心理效果，好好地區分出主次順序，從而行程有序的視覺流程。 色彩在網頁介面設計中的作用 突出主題：網頁介面中不同的內容需要不同的色彩來表現，以色彩的內在力量來烘托主題、突出主題。 色彩在網頁介面設計中的作用 吸引視線 色彩在網頁介面設計中的作用 增強藝術性：以色彩的科學知識為基礎，進而從美學的角度去探討色彩設計的表現形式。 大綱 色彩在網頁介面設計中的作用 色彩的基本原理 色彩的視覺現象及應用 色彩的心理效應 網頁介面設計中色彩的應用規律 色彩基本原理 有彩色系的基本構成要素 色相：指的是色彩的相貌，具體展現各種色彩 色彩基本原理 有彩色系的基本構成要素 明度：顏色的明暗或深淺程度。可以不帶任何色相的特徵而通過黑、白、灰的關係單獨呈現出來。而有彩色系的另兩個要素（色相與純度）都必須依賴一定的明暗關係才能顯現，色彩一旦發生，明暗關係必然同時出現。 色彩基本原理 有彩色系的基本構成要素 純度（飽和度、彩度）：色彩的鮮豔度。當在綠色顏料中加入白色顏料時，它的純度降低、明度提高，加入黑色顏料時，純度降低、明度下降。 大綱 色彩在網頁介面設計中的作用 色彩的基本原理 色彩的視覺現象及應用 色彩的心理效應 網頁介面設計中色彩的應用規律 色彩視覺現象 視覺殘留現象：當長時間注目凝視某種顏色後，如將視線迅速移到白色或灰色背景上，就會出現與原來色彩形狀相似的影像，但其色彩與原有色彩不同，成補色出現。為降低視覺殘留對色彩的影響程度，選擇色彩時應避免使用高純度的單一色彩，或是在純色中加入一定量的灰。 色彩視覺現象 同時性效果：色彩的同時性效果是眼睛對色彩進行感知時必然發生的視覺現象。當在紅背景上放灰色，灰色裡面好像混有綠色；如果紅綠並置，則會出現紅的更紅、綠的更綠的情況。 色彩視覺現象 生理色彩錯視 膨縮感：明度高的色彩在視網膜上形成的物像邊緣會有一圈光包圍著，視覺感受好像物像擴大了一些。 色彩視覺現象 生理色彩錯視 進退感：不同色光在視網膜上所成影像位置有前後差異的現象。在設計中，欲強調的訊息可用具有前進感的顏色來表現，可以獲得更強烈的視覺效果，背景多用具有後退感的色彩來表現。 色彩對比 當我們眼睛接觸到色彩時，對週遭其他色彩在視覺上產生對照與比較 繼續對比：時間先後對比，補色殘像；彩度高容易產生殘像 同時對比：眼睛同時看兩個以上相鄰的顏色（同時性效果） 色彩對比 色相對比：因色相差異關係而形成的色彩對比效果。色相對比的強弱取決於色彩在色相環上的相互距離角度， 同類色相對比：色相距離角度在15度以內的對比，色相差異很小，往往被視為同一色相中、純度或明度的對比。會產生和諧、統一的視覺效果，但也相對單調、平淡。 鄰近色對比：15-45度之間的對比。較豐富、活潑同時又保持著統一和諧。 對比色對比：130度左右的對比。強烈、色彩鮮明，同時也易引起視覺和精神疲勞。 互補色對比：180度左右的對比，最為強烈，感受上表現出不安定、會有幼稚的感受。 色彩設計的心理效應 色彩的冷暖感：主要由色相決定，但明度對冷暖感也有一定影響。例如淡紫色偏冷，暗紫色偏暖。網頁設計上，大面積的暖色多用來營造溫馨安詳的氣氛，一些嚴謹、敏感的訊息多以冷色表現 大綱 色彩在網頁介面設計中的作用 色彩的基本原理 色彩的視覺現象及應用 色彩的心理效應 網頁介面設計中色彩的應用規律 色彩設計的心理效應 色彩的輕重感：取決於色彩的明度，明度高的色感覺輕，明度低的感覺重。在同樣明度的條件下，冷色較暖色感覺輕。色彩構圖上，上輕下重較為符合人的視覺習慣。若上部為重，則下部的邊緣也加入重色以達平衡。 色彩設計的心理效應 色彩的強弱感：通常稱為色彩的華麗和鮮豔感。主要由色彩的純度和明度決定的。純度高而明度適中的色彩感覺華麗，純度低和明度過高或過低的色彩則樸實。 色彩印象空間 柔和的 靜的 動的 有個性的 剛強的 年輕的 親切的 歷史的 憂鬱的 幽雅的 古典的 冷酷的 高科技的 穩重的 大綱 色彩在網頁介面設計中的作用 色彩的基本原理 色彩的視覺現象及應用 色彩的心理效應 網頁介面設計中色彩的應用規律 配色原理 互補色對比配色：強調、明快感 類似色調配色：條理、安全 相對色相、類似色調配色：有安全感的變化性 高彩度的配色：強烈鮮明的印象 低彩度的配色：沈靜穩重的印象 相對色相、相對色調： 變化感、律動性 配色原理 同一類似色相類似色調的配色 在表現某種色相一貫的印象 同一類似色相相對色調的配色 色調的差異越大就留下越深的印象