如何搞好網頁設計的布局

【摘 要】 網頁設計實際上就是平面設計，不過目的性、時效性更強。每一次網頁設計都可以看成平面設計，不同的是設計網頁不僅是把相關內容放到網頁中就行了，它還要求網頁設計者能夠把這些內容合理安排，給瀏覽者以賞心悅目的感覺，這樣才能增強網站的吸引力。網頁設計者能夠隨意控制頁面上所有的元素，但假如不知道什么是約定俗成的標準或者說大多數瀏覽者的瀏覽習慣，那么就不可能在此基礎上加上自己的東西，從而被廣大瀏覽者所接受和欣賞。

【關鍵詞】 網頁設計 布局 色彩

Abstract ： Web page design is actually a graphic design， but is much stronger in the purpose and timeliness. The paper mainly discusses how to carry on the layout of the web design.

網頁設計就是依據網站宗旨，把造型、結構、信息、色彩等視覺元素有機地統一在網頁中，并對網頁風格等進行整體設計。其目的主要是利用造型的原則和規律，合理的分配和排列文字、圖形等視覺元素，以便準確、系統、有效地傳達信息。

1.網頁設計的布局

網頁設計實際上就是平面設計，不過目的性、時效性更強。每一次網頁設計都可以看成平面設計，不同的是設計網頁不僅是把相關內容放到網頁中就行了，它還要求網頁設計者能夠把這些內容合理安排，給瀏覽者以賞心悅目的感覺，這樣才能增強網站的吸引力。網頁設計者能夠隨意控制頁面上所有的元素，但假如不知道什么是約定俗成的標準或者說大多數瀏覽者的瀏覽習慣，那么就不可能在此基礎上加上自己的東西，從而被廣大瀏覽者所接受和欣賞。這些概念，也就是人們常說的章法。要做好頁面設計，就必須先了解一些網頁布局相關的基本概念。

1.1頁面尺寸顯示器的大小及分辨率的高低決定顯示頁面的尺寸，網頁的最大局限性在于頁面顯示無法突破顯示器的范圍。由于瀏覽器本身也占用了網頁顯示的一部分，所以能顯示網頁的頁面范圍已經相當緊張。一般情況下，顯示器在640*480像素的分辨率下，頁面的顯示尺寸為620*311像素：在800*600像素的分辨率下，顯示器的分辨率越高，能顯示的頁面尺寸就越大。

1.2整體造型造型就是創造出來的物體形象，這里指頁面的整體形象。盡管顯示器和瀏覽器都是矩形，但對于頁面的造型，可以充分運用各種形狀以及它們的組合：矩形，圓形，三角形，菱形等等，但圖形與文本的結合應該層疊有序。

1.3頁頭頁頭又稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字人多都顯示在頁眉里。這樣，瀏覽者一看就能知道該站點的主題是什么。

1.4文本文字是網頁的主體，是傳達信息的最重要的方式。一方面是因為瀏覽網頁上的文字和看書很相似，比較符合一般人的習慣，另一方面也因為文字所需要的存儲空間非常小。文本的擺放位置決定著整個頁面布局的可視性。在過去由于網頁制作技術的局限，文本放置的位置靈活性非常小，隨著Dhtml的興起，文本已經可以放置在頁面的任何位置。

1.5頁腳頁腳是和頁眉相呼應。頁眉是放置站點主題的地方，而頁腳是放置作者或公司等各種制作信息的地方。

1.6圖片圖片在網頁中占有非常重要的地位。因為采用圖片可以減少純文字給人的枯燥感，巧妙的圖像組合可以帶給瀏覽者美的享受。

1.7多媒體多媒體一般指音頻、視頻、動畫、虛擬現實等形式。將多媒體引入到網頁，可以在很大程度上吸引瀏覽者的注意。利用多媒體文件可以制作出更有創造性、藝術性的作品，它的引入使得網站成了一個有聲有色，動靜相宜的世界。

1.8導航欄的位置導航欄能讓我們在瀏覽時容易地到達不同的頁面，是網頁元素非常重要的部分，所以導航欄一定要清晰、醒目。一般來講，如果內容非常多，就要考慮用“國字型”或拐角型；如果內容不算太多而一些說明性的東西比較多，則可以考慮標題正文型；那幾種框架結構的一個共同特點就是瀏覽方便，速度快，但結構變化不靈活。

2.網頁設計的色彩搭配方法

在網頁設計中，色彩成為一個非常重要的研究對象，約翰內斯？伊頓是最早引入現代色彩體系的教育家之一，具有非常敏感的形式認識，他堅信色彩是理性的，只有了解色彩的科學構成，才能進行有色彩的自由表現。

2.1明確網站的主題、服務對象及用色彩要表達的目的要確定一個網頁用什么色彩合適，即什么色彩適合什么網站。你必須要先弄明白該網站的主題和它的服務對象，以及你通過色彩希望達到的目的。

2.2確定網頁的主色調根據網站的主題、服務對象及用色目的，給網站的網頁選一個主色調，以形成一定風格。整個網頁最好只有一個主色調。主調色彩一般可用公司的標準色，這符合公司的形象戰略，可以提升公司形象。

2.3根據主調色選擇輔助色彩主調色確定后，還可選一至兩種輔助色配合使用，整個網頁的色彩最好控制在三色之內。如果整個網頁采用單色調，即只用一種色相，其輔助色只是在明度和純度上作調整，間用中性色。采用單色調，易形成一種風格，在網頁的局部要采用少量小面積的對比色以達到豐富頁面的效果。

2.4確定背景和文本的色彩背景和文本的色彩對比要盡量大（一般明度對比為3∶1到5∶1），以便突出主要文字內容，但不要過于亮麗，以免造成過強刺激的視覺效果。正文和標題的背景色可以不同，一般正文的背景色用淡雅色較佳，標題的背景色可用較鮮艷的。背景色如果以白色等淡色為主，其文本色要用低明度有彩色，這種搭配較利于閱讀。

2.5最后確定超鏈接、超鏈接翻轉效果當前超鏈接及已訪問的超鏈接的色彩超鏈接的文本色彩，與其它文本的色彩要有差別，以利于瀏覽者進一步鏈接；如果利用翻轉效果，其翻轉效果的色彩應與超鏈接色彩不同，這樣可以突出已選到的超鏈接，但翻轉效果的色彩可以與當前超鏈接的色彩相同；已訪問的超鏈接的色彩可以與超鏈接的色彩相同，也可以不同。

參考文獻：

[1]胡亞卓.淺談網頁設計[J].科教文匯，2008，（2）.

[2]劉佳，王倩.網頁設計中的色彩表現[J].美術大觀，2007，（11）.

（作者單位：哈爾濱工業大學建筑學院）