網頁界面設計研究

吳曉陽 趙 熙

浙江樹人大學藝術學院，浙江 杭州 310053

?

網頁界面設計研究

吳曉陽*趙 熙*

浙江樹人大學藝術學院，浙江 杭州 310053

一、網頁界面設計風格定位

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

(一)影像風格

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

(二)三維風格

三維風格是指利用三維技術來制作網站場景和網站動畫，頁面所呈現的效果是三維立體的風格。這種風格形式新穎獨特，是當下比較創新的網頁設計形式。

(三)矢量插圖風格

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

(四)復古風格

這種風格古典而懷舊。很多影片推廣網站采用這種設計風格，來配合影片的懷舊基調。在設計界面時，多應用Photoshop、Illustrator等軟件來繪制細節，力求達到仿真寫實的效果。

二、網頁界面中的編排設計

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

(一)網格式

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

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

1.以水平分割為主的網格

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

2.以垂直分割為主的網格

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

(二)自由式

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

(三)綜合式

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

三、動態效果設計

(一)導航條的交互設計

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

1.對稱式導航條設計

對稱式導航條是將其中的按鈕組進行有序的對稱排列，這種設計具有清晰、易辨的優點。可以很好地融合進后臺模版中，考慮效率優先。特別是針對眾多復雜信息而進行設計，對稱式導航條設計可以使之條理清楚。這種設計形式雖然保守，但卻十分適用于中型、大型網站、電子讀物等。

目前，由于結合了Flash技術、Java編程技術等交互技術，對稱式按鈕的動態更加豐富了，有下拉式菜單、上浮菜單、游標菜單、展開式菜單等。同時，在設計對稱式導航條時，應注意避免呆板、單調、以及過于對稱。應多動態效果的細節設計。

2.不對稱導航條設計

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

3.按鈕的互動設計

對于構成導航條的重要元素——按鈕，我們在設計其互動效果時要充分考慮，按鈕的形態、樣式，按鈕的動畫等等。

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

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

四、網頁界面設計的發展

隨著計算機技術的不斷進步，互聯網網絡速度的大幅提升，在越來越多的新技術的支撐下，網頁界面設計將會呈現更加多元化的視覺面貌，對界面設計師也提出了更高更具有挑戰性的設計要求。

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

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

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

TP

A

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