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

金文玥 鄧岳辰

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

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

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

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

1.1引導(dǎo)性

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

1.2美觀性

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

1.3功能性

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

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

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

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

2.2色彩搭配合理

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

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

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

2.4明確受眾群體

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

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

參考文獻

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

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

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