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

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

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

關(guān)鍵詞:版式設(shè)計(jì);網(wǎng)頁(yè)設(shè)計(jì);視覺(jué)傳達(dá)

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

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

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

(二)版式設(shè)計(jì)

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

(三)網(wǎng)頁(yè)設(shè)計(jì)中的版面視覺(jué)特點(diǎn)

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

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

1．合理編排和布局

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

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

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

3．符合視覺(jué)及心理特點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、結(jié)語(yǔ)

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

【參考文獻(xiàn)】

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

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

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

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