吳曉陽 趙 熙

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

?

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

吳曉陽*趙 熙*

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)頁設(shè)計(jì)中的編排方法基本遵循平面設(shè)計(jì)中的編排原理，網(wǎng)頁編排效果的好壞將直接影響整體網(wǎng)站的視覺效果，所以掌握平面設(shè)計(jì)中的編排方法是十分重要的。在進(jìn)行網(wǎng)頁設(shè)計(jì)編排時(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動(dòng)態(tài)效果配合能夠生成有趣的動(dòng)畫。

(三)綜合式

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

三、動(dòng)態(tài)效果設(shè)計(jì)

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

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

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

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

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

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

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

3.按鈕的互動(dòng)設(shè)計(jì)

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

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

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

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

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

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

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

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

TP

A

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