1.3 網頁布局與配色

網頁信息內容豐富，頁面元素多元化，而傳遞信息始終是網頁的最終目的，這一特性使得網頁布局的設計處于一個非常重要的地位。而色彩既能影響人的視覺美感，又能影響人的心理效應。網頁設計者要注意合理運用對比及調和的配色原理，設計出既能表現主題，又和諧悅目的網頁，才能更吸引瀏覽者。下面將具體介紹這部分知識。

1.3.1 網頁的布局類型

網頁的布局類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型和自由型10種類型。

1．骨骼型

網頁版式的骨骼型是一種規范的、理性的分割方法，類似于報刊的版式，如圖1-8所示。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。

2．滿版型

頁面以圖像充滿整版，如圖1-9所示。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網頁設計中的運用越來越多。

3．分割型

把整個頁面分成上下或左右兩部分，分別安排圖片和文案，如圖1-10所示。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜。調整圖片和文案所占的面積，可以調節對比的強弱。例如，如果圖片所占的比例過大，文案使用的字體過于纖細，字距、行距、段落的安排又很疏落，則會造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產生自然和諧的效果。

4．中軸型

沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列，如圖1-11所示。水平排列的頁面給人穩定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。

5．曲線型

圖片、文字在頁面上作曲線的分割或編排構成，產生韻律與節奏，如圖1-12所示。

6．傾斜型

頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩定感或強烈的動感，引人注目，如圖1-13所示。

7．對稱型

對稱型的頁面給人穩定、嚴謹、莊重、理性的感受。對稱分為絕對對稱和相對對稱。一般采用相對對稱的手法，以避免呆板。左右對稱的頁面版式較為常見，如圖1-14所示。

四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內容都能產生安定感。控制好頁面的四個角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制。

8．焦點型

焦點型的網頁版式通過對視線的誘導，使頁面具有強烈的視覺效果，如圖1-15所示。焦點型分為以下三種情況。

◆ 中心：以對比強烈的圖片或文字置于頁面的視覺中心。

◆ 向心：視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩定的，一種傳統的手法。

◆ 離心：視覺元素引導瀏覽者視線向外輻射，則形成一個離心的網頁版式。離心版式是外向的、活潑的，更具現代感，運用時應注意避免凌亂。

9．三角型

網頁各視覺元素呈三角形排列。正三角形（金字塔形）最具穩定性，倒三角形則產生動感。側三角形構成一種均衡版式，既安定又有動感。如圖1-16所示的三角型版式。

10．自由型

自由型的頁面具有活潑、輕快的風格。如圖1-17所示為引導視線的圖片以散點構成，傳達隨意、輕松的氣氛。

1.3.2 網頁色彩基礎

色彩是人視覺最敏感的東西。不同色彩之間的對比會有不同的結果。網頁的色彩搭配對于一個沒有美術基礎的初學者來說是個棘手的問題。那么究竟如何進行色彩搭配，才能讓網頁顏色既好看又合理呢？下面來了解色彩的相關知識。

1．色彩視錯

色彩的視錯主要表現在色彩的冷與暖、興奮與沉靜、膨脹與收縮、前進與后退、輕與重等感覺方面。

色彩的冷暖視錯是視覺上和生理、心理上相互關聯產生的一種視錯覺效果。橙紅色是火焰的顏色，因而引起的暖感最強；藍色使人聯想到冰和水，所以它引起的冷感最強。這兩種顏色被稱為“暖極”和“冷極”。其他顏色的冷暖感根據其在色相環上距離冷暖兩極的位置而定，靠暖極的稱為暖色，靠冷極的稱為冷色，部分顏色和兩端的距離差不多，則稱為中性色。黑、白、灰也視作中性色。

色彩的興奮與沉靜的錯覺主要由不同顏色對人的視網膜及腦神經的刺激不同而形成。暖色、波長長、明度純度高的色彩，對人的視網膜及腦神經刺激較強，會促使血液循環加快，進而產生興奮的情緒反應，所以稱這部分色彩為興奮色。冷色、波長短、明度純度低的色彩，對人的視網膜及腦神經刺激較弱。眼睛注視這部分顏色會產生沉靜的情緒，所以稱這部分顏色為沉靜色。

色彩有膨脹和收縮的視覺錯覺，造成這種錯覺的原因有多種，一方面，是色光本身，波長長的暖色光、光度強的色光對眼睛成像作用比較強，視網膜接受這類光時產生擴散性，造成成像的邊緣有條模糊帶，產生膨脹感。反之，波長短的冷色光、光度弱的色光成像清晰，對比之下有收縮感。另一方面，色彩的脹縮感不僅和色相有關，還與明度也有關。明度高的有擴張、膨脹感，明度低的有收縮感。如圖1-18所示為兩個圓，這兩個圓大小相同，但給人的視覺感受是白色的圓要比黑色的圓看上去大一些。

色彩的進退錯覺由色彩的冷暖、明度、純度和面積等多種對比造成的。通常暖色、亮度高、純度高的顏色有前進感；冷色、亮度低、純度低的顏色有后退感。如圖1-19所示，在藍底色上畫一個黃色的圓，會感覺圓在上底在下，但在黃底上畫藍色的圓，卻感覺是在黃色畫紙上開了個洞，下面襯了張藍紙。

色彩產生輕重的視錯有直覺的因素，也有聯想的因素。接近黑的顏色會聯想到鐵、煤等具有重量感的物質，而白色會讓人聯想到白云、棉花等質感輕的物質。通常情況下，如果色相相同明度高的色彩會感覺輕。而不同色相輕重感也不同，按白、黃、橙、紅、灰、綠、紫、藍、黑的依次順序視覺感由輕到重。

2．色彩情感

色彩只是一種物理現象，它本身是沒有感情的，但色彩卻能表達感情，因為色彩能讓人們通過視覺產生聯想從而引起心理作用。色彩的聯想是通過經驗、記憶或相關知識而吸取的，這些色彩經過長久的反復比較，逐漸固定了它們專有的表情，不同色彩也逐漸形成了不同的象征。

白色象征雅致、干凈、純潔和出污泥而不染。如圖1-20所示的是以白色為主色調的網頁。

一方面，黑色給人心理的影響有兩種，一是消極感，使人產生恐懼憂傷的印象；二是又有骯臟、黑暗之感。另一方面，黑色又顯得嚴肅、莊重，它還象征著權力與威儀。如圖1-21所示的是以黑色為主色調的網頁。

紅色是一種刺激性較強的顏色，在革命年代常被認為是斗爭、光明、力量的象征。在中國民間，紅色常和喜慶、幸福聯系在一起。由于紅色富有刺激性，同時它又象征著危險，例如交通信號的停止色以及消防車的色調都采用紅色。如圖1-22所示的是以紅色為主色調的網頁。

黃色象征日光，同時也象征著神圣和至高無上。黃色是一種溫和的暖色，輕快、明亮，同樣的黃色能產生不同的感受，嫩黃色給人天真、稚嫩的美感，而成熟的谷物以及秋天樹葉的金黃色則意味著收獲及歡樂。如圖1-23所示的是以黃色為主色調的網頁。

藍色是所有色彩中最含蓄、最內向的顏色，給人以純潔透明的感覺，也給人理性的感覺，但藍色也是悲哀的表現色。如圖1-24所示的是以藍色為主色調的網頁。

綠色與大自然中草木同色，因此綠色象征著自然、生命、生長、青春、活潑等，同時又象征著和平、環保，在交通信號中又象征著前進與安全。如圖1-25所示的是以綠色為主色調的網頁。

紫色是優雅、高貴的顏色，另外紫色與夜空、陰影相聯系，所以富有神秘感，容易引起心理上的憂郁和不安。如圖1-26所示的是以紫色為主色調的網頁。

色彩有著豐富的感情內涵，因為它包含著無窮無盡的色相和深淺濃淡的關系，通過這些關系相互搭配、組合可以形成各種各樣的色彩氛圍。

1.3.3 色彩搭配原則

色彩在網頁設計中主要有劃分頁面區域、強調重要信息和增添頁面吸引力的作用。根據網頁中色彩使用的部位不同，可以分為背景色、基本色、輔助色和強調色，在網頁設計過程中注意這幾種色彩彼此之間的平衡、主次和比例，可以得到一個好的配色方案，從而實現頁面形式的統一和美觀。目前常用的配色有以下3種方案。

1．有彩色和無彩色的搭配

有彩色和無彩色的搭配能給人帶來較強的視覺沖擊，這種方案能在強調網站主題的基礎上控制畫面平衡，給瀏覽者留下深刻印象，如圖1-27所示。

2．相近色的搭配

相近色是指在色相環上位置較接近的兩個或幾個顏色，使用相近色的搭配給瀏覽者協調又賦予變化的視覺感受，如圖1-28所示。

3．對比色的搭配

對比色是色相環中位置相對的兩種顏色，通常也是兩種可以明顯區分的顏色。由于對比色有強烈的分離性，在網頁設計中可以營造出強烈的對比和平衡的效果，如圖1-29所示。對比色搭配在目前網頁設計中是比較常用的一種配色方案。

除了不同色相對比的這種配色方案，同一色相不同純度和明度對比的配色方案在網頁設計中的使用也比較普遍。這類配色方案的頁面協調、一致，通常帶給瀏覽者非常強烈的整體感。如圖1-30和圖1-31中所示的網頁是選取同一色相但不同明度、不同純度的色彩進行搭配的。