淺析網(wǎng)頁(yè)配色與版式布局

摘 要：網(wǎng)頁(yè)界面采用超媒體鏈接技術(shù)，將文字、圖形、圖像、聲音、動(dòng)畫等媒介要素，進(jìn)行編排，使之成為一個(gè)連貫的整體。本文通過對(duì)網(wǎng)頁(yè)配色的原則和方法的分析，以及對(duì)網(wǎng)頁(yè)結(jié)構(gòu)的剖析，探討如何根據(jù)不同的站點(diǎn)訴求類型完成色彩搭配和頁(yè)面架構(gòu)。

關(guān)鍵詞：網(wǎng)頁(yè)配色；網(wǎng)頁(yè)結(jié)構(gòu)

中圖分類號(hào)：TP37

一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)會(huì)給用戶留下深刻的印象，并且讓用戶有好用易用的體驗(yàn)。對(duì)于剛開始學(xué)習(xí)制作網(wǎng)頁(yè)的人來說，往往不容易駕馭。從網(wǎng)頁(yè)設(shè)計(jì)的版式布局、信息主次層級(jí)、展示圖片、色彩搭配等視覺方面的運(yùn)用，直接影響到用戶對(duì)網(wǎng)站的第一印象，而在這些內(nèi)容中，色彩的配色方案是在整個(gè)頁(yè)面設(shè)計(jì)中重中之重。

1 網(wǎng)頁(yè)配色的原則及方法[1]

1.1 色彩搭配原則

在制作網(wǎng)頁(yè)時(shí)，除了考慮網(wǎng)站本身的類型、功能、定位外還要遵循一定的色彩搭配原則，從而設(shè)計(jì)出精美的網(wǎng)頁(yè)。

（1）色彩的鮮明性。如果一個(gè)網(wǎng)站的色彩鮮明，很容易吸引用戶眼球，產(chǎn)生耳目一新的感覺。

（2）色彩的獨(dú)特性。網(wǎng)頁(yè)的用色必須體現(xiàn)頁(yè)面獨(dú)特的設(shè)計(jì)風(fēng)格，這樣才能讓用戶記憶深刻。

（3）色彩的藝術(shù)性。按照內(nèi)容決定形式的原則，在考慮網(wǎng)站本身特點(diǎn)的同時(shí)，可以加入不同的藝術(shù)表現(xiàn)形式，設(shè)計(jì)出既符合網(wǎng)站要求，又富有一定美感的網(wǎng)站。

（4）色彩搭配的合理性。在自然欣賞、社會(huì)活動(dòng)方面，色彩在客觀上是對(duì)人們的一種刺激和象征；在主觀上又是一種反應(yīng)與行為。由于色彩本身有心理暗示的作用，網(wǎng)頁(yè)用色則需要根據(jù)主題來確定，因?yàn)槿藗兂３８惺艿缴蕦?duì)自己心理的影響，這些影響總是在不知不覺中發(fā)生作用，左右我們的情緒。色彩的心理效應(yīng)發(fā)生在不同層次中，有些屬直接的刺激，所以不同的主題應(yīng)該選用不同的色彩。例如，用藍(lán)色體現(xiàn)科技型網(wǎng)站的專業(yè)，用橙色體現(xiàn)美食的滋味，用粉紅色體現(xiàn)女性的柔情等。

1.2 網(wǎng)頁(yè)色彩搭配方法

從色彩研究的方向來看，色彩分為色調(diào)、飽和度、明度三方面，顏色的運(yùn)用是純色之間的關(guān)系，以及它們混合在一起的效果。好的色彩搭配會(huì)給訪問者帶來很強(qiáng)的視覺沖擊力，不恰當(dāng)?shù)纳蚀钆鋭t會(huì)讓訪問者浮躁不安。我們可以從目前很多的網(wǎng)絡(luò)應(yīng)用中的經(jīng)典案例，找到關(guān)于色彩運(yùn)用的一些廣泛的色彩關(guān)系以及搭配方法，以此作為實(shí)際工作學(xué)習(xí)中配色的指南。

（1）同種色彩搭配。同種色彩搭配是指首先選定一種色彩，由明度變化而發(fā)生的淡濃淡深的色調(diào)，而產(chǎn)生新的色彩，這樣的頁(yè)面看起來色彩統(tǒng)一，且具有層次感。同種色搭配要注意色取色之間的明度相不宜太近或太遠(yuǎn)，例如黑與白亮度對(duì)照太大，則需用灰色減以過渡。同種色搭配時(shí)，最好有深淺層次的變化。

（2）鄰近色彩搭配。在24色相環(huán)上任選一色，與此色相距90度，或者彼此相隔五六個(gè)數(shù)位的兩色，即稱為鄰近色。如：紅色與黃橙色、藍(lán)色與黃綠色等。鄰近色之間往往是你中有我，我中有你。采用鄰近色搭配可以里是網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面和諧統(tǒng)一的效果。

（3）對(duì)比色彩搭配。所謂顏色對(duì)比一般指顏色從純度，明度，色相上進(jìn)行對(duì)比，明暗對(duì)比，深淺對(duì)比，冷暖對(duì)比等。對(duì)比色可以突出重點(diǎn)，很容易激發(fā)視覺上的沖擊，產(chǎn)生強(qiáng)烈的視覺效果。通過合理使用對(duì)比色，能夠使網(wǎng)站特色鮮明、重點(diǎn)突出。在設(shè)計(jì)時(shí)，通常以一種顏色為主色調(diào)，其對(duì)比色作為點(diǎn)綴，以起到畫龍點(diǎn)睛的作用。顏色的對(duì)比原則從另一個(gè)層面上講，也是一種襯托。為了讓設(shè)計(jì)更好的表達(dá)主題，人們往往需要用很多相關(guān)元素去襯托主題。

（4）色彩的黃金法則6：3：1。一般來說，一個(gè)合格的設(shè)計(jì)需要有60%的主色，30%的輔助色，加上10%的點(diǎn)綴色，這是一個(gè)基本法則。比如室內(nèi)空間的話，墻壁用60%的比例，家居床品、創(chuàng)聯(lián)之內(nèi)就是30%。那么10%就是小的飾品和藝術(shù)品，所謂畫龍點(diǎn)睛，這10%就是激活畫面，提升設(shè)計(jì)層次和品味的。這個(gè)法則是黃金法則，在任何時(shí)間任何地方都是非常正確的。當(dāng)我們看到一個(gè)設(shè)計(jì)作品時(shí)，我們首先大體有一個(gè)顏色感受，即確定是暖色系的，還是冷色系的，這個(gè)色系就是我們說的60%的主色調(diào)，它可能被用來渲染畫面氣氛；另外的30%是為了畫面的平衡，襯托主色調(diào)而生；至于那10%則是點(diǎn)睛之筆。

（5）從自然中提取色彩。我們常說“需要一雙發(fā)現(xiàn)美的眼睛”，其實(shí)生活在地球上，喜歡看風(fēng)景，喜歡看建筑，有時(shí)我們往往忽略了身邊一道道美麗的風(fēng)景線。當(dāng)我們?cè)谠O(shè)計(jì)中迷失在色彩的世界時(shí)，不妨嘗試從這些自然的事物里提取顏色，通過相機(jī)留住瞬間的美麗，然后再用計(jì)算機(jī)拾取相片中的顏色為我們解決色彩搭配的難題。提取自然的顏色會(huì)讓你的設(shè)計(jì)更加有親和力，會(huì)讓人的眼睛更加舒服，讓人更加體會(huì)美的力量。

2 網(wǎng)頁(yè)的版式布局

除了學(xué)習(xí)網(wǎng)頁(yè)配色的基本原則與方法之外，還應(yīng)了解網(wǎng)頁(yè)的版式布局，網(wǎng)站劃分框架結(jié)構(gòu)可以讓網(wǎng)站內(nèi)容層次清晰，一目了然，方便瀏覽者瀏覽信息。網(wǎng)頁(yè)的基本結(jié)構(gòu)就好像蓋房子要先打地基一樣，有堅(jiān)實(shí)的地基才能萬丈高樓平地而起，網(wǎng)頁(yè)的基本框架搭起來后，再添磚加瓦就容易的多。網(wǎng)頁(yè)設(shè)計(jì)排版與平面媒體排版最大的區(qū)別在于：網(wǎng)頁(yè)設(shè)計(jì)排版有很多交互性的功能和動(dòng)態(tài)效果。所以排版的時(shí)候要考慮到更多的功能性需求以及動(dòng)態(tài)的視覺效果。由于這么多的元素要排列在頁(yè)面上，所以頁(yè)面在排版的時(shí)候需要考慮的情況也多了，對(duì)頁(yè)面元素排列的邏輯性要求也相對(duì)高了不少。[2]

2.1 上下組合

上下組合是常見的一種結(jié)構(gòu)劃分方式，如果網(wǎng)站內(nèi)容不多，則很適合這種組合方式，在互聯(lián)網(wǎng)上經(jīng)常可以見到一些小型網(wǎng)站使用這樣的框架結(jié)構(gòu)，通常是把企業(yè)標(biāo)志、宣傳廣告通欄和導(dǎo)航放在上邊，網(wǎng)站正文、圖片、表格等內(nèi)容放在下方，既可以在所有頁(yè)面上使用這樣的結(jié)構(gòu)，也可以出現(xiàn)在下方，但還是以導(dǎo)航出現(xiàn)在上方的網(wǎng)站更為常見。

2.2 左右組合

左右組合的結(jié)構(gòu)劃分方式也很適合內(nèi)容較少的網(wǎng)站，通常情況下是把導(dǎo)航放置在頁(yè)面左邊，正文、圖片等內(nèi)容放置在右邊，但也有少數(shù)網(wǎng)站把導(dǎo)航放置在頁(yè)面右邊，其他內(nèi)容放置在左邊，企業(yè)標(biāo)志、徽章等圖像通常出現(xiàn)在頁(yè)面的最上方。

2.3 上中左右組合

又稱為三分欄式，是大型企業(yè)、電子商務(wù)、政府網(wǎng)站、教育機(jī)構(gòu)較喜歡的框架式，也是較常見的結(jié)構(gòu)。同上左右稍有區(qū)別，中間部分為內(nèi)容，右側(cè)是較重要的內(nèi)容導(dǎo)航或登錄、搜索區(qū)、小廣告等。

2.4 綜合性組合

綜合結(jié)構(gòu)式網(wǎng)站較復(fù)雜，特點(diǎn)是功能模塊多，信息分類詳細(xì)，因此需要采用區(qū)域版面結(jié)構(gòu)較合適。較常見的是信息儲(chǔ)量大的門戶網(wǎng)站，框架中的結(jié)構(gòu)變化，使該網(wǎng)站風(fēng)格有別于其他網(wǎng)站。

2.5 不規(guī)則組合

不規(guī)則結(jié)構(gòu)式有別于上面的框架結(jié)構(gòu)。相對(duì)來說，頁(yè)面的信息量少，通常一張形象、廣告照片下來，重在渲染網(wǎng)站的氣氛，類似封面類型，有點(diǎn)擊進(jìn)入下頁(yè)的入口。

顏色是區(qū)分過時(shí)設(shè)計(jì)和時(shí)髦設(shè)計(jì)的重要指標(biāo)。隨著網(wǎng)絡(luò)的普及，信息化的推進(jìn)，人們對(duì)設(shè)計(jì)的要求越來越高，審美的能力也越來越強(qiáng)，越來越挑剔，而人們判斷的第一標(biāo)準(zhǔn)就是第一眼的感覺，說白了就是色彩的搭配。合理地選擇合適的色彩搭配和版式布局，不僅可以契合網(wǎng)站設(shè)計(jì)目的的同時(shí)，而且能夠更確切地傳達(dá)網(wǎng)站產(chǎn)品要表達(dá)的內(nèi)容和思想。所以作為設(shè)計(jì)者我們必須要跟上設(shè)計(jì)的步伐，了解設(shè)計(jì)的趨勢(shì)，通過頁(yè)面的美術(shù)效果，引導(dǎo)用戶瀏覽信息，帶給用戶良好的體驗(yàn)效果。

參考文獻(xiàn)：

[1]毛開梅.網(wǎng)頁(yè)配色技巧[J].科技信息，2010（18）.

[2]旭日東升.網(wǎng)頁(yè)設(shè)計(jì)與配色經(jīng)典案例解析[M].北京：電子工業(yè)出版社，2009：5-7.

作者簡(jiǎn)介：梁莎（1979.12-），女，湖北武漢人，本科，研究方向：平面設(shè)計(jì)、網(wǎng)絡(luò)媒體。

作者單位：武漢職業(yè)技術(shù)學(xué)院，武漢 430074