楊春鋒

【摘 要】隨著社會(huì)、科技的發(fā)展，網(wǎng)絡(luò)越來(lái)越走近我們的生活。而網(wǎng)站則越來(lái)越成為我們了解世界、學(xué)習(xí)知識(shí)的平臺(tái)。瀏覽網(wǎng)頁(yè)，首先映入我們眼簾的是它的版面設(shè)計(jì)。一個(gè)好的版面設(shè)計(jì)可以使我們?yōu)g覽輕松，身心愉悅，沒(méi)有疲憊感。這就對(duì)我們現(xiàn)在網(wǎng)站版面審計(jì)人員提出了新的要求。版面設(shè)計(jì)也可以理解為布局設(shè)計(jì)，就是我們?cè)跒g覽器上說(shuō)看的一個(gè)完整的頁(yè)面。設(shè)計(jì)師們?nèi)绾螌⑺幸w現(xiàn)的內(nèi)容有機(jī)的整合和分布，達(dá)到某種視覺(jué)效果，這就叫做版面布局。在長(zhǎng)期的工作實(shí)踐中，我自己總結(jié)了一點(diǎn)心得，與大家交流一下。

【關(guān)鍵詞】版面；模塊；設(shè)計(jì)；構(gòu)思；溝通；定位

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.構(gòu)思（結(jié)構(gòu)的搭建）

當(dāng)然在構(gòu)思之前需要我們做很多工作：

（1）客戶(hù)的需求

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

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

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

2.粗略布局（畫(huà)草圖）

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

3.完善布局（美化）

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

（1）平衡性：指上下文對(duì)照形式，主要強(qiáng)調(diào)作品順序，要求達(dá)到平和、誠(chéng)信的效果。

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

（3）色彩對(duì)比：就是利用色彩、色調(diào)等技巧做對(duì)比。內(nèi)容上可涉及古與今、新與舊、貧與富等對(duì)比。

4.重點(diǎn)強(qiáng)調(diào)

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

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

（3）圖片解說(shuō)：語(yǔ)言無(wú)法表達(dá)的情感，圖片解說(shuō)的內(nèi)容，可以傳達(dá)給瀏覽者的更多的信息。

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

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

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

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

再設(shè)計(jì)中，我們要注意的幾點(diǎn)問(wèn)題：

（1）確定網(wǎng)頁(yè)設(shè)計(jì)形式并與內(nèi)容相統(tǒng)一

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

2）與客戶(hù)有效的溝通

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

4）尋訪(fǎng)相關(guān)網(wǎng)站

5）匯總目標(biāo)用戶(hù)群的特征

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

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

8）形象口號(hào)（文化方面）

9）構(gòu)思進(jìn)行創(chuàng)作

（2）界面弱化

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

（3）模塊化和可修改性強(qiáng)

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

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

按功能分的功能模塊：

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

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

3）相冊(cè)模塊：展示圖片、動(dòng)畫(huà)效果。

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

5）……等等；

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

（4）風(fēng)格保持一致——內(nèi)頁(yè)設(shè)計(jì)技巧

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

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

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

3）色彩的獨(dú)特性：根據(jù)網(wǎng)站類(lèi)型選擇合適的色彩，使內(nèi)容與形式相統(tǒng)一，符合人們固有的認(rèn)知習(xí)慣。，因?yàn)槿说囊曈X(jué)對(duì)色彩要比布局更敏感，更容易在大腦中形成記憶符號(hào)。在色彩的獨(dú)特性中，我們強(qiáng)調(diào)的企業(yè)有自身的形象，最好能在互聯(lián)網(wǎng)中沿襲這個(gè)形象，給觀(guān)者獨(dú)特的感覺(jué)，有利于企業(yè)形象的樹(shù)立。一個(gè)建議是選取一兩種主要色彩，幾種輔助色彩。

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

總之，設(shè)計(jì)之中技巧還有很多。我們?cè)O(shè)計(jì)人員應(yīng)該不斷學(xué)習(xí)，由知識(shí)型向能力型和應(yīng)用型轉(zhuǎn)化，“以能力為本位”。

參考文獻(xiàn)：

[1]周杰.網(wǎng)站美工設(shè)計(jì)基礎(chǔ)[M].中央廣播電視大學(xué)出版社.

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

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