網(wǎng)站版面設計步驟與技巧

楊春鋒

【摘 要】隨著社會、科技的發(fā)展，網(wǎng)絡越來越走近我們的生活。而網(wǎng)站則越來越成為我們了解世界、學習知識的平臺。瀏覽網(wǎng)頁，首先映入我們眼簾的是它的版面設計。一個好的版面設計可以使我們?yōu)g覽輕松，身心愉悅，沒有疲憊感。這就對我們現(xiàn)在網(wǎng)站版面審計人員提出了新的要求。版面設計也可以理解為布局設計，就是我們在瀏覽器上說看的一個完整的頁面。設計師們如何將所有要體現(xiàn)的內容有機的整合和分布，達到某種視覺效果，這就叫做版面布局。在長期的工作實踐中，我自己總結了一點心得，與大家交流一下。

【關鍵詞】版面；模塊；設計；構思；溝通；定位

Abstract：With the development of society，science and technology，the network is more and more closer to our daily life.The website is more and more become our understanding of the world，the study knowledge platform.Browse the webpage，the first thing we saw is the layout of the.A good layout design can enable us to browse easily，mental and physical pleasure，not fatigue.This is our website auditor puts forward new requirements.Layout design can also be understood as layout design，is what we in the browser that a complete page see.How designers will all should reflect the content and distribution of organic integration，achieve a visual effect，which is called the page layout.In the long-term practice，I summarized a little experience，to share with you what.

Key word：Layout design module communication positioning

1.構思（結構的搭建）

當然在構思之前需要我們做很多工作：

（1）客戶的需求

與客戶溝通是非常重要的。好的溝通可以深入了解作品的構架內容。就可以很準確的吧架構搭建起來。因為在不了解客戶需求的情況下，盲目的去把頁面設計達到某種視覺效果是很難的、也會很容易被客戶推翻的，即使客戶不懂，過關了，但是如果沒有真正為客戶帶來價值，它還是失敗的。當我們真正了解客戶需求后，你可以盡可能的發(fā)揮你的想象力，將你想到的"構思"畫上去（用筆和紙或者軟件都可以，根據(jù)自己的習慣而定），這是屬于一個構思的過程，不講究細膩工整，也不必考慮到一些細節(jié)的部分，只要用幾條粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能的多構思一些，以便選擇一個最適合的進行搭建。

（2）網(wǎng)站的定位

這一部分也很重要，主要是設計者根據(jù)客戶的需求給網(wǎng)站的定位標準。它決定了網(wǎng)頁設計的難度和布局思路。定位高的網(wǎng)站對頁面架構、模塊劃分、色彩搭配要求就比較高。反之，就相對簡單。這些和設計者的理解程度、作品的價格定位有直接的聯(lián)系。

2.粗略布局（畫草圖）

這個階段是個試用期，我們只要把重要的元素和網(wǎng)頁結構相結合，看看框架是否合理、適合客戶的需求，如果都不適合你該知道怎么做了！在這一階段，我們先不要考慮細節(jié)問題，主要是要把客戶的需求在網(wǎng)頁設計上基本都得以體現(xiàn)。模塊劃分比較準確。先把架構搭建起來。

3.完善布局（美化）

當我們已經(jīng)有一個很好的框架時，我們需要根據(jù)客戶的要求將其所需的內容有條理的融入于整個的框架中，這里就進入了網(wǎng)頁布局的階段了，我們需要通過我對圖片的處理、空間的合理利用進行編排了。廣告大師樊志育在《廣告制作》中所提到的，希望對大家在布局的理論上面有所幫助。

（1）平衡性：指上下文對照形式，主要強調作品順序，要求達到平和、誠信的效果。

（2）異步平衡——整體性：要平衡合一，當然不都是不均勻的，這種布局能達到重點突出、提高注目性的效果。

（3）色彩對比：就是利用色彩、色調等技巧做對比。內容上可涉及古與今、新與舊、貧與富等對比。

4.重點強調

（1）對其他網(wǎng)站表示突出。

（2）表示網(wǎng)頁品位的品味，這種表現(xiàn)方法強調網(wǎng)頁的格調。

（3）圖片解說：語言無法表達的情感，圖片解說的內容，可以傳達給瀏覽者的更多的信息。

5.深入優(yōu)化（細化）

這個階段主要是針對些細節(jié)的更改和優(yōu)化了，比如說一些顏色飽和度、一些字體、間距的調整呀。最后客戶反饋過來的東西根據(jù)現(xiàn)有的界面進行適當?shù)恼{整，直至客戶滿意。

在網(wǎng)上有許多人問我什么樣的版面布局是最好的，其實我不覺的某個版面是最好的，我們也不能說的這么絕對，我認為在現(xiàn)階段現(xiàn)有的資源下最適合客戶需求的才是“最好”的。

網(wǎng)頁設計特別講究編排和布局，網(wǎng)頁主頁設計與平面設計不一樣，但它們有許多相近之處。網(wǎng)頁設計通過圖形、文字的空間組合，表達出和諧美。在網(wǎng)頁設計里，設計師依據(jù)平和、重點突出的原則，將不同的色彩進行分類組合.根據(jù)不同的組合構成美麗的頁面。配合色彩對人們心理的影響，合理地加以運用。

再設計中，我們要注意的幾點問題：

（1）確定網(wǎng)頁設計形式并與內容相統(tǒng)一

1）確定主題（創(chuàng)作前的準備工作）

2）與客戶有效的溝通

3）分析行業(yè)資料

4）尋訪相關網(wǎng)站

5）匯總目標用戶群的特征

6）新網(wǎng)站的優(yōu)勢和特色

7）網(wǎng)站導航（信息方面）

8）形象口號（文化方面）

9）構思進行創(chuàng)作

（2）界面弱化

一個好的界面設計它的界面是弱化的，它突出的是功能，著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者是主要什么。這就涉及到瀏覽順序、功能分區(qū)等等。要讓訪客在很短的時間就知道該從哪個地方開始使用這個網(wǎng)站，能點一次的，絕不點第二次。當然上面說的是大多數(shù)功能性網(wǎng)站，對于宣傳展示性網(wǎng)站，諸如加特效的或Flash網(wǎng)站，可能就不得不花哨一些，但不能太過分。網(wǎng)站不是動畫片，在效率越來越高，社會心理越來越浮躁的中國，人們的耐心越來越小，心理承受能力越來越低。效果可以體現(xiàn)意境，點到為止。

（3）模塊化和可修改性強

模塊化不僅可以提高重用性，也能統(tǒng)一網(wǎng)站風格，還可以降低程序開發(fā)的強度。

模塊可以布局模塊和功能模塊等，比如：

按功能分的功能模塊：

1）日志模塊：日志列表，日志詳細，日志評論（引用評論模塊等等），日志發(fā)布（引用表單模塊等等），日志管理等等

2）評論模塊：評論列表，發(fā)表評論（引用表單模塊等等），評論管理等等

3）相冊模塊：展示圖片、動畫效果。

4）工具條模塊：組合功能區(qū)條目

5）……等等；

按布局分的布局模塊：比如柵格化中的一堆布局組合這里就涉及一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識了，不再冗述。

（4）風格保持一致——內頁設計技巧

1）使用相同色系，保持整體性：網(wǎng)頁上各部分色彩都有自己的角色，主色、輔色、點睛色、背景色一起組成和諧統(tǒng)一的色彩關系。主要從色相、色性、明度、純度等的相互搭配來看。結合網(wǎng)頁實例講解，主色、輔色、點睛色、背景色組合成有節(jié)奏韻律，和諧統(tǒng)一的色彩關系。使網(wǎng)頁主題明確，重點突出、風格統(tǒng)一，給瀏覽者留下深刻印象。

從功能上來看，首頁能夠表現(xiàn)出公司的概貌，能夠顯示出與競爭對手相比或與物理世界相比的優(yōu)勢，并通過欄目來表現(xiàn)，比如各欄目內部主要內容的介紹，都可以在框架頁中體現(xiàn)再進入普通頁，供瀏覽者迅速擇其需要瀏覽。而普通頁是主要的信息頁面，也是最終傳達給讀者的最終頁面，大型網(wǎng)站由于信息量大，使用這種結構非常必要，而對于中小網(wǎng)站，就不是顯得很必要，很多信息可以在首頁、框架頁得以體現(xiàn)。

2）合理使用過渡色：過渡色的作用是能夠把幾種不協(xié)調的色彩統(tǒng)一起來。巧妙地使用過渡色能夠使你的網(wǎng)頁色彩搭配錦上添花。

3）色彩的獨特性：根據(jù)網(wǎng)站類型選擇合適的色彩，使內容與形式相統(tǒng)一，符合人們固有的認知習慣。，因為人的視覺對色彩要比布局更敏感，更容易在大腦中形成記憶符號。在色彩的獨特性中，我們強調的企業(yè)有自身的形象，最好能在互聯(lián)網(wǎng)中沿襲這個形象，給觀者獨特的感覺，有利于企業(yè)形象的樹立。一個建議是選取一兩種主要色彩，幾種輔助色彩。

4）網(wǎng)頁背景統(tǒng)一：網(wǎng)頁背景包括背景色和背景圖像兩種，一般來說，設計上并不提倡使用背景圖像，而使用背景色或色塊。第一，讀取速度不同，背景色塊下載速度可以忽略不計，而背景圖像就不能。它是根據(jù)圖像字節(jié)大小下載的。如果你的背景圖像比較深，那么最好將背景色置為深色調（默認是白色），那樣瀏覽器顯示文字就會很容易閱讀，如果二者都有，先下載背景色，再下載背景圖片；第二，顯示效果，經(jīng)常看到國內一些網(wǎng)站設有背景圖像，不必要的背景圖片影響瀏覽的效果.比如公司的廠房、學校操場、某產(chǎn)品圖片、人物的照片等。

總之，設計之中技巧還有很多。我們設計人員應該不斷學習，由知識型向能力型和應用型轉化，“以能力為本位”。

參考文獻：

[1]周杰.網(wǎng)站美工設計基礎[M].中央廣播電視大學出版社.

[2]張勇強.網(wǎng)頁美工[M].化學工業(yè)出版社.

[3]網(wǎng)站美工項目化教程[M].國防工業(yè)出版社.