朱紀(jì)蘭

江蘇省揚(yáng)中市供電公司，江蘇鎮(zhèn)江 212200

1 版面設(shè)計(jì)方法與布局原則

1.1 版面設(shè)計(jì)方法

網(wǎng)頁版面設(shè)計(jì)的方法和技巧主要有以下幾點(diǎn)：

1)簡(jiǎn)潔

網(wǎng)頁版面首先映入眼簾的是布局，而布局最重要的原則就是簡(jiǎn)潔，簡(jiǎn)潔的版面設(shè)計(jì)能夠給人帶來煥然一新的感覺，這有利于瀏覽者更順利的進(jìn)行網(wǎng)頁信息閱讀，對(duì)其更好的選擇，只有先簡(jiǎn)潔的閱讀網(wǎng)頁主題內(nèi)容，其次才是從屬的內(nèi)容。往往瀏覽者會(huì)被網(wǎng)頁圖片的精美吸引住，所以這時(shí)網(wǎng)頁只有在訪問中體現(xiàn)它的使用價(jià)值，他們才會(huì)反復(fù)性的進(jìn)行瀏覽訪問。這個(gè)網(wǎng)頁版面在百度、谷歌中比較常見，因?yàn)樗麄兘o人的感覺簡(jiǎn)潔、瀏覽器來更高效。

2)要有主色調(diào)

網(wǎng)站版面給人的第一感覺，要從主色調(diào)說起，主色調(diào)主要布局與網(wǎng)站網(wǎng)頁設(shè)計(jì)中。主色調(diào)多的頁面會(huì)給客戶帶來厭煩的感覺，不利于瀏覽者長(zhǎng)期觀看。簡(jiǎn)單來說，網(wǎng)頁版面的主色彩應(yīng)用中不能超過5 種，而且其中應(yīng)以一種主色調(diào)為主，讓其占主導(dǎo)地位，用其他4 中顏色作為襯托和點(diǎn)綴。網(wǎng)頁版面設(shè)計(jì)的主色調(diào)一般包括黃色、藍(lán)色、橙色、灰色、黑白色系列。

3)注意字體的設(shè)置

網(wǎng)頁版面的布局也包括字體的樣式，字體在網(wǎng)頁版面中也應(yīng)遵循簡(jiǎn)易的原則，也以不超過3 種樣式為主。既然遵循簡(jiǎn)易原則，且版面設(shè)計(jì)字體應(yīng)不要太大，這樣在網(wǎng)頁版面顯示的字體會(huì)給瀏覽者帶來更多有用的信息。哪些閃爍的文字就最好不要出現(xiàn)在網(wǎng)頁版面設(shè)計(jì)中，圖片的閃爍會(huì)給瀏覽者帶來厭煩的感覺，甚至?xí)皇娣?。一般而言，?biāo)題欄中的字體應(yīng)比正文相對(duì)大些，顏色也應(yīng)該區(qū)分開來。

4)視覺效果要好

網(wǎng)頁版面中的網(wǎng)頁結(jié)構(gòu)與排版設(shè)計(jì)中最重要的成分是視覺效果。優(yōu)秀的設(shè)計(jì)者能制作出更完美的網(wǎng)頁排版和結(jié)構(gòu)，翻閱那些成功的網(wǎng)頁分析發(fā)現(xiàn)，網(wǎng)頁主題部分設(shè)計(jì)的比例是1：2；2：1；再者也可以按1：2：1 的結(jié)構(gòu)，這些比例結(jié)構(gòu)是網(wǎng)頁版面設(shè)計(jì)中較為常見和比較流行的結(jié)構(gòu)方式。網(wǎng)頁版面的標(biāo)題和結(jié)尾處，也應(yīng)合理的發(fā)布網(wǎng)頁信息，更應(yīng)遵循合理組織、靈活多變的結(jié)構(gòu)方式去布局。

1.2 版面布局原則

網(wǎng)頁版面的布局類似于雜志排版的布局。作為一種頁面布局，可以是圖片、或者是文字，也有可能是動(dòng)畫等等。同時(shí)，或大或小的文本，圖片的大??；動(dòng)靜態(tài)的運(yùn)用。當(dāng)瀏覽者瀏覽版面時(shí)，看到的畫面是由文字和圖片構(gòu)成的，假如文字和圖片雜亂五章的羅列在一起，會(huì)顯得頁面比較復(fù)雜。所以版面的布局應(yīng)根據(jù)版面的內(nèi)容需要，進(jìn)行合理的排序編輯，布局，這樣在版面布局中形成一個(gè)有機(jī)的整體，讓用戶更好的瀏覽。以下是版面布局的原則：

1)整體布局，和諧統(tǒng)一。網(wǎng)頁設(shè)計(jì)中占據(jù)關(guān)鍵地位的整體布局頁面，起著主導(dǎo)作用。聰明的整體布局，充分顯示了設(shè)計(jì)師的想法，設(shè)計(jì)師的靈感，這個(gè)頁面必須協(xié)調(diào)統(tǒng)一。

集成是布局的傳統(tǒng)方法是使用一個(gè)對(duì)稱的形式。通過空間，和之間的交互文本和圖形建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。然而，對(duì)稱平衡有時(shí)使頁面顯得呆板，僵化、缺乏活力。對(duì)稱平衡輔助設(shè)計(jì)一些新的單詞和模式，需要時(shí)可以使用一些夸張，和強(qiáng)烈的緊張和運(yùn)動(dòng)，能給對(duì)稱頁面添加一些生動(dòng)、有趣；

2)主次分明，中心突出。在一個(gè)頁面布局中，您必須首先考慮視覺中心，該中心一般在頁面的關(guān)鍵領(lǐng)域，即中部和上部的位置。因此應(yīng)該最溝通的信息，在這個(gè)網(wǎng)站最具吸引力的內(nèi)容。在視覺的中心可以安排那些次要的內(nèi)容，略，突出關(guān)鍵頁面上的，優(yōu)先考慮。

最終的目的是使頁面布局頁面產(chǎn)生清晰有序，更好地突出主體，達(dá)到最好的顯示效果，因此，內(nèi)容頁面的視覺中心應(yīng)該是主體。網(wǎng)頁可以視覺秩序、空間層次、主從關(guān)系和相互之間的邏輯關(guān)系，通過組織掌握和使用來突出主體?？臻g層次，按照訂單的主從關(guān)系使得放大視覺中心的主要形象，表達(dá)主體思想，將一個(gè)總體布局設(shè)計(jì)文檔在各種信息，幫助建立的主要形象，和雙方的主要形象適當(dāng)?shù)卦黾右恍┛瞻祝梢宰尭怀鰪?qiáng)調(diào)的主要形象；

3)疏密有度，錯(cuò)落有致。在版面布局的內(nèi)容中，一定要緊密結(jié)合，恰當(dāng)留出空白，合理的運(yùn)用空格，例如字間距和行間距的制造；在對(duì)稱的原則下講究非對(duì)稱和對(duì)稱美；對(duì)于形態(tài)和色彩的運(yùn)用更要結(jié)合黑白搭配，圓形和方形的搭配，進(jìn)而更好的獲得視覺帶來的效果；

4)圖文并茂，相得益彰。圖形的美觀，文字的整潔，都需要二者相互搭配，如果圖形在版面設(shè)計(jì)中比例較大，而文字使用較少，就會(huì)大大降低頁面所呈現(xiàn)的額信息容量；反之，文字占用太多則會(huì)顯現(xiàn)出整個(gè)版面的沉悶，沒有生氣，所以圖文并茂，合理搭配，互相協(xié)調(diào)，才能給網(wǎng)頁版面帶來靈活的展現(xiàn)，繼而豐富了頁面的內(nèi)容。

2 常見版面布局

版面通常所指的是在網(wǎng)頁瀏覽器中呈現(xiàn)的完整布局，布局呈現(xiàn)的文字和圖形相得益彰，以下是常見的頁面布局形式：

2.1 T 型布局

T 型結(jié)構(gòu)是頂部的頁面布局的條紋網(wǎng)站標(biāo)語和橫幅，下面左邊主菜單的一部分，右側(cè)的布局來顯示內(nèi)容。因?yàn)椴藛伪尘案睿w效果類似于英文字母T，T 布局，這是最廣泛應(yīng)用于網(wǎng)頁設(shè)計(jì)布局。其優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，明確，主次是最容易學(xué)習(xí)初學(xué)者的布局方法;缺點(diǎn)是沉悶的，如果把握不好，不注意細(xì)節(jié)和色彩搭配，容易看后讓人覺得無趣。T 的布局結(jié)構(gòu)如圖1 所示。

圖1 T 型布局結(jié)構(gòu)圖

2.2 “口”型布局

“口”型布局映入眼簾的感覺是頁面最中間的主題內(nèi)容，像一個(gè)口字，左右為注冊(cè)信息，內(nèi)容導(dǎo)航以及搜索引擎，右側(cè)往往是動(dòng)態(tài)新聞，熱點(diǎn)內(nèi)容，以及友情鏈接，上下則為橫條廣告，以及橫條菜單。而另一個(gè)口型布局相對(duì)簡(jiǎn)單些，主要有橫條廣告或標(biāo)題以及主題內(nèi)容來布局的。

2.3 “川”型布局

在頁面布局中，川型布局是最特殊的，整個(gè)頁面呈現(xiàn)川字形狀，一般分為3 列，網(wǎng)站的內(nèi)容欄目主要呈現(xiàn)3 列中，這樣就可以更大限度的呈現(xiàn)主頁的索引功能。這種布局針對(duì)網(wǎng)站內(nèi)容欄目較多。它區(qū)別于國(guó)形布局，其內(nèi)容主要是頁面的二級(jí)鏈接，不足之處就在于欄目在配置的比例上是不平衡的，色彩也不容易得到統(tǒng)一。

2.4 POP 布局

流行布局的海報(bào)，一個(gè)美麗的照片作為頁面設(shè)計(jì)中心，在適當(dāng)?shù)奈恢梅胖弥鞑藛?，用于POP 布局。這個(gè)布局不是上下和左右對(duì)稱，但是需要平衡和節(jié)奏，可以實(shí)現(xiàn)動(dòng)態(tài)效果，其優(yōu)點(diǎn)是美麗迷人，缺陷是速度運(yùn)行中是很緩慢的。

圖2 POP 布局

3 新技術(shù)對(duì)企業(yè)網(wǎng)站的挑戰(zhàn)

真正的媒體行業(yè)的變化是由數(shù)字信息傳播方式演變而來的，傳統(tǒng)媒體的企業(yè)應(yīng)該跟上步伐，大膽的擁抱，積極為數(shù)字方式進(jìn)行傳輸。終端設(shè)備的發(fā)展，使大量的桌面的網(wǎng)絡(luò)時(shí)代企業(yè)再次面臨嚴(yán)峻考驗(yàn)。新的在線閱讀設(shè)備催生了新的開發(fā)技術(shù)，顯示技術(shù)，當(dāng)然也帶來了新的設(shè)計(jì)技術(shù)。新一代的數(shù)字新媒體文化的游客的感知達(dá)到了不可逆轉(zhuǎn)的趨勢(shì)，他們會(huì)像往常一樣，忘記了傳統(tǒng)媒體網(wǎng)絡(luò)的緩慢。通過互聯(lián)網(wǎng)媒介為核心企業(yè)，因此，媒體，還需要繼續(xù)跟蹤新技術(shù)，密切關(guān)注數(shù)字波的進(jìn)展，為了保持良好的市場(chǎng)競(jìng)爭(zhēng)力，將不會(huì)被讀者拋棄。網(wǎng)頁設(shè)計(jì)的過程中，我們應(yīng)該繼承我國(guó)的傳統(tǒng)文化，形成獨(dú)特的設(shè)計(jì)風(fēng)格，擴(kuò)大的設(shè)計(jì)視覺語言的同時(shí)，我們還需要?jiǎng)?chuàng)新，突出現(xiàn)代化、引領(lǐng)時(shí)尚潮流。在現(xiàn)代極簡(jiǎn)主義風(fēng)格中融入中國(guó)傳統(tǒng)元素以及符號(hào)的提煉為版面設(shè)計(jì)做出突出貢獻(xiàn)，促進(jìn)網(wǎng)頁設(shè)計(jì)變得更加強(qiáng)烈的視覺認(rèn)知和藝術(shù)魅力，創(chuàng)造一個(gè)自然、合理、平穩(wěn)的視覺過程，更好地激發(fā)人們的審美情趣和引導(dǎo)瀏覽者更好的接受信息。

[1]趙曉莉.iv+css布局在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].管理學(xué)家，2010.

[2]章學(xué)明.淺談水工自動(dòng)化監(jiān)測(cè)系統(tǒng)在城西水庫的應(yīng)用[J].管理學(xué)家，2010.

[3]嚴(yán)加瓊.淺析網(wǎng)頁設(shè)計(jì)中的頁面布局[J].電腦學(xué)習(xí)，2010.

[4]艾妮.基于三維全景技術(shù)的通用電子商務(wù)系統(tǒng)的研究與開發(fā)[D].貴州大學(xué)，2009.

[5]馬馳.語文課堂的幽默應(yīng)充滿理趣[J].小作家選刊（教學(xué)交流），2013.

[6]周歡.論網(wǎng)頁設(shè)計(jì)留白[J].小作家選刊（教學(xué)交流），2013.

[7]李玲玲.關(guān)于"網(wǎng)頁布局"方式的研究[J].淮北職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2011.