試論網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)

金文玥 鄧岳辰

摘 要：版式設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)的關(guān)鍵環(huán)節(jié)之一，現(xiàn)代互聯(lián)網(wǎng)的快速發(fā)展和廣泛應(yīng)用，使相關(guān)設(shè)計(jì)工作得到了廣泛重視?；诖?，本文以網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)作為分析重點(diǎn)，分解就網(wǎng)頁設(shè)計(jì)中版式設(shè)計(jì)的原則和方法展開分析，給出引導(dǎo)性、美觀性、功能性三大原則，以及內(nèi)容布局明確、色彩搭配合理、多元素的綜合應(yīng)用等具體方法，以期通過分析明晰理論，為后續(xù)具體工作的開展提供參考。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；版式設(shè)計(jì)；內(nèi)容布局；色彩搭配

前言：版式設(shè)計(jì)（Format design）是視覺傳達(dá)的重要手段，是指設(shè)計(jì)人員根據(jù)設(shè)計(jì)主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片、及色彩等視覺傳達(dá)信息要素，進(jìn)行有效組合排列的設(shè)計(jì)行為。版式設(shè)計(jì)已經(jīng)延伸到網(wǎng)頁設(shè)計(jì)（web design）中，成為影響后者效果的核心因素。本文針對網(wǎng)頁設(shè)計(jì)中版式設(shè)計(jì)的原則和方法進(jìn)行分析。

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

1.1引導(dǎo)性

版式設(shè)計(jì)對網(wǎng)頁設(shè)計(jì)的影響體現(xiàn)在多個(gè)方面，為求有效發(fā)揮版式設(shè)計(jì)價(jià)值，首先需要強(qiáng)調(diào)其引導(dǎo)性。由于大部分網(wǎng)頁內(nèi)容往往是多樣的，用戶進(jìn)入網(wǎng)頁后，不可能同步接受所有服務(wù)、接觸所有內(nèi)容，這意味著網(wǎng)頁必須帶有引導(dǎo)性，使用戶能夠清晰的進(jìn)入對應(yīng)通道。如知名搜索引擎谷歌，只在頁面中央位置放置一處搜索欄，用戶能夠得到十分有效的引導(dǎo)，交互性極為突出，至今被認(rèn)為是網(wǎng)頁版式設(shè)計(jì)的經(jīng)典之作。其他網(wǎng)頁的版式設(shè)計(jì)也應(yīng)遵循引導(dǎo)性優(yōu)先原則。

1.2美觀性

美觀性是現(xiàn)代網(wǎng)頁設(shè)計(jì)的基本要求，這也和版式設(shè)計(jì)密切相關(guān)。現(xiàn)代互聯(lián)網(wǎng)產(chǎn)業(yè)發(fā)達(dá)，網(wǎng)頁幾乎存在于生活中的每一個(gè)角落，如用戶嘗試通過網(wǎng)絡(luò)商城購買某種商品，當(dāng)進(jìn)入某一網(wǎng)頁時(shí)，網(wǎng)頁內(nèi)部雜亂無章，布局混亂，產(chǎn)品色彩、外觀等圖片質(zhì)量較差，用戶很可能快速喪失購買興趣。反之，如果網(wǎng)頁版式設(shè)計(jì)合理，條例清晰、色彩搭配得到，用戶在感官上不會(huì)產(chǎn)生抵觸情緒，更愿意進(jìn)行商品挑選和購買，美觀性在版式設(shè)計(jì)中的價(jià)值可見一斑[1]。

1.3功能性

功能性是網(wǎng)頁設(shè)計(jì)中版式設(shè)計(jì)的基本要求，也是版式設(shè)計(jì)的核心追求。所謂功能性，是指通過版式設(shè)計(jì)能夠?qū)⒕W(wǎng)頁的核心元素突出表現(xiàn)出來，同時(shí)將其他附屬元素、功能元素分布在合理的區(qū)域。如進(jìn)入某游戲網(wǎng)站首頁，該網(wǎng)站的中央位置，為“游戲下載”，也即網(wǎng)站的核心功能模塊，用戶可以在不經(jīng)仔細(xì)觀察的情況下一瞬間發(fā)現(xiàn)該模塊，在“游戲下載”模塊周邊，則包括“賬號(hào)注冊”、“官方活動(dòng)”、“游戲商城”、“職業(yè)介紹”等內(nèi)容，主次搭配合理，版式設(shè)計(jì)也較為成功。

2.網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)方法

2.1內(nèi)容布局明確

網(wǎng)頁設(shè)計(jì)中，版式設(shè)計(jì)的基本方法是內(nèi)容布局的明確，在設(shè)計(jì)的過程中，使不同功能模塊占據(jù)不同的區(qū)域，有利于使用者快速獲取服務(wù)，提升交互性。如某醫(yī)院門戶網(wǎng)站建設(shè)，在布局上，中央位置可設(shè)計(jì)為醫(yī)院最具吸引力、能力最強(qiáng)調(diào)的某個(gè)部門介紹，假定醫(yī)院善于治療眼科疾病，可在版面設(shè)計(jì)時(shí)，于中央位置放置醒目廣告“XX眼科，一流技術(shù)”等，周邊位置則放置患者回饋信息、醫(yī)院介紹、服務(wù)熱線、在線咨詢等內(nèi)容和入口。存在需求的用戶進(jìn)入網(wǎng)站后，由于網(wǎng)站布局明確，用戶可以得到有效引導(dǎo)，快速得到服務(wù)。如果在中央位置放置醫(yī)院介紹，看似并無不妥，但由于網(wǎng)頁信息復(fù)雜，患者進(jìn)入網(wǎng)站后，無法有效甄別網(wǎng)站嘗試表達(dá)的核心信息，版式設(shè)計(jì)實(shí)際上是失敗的。內(nèi)容布局的明確，可看做是網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)的基本方法。

2.2色彩搭配合理

色彩搭配是網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)的附加要求，主要強(qiáng)調(diào)通過有機(jī)組合引起使用者的興趣，使網(wǎng)頁的重點(diǎn)內(nèi)容得到突出。色彩搭配的基本原則是主色調(diào)的統(tǒng)一和個(gè)別區(qū)域的特異性變化。所謂主色調(diào)的統(tǒng)一，是指板式設(shè)計(jì)的過程中，總體色彩一般不宜存在復(fù)雜變化，以免用戶產(chǎn)生眼花繚亂的感覺，同時(shí)，如果網(wǎng)頁采用冷色調(diào)，應(yīng)保持內(nèi)部的基本一致，如果出現(xiàn)色彩變化，必須是合理的、必要的，也即個(gè)別區(qū)域的特異性變化。如網(wǎng)站嘗試介紹某款產(chǎn)品，底色為擺設(shè)，該產(chǎn)品所在區(qū)域，板式設(shè)計(jì)可以為紅色、黑色等醒目顏色，用戶能夠在進(jìn)入網(wǎng)站的一瞬間被產(chǎn)品所在區(qū)域吸引，網(wǎng)頁嘗試表達(dá)的主題也能借此得到突出[2]。

2.3多元素的綜合應(yīng)用

網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)，并不是僵化的、結(jié)構(gòu)化的，與傳統(tǒng)紙媒相比，網(wǎng)頁的特點(diǎn)之一是能容納更多的元素，這為版式設(shè)計(jì)提供了更多的可操作空間，如動(dòng)靜元素的綜合應(yīng)用。靜態(tài)元素包括文字、普通圖片以及顏色等等，主要傳遞基本信息；動(dòng)態(tài)元素包括交互部分、動(dòng)態(tài)圖片和小視頻等。在網(wǎng)頁設(shè)計(jì)中，可以版式設(shè)計(jì)作為手段，利用動(dòng)態(tài)元素傳遞核心信息，如游戲宣傳網(wǎng)頁，將宣傳視頻作為動(dòng)態(tài)元素，展示游戲的核心賣點(diǎn)，用戶可以被該元素吸引，即便網(wǎng)頁內(nèi)容復(fù)雜多樣，動(dòng)態(tài)元素依然可保持自身吸引力。游戲介紹等內(nèi)容，則以靜態(tài)元素表達(dá)，作為宣傳視頻的輔助，提升版式設(shè)計(jì)效果。

2.4明確受眾群體

不同網(wǎng)頁的受眾群體不同，這要求網(wǎng)頁設(shè)計(jì)、版式設(shè)計(jì)必須遵循用戶導(dǎo)向基本原則。很多失敗的網(wǎng)頁、版式設(shè)計(jì)，都是因?yàn)檫^多考慮了設(shè)計(jì)者感受，無法起到強(qiáng)化功能性的基本作用。如某網(wǎng)頁為購物網(wǎng)站，主打產(chǎn)品為嬰幼兒用品，設(shè)計(jì)上應(yīng)強(qiáng)調(diào)表達(dá)產(chǎn)品的突出功能，利用大版面展示益智玩具對幼兒的智力開發(fā)作用、奶粉的營養(yǎng)價(jià)值等信息。如果設(shè)計(jì)者以自身需要為視角，可能導(dǎo)致版面展示內(nèi)容偏離主題，過多展示產(chǎn)品而非產(chǎn)品價(jià)值，這種設(shè)計(jì)同樣是不成功的。應(yīng)考慮受眾的心理需要，給定自身產(chǎn)品的優(yōu)勢，才能使網(wǎng)頁和版面設(shè)計(jì)具有積極價(jià)值，如在展示益智玩具時(shí)，搭配兒童考試得分100分、創(chuàng)造了更具想象力的圖畫等等，用戶可以直觀感受到產(chǎn)品的價(jià)值，而且能夠定向了解“產(chǎn)品價(jià)值”來自網(wǎng)站宣傳的日益玩具，版式設(shè)計(jì)的作用得以實(shí)現(xiàn)。

總結(jié)：綜上，網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)與紙媒不同，需要發(fā)揮其自身優(yōu)勢，基本原則包括引導(dǎo)性、美觀性、功能性。以上述原則作為框架，進(jìn)行版式設(shè)計(jì)，還應(yīng)強(qiáng)調(diào)設(shè)計(jì)方法的有效性。考慮到網(wǎng)頁本身特點(diǎn)，應(yīng)做到內(nèi)容布局明確、色彩搭配合理，同時(shí)做好多元素的綜合應(yīng)用，提升板式設(shè)計(jì)的靈活性，針對受眾群體做好分析，也能保證版式設(shè)計(jì)的合理性和吸引力，提升版式設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)的總體效果。

參考文獻(xiàn)

[1]劉夢琪，史啟新.網(wǎng)頁設(shè)計(jì)中版式編排的視覺傳達(dá)研究[J].赤峰學(xué)院學(xué)報(bào)（自然科學(xué)版），2014，30（11）：26-27.

[2]劉石，李婷婷.網(wǎng)頁設(shè)計(jì)中的版式設(shè)計(jì)——CDIO模式下以項(xiàng)目為導(dǎo)向的網(wǎng)頁設(shè)計(jì)課程教學(xué)實(shí)踐[J].藝術(shù)科技，2014，27（02）：109.

（作者單位：大連工業(yè)大學(xué)藝術(shù)與信息工程學(xué)院傳媒系）