網(wǎng)頁視覺設(shè)計(jì)的形式感表現(xiàn)

李靜

摘 要：網(wǎng)頁視覺設(shè)計(jì)關(guān)系到網(wǎng)站的用戶體驗(yàn)。本文從整體視覺上談?wù)撊绾问菇缑嬖O(shè)計(jì)增強(qiáng)形式感，以及如何適應(yīng)當(dāng)前快節(jié)奏下用戶的視覺需求。本文以用戶為基準(zhǔn)，探討一種基于用戶體驗(yàn)的網(wǎng)頁視覺設(shè)計(jì)的技巧和方法。

關(guān)鍵詞：視覺設(shè)計(jì)；形式感 ；用戶體驗(yàn)

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1005-5312（2016）24-0170-01

一、網(wǎng)頁視覺設(shè)計(jì)的發(fā)展趨勢

網(wǎng)頁界面設(shè)計(jì)可以向傳統(tǒng)的平面設(shè)計(jì)學(xué)習(xí)，如雜志版面。因?yàn)閭鹘y(tǒng)的平面設(shè)計(jì)有著較為悠久的歷史，其發(fā)展較為成熟。由于當(dāng)前網(wǎng)絡(luò)時(shí)代的硬件及軟件的日趨完善，網(wǎng)頁設(shè)計(jì)環(huán)境較為自由，表現(xiàn)形式逐漸不再受束縛性，因此，可以通過向傳統(tǒng)平面設(shè)計(jì)學(xué)習(xí)來增強(qiáng)網(wǎng)頁界面的形式感。

（一）扁平化設(shè)計(jì)趨勢

扁平化設(shè)計(jì)也就是摒棄一切裝飾效果。所有的元素的邊界都干凈利落，沒有任何裝飾。扁平化的發(fā)展趨勢有兩個(gè)必然原因。第一，從用戶角度來說，由于數(shù)碼化程度越來越高，審美疲勞逐漸出現(xiàn)，用戶越來越需要簡潔的形式來完成自己的操作。第二，從技術(shù)層面，由于軟件更新迅速，與其花更多時(shí)間制作擬物化效果，不如在交互與技術(shù)層面多花時(shí)間做出創(chuàng)新，從而更好的吸引用戶。

（二）版式的節(jié)奏感表現(xiàn)

版式節(jié)奏感是在一個(gè)畫面中強(qiáng)調(diào)和突出重點(diǎn)信息，強(qiáng)調(diào)信息層級和視覺流程。主要從三點(diǎn)來表現(xiàn)，因?yàn)榫W(wǎng)頁中傳遞信息的主要內(nèi)容是文字，所以可以從文字的大小、多少和粗細(xì)來表現(xiàn)。

1.大和小的配合?？鋸埖拇笞趾托∽值呐浜鲜褂檬请s志版式設(shè)計(jì)的一大特點(diǎn)，它使閱讀和視覺定位更加明確，適合當(dāng)前快速閱讀的信息時(shí)代。在網(wǎng)頁設(shè)計(jì)中也可以摒棄傳統(tǒng)的網(wǎng)頁設(shè)計(jì)的版式，采用大字與小字的配合，增強(qiáng)版面的節(jié)奏感。

2.多與少的配合。多與少的配合也就是常說的留白。留白并不代表一定要用白色，而是預(yù)留出一些范圍來組織頁面空間中的元素，組織頁面中的細(xì)節(jié)。比如谷歌引擎搜索及谷歌產(chǎn)品，都較好的運(yùn)用了留白的表現(xiàn)手法。

3.粗與細(xì)的配合。粗與細(xì)的配合主要體現(xiàn)在網(wǎng)頁字體的高磅數(shù)和低磅數(shù)的配合上，以及留白處的細(xì)微設(shè)計(jì)中。網(wǎng)頁設(shè)計(jì)之所以要向雜志學(xué)習(xí)，是因?yàn)殡s志中對于字體的巧妙處理。在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)要對所處理的文字內(nèi)容進(jìn)行歸納整理，先理清段落之間的關(guān)系，比如并列關(guān)系、流程關(guān)系，每段文字之間是否有相同的結(jié)構(gòu)或相似的數(shù)據(jù)信息。之后要分析每個(gè)段落的結(jié)構(gòu)，提取每個(gè)信息段落里的主要元素。

（三）背景大圖的巧妙運(yùn)用

超大圖片是雜志設(shè)計(jì)中常見的表現(xiàn)方式，在這個(gè)讀圖的時(shí)代，圖片能夠更好的觸動(dòng)用戶的神經(jīng)。在網(wǎng)頁視覺設(shè)計(jì)中，可以讓整個(gè)視覺主打一張完美圖片，交互和文字信息較為簡單，圖片尺寸根據(jù)寬屏大小自適應(yīng)。交互菜單和文字信息通常默認(rèn)系統(tǒng)字體，通過大小變化和位移來進(jìn)行寬屏自適應(yīng)的。在使用背景大圖時(shí)需要注重圖片的質(zhì)量以及圖片與內(nèi)容的協(xié)調(diào)，如果配合文字使用，就要對文字所處的位置進(jìn)行局部模糊、紋理色彩弱化、單色化等處理，或者在文字下方給予底色或半透明底色處理，拉開與背景的差距。

二、網(wǎng)頁視覺設(shè)計(jì)的形式感表現(xiàn)技巧

（一）源于生活的設(shè)計(jì)靈感

將生活中的事物運(yùn)用于設(shè)計(jì)之中，比如生活中的書本、桌子、足球、籃球等。這些事物通常具有豐富形態(tài)和和延伸意義。我們可以用這些事物來表達(dá)特定的主題。當(dāng)我們拿到一個(gè)設(shè)計(jì)主題時(shí)可以通過它的生活原貌來激發(fā)靈感。比如，做一個(gè)足球的網(wǎng)站?？梢赃x擇運(yùn)用足球這個(gè)實(shí)體作為主視覺，然后通過簡化事物的手法對其進(jìn)行提煉，在保留足球特征的情況下去除多余的元素，目的是為信息的呈現(xiàn)騰出更多的空間；接下來根據(jù)提煉出來的足球形態(tài)對信息內(nèi)容進(jìn)行規(guī)劃；最后，網(wǎng)頁內(nèi)容基本呈現(xiàn)，可以適當(dāng)添加一些氣氛和視覺的補(bǔ)充，甚至可以在不干擾信息呈現(xiàn)的情況下還原足球的一些特征，使整個(gè)頁面表現(xiàn)力更強(qiáng)。

（二）藝術(shù)化的殘缺之美

殘缺之美是一種推翻正常視覺習(xí)慣以達(dá)到情感集中并強(qiáng)化視覺沖擊力的方法。非常規(guī)的視覺效果會(huì)給人們情感上的不平衡并產(chǎn)生沖動(dòng)。因此，可以采用藝術(shù)話的殘缺美給予畫面一種特殊的視角并帶給用戶更強(qiáng)烈形式美感及視覺感受。這種殘缺之美可以是缺口的酒瓶，斷臂的維納斯，被踩扁的易拉罐等，在網(wǎng)頁視覺設(shè)計(jì)中，可通過選取局部，去掉局部及替換局部來實(shí)現(xiàn)。

（三）巧妙運(yùn)用逆向思維

在設(shè)計(jì)過程中，設(shè)計(jì)者通常會(huì)聽到這個(gè)部分再放大一些，色彩鮮艷一些，主題突出一些。網(wǎng)頁設(shè)計(jì)中通常會(huì)有內(nèi)容較少的頁面和內(nèi)容較多的頁面，其中，內(nèi)容較少的頁面可以通過留白來豐富頁面層次，使主要內(nèi)容形成焦點(diǎn)；內(nèi)容較多的頁面可以通過加深層級關(guān)系或通過長頁面來表現(xiàn)。長頁面是在用戶不跳轉(zhuǎn)的情況下通過滾動(dòng)獲得所有的信息，它適合主題相對連貫的內(nèi)容，或者在設(shè)計(jì)上使用連貫的創(chuàng)意以保證持續(xù)閱讀。

三、結(jié)語

網(wǎng)頁視覺設(shè)計(jì)是網(wǎng)站建設(shè)過程中的重要內(nèi)容，其視覺設(shè)計(jì)方法會(huì)隨著科技的發(fā)展而不斷變化，無論如何變化要始終以用戶為中心，滿足用戶的需求，在視覺上要注重網(wǎng)頁界面設(shè)計(jì)的形式感表現(xiàn)，從而給用戶營造一種愉悅的視覺環(huán)境，讓用戶達(dá)到身心的享受和共鳴。

參考文獻(xiàn)：

[1]李曉寧.網(wǎng)頁設(shè)計(jì)中視覺要素的運(yùn)用研究[D].沈陽：沈陽建筑大學(xué)，2012.