第2章-網頁布局與配色分析課件

1第2章網頁布局與配色

在前面的章節(jié)中，已經了解建設網站的流程，其中在設計之前要確定網站的布局。而在布局之后，還包含網站的顏色等等。

網頁設計已經漸漸走向成熟，一般在制作網站之前，先要考慮網站的整體視覺效果。在網站整體視覺效果中，主要是網頁的色彩搭配與網頁布局。前者決定了瀏覽該網站的第一印象；而后者則決定網站中的信息是否為合理的安排。1第2章網頁布局與配色在前面的章節(jié)中，已2網頁布局色彩基礎配色方案網站中的色彩應用本章學習要點：2網頁布局本章學習要點：2.1網頁設計基礎3

網頁設計之前，呈現(xiàn)在面前的像一張白紙，需要用戶揮灑自己的設計才思。當然，在網頁設計之前，用戶已經確定了網站的主題，以及搜集了網站的一些素材。用戶只需要根據主題，將所素材合理的布局即可設計出一個網頁。2.1網頁設計基礎3網頁設計之前，呈現(xiàn)在面前的像2.1.1網頁布局類型4

網頁設計也屬于平面設計，所以平面設計中的構圖原理同樣適用于網頁設計。而在網頁中，其布局可以分成兩種類型，一種是結構布局，另一種是藝術布局。1．結構布局

結構布局是許多用戶根據網頁的內容，或者常見的一些網頁風格而確定下來的一種設計模式。“國”字型網頁布局拐角型網頁布局左右框架型網頁布局封面型網頁布局2.1.1網頁布局類型4網頁設計也屬于平52．藝術布局分割結構對稱結構平衡結構肌理構成

藝術布局與結構布局不同，它打破了傳統(tǒng)結構布局方式，站在平面設計角度來設計網頁的風格。在設計過程中，藝術布局按照平面設計的規(guī)則性、對稱性和肌理等，來設計網頁頁面。52．藝術布局分割結構對稱結構平衡結構肌理構成藝術布2.1.2網頁整體造型6

網頁造型與網頁布局，并不是相同概念。通過上述可知，網頁布局是將網頁內容在網頁框架中合理安排的表現(xiàn)。

而造型是創(chuàng)造出來的物體形象。這里是指網頁的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。1．矩形

矩形代表著正式、規(guī)則等。一般很多單位或者政府網頁，都是以矩形為整體造型。2.1.2網頁整體造型6網頁造型與網頁布局，并不72．圓形造型

圓形代表著柔和、團結、溫暖、安全等，許多時尚類和飲食類網站喜歡以圓形為網頁整體造型。3．三角形造型

三角形代表著力量、權威、牢固、侵略等，許多大型的商業(yè)網站為顯示它的權威性常以三角形為網頁整體造型。72．圓形造型3．三角形造型2.1.3網頁設計要素

除了確定網頁結構及造型外，用戶還需要了解網頁設計的一些要素。也就是，每個網頁設計人員，需要注意一些設計內容。

81．網頁尺寸

網頁尺寸與顯示器大小、分辨率有著很大的關系。2．文本

在網頁設計開發(fā)過程中，最重要的莫過于網頁的視覺效果，經常需要費很大精力來調整字體和字號。3．圖片

圖片和文本是網頁的兩大構成元素，缺一不可。2.1.3網頁設計要素除了確定網2.2色彩基礎知識

如果網站的外觀要給瀏覽者留下一個深刻的印象，則網站的視覺效果必須吸引人。因而，網頁設計對色彩的依賴性很高，色彩設計同時還是網站風格設計的決定性因素之一。92.2色彩基礎知識如果網站的外觀2.2.1色彩理論101．色相

色相指色彩的相貌，是區(qū)別色彩種類的名稱。是根據該色光波長劃分的，只要色彩的波長相同，色相就相同，波長不同才產生色相的差別。紅、橙、黃、綠、藍、紫等每個宇都代表一類具體的色相，它們之間的差別就屬于色相差別。2.2.1色彩理論101．色相色相指色彩的相貌，112．飽和度

飽和度是指色彩的純凈程度，取決于該色中含色成分和消色成分的比例，含色成分越大，飽和度越大；消色成分越大，飽和度越小，也就是說，向任何一種色彩中加入黑、白、灰都會降低它的飽和度，加的越多就降的越低，直到變成灰色。3．亮度

亮度指色彩的明暗程度。亮度是全部色彩都具有的屬性，亮度關系是搭配色彩的基礎。亮度在三要素中具有較強的獨立性，它可以不帶任何色相的特征而通過黑白灰的關系單獨呈現(xiàn)出來。112．飽和度3．亮度2.2.2216網頁安全色12216網頁安全顏色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合，這些顏色在任何終端瀏覽用戶顯示設備上的顯示效果都是相同的。所以使用216網頁安全顏色進行網頁配色可以避免原有的顏色失真問題。2.2.2216網頁安全色12216網頁安全顏色2.3配色方案

色彩的搭配不僅在平面設計中比較重要，而在網頁中也很關鍵。簡單的網頁配色方法，可以更好地利用色彩表達網頁中的宗旨，所以下面來介紹一下顏色合理的搭配。132.3配色方案色彩的搭配不僅在平2.3.1色彩分析

色彩對人的頭腦和精神的影響力，是客觀存在的。色彩的知覺力、色彩的辨別力、色彩的象征力與感情，這些都是色彩心理學上的重要問題。141．色彩情感

不同的顏色會給瀏覽者不同的心理感受，但是同一種顏色通常不只含有一個象征意義。2．色彩聯(lián)想3．色彩知覺2.3.1色彩分析色彩對人的頭腦152．色彩聯(lián)想

色彩本身是沒有任何含義的，聯(lián)想產生含義，色彩在聯(lián)想間影響人的心理，左右人的情緒，不同的色彩聯(lián)想給各種色彩都賦予了特定的含義。這就要求設計人員在用色時不僅是單單地運用，還要考慮諸多因素。3．色彩知覺

顏色的搭配可以流露設計者的心情和喜好，同時也會影響到瀏覽者。為此在網頁色彩搭配時設計者應該考慮到色彩的象征意義。152．色彩聯(lián)想3．色彩知覺16

兩種以上的色彩，以空間或者時間關系相比較，能比較出明顯的差別，并且產生比較作用，被稱為色彩對比。2.3.2色彩對比1．色相對比

色相對比是因色相的差別而形成的色彩對比為色相對比。16兩種以上的色彩，以空間或者時間關系相比較，能比較172．明度對比

明度對比是因明度差別形成的色彩對比為明度對比。色彩之間明度差別的大小決定著明度對比的強弱。明度差別越大，對比越強，視覺效果越強，反之則弱。172．明度對比183．純度對比

因純度差別而形成的色彩對比為純度對比。純度的對比會使色彩的效果更明確肯定，給人們的視覺沖擊力也更強烈。183．純度對比194．面積對比

如果兩種色彩面積大小與色彩形狀不同時，那么顏色之間的對比強度也就不同。當其中的一種色彩變大時，面積小的一種色彩就會成為大的色彩的補充。194．面積對比205．綜合對比

有彩色系列之間有可能產生明度、色相和純度差別；無彩色系列和有彩色系列之間，也會有明度和純度差別。205．綜合對比212.3.3色彩調和

對比是產生美感的基礎。沒有對比圖像中各元素就沒有神經刺激興奮的因素。但是色彩的對比是“絕對”和“調和”兩個相對方面。對比是目的，調和是手段。1．同色調和

同色調和是單一顏色，只是深淺、色調和明暗度不同。212.3.3色彩調和對比是產生美感的基礎。沒有222．近似色調和

近似色調和是使用鄰近的顏色或者在色環(huán)上很接近的顏色做調和。222．近似色調和233．互補色調和

互補色調和是使用色環(huán)上兩個相對的顏色做調和。233．互補色調和244．對比色調和

對比色調和：使用一種顏色，再加上其互補色旁邊的兩個顏色做調和。244．對比色調和2.4網站中的色彩應用

網站的色彩設計有其自身的色彩應用規(guī)律。為體現(xiàn)網站整體效果，選定的色彩組合要結合框架設計來分配色彩面積和位置。如果要以突出的色彩設計形成網站風格，就需要有計劃性地思量色彩布局和色彩組合。252.4網站中的色彩應用網站的色彩262.4.1網頁色彩規(guī)則

在網站中使用色彩，要多方面考慮，既要使網站風格獨特，也要考慮到網站的功能性與實用性。這樣才能使網站既有欣賞價值，還具有實用價值。1．特色鮮明

一個網站的用色必須要有自己獨特的風格，這樣才能顯得個性鮮明。262.4.1網頁色彩規(guī)則在網站中使用色彩，要多272．搭配合理

網頁設計雖然屬于平面設計的范疇，但它又與其它平面設計不同，它在遵從藝術規(guī)律的同時，還考慮人的生理特點，合理的色彩搭配能給人一種和諧、愉快的感覺。272．搭配合理283．單色的使用

網站設計要避免采用單一色彩，這樣會使畫面比較單調而顯得空洞，但是通過調整色彩的飽和度和透明度也可以產生變化，也就是使網站避免單調。283．單色的使用294．可讀性的色彩設計

網站是信息的載體形式，色彩設計必須以完成網站的可視性閱讀功能為主要目的。294．可讀性的色彩設計305．色彩計劃Flash技術的應用使很多原本不可能實現(xiàn)的網站效果可以實現(xiàn)了。在色彩設計上表現(xiàn)為讓瀏覽者任意選擇背景色或者是每一個欄目的色調均不相同。305．色彩計劃312.4.2網站色彩分析

當了解單純顏色的使用后，還需要從網站的不同方面來決定色彩的搭配。1．網站風格與色彩設計

色彩作為網站設計主要體現(xiàn)風格形式的視覺要素之一，對網站設計來說分量是很重的。2．網站主題與色彩設計

在確定網站的主題色調后，在設計過程中不僅要對文本、圖片的色彩選擇謹慎，使其網頁整體色彩搭配和諧、統(tǒng)一、平衡、協(xié)調等。3．同色調的不同風格網站

不同的明度，或者不同的純度，會產生不同風格的網站。312.4.2網站色彩分析當了解單純顏色322.4.3網頁元素之間色彩搭配

在學習了色彩的一些基本概念，以及色彩的分析之后。下面我們再具體，來談一下網頁運用中，各元素的色彩搭配情況。1．網頁標題2．網頁鏈接3．網頁文字4．網頁Logo和Banner322.4.3網頁元素之間色彩搭配在學習33第2章網頁布局與配色

在前面的章節(jié)中，已經了解建設網站的流程，其中在設計之前要確定網站的布局。而在布局之后，還包含網站的顏色等等。

網頁設計已經漸漸走向成熟，一般在制作網站之前，先要考慮網站的整體視覺效果。在網站整體視覺效果中，主要是網頁的色彩搭配與網頁布局。前者決定了瀏覽該網站的第一印象；而后者則決定網站中的信息是否為合理的安排。1第2章網頁布局與配色在前面的章節(jié)中，已34網頁布局色彩基礎配色方案網站中的色彩應用本章學習要點：2網頁布局本章學習要點：2.1網頁設計基礎35

網頁設計之前，呈現(xiàn)在面前的像一張白紙，需要用戶揮灑自己的設計才思。當然，在網頁設計之前，用戶已經確定了網站的主題，以及搜集了網站的一些素材。用戶只需要根據主題，將所素材合理的布局即可設計出一個網頁。2.1網頁設計基礎3網頁設計之前，呈現(xiàn)在面前的像2.1.1網頁布局類型36

網頁設計也屬于平面設計，所以平面設計中的構圖原理同樣適用于網頁設計。而在網頁中，其布局可以分成兩種類型，一種是結構布局，另一種是藝術布局。1．結構布局

結構布局是許多用戶根據網頁的內容，或者常見的一些網頁風格而確定下來的一種設計模式。“國”字型網頁布局拐角型網頁布局左右框架型網頁布局封面型網頁布局2.1.1網頁布局類型4網頁設計也屬于平372．藝術布局分割結構對稱結構平衡結構肌理構成

藝術布局與結構布局不同，它打破了傳統(tǒng)結構布局方式，站在平面設計角度來設計網頁的風格。在設計過程中，藝術布局按照平面設計的規(guī)則性、對稱性和肌理等，來設計網頁頁面。52．藝術布局分割結構對稱結構平衡結構肌理構成藝術布2.1.2網頁整體造型38

網頁造型與網頁布局，并不是相同概念。通過上述可知，網頁布局是將網頁內容在網頁框架中合理安排的表現(xiàn)。

而造型是創(chuàng)造出來的物體形象。這里是指網頁的整體形象，這種形象應該是一個整體，圖形與文本的接合應該是層疊有序。1．矩形

矩形代表著正式、規(guī)則等。一般很多單位或者政府網頁，都是以矩形為整體造型。2.1.2網頁整體造型6網頁造型與網頁布局，并不392．圓形造型

圓形代表著柔和、團結、溫暖、安全等，許多時尚類和飲食類網站喜歡以圓形為網頁整體造型。3．三角形造型

三角形代表著力量、權威、牢固、侵略等，許多大型的商業(yè)網站為顯示它的權威性常以三角形為網頁整體造型。72．圓形造型3．三角形造型2.1.3網頁設計要素

除了確定網頁結構及造型外，用戶還需要了解網頁設計的一些要素。也就是，每個網頁設計人員，需要注意一些設計內容。

401．網頁尺寸

網頁尺寸與顯示器大小、分辨率有著很大的關系。2．文本

在網頁設計開發(fā)過程中，最重要的莫過于網頁的視覺效果，經常需要費很大精力來調整字體和字號。3．圖片

圖片和文本是網頁的兩大構成元素，缺一不可。2.1.3網頁設計要素除了確定網2.2色彩基礎知識

如果網站的外觀要給瀏覽者留下一個深刻的印象，則網站的視覺效果必須吸引人。因而，網頁設計對色彩的依賴性很高，色彩設計同時還是網站風格設計的決定性因素之一。412.2色彩基礎知識如果網站的外觀2.2.1色彩理論421．色相

色相指色彩的相貌，是區(qū)別色彩種類的名稱。是根據該色光波長劃分的，只要色彩的波長相同，色相就相同，波長不同才產生色相的差別。紅、橙、黃、綠、藍、紫等每個宇都代表一類具體的色相，它們之間的差別就屬于色相差別。2.2.1色彩理論101．色相色相指色彩的相貌，432．飽和度

飽和度是指色彩的純凈程度，取決于該色中含色成分和消色成分的比例，含色成分越大，飽和度越大；消色成分越大，飽和度越小，也就是說，向任何一種色彩中加入黑、白、灰都會降低它的飽和度，加的越多就降的越低，直到變成灰色。3．亮度

亮度指色彩的明暗程度。亮度是全部色彩都具有的屬性，亮度關系是搭配色彩的基礎。亮度在三要素中具有較強的獨立性，它可以不帶任何色相的特征而通過黑白灰的關系單獨呈現(xiàn)出來。112．飽和度3．亮度2.2.2216網頁安全色44216網頁安全顏色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合，這些顏色在任何終端瀏覽用戶顯示設備上的顯示效果都是相同的。所以使用216網頁安全顏色進行網頁配色可以避免原有的顏色失真問題。2.2.2216網頁安全色12216網頁安全顏色2.3配色方案

色彩的搭配不僅在平面設計中比較重要，而在網頁中也很關鍵。簡單的網頁配色方法，可以更好地利用色彩表達網頁中的宗旨，所以下面來介紹一下顏色合理的搭配。452.3配色方案色彩的搭配不僅在平2.3.1色彩分析

色彩對人的頭腦和精神的影響力，是客觀存在的。色彩的知覺力、色彩的辨別力、色彩的象征力與感情，這些都是色彩心理學上的重要問題。461．色彩情感

不同的顏色會給瀏覽者不同的心理感受，但是同一種顏色通常不只含有一個象征意義。2．色彩聯(lián)想3．色彩知覺2.3.1色彩分析色彩對人的頭腦472．色彩聯(lián)想

色彩本身是沒有任何含義的，聯(lián)想產生含義，色彩在聯(lián)想間影響人的心理，左右人的情緒，不同的色彩聯(lián)想給各種色彩都賦予了特定的含義。這就要求設計人員在用色時不僅是單單地運用，還要考慮諸多因素。3．色彩知覺

顏色的搭配可以流露設計者的心情和喜好，同時也會影響到瀏覽者。為此在網頁色彩搭配時設計者應該考慮到色彩的象征意義。152．色彩聯(lián)想3．色彩知覺48

兩種以上的色彩，以空間或者時間關系相比較，能比較出明顯的差別，并且產生比較作用，被稱為色彩對比。2.3.2色彩對比1．色相對比

色相對比是因色相的差別而形成的色彩對比為色相對比。16兩種以上的色彩，以空間或者時間關系相比較，能比較492．明度對比

明度對比是因明度差別形成的色彩對比為明度對比。色彩之間明度差別的大小決定著明度對比的強弱。明度差別越大，對比越強，視覺效果越強，反之則弱。172．明度對比503．純度對比

因純度差別而形成的色彩對比為純度對比。純度的對比會使色彩的效果更明確肯定，給人們的視覺沖擊力也更強烈。183．純度對比514．面積對比

如果兩種色彩面積大小與色彩形狀不同時，那么顏色之間的對比強度也就不同。當其中的一種色彩變大時，面積小的一種色彩就會成為大的色彩的補充。194．面積對比525．綜合對比

有彩色系列之間有可能產生明度、色相和純度差別；無彩色系列和有彩色系列之間，也會有明度和純度差別。205．綜合對比532.3.3色彩調和

對比是產生美感的基礎。沒有對比圖像中各元素就沒有神經刺激興奮的因素。但是色彩的對比是“絕對”和“調和”兩個相對方面。對比是目的，調和是手段。1．同色調和

同色調和是單一顏色，只是深淺、色調和明暗度不同。212.3.3色彩調和對比是產生美感的基礎。沒有542．近似色調和

近似色調和是使用鄰近的顏色或者在色環(huán)上很接近的顏色做調和。222．近似色調和553．互補色調和

互補色調和是使用色環(huán)上兩個相對的顏色做調和。233．互補色調和564．對比色調和

對比色調和：使用一種顏色，再加上其互補色旁邊的兩個顏色做調和。244．對比色調和2.4網站中的色彩應用

網站的色彩設計有其自身的色彩應用規(guī)律。為體現(xiàn)網站整體效果，選定的色彩組合要結合框架設計來分配色彩面積和位置。如果要以突出的色彩設計形成網站風格，就需要有計劃性地思量色彩布局和色彩組合。572.4網站中的色彩應用網站的色彩582.4.1網頁色彩規(guī)則

在網站中使用色彩，要多方面考慮，既要使網站風格獨特，也要考慮到網站的