版式設(shè)計在網(wǎng)頁設(shè)計的應(yīng)用

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了版式設(shè)計在網(wǎng)頁設(shè)計的應(yīng)用范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要:信息技術(shù)的發(fā)展為現(xiàn)代社會帶來新的發(fā)展機遇。作為人們分享信息、獲得資源的主要途徑，網(wǎng)站逐漸受到人們的重視。美觀獨特的網(wǎng)頁可以吸引瀏覽者的注意力，讓其印象深刻。通過深入研究如何在網(wǎng)頁設(shè)計中合理運用版式設(shè)計，分析網(wǎng)頁版式設(shè)計的特點、網(wǎng)頁版式設(shè)計的原則及版式設(shè)計在網(wǎng)頁設(shè)計中的作用等相關(guān)問題。

關(guān)鍵詞:版式設(shè)計;網(wǎng)頁設(shè)計;視覺傳達

一、網(wǎng)頁設(shè)計與版式設(shè)計

(一)網(wǎng)頁設(shè)計

網(wǎng)頁設(shè)計是在互聯(lián)網(wǎng)及數(shù)字技術(shù)發(fā)展中產(chǎn)生的一種新藝術(shù)形式。它是以互聯(lián)網(wǎng)為載體，以網(wǎng)絡(luò)技術(shù)和數(shù)字技術(shù)為基礎(chǔ)，依照設(shè)計目的，遵循藝術(shù)設(shè)計規(guī)律，實現(xiàn)設(shè)計目的與功能，強調(diào)藝術(shù)與科學(xué)密切結(jié)合的一種藝術(shù)創(chuàng)造化視覺傳達活動［1］。在網(wǎng)站運營中，精美的網(wǎng)頁設(shè)計是提升網(wǎng)站知名度、增加瀏覽用戶以及推銷自身的重要載體。它是網(wǎng)絡(luò)視覺藝術(shù)的主要表現(xiàn)形式，也是當(dāng)代設(shè)計藝術(shù)的重要組成部分。

(二)版式設(shè)計

今天的人類生活到處都離不開版式設(shè)計，無論書刊、報紙、網(wǎng)頁設(shè)計，還是巨大的建筑或公共環(huán)境，都是版式設(shè)計的典型代表?？梢哉f版式設(shè)計是現(xiàn)代設(shè)計藝術(shù)的重要組成部分，是視覺傳達的重要手段［2］。版式設(shè)計是藝術(shù)專業(yè)的必修課，適用于包裝設(shè)計、書籍設(shè)計、網(wǎng)頁設(shè)計等專業(yè)課。將版式設(shè)計與網(wǎng)頁設(shè)計有機結(jié)合在一起，恰當(dāng)?shù)剡\用版式設(shè)計法則將各元素組織起來，可以使網(wǎng)頁中的各種視覺元素進行科學(xué)合理的排列與組合，兼具思維邏輯性與藝術(shù)性。通過不同的版式編排，網(wǎng)站會呈現(xiàn)各自的特色，給瀏覽者以賞心悅目的視覺享受，從而使瀏覽者印象深刻，對網(wǎng)站起到良好的宣傳作用。

(三)網(wǎng)頁設(shè)計中的版面視覺特點

網(wǎng)頁是瀏覽者通過電腦、手機等電子設(shè)備進行信息瀏覽的一種載體，在版式、文字、圖形、色彩的運用上與傳統(tǒng)紙質(zhì)媒體版式存在明顯區(qū)別。網(wǎng)頁上還包含超鏈接、按鈕等組件，因此在設(shè)計過程中需要結(jié)合瀏覽者的閱讀方式進行文字安排，如按照網(wǎng)格線進行縱向文字排列來適應(yīng)瀏覽者通過按鍵上下滾動頁面進行閱讀的方式。由于網(wǎng)頁具有跳動性，為了緩解瀏覽者的視覺疲勞，要選擇合適的字體及字號，內(nèi)容要清晰概括，符合網(wǎng)頁設(shè)計中版式的視覺特點。

(四)網(wǎng)頁設(shè)計中的版式設(shè)計原則

1．合理編排和布局

網(wǎng)頁內(nèi)容通常包含文字、圖片、鏈接、一些流動的窗口及附加廣告等，巨大的信息量經(jīng)常會讓瀏覽者感到眼花繚亂。這就需要設(shè)計者進行合理的安排和布局，使頁面上所有內(nèi)容能組成一個有機的整體，讓瀏覽者能夠進行合理閱讀。

2．突出設(shè)計主題

許多優(yōu)秀的網(wǎng)頁之所以讓瀏覽者感覺美觀大氣，主要得益于其主題鮮明、版面清晰的版式設(shè)計。從頁面結(jié)構(gòu)的分割和造型空間的確立入手安排網(wǎng)頁元素的位置，可以突出版式設(shè)計的主題效果，使瀏覽者快速地記住頁面信息。如很多購物APP的首頁上會比較明確告知瀏覽者什么物品屬于什么分類、什么貨物最吸引人等，主次分明的構(gòu)成可以方便消費者快速選購。

3．符合視覺及心理特點

瀏覽網(wǎng)頁的過程是一個對視覺元素所傳播信息的認知過程，這要求設(shè)計者在進行網(wǎng)頁設(shè)計時要將人們在視覺、心理和生理方面的特點考慮進去，并以此為依據(jù)確定各種元素間的視覺關(guān)系及瀏覽秩序［3］。同時，設(shè)計者應(yīng)根據(jù)這種特點引導(dǎo)瀏覽者的瀏覽順序，達到重點宣傳的目的。設(shè)計時需要注意保證信息的有效傳達以及突出主要信息，這樣才能吸引瀏覽者保持興趣進一步瀏覽下去。

4．適應(yīng)網(wǎng)頁的動態(tài)化特征

網(wǎng)頁由各種版塊構(gòu)成，雖然網(wǎng)頁內(nèi)容各異，但都是由一些基本版塊組成，包括Logo、導(dǎo)航條、Banner、內(nèi)容版塊、版尾等［4］。伴隨數(shù)字媒體技術(shù)的發(fā)展，網(wǎng)頁因其動態(tài)化、交互性及參與性的特點吸引越來越多的瀏覽者觀看。這主要就是利用網(wǎng)頁信息的動態(tài)更新和即時交互性，達到引導(dǎo)瀏覽、吸引瀏覽、增強參與性、互動性的目的。網(wǎng)頁信息的每一次更新，都需要設(shè)計者根據(jù)網(wǎng)站的主題、作用及各內(nèi)容版塊，配合網(wǎng)站不同階段的主題［5］，以及用戶反饋信息進行有效及時的更新，更新過程中還需要對設(shè)計方案進行調(diào)整與修改，以便滿足不同階段人們對網(wǎng)頁的審美需求。

5．色彩運用得當(dāng)

色彩在任何的設(shè)計中都有著舉足輕重的地位，運用色彩的基本原則可以總結(jié)為“總體協(xié)調(diào)，局部對比”。人們總會被鮮艷的色彩而吸引，在網(wǎng)頁設(shè)計中色彩搭配要從整體性出發(fā)，先確定主題色調(diào)，再進行上下級頁面以及各欄目的色彩搭配。通過合理變換局部設(shè)計色彩與整體版式主色調(diào)協(xié)調(diào)統(tǒng)一，以及通過不同色調(diào)來劃分不同的網(wǎng)頁內(nèi)容或欄目等，都是網(wǎng)頁設(shè)計中運用色彩提升瀏覽者關(guān)注度的一種方式。

二、網(wǎng)頁設(shè)計中各元素的版式編排關(guān)系

(一)視覺要素在網(wǎng)頁中的版式編排關(guān)系

網(wǎng)頁作為瀏覽者獲取信息的重要途徑，首先，要讓瀏覽者對觸目所及的信息有全面的了解，節(jié)省思考或查找的時間，也就是要求網(wǎng)頁的版面設(shè)計能夠具備主題明確、信息有序、構(gòu)圖合理等特點，以便瀏覽者迅速掌握相關(guān)信息。

1．網(wǎng)頁版式設(shè)計中的色彩要素

色彩可以對人們的心理產(chǎn)生相應(yīng)的影響，比如人們常見的交通信號燈，“紅燈停，綠燈行”已經(jīng)成為人們的基本認知。在互聯(lián)網(wǎng)中，色彩對人們的心理聯(lián)想作用依然存在，比如，看到明快的黃色會想到食品網(wǎng)站，看到厚重的綠色會想到環(huán)保網(wǎng)站等?；诖耍诰W(wǎng)頁的版式設(shè)計中可以恰當(dāng)?shù)匕l(fā)揮背景色、基本色、主色等的心理聯(lián)想作用，配以圖形、文字、動畫等各種網(wǎng)頁元素，統(tǒng)籌兼顧地圍繞網(wǎng)站主題突出效果。從而使網(wǎng)頁展現(xiàn)出或清新、或前衛(wèi)、或古樸、或穩(wěn)重的特點，讓瀏覽者能夠較快地感受到網(wǎng)頁所展現(xiàn)的主題，同時大面積的色彩運用還能夠起到劃分版塊的作用，使網(wǎng)頁上的內(nèi)容主次分明，主題更加明確。

2．網(wǎng)頁版式設(shè)計中的文字要素

網(wǎng)頁中的導(dǎo)航條、Banner、主標(biāo)題、副標(biāo)題、文章內(nèi)容及廣告語等文字元素［6］，是瀏覽者獲得信息的主要來源。因此，在網(wǎng)頁設(shè)計中應(yīng)更注重文字的字體、字號、文字樣式等的編排。通過風(fēng)格迥異的字體及各級標(biāo)題字體大小的設(shè)置讓網(wǎng)頁內(nèi)容顯得更有活力，同時通過各級標(biāo)題內(nèi)容字體大小的區(qū)別，也可以讓網(wǎng)頁顯得更具有條理性。比如，網(wǎng)頁中廣告部分的內(nèi)容文字就可以設(shè)計成一些藝術(shù)字體，使其更加的醒目，也可適當(dāng)?shù)丶尤胍恍┝Ⅲw、動畫等效果增加關(guān)注度;在網(wǎng)頁正文內(nèi)容的編排上就需要應(yīng)用易讀、易識別的印刷字體，同時用心規(guī)劃各版塊內(nèi)容文字的行距、字距等版式關(guān)系，使瀏覽者不會因為文字過多而產(chǎn)生厭棄感或閱讀障礙。

3．網(wǎng)頁版式設(shè)計中的圖形要素

圖形是人類早期用于交流和記錄的載體，現(xiàn)代社會由于生活節(jié)奏不斷加快，人們更愿意通過圖形來接受和表達信息。純文字語言構(gòu)成的網(wǎng)頁已經(jīng)遠遠不能滿足瀏覽者的實際要求，也無法對網(wǎng)站本身做出有效的宣傳及展示作用?？v觀各大網(wǎng)站的網(wǎng)頁都在根據(jù)自身網(wǎng)站的主營特點進行圖形化的處理，比如，資訊類站點考慮到主要功能在于瀏覽信息，所以圖片數(shù)量可以少而精;而企業(yè)宣傳網(wǎng)站就應(yīng)選擇使用大量變化多樣的圖形，以期對企業(yè)起到較好的宣傳作用;一些主題網(wǎng)站的文字導(dǎo)航條以及各類功能按鈕為了讓瀏覽者更直觀、快速地了解信息內(nèi)容也都進行了圖形化處理。

(二)網(wǎng)頁版式設(shè)計中的編排原理要素

在網(wǎng)頁的版式設(shè)計當(dāng)中，其包含在內(nèi)的文字、圖形、鏈接、按鈕等都需要進行版式編排。首先，利用視覺的整體性突出網(wǎng)頁設(shè)計的中心主體，可以利用一些圖形、線條、字體及顏色進行區(qū)分，中心主體的體現(xiàn)主要來自于版式編排的主次分明、邏輯清晰，比如網(wǎng)頁中主體內(nèi)容與背景色的關(guān)系、內(nèi)容中主要內(nèi)容和次要內(nèi)容的關(guān)系等。其次，考慮到瀏覽者視線移動的多變性，可將網(wǎng)頁主要分為“國”字型、T型、標(biāo)題正文型、左右框架型、封面型、變化型等類型。再通過視覺流程的多樣化運動過程使得網(wǎng)頁版式結(jié)構(gòu)變化更加多樣［7］。再次，要遵循版式設(shè)計中視覺的移動規(guī)律、視覺的錯視和視覺生理心理等，提升網(wǎng)頁設(shè)計的視覺效果使之能被更多的瀏覽者所喜愛。

(三)網(wǎng)頁版式設(shè)計的形式美法則

網(wǎng)頁從根本上來說是由字符、線條、色彩、空白、圖片、符號等元素組合起來的供瀏覽者獲取信息的頁面，即網(wǎng)頁中的視覺元素都是點、線、面、體的構(gòu)成形態(tài)。其在應(yīng)用過程中大多是根據(jù)內(nèi)容的主次關(guān)系來有針對性地使用形式美的法則，通過黃金比例分割、對比調(diào)和、節(jié)奏與韻律等手法使網(wǎng)頁在視覺上給瀏覽者以整體、秩序、層級清晰的感受。比如，可以利用人們視覺流程中的最佳視域作為中心來凸顯主體要素，構(gòu)成多視點、多層次的多維立體網(wǎng)頁空間，使網(wǎng)頁的視覺元素與識別符號更整體、更和諧、有效地傳達信息，深化網(wǎng)頁的媒介性和變化性。

三、結(jié)語

互聯(lián)網(wǎng)的飛速發(fā)展使人們越來越重視網(wǎng)頁設(shè)計的視覺效果，可以說網(wǎng)頁的美觀與否，與其版式設(shè)計有著直接的關(guān)聯(lián)。因此，在進行網(wǎng)頁設(shè)計時，設(shè)計者需要遵循版式設(shè)計的原則，合理運用版式設(shè)計方法，協(xié)同視覺語言、圖形語言及視覺因素原理的應(yīng)用，設(shè)計出更加突出主題、生動有趣、視覺沖擊力強的優(yōu)秀網(wǎng)頁。

【參考文獻】

［1］薛文勇．淺談網(wǎng)頁設(shè)計中的版式設(shè)計［J］．西部皮革，2017(18):79．

［2］陳江龍．淺談平面設(shè)計中版式設(shè)計的構(gòu)成與應(yīng)用［J］．大眾文藝，2011(2):73．

［3］樊歆．版式設(shè)計在網(wǎng)頁藝術(shù)設(shè)計中的分析［J］．遼寧絲綢，2017(4):40－41．

作者：張帆 單位：哈爾濱職業(yè)技術(shù)學(xué)院