網(wǎng)頁界面設(shè)計研究

吳曉陽 趙 熙

浙江樹人大學(xué)藝術(shù)學(xué)院，浙江 杭州 310053

?

網(wǎng)頁界面設(shè)計研究

吳曉陽*趙 熙*

浙江樹人大學(xué)藝術(shù)學(xué)院，浙江 杭州 310053

一、網(wǎng)頁界面設(shè)計風(fēng)格定位

網(wǎng)頁界面是指網(wǎng)頁靜止下來的頁面樣式。也是在視覺設(shè)計之初，最先考慮的部分。網(wǎng)站界面設(shè)計的優(yōu)劣將直接影響訪客對該網(wǎng)站的整體印象。只有動畫的網(wǎng)頁是不夠的，畢竟圖文的編排效果、網(wǎng)站的整體視覺效果，才是重點。只有對靜態(tài)的頁面效果有所把握，精心設(shè)計，結(jié)合了相應(yīng)的動態(tài)后，才能使網(wǎng)站動靜皆宜。網(wǎng)頁界面設(shè)計首先需要對網(wǎng)站的風(fēng)格進行定位。

(一)影像風(fēng)格

影像風(fēng)格是一種利用攝影圖像進行加工處理的手法，有很強寫實效果，直觀而簡明。[1]這一類風(fēng)格的網(wǎng)站有很多。特別是需要強調(diào)突出產(chǎn)品特點的網(wǎng)站，如服飾類、家居類的網(wǎng)站等多采用這種風(fēng)格。

(二)三維風(fēng)格

三維風(fēng)格是指利用三維技術(shù)來制作網(wǎng)站場景和網(wǎng)站動畫，頁面所呈現(xiàn)的效果是三維立體的風(fēng)格。這種風(fēng)格形式新穎獨特，是當(dāng)下比較創(chuàng)新的網(wǎng)頁設(shè)計形式。

(三)矢量插圖風(fēng)格

矢量插圖設(shè)計風(fēng)格是近年來比較流行的，主要是運用矢量繪圖軟件來設(shè)計矢量圖形，再編排頁面。由于矢量軟件如Illustrator、Fireworks等制作出來的圖形能夠與網(wǎng)頁制作軟件Flash很便捷地結(jié)合，從而生成動畫，因此在網(wǎng)頁設(shè)計中應(yīng)用非常廣泛。矢量圖形的圖案裝飾效果強，可以設(shè)計得很抽象，也可以很具象。[2]這類網(wǎng)頁通常有輕盈精巧的效果。

(四)復(fù)古風(fēng)格

這種風(fēng)格古典而懷舊。很多影片推廣網(wǎng)站采用這種設(shè)計風(fēng)格，來配合影片的懷舊基調(diào)。在設(shè)計界面時，多應(yīng)用Photoshop、Illustrator等軟件來繪制細(xì)節(jié)，力求達到仿真寫實的效果。

二、網(wǎng)頁界面中的編排設(shè)計

網(wǎng)頁設(shè)計中的編排方法基本遵循平面設(shè)計中的編排原理，網(wǎng)頁編排效果的好壞將直接影響整體網(wǎng)站的視覺效果，所以掌握平面設(shè)計中的編排方法是十分重要的。在進行網(wǎng)頁設(shè)計編排時有以下幾種規(guī)律：

(一)網(wǎng)格式

網(wǎng)格式的編排形式，是遵循網(wǎng)格分割的原理，來分割頁面，區(qū)分內(nèi)容的。這種形式的編排使頁面內(nèi)容清晰、有條理，特別適用于官方門戶類網(wǎng)站等頁面信息內(nèi)容較多的網(wǎng)站。

其中網(wǎng)格式又包含：以水平分割為主的網(wǎng)格、以垂直分割為主的網(wǎng)格。

1.以水平分割為主的網(wǎng)格

采用水平分割形式，是按照水平方向來編排圖文內(nèi)容，這網(wǎng)頁編排中常見的形式，十分直觀。

2.以垂直分割為主的網(wǎng)格

采用垂直分割形式，是按照垂直方向來編排圖文內(nèi)容，這也是網(wǎng)頁編排中常見的形式，具有簡潔、大方的視覺效果。

(二)自由式

自由式的編排形式，比較自由、靈活、隨意。與flash動態(tài)效果配合能夠生成有趣的動畫。

(三)綜合式

綜合式的編排設(shè)計，綜合了以上兩種形式，版面均衡而又隨意。

三、動態(tài)效果設(shè)計

(一)導(dǎo)航條的交互設(shè)計

導(dǎo)航條是由網(wǎng)站中一系列的欄目按鈕組成的菜單組，用戶通過點擊導(dǎo)航條來到達所要瀏覽的頁面。在進行設(shè)計時，既要考慮到其靜態(tài)的視覺效果也要充分考慮其動態(tài)的交互效果。

1.對稱式導(dǎo)航條設(shè)計

對稱式導(dǎo)航條是將其中的按鈕組進行有序的對稱排列，這種設(shè)計具有清晰、易辨的優(yōu)點?？梢院芎玫厝诤线M后臺模版中，考慮效率優(yōu)先。特別是針對眾多復(fù)雜信息而進行設(shè)計，對稱式導(dǎo)航條設(shè)計可以使之條理清楚。這種設(shè)計形式雖然保守，但卻十分適用于中型、大型網(wǎng)站、電子讀物等。

目前，由于結(jié)合了Flash技術(shù)、Java編程技術(shù)等交互技術(shù)，對稱式按鈕的動態(tài)更加豐富了，有下拉式菜單、上浮菜單、游標(biāo)菜單、展開式菜單等。同時，在設(shè)計對稱式導(dǎo)航條時，應(yīng)注意避免呆板、單調(diào)、以及過于對稱。應(yīng)多動態(tài)效果的細(xì)節(jié)設(shè)計。

2.不對稱導(dǎo)航條設(shè)計

不對稱導(dǎo)航條設(shè)計是將按鈕組進行不對稱編排。這類設(shè)計具有靈活、有趣、富有吸引力等優(yōu)點。在目前的技術(shù)條件下，這類按鈕設(shè)計很難套用統(tǒng)一的模版。一般多適用于小型網(wǎng)站、互動裝置等。以影片《幽靈公主》的網(wǎng)站導(dǎo)航為例，結(jié)合影片中的角色來進行設(shè)計，將按鈕設(shè)計成片中的角色，當(dāng)鼠標(biāo)經(jīng)過時，角色會隨之互動。名為comentrigo的服裝網(wǎng)站，采用輕盈的矢量花朵來作為網(wǎng)站的導(dǎo)航條，與清新的攝影圖片相映成趣。點擊每一個花朵按鈕時，由花朵中抽出條條細(xì)絲，牽引著每一個欄目頁面的出現(xiàn)。Insearch網(wǎng)站的導(dǎo)航菜單設(shè)計為一扇扇門，富有創(chuàng)意。當(dāng)鼠標(biāo)經(jīng)過門前，門就會開啟，引導(dǎo)瀏覽者進入下一個頁面。

3.按鈕的互動設(shè)計

對于構(gòu)成導(dǎo)航條的重要元素——按鈕，我們在設(shè)計其互動效果時要充分考慮，按鈕的形態(tài)、樣式，按鈕的動畫等等。

(二)頁面間鏈接的交互設(shè)計

當(dāng)用戶點擊按鈕時，網(wǎng)站的頁面之間或軟件界面的不同窗口之間會出現(xiàn)轉(zhuǎn)跳，這個過程可以加入豐富的動態(tài)效果。這種動態(tài)效果是導(dǎo)航菜單設(shè)計不可分割的一部分，也是特殊的一部分，它發(fā)生在點擊按鈕之后，下一頁面呈現(xiàn)靜態(tài)之前。在網(wǎng)站設(shè)計中，設(shè)計師通過對頁面間鏈接效果的精心設(shè)計，能夠與訪客形成更好的互動，增強網(wǎng)站的交互功能。如網(wǎng)站設(shè)計作品：Dunun公司的網(wǎng)站，當(dāng)瀏覽者依次點擊導(dǎo)航按鈕時，頁面也呈現(xiàn)出仿如電影鏡頭般向前推進的動畫，設(shè)計師很巧妙地將影視中的鏡頭語言應(yīng)用于網(wǎng)站頁面中，是一種創(chuàng)新之舉。

四、網(wǎng)頁界面設(shè)計的發(fā)展

隨著計算機技術(shù)的不斷進步，互聯(lián)網(wǎng)網(wǎng)絡(luò)速度的大幅提升，在越來越多的新技術(shù)的支撐下，網(wǎng)頁界面設(shè)計將會呈現(xiàn)更加多元化的視覺面貌，對界面設(shè)計師也提出了更高更具有挑戰(zhàn)性的設(shè)計要求。

[1]趙侃.用戶體驗設(shè)計——網(wǎng)頁界面設(shè)計的重中之重[J].藝術(shù)與設(shè)計(理論)，2010(9)：55-57.

[2]林鸰，陳歌.扁平化風(fēng)格在GUI設(shè)計中的應(yīng)用淺析[J].設(shè)計，2014(9)：105-107.

吳曉陽(1994-)，女，漢族，浙江金華人，浙江樹人大學(xué)，本科，主攻視覺傳達藝術(shù)設(shè)計方向；趙熙(1982-)，女，江蘇揚州人，碩士，浙江樹人大學(xué)，講師，主要從事數(shù)字媒體交互設(shè)計、動畫理論研究。

TP

A

1006-0049-(2017)08-0272-01