第2章網(wǎng)頁(yè)布局與配色

1、1第第2 2章章 網(wǎng)頁(yè)布局與配色網(wǎng)頁(yè)布局與配色 在前面的章節(jié)中，已經(jīng)了解建設(shè)網(wǎng)站的流程，其中在設(shè)計(jì)之前要確定網(wǎng)站的布局。而在布局之后，還包含網(wǎng)站的顏色等等。 網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)漸漸走向成熟，一般在制作網(wǎng)站之前，先要考慮網(wǎng)站的整體視覺(jué)效果。在網(wǎng)站整體視覺(jué)效果中，主要是網(wǎng)頁(yè)的色彩搭配與網(wǎng)頁(yè)布局。前者決定了瀏覽該網(wǎng)站的第一印象；而后者則決定網(wǎng)站中的信息是否為合理的安排。2 網(wǎng)頁(yè)布局 色彩基礎(chǔ) 配色方案 網(wǎng)站中的色彩應(yīng)用本章學(xué)習(xí)要點(diǎn)：本章學(xué)習(xí)要點(diǎn)：2.1 2.1 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)3 網(wǎng)頁(yè)設(shè)計(jì)之前，呈現(xiàn)在面前的像一張白紙，需要用戶揮灑自己的設(shè)計(jì)才思。當(dāng)然，在網(wǎng)頁(yè)設(shè)計(jì)之前，用戶已經(jīng)確定了網(wǎng)站的主題，以及

2、搜集了網(wǎng)站的一些素材。用戶只需要根據(jù)主題，將所素材合理的布局即可設(shè)計(jì)出一個(gè)網(wǎng)頁(yè)。2.1.1 2.1.1 網(wǎng)頁(yè)布局類(lèi)型網(wǎng)頁(yè)布局類(lèi)型4 網(wǎng)頁(yè)設(shè)計(jì)也屬于平面設(shè)計(jì)，所以平面設(shè)計(jì)中的構(gòu)圖原理同樣適用于網(wǎng)頁(yè)設(shè)計(jì)。而在網(wǎng)頁(yè)中，其布局可以分成兩種類(lèi)型，一種是結(jié)構(gòu)布局，另一種是藝術(shù)布局。1結(jié)構(gòu)布局結(jié)構(gòu)布局 結(jié)構(gòu)布局是許多用戶根據(jù)網(wǎng)頁(yè)的內(nèi)容，或者常見(jiàn)的一些網(wǎng)頁(yè)風(fēng)格而確定下來(lái)的一種設(shè)計(jì)模式。l “國(guó)”字型網(wǎng)頁(yè)布局l 拐角型網(wǎng)頁(yè)布局l 左右框架型網(wǎng)頁(yè)布局l 封面型網(wǎng)頁(yè)布局52 2藝術(shù)布局藝術(shù)布局l 分割結(jié)構(gòu)l 對(duì)稱結(jié)構(gòu)l 平衡結(jié)構(gòu)l 肌理構(gòu)成 藝術(shù)布局與結(jié)構(gòu)布局不同，它打破了傳統(tǒng)結(jié)構(gòu)布局方式，站在平面設(shè)計(jì)角度來(lái)設(shè)計(jì)網(wǎng)

3、頁(yè)的風(fēng)格。在設(shè)計(jì)過(guò)程中，藝術(shù)布局按照平面設(shè)計(jì)的規(guī)則性、對(duì)稱性和肌理等，來(lái)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面。2.1.2 2.1.2 網(wǎng)頁(yè)整體造型網(wǎng)頁(yè)整體造型6 網(wǎng)頁(yè)造型與網(wǎng)頁(yè)布局，并不是相同概念。通過(guò)上述可知，網(wǎng)頁(yè)布局是將網(wǎng)頁(yè)內(nèi)容在網(wǎng)頁(yè)框架中合理安排的表現(xiàn)。 而造型是創(chuàng)造出來(lái)的物體形象。這里是指網(wǎng)頁(yè)的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。1 1矩形矩形 矩形代表著正式、規(guī)則等。一般很多單位或者政府網(wǎng)頁(yè)，都是以矩形為整體造型。72 2圓形造型圓形造型 圓形代表著柔和、團(tuán)結(jié)、溫暖、安全等，許多時(shí)尚類(lèi)和飲食類(lèi)網(wǎng)站喜歡以圓形為網(wǎng)頁(yè)整體造型。3 3三角形造型三角形造型 三角形代表著力量、權(quán)威、牢固

4、、侵略等，許多大型的商業(yè)網(wǎng)站為顯示它的權(quán)威性常以三角形為網(wǎng)頁(yè)整體造型。2.1.3 2.1.3 網(wǎng)頁(yè)設(shè)計(jì)要素網(wǎng)頁(yè)設(shè)計(jì)要素 除了確定網(wǎng)頁(yè)結(jié)構(gòu)及造型外，用戶還需要了解網(wǎng)頁(yè)設(shè)計(jì)的一些要素。也就是，每個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員，需要注意一些設(shè)計(jì)內(nèi)容。 81 1網(wǎng)頁(yè)尺寸網(wǎng)頁(yè)尺寸 網(wǎng)頁(yè)尺寸與顯示器大小、分辨率有著很大的關(guān)系。2 2文本文本 在網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)過(guò)程中，最重要的莫過(guò)于網(wǎng)頁(yè)的視覺(jué)效果，經(jīng)常需要費(fèi)很大精力來(lái)調(diào)整字體和字號(hào)。3 3圖片圖片 圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，缺一不可。2.2 2.2 色彩基礎(chǔ)知識(shí)色彩基礎(chǔ)知識(shí) 如果網(wǎng)站的外觀要給瀏覽者留下一個(gè)深刻的印象，則網(wǎng)站的視覺(jué)效果必須吸引人。因而，網(wǎng)頁(yè)設(shè)計(jì)對(duì)色彩的依

5、賴性很高，色彩設(shè)計(jì)同時(shí)還是網(wǎng)站風(fēng)格設(shè)計(jì)的決定性因素之一。92.2.1 2.2.1 色彩理論色彩理論101 1色相色相 色相指色彩的相貌，是區(qū)別色彩種類(lèi)的名稱。是根據(jù)該色光波長(zhǎng)劃分的，只要色彩的波長(zhǎng)相同，色相就相同，波長(zhǎng)不同才產(chǎn)生色相的差別。紅、橙、黃、綠、藍(lán)、紫等每個(gè)宇都代表一類(lèi)具體的色相，它們之間的差別就屬于色相差別。112飽和度飽和度 飽和度是指色彩的純凈程度，取決于該色中含色成分和消色成分的比例，含色成分越大，飽和度越大；消色成分越大，飽和度越小，也就是說(shuō)，向任何一種色彩中加入黑、白、灰都會(huì)降低它的飽和度，加的越多就降的越低，直到變成灰色。3 3亮度亮度亮度指色彩的明暗程度。亮度是全部色

6、彩都具有的屬性，亮度關(guān)系是搭配色彩的基礎(chǔ)。亮度在三要素中具有較強(qiáng)的獨(dú)立性，它可以不帶任何色相的特征而通過(guò)黑白灰的關(guān)系單獨(dú)呈現(xiàn)出來(lái)。2.2.2 2162.2.2 216網(wǎng)頁(yè)安全色網(wǎng)頁(yè)安全色12 216網(wǎng)頁(yè)安全顏色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合，這些顏色在任何終端瀏覽用戶顯示設(shè)備上的顯示效果都是相同的。所以使用216網(wǎng)頁(yè)安全顏色進(jìn)行網(wǎng)頁(yè)配色可以避免原有的顏色失真問(wèn)題。2.3 2.3 配色方案配色方案 色彩的搭配不僅在平面設(shè)計(jì)中比較重要，而在網(wǎng)頁(yè)中也很關(guān)鍵。簡(jiǎn)單的網(wǎng)頁(yè)配色方法，可以更好地利用色彩表達(dá)網(wǎng)頁(yè)中的宗旨，所以下面來(lái)介紹一下顏色合理的搭配。132.3.1

7、 2.3.1 色彩分析色彩分析 色彩對(duì)人的頭腦和精神的影響力，是客觀存在的。色彩的知覺(jué)力、色彩的辨別力、色彩的象征力與感情，這些都是色彩心理學(xué)上的重要問(wèn)題。141 1色彩情感色彩情感 不同的顏色會(huì)給瀏覽者不同的心理感受，但是同一種顏色通常不只含有一個(gè)象征意義。2 2色彩聯(lián)想色彩聯(lián)想3 3色彩知覺(jué)色彩知覺(jué)152 2色彩聯(lián)想色彩聯(lián)想 色彩本身是沒(méi)有任何含義的，聯(lián)想產(chǎn)生含義，色彩在聯(lián)想間影響人的心理，左右人的情緒，不同的色彩聯(lián)想給各種色彩都賦予了特定的含義。這就要求設(shè)計(jì)人員在用色時(shí)不僅是單單地運(yùn)用，還要考慮諸多因素。3 3色彩知覺(jué)色彩知覺(jué) 顏色的搭配可以流露設(shè)計(jì)者的心情和喜好，同時(shí)也會(huì)影響到瀏覽者。

8、為此在網(wǎng)頁(yè)色彩搭配時(shí)設(shè)計(jì)者應(yīng)該考慮到色彩的象征意義。16 兩種以上的色彩，以空間或者時(shí)間關(guān)系相比較，能比較出明顯的差別，并且產(chǎn)生比較作用，被稱為色彩對(duì)比。2.3.2 2.3.2 色彩對(duì)比色彩對(duì)比1 1色相對(duì)比色相對(duì)比 色相對(duì)比是因色相的差別而形成的色彩對(duì)比為色相對(duì)比。172 2明度對(duì)比明度對(duì)比 明度對(duì)比是因明度差別形成的色彩對(duì)比為明度對(duì)比。色彩之間明度差別的大小決定著明度對(duì)比的強(qiáng)弱。明度差別越大，對(duì)比越強(qiáng)，視覺(jué)效果越強(qiáng)，反之則弱。183 3純度對(duì)比純度對(duì)比 因純度差別而形成的色彩對(duì)比為純度對(duì)比。純度的對(duì)比會(huì)使色彩的效果更明確肯定，給人們的視覺(jué)沖擊力也更強(qiáng)烈。194 4面積對(duì)比面積對(duì)比 如果兩種

9、色彩面積大小與色彩形狀不同時(shí)，那么顏色之間的對(duì)比強(qiáng)度也就不同。當(dāng)其中的一種色彩變大時(shí)，面積小的一種色彩就會(huì)成為大的色彩的補(bǔ)充。205 5綜合對(duì)比綜合對(duì)比 有彩色系列之間有可能產(chǎn)生明度、色相和純度差別；無(wú)彩色系列和有彩色系列之間，也會(huì)有明度和純度差別。212.3.3 2.3.3 色彩調(diào)和色彩調(diào)和 對(duì)比是產(chǎn)生美感的基礎(chǔ)。沒(méi)有對(duì)比圖像中各元素就沒(méi)有神經(jīng)刺激興奮的因素。但是色彩的對(duì)比是“絕對(duì)”和“調(diào)和”兩個(gè)相對(duì)方面。對(duì)比是目的，調(diào)和是手段。1 1同色調(diào)和同色調(diào)和 同色調(diào)和是單一顏色，只是深淺、色調(diào)和明暗度不同。222 2近似色調(diào)和近似色調(diào)和 近似色調(diào)和是使用鄰近的顏色或者在色環(huán)上很接近的顏色做調(diào)和。2

10、33 3互補(bǔ)色調(diào)和互補(bǔ)色調(diào)和 互補(bǔ)色調(diào)和是使用色環(huán)上兩個(gè)相對(duì)的顏色做調(diào)和。244 4對(duì)比色調(diào)和對(duì)比色調(diào)和 對(duì)比色調(diào)和：使用一種顏色，再加上其互補(bǔ)色旁邊的兩個(gè)顏色做調(diào)和。2.4 2.4 網(wǎng)站中的色彩應(yīng)用網(wǎng)站中的色彩應(yīng)用 網(wǎng)站的色彩設(shè)計(jì)有其自身的色彩應(yīng)用規(guī)律。為體現(xiàn)網(wǎng)站整體效果，選定的色彩組合要結(jié)合框架設(shè)計(jì)來(lái)分配色彩面積和位置。如果要以突出的色彩設(shè)計(jì)形成網(wǎng)站風(fēng)格，就需要有計(jì)劃性地思量色彩布局和色彩組合。25262.4.1 2.4.1 網(wǎng)頁(yè)色彩規(guī)則網(wǎng)頁(yè)色彩規(guī)則 在網(wǎng)站中使用色彩，要多方面考慮，既要使網(wǎng)站風(fēng)格獨(dú)特，也要考慮到網(wǎng)站的功能性與實(shí)用性。這樣才能使網(wǎng)站既有欣賞價(jià)值，還具有實(shí)用價(jià)值。1 1特色鮮

11、明特色鮮明 一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能顯得個(gè)性鮮明。272 2搭配合理搭配合理 網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，合理的色彩搭配能給人一種和諧、愉快的感覺(jué)。283 3單色的使用單色的使用 網(wǎng)站設(shè)計(jì)要避免采用單一色彩，這樣會(huì)使畫(huà)面比較單調(diào)而顯得空洞，但是通過(guò)調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，也就是使網(wǎng)站避免單調(diào)。294 4可讀性的色彩設(shè)計(jì)可讀性的色彩設(shè)計(jì) 網(wǎng)站是信息的載體形式，色彩設(shè)計(jì)必須以完成網(wǎng)站的可視性閱讀功能為主要目的。305 5色彩計(jì)劃色彩計(jì)劃 Flash技術(shù)的應(yīng)用使很多原本不可能實(shí)現(xiàn)的網(wǎng)站效果可以實(shí)現(xiàn)了。在色彩設(shè)計(jì)上表現(xiàn)為讓瀏覽者任意選擇背景色或者是每一個(gè)欄目的色調(diào)均不相同。312.4.2 2.4.2 網(wǎng)站色彩分析網(wǎng)站色彩分析 當(dāng)了解單純顏色的使用后，還需要從網(wǎng)站的不同方面來(lái)決定色彩的搭配。1 1網(wǎng)站風(fēng)格與色彩設(shè)計(jì)網(wǎng)站風(fēng)格與色彩設(shè)計(jì) 色彩作為網(wǎng)站設(shè)計(jì)主要體現(xiàn)風(fēng)格形式的視覺(jué)要素之一，對(duì)網(wǎng)站設(shè)計(jì)來(lái)說(shuō)分量是很重的。2 2網(wǎng)站主題與色彩設(shè)計(jì)網(wǎng)站主題與色彩設(shè)計(jì) 在確定網(wǎng)站的主題色調(diào)后，在設(shè)計(jì)過(guò)程中不僅要對(duì)文本、圖片的色彩選擇謹(jǐn)慎，使其網(wǎng)頁(yè)整體色彩搭配和諧、統(tǒng)一、平衡、協(xié)調(diào)等。3 3同色調(diào)的不同風(fēng)格網(wǎng)