網(wǎng)頁(yè)設(shè)計(jì)中的布局與配色技巧的研究

歐倍銘

岑溪市中等專業(yè)學(xué)校，廣西岑溪，543200

0 引言

近年來(lái)，隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)逐漸被人們認(rèn)可。它是網(wǎng)頁(yè)設(shè)計(jì)者根據(jù)設(shè)計(jì)的目標(biāo)和要求，根據(jù)時(shí)代、可用的技術(shù)和設(shè)計(jì)經(jīng)驗(yàn)，有意識(shí)地進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的創(chuàng)造性思維。因此，網(wǎng)頁(yè)設(shè)計(jì)是藝術(shù)設(shè)計(jì)的重要核心。網(wǎng)頁(yè)設(shè)計(jì)逐漸隨著網(wǎng)頁(yè)技術(shù)的發(fā)展而進(jìn)入人們的視野，從字面上看，網(wǎng)頁(yè)設(shè)計(jì)就是對(duì)網(wǎng)站的布局及色彩搭配的一種設(shè)計(jì)手法，但其實(shí)網(wǎng)頁(yè)設(shè)計(jì)不單單是一種設(shè)計(jì)手法，而是藝術(shù)與技術(shù)的高效結(jié)合[1]。簡(jiǎn)而言之，網(wǎng)頁(yè)設(shè)計(jì)的主要特征為：集成性、交互性、多維性、不確定性。這些功能不僅為用戶提供了便捷的信息，也讓用戶在瀏覽網(wǎng)頁(yè)時(shí)有更多的機(jī)會(huì)與網(wǎng)站進(jìn)行互動(dòng)，這對(duì)網(wǎng)站設(shè)計(jì)人員掌握網(wǎng)站的布局和顏色定制水平提出了極高的要求。

1 我國(guó)網(wǎng)站外觀及色彩設(shè)計(jì)狀況

在我國(guó)，網(wǎng)頁(yè)設(shè)計(jì)以一個(gè)新興的領(lǐng)域逐漸被人們認(rèn)可。同時(shí)，涉足這一領(lǐng)域的設(shè)計(jì)師越來(lái)越年輕化。在市場(chǎng)環(huán)境的推動(dòng)下，不可否認(rèn)的是我國(guó)的網(wǎng)頁(yè)設(shè)計(jì)水平確實(shí)取得了長(zhǎng)足發(fā)展與進(jìn)步，但也可以看到我們的網(wǎng)頁(yè)設(shè)計(jì)普遍存在幾點(diǎn)問(wèn)題。一是盲目抄襲、模仿、原創(chuàng)觀點(diǎn)不強(qiáng)等，亟待提高從業(yè)者素質(zhì)。鑒于網(wǎng)頁(yè)設(shè)計(jì)的理論研究和教育還處于剛剛起步階段，網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域缺乏高素質(zhì)的從業(yè)者，各種網(wǎng)站模仿國(guó)外的網(wǎng)站布局，此外，當(dāng)使用現(xiàn)成的直接創(chuàng)建的網(wǎng)站模板時(shí)，網(wǎng)站的設(shè)計(jì)可能相同或大致一樣。在我國(guó)，大部分設(shè)計(jì)師很少主動(dòng)去關(guān)注客戶的需求，也很少在設(shè)計(jì)網(wǎng)站之前做市場(chǎng)調(diào)研。二是僅關(guān)注頁(yè)面的設(shè)計(jì)，而不重視用戶體驗(yàn)。雖然，網(wǎng)頁(yè)設(shè)計(jì)是平面設(shè)計(jì)的一部分，但它與經(jīng)典的平面設(shè)計(jì)不一樣：不但要做到視覺(jué)傳達(dá)，網(wǎng)頁(yè)設(shè)計(jì)還需要受眾的參與，簡(jiǎn)單的屏幕演示是觀看的目標(biāo)。從某種意義上說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)師不單單要掌握平面設(shè)計(jì)方面的有關(guān)知識(shí)和技能，還需洞察瀏覽者的心理反應(yīng)和行為進(jìn)行設(shè)計(jì)，這樣設(shè)計(jì)的網(wǎng)站不僅視覺(jué)效果極佳，而且導(dǎo)航和操作也非常舒適。然而，國(guó)內(nèi)對(duì)網(wǎng)絡(luò)用戶體驗(yàn)的研究還很少，網(wǎng)頁(yè)設(shè)計(jì)師通常將布局設(shè)計(jì)和顏色匹配視為整體網(wǎng)頁(yè)設(shè)計(jì)的一部分，并認(rèn)為如果網(wǎng)頁(yè)設(shè)計(jì)“漂亮”，那么它就是一個(gè)好網(wǎng)頁(yè)。當(dāng)談到瀏覽者如何瀏覽網(wǎng)頁(yè)時(shí)，如何操作沒(méi)有太多的關(guān)心和研究，最終的結(jié)果是，雖然頁(yè)面看起來(lái)很棒，但是頁(yè)面查看者找不到頁(yè)面記錄，也無(wú)法返回主頁(yè)。三是技術(shù)過(guò)硬而藝術(shù)較膚淺。一個(gè)完美的網(wǎng)站是技術(shù)與藝術(shù)二者相結(jié)合的產(chǎn)物。目前，信息技術(shù)和多媒體應(yīng)用的快速發(fā)展，越來(lái)越多的元素和特效可以應(yīng)用到網(wǎng)站中，網(wǎng)站的內(nèi)容不僅包括文字和圖像，還包括使用特效傳達(dá)信息等。但是，如果將網(wǎng)站內(nèi)容割裂開(kāi)來(lái)，一味地用特效來(lái)體現(xiàn)技術(shù)，就會(huì)成為技術(shù)應(yīng)用的死胡同，是達(dá)不到效果的。四是網(wǎng)絡(luò)技術(shù)的使用不合理，不但頁(yè)面加載速度會(huì)減慢，而且還會(huì)影響觀眾的情緒。

2 組成網(wǎng)頁(yè)的幾大元素

2.1 文字是網(wǎng)頁(yè)的第一個(gè)元素

文字是最重要的組成元素。隨著受眾審美品位的提高，網(wǎng)頁(yè)版式中文字的設(shè)計(jì)者越來(lái)越注重字體密度、媒介變化、字體設(shè)計(jì)和文字顏色。雖然網(wǎng)頁(yè)上文字的字體受到計(jì)算機(jī)系統(tǒng)字體庫(kù)的限制，但是可以用圖像來(lái)表示文字。字體的特殊排列和特殊字體的使用往往能產(chǎn)生意想不到的效果。上傳文字時(shí)，同時(shí)需了解文字在頁(yè)面中的影響，首先考慮文字對(duì)網(wǎng)頁(yè)起到點(diǎn)綴美化、字幕性還是文字性的作用，不同類(lèi)型文本的排版應(yīng)相應(yīng)調(diào)整。

2.2 圖像是網(wǎng)站設(shè)計(jì)中重要的部分

最早的網(wǎng)站受技術(shù)影響，只能使用純文本進(jìn)行布局。漸漸地，HTML規(guī)范對(duì)圖像的支持和寬帶的普及，網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)越多地應(yīng)用圖像，圖像的使用可以使網(wǎng)站更加生動(dòng)和美觀。

2.3 超鏈接是網(wǎng)頁(yè)的重要組成部分

超鏈接允許鏈接到其他網(wǎng)頁(yè)或網(wǎng)站的元素。在網(wǎng)頁(yè)上，超鏈接的目標(biāo)可以是網(wǎng)頁(yè)上的文本或圖像。當(dāng)用戶單擊鏈接的圖像或文本時(shí)，鏈接的項(xiàng)目將顯示在瀏覽器中，并根據(jù)項(xiàng)目類(lèi)型打開(kāi)[2]。

3 網(wǎng)站布局結(jié)構(gòu)

3.1 傳統(tǒng)的“T”型布局

“T”型布局結(jié)構(gòu)是大部分網(wǎng)頁(yè)所使用的布局。網(wǎng)站的主徽標(biāo)位于左上角就是此結(jié)構(gòu)的最常見(jiàn)布局，而且頂部中心的大部分被導(dǎo)航占據(jù)，輔助導(dǎo)航或重要提醒出現(xiàn)在左側(cè)。右側(cè)是頁(yè)面的主體部分，出現(xiàn)了很多信息和用途，信息的傳遞也進(jìn)行了合理的劃分。

3.2 上下對(duì)照式布局

受“極簡(jiǎn)主義”設(shè)計(jì)理念的影響，設(shè)計(jì)者創(chuàng)造了一種更直觀的自上而下排列的對(duì)比結(jié)構(gòu)。在組織頁(yè)面內(nèi)容時(shí)，此類(lèi)模型通常會(huì)選擇更直接高效的圖形和簡(jiǎn)潔優(yōu)雅的文本布局。

3.3 對(duì)稱排列布局

左右對(duì)稱結(jié)構(gòu)的優(yōu)點(diǎn)是內(nèi)容相對(duì)集中，設(shè)計(jì)效率區(qū)域化，鮮明的視覺(jué)符號(hào)對(duì)讀者記憶起到重要作用，也保證了所看資料的完整性和規(guī)范性。同時(shí)，左右對(duì)稱的布置也能營(yíng)造出對(duì)稱的美感。

3.4 文字型布局

網(wǎng)站版式設(shè)計(jì)中有很多誤區(qū)需要改正，其中最主要的就是對(duì)文字的誤區(qū)。文字是最基礎(chǔ)的設(shè)計(jì)工作，對(duì)于文字的把握能力決定了一切。對(duì)于一些特殊的頁(yè)面，有必要摒棄“圖片重于文字”的觀念。

3.5 氛圍式布局

網(wǎng)站設(shè)計(jì)的目標(biāo)一直是讓瀏覽者能夠以越來(lái)越個(gè)性化的方式查看內(nèi)容。漸漸地，隨著寬帶的普及，以及Flash技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，瀏覽者重新掌握了對(duì)網(wǎng)站的更多控制權(quán)。氛圍式布局滿足了瀏覽者這一需求。

3.6 儲(chǔ)物箱布局

網(wǎng)站排版一直有幾個(gè)獨(dú)立的先驅(qū)。他們的一些網(wǎng)站具有創(chuàng)新性，另一些則在試驗(yàn)特殊布局?！皟?chǔ)物箱”的排列沒(méi)有固定的規(guī)則。文化環(huán)境與藝術(shù)信仰息息相關(guān)。嘗試這種布局設(shè)計(jì)可能會(huì)讓一些觀眾望而卻步。

3.7 復(fù)雜型布局

有吸引力的布局結(jié)構(gòu)通常是通過(guò)將不同的基本布局形狀與特殊形狀相結(jié)合來(lái)創(chuàng)建的。專業(yè)的網(wǎng)站布局能從不一樣的布局中挑選合適的布局進(jìn)行拼湊；但是非專業(yè)的網(wǎng)站布局僅僅局限在白頁(yè)上機(jī)械地排列元素。

4 網(wǎng)站設(shè)計(jì)規(guī)則

4.1 網(wǎng)站類(lèi)別

不同類(lèi)型的網(wǎng)站都要遵循一定的規(guī)則，才能得以發(fā)展。比如門(mén)戶網(wǎng)站，大家看到門(mén)戶網(wǎng)站就會(huì)想到，由于T型布局結(jié)構(gòu)是大部分瀏覽者所喜歡的布局格式，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)這點(diǎn)也是要考慮的，這樣才能得到瀏覽者的關(guān)注。如果使用非傳統(tǒng)的網(wǎng)站設(shè)計(jì)，肯定會(huì)吸引更多的關(guān)注，但太新了，瀏覽者不會(huì)停留在頁(yè)面上，所以這類(lèi)網(wǎng)站應(yīng)注重功能和內(nèi)容。

4.2 網(wǎng)站內(nèi)容

影響網(wǎng)頁(yè)外觀的因素有很多，而內(nèi)容頁(yè)面就是其一。雖然某些布局具有視覺(jué)吸引力，但這些視覺(jué)吸引力頁(yè)面通常由傳達(dá)有限信息的大圖像或圖形組成，比如表格頁(yè)面能夠傳達(dá)的信息非常有限。比如簡(jiǎn)單的布局，而有些頁(yè)面的布局多為文字和圖片或圖形，這種情況很少見(jiàn)，布局是一個(gè)大考驗(yàn)。因此，在考慮采用何種頁(yè)面布局時(shí)，首先要根據(jù)頁(yè)面所要表達(dá)的信息以及內(nèi)容而進(jìn)行設(shè)計(jì)和編寫(xiě)，之后才能依據(jù)信息和內(nèi)容進(jìn)行相應(yīng)的頁(yè)面布局形式。

4.3 網(wǎng)站的網(wǎng)民

網(wǎng)站作為信息的傳遞者，瀏覽者的體驗(yàn)是網(wǎng)站創(chuàng)建者在選擇布局格式時(shí)必須考慮的對(duì)象。不同年齡段的瀏覽者對(duì)網(wǎng)站布局的感知不同。例如，傳統(tǒng)“T”型布局更容易被一些歲數(shù)偏大的瀏覽者所喜歡，因?yàn)榇祟?lèi)頁(yè)面布局更貼近我們生活中的雜志、報(bào)紙和其他傳統(tǒng)媒體。年輕受眾更喜歡單獨(dú)的頁(yè)面布局，例如剪貼板布局或字符樣式布局。因此，我們?cè)谠O(shè)計(jì)頁(yè)面布局的時(shí)候，需要對(duì)網(wǎng)站的要點(diǎn)進(jìn)行考察和研究。

5 網(wǎng)站顏色

自然界的顏色有很多種，比如玫瑰是紅色的，大海是藍(lán)色的，橘子是橙色的。顏色基本上可以劃分為彩色、非彩色，而非彩色主要以黑、白、灰為主，其他顏色都是彩色的[3]。而每種顏色又具有三個(gè)屬性：純度、色相、明度。色相是指顏色的名稱。它是顏色最基本的特征，也是顏色與顏色之間進(jìn)行區(qū)分的重要因素。明度即亮度，顏色隨著亮度的提高而越來(lái)越淺，反映顏色的明暗程度。亮度越低，顏色越深。這主要用在一些游戲頁(yè)面上，充滿神秘感。純度即顏色的清晰度。純度越高，色彩越鮮艷，純度越低，色彩會(huì)暗淡、無(wú)光。零售店經(jīng)常使用暖色來(lái)反映范圍廣泛的產(chǎn)品，而在兒童建筑中則經(jīng)常使用暖色來(lái)傳達(dá)能量和溫暖。建筑、博物館網(wǎng)頁(yè)大部分運(yùn)用冷色系，來(lái)襯托其莊重、嚴(yán)肅的氣場(chǎng)。

6 網(wǎng)頁(yè)配色技巧

網(wǎng)頁(yè)配色是一項(xiàng)具有技術(shù)能力的工作，而且在技巧的運(yùn)用上尤為重要。所以，網(wǎng)頁(yè)設(shè)計(jì)者在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，結(jié)合網(wǎng)頁(yè)的特點(diǎn)的同時(shí)還要遵循色彩搭配的規(guī)律，在此基礎(chǔ)上，才能設(shè)計(jì)出色彩鮮明、獨(dú)樹(shù)一幟的網(wǎng)站。

在網(wǎng)頁(yè)上只使用一種顏色會(huì)顯得單調(diào)，但在網(wǎng)頁(yè)上使用所有顏色會(huì)顯得輕浮和華而不實(shí)。網(wǎng)頁(yè)色彩搭配應(yīng)具有特色，才能別出一格，加深瀏覽者的印象。網(wǎng)頁(yè)設(shè)計(jì)是平面設(shè)計(jì)的一部分，但又不同于平面設(shè)計(jì)。根據(jù)藝術(shù)規(guī)律，人的生理特征也被考慮在內(nèi)，色彩搭配一定要恰當(dāng)，才能保證和諧舒適。使用單一或復(fù)雜色彩會(huì)使眼睛疲勞[4]。

在確定主題色時(shí)，需要考慮其他顏色與主題色的關(guān)系，以及選擇其他顏色時(shí)想要達(dá)到的效果。根據(jù)效果，決定哪個(gè)因素占主導(dǎo)地位。一是何為相似色，相似色就是兩個(gè)相鄰的顏色，如紫色和藍(lán)色、黃色和橙色、灰色和白色等。通過(guò)在網(wǎng)站設(shè)計(jì)中使用相近的顏色，可以避免顏色混淆，給人以愉悅自然的視覺(jué)印象，容易達(dá)到頁(yè)面的和諧統(tǒng)一。二是何為互補(bǔ)色，互補(bǔ)色是兩種相反的顏色。比如黑色和白色?；パa(bǔ)色的靈活、巧妙運(yùn)用可以顯示重點(diǎn)，塑造濃烈的視覺(jué)沖擊。設(shè)計(jì)以一種顏色為主，互補(bǔ)色為輔，以達(dá)到最終的效果[5]。白色是網(wǎng)站上最廣泛應(yīng)用的一種顏色。許多網(wǎng)站甚至留下了很大的白色空間，作為網(wǎng)絡(luò)的一部分，它是空白藝術(shù)?？諘绲目臻g給人以想象的空間，讓人心情舒暢。大自然向我們展示了一個(gè)多彩的世界，美麗的色彩設(shè)計(jì)充滿活力，能牽動(dòng)瀏覽者的情緒[6]。

7 結(jié)語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)中最重要的兩個(gè)因素是版式和顏色匹配。因此，設(shè)計(jì)師不僅需要有一定的文字功底，還需要有一定的藝術(shù)表現(xiàn)力。良好的布局還可以防止瀏覽者在瀏覽網(wǎng)站時(shí)迷路。