隨著信息化的深入,網(wǎng)頁成為人們?yōu)g覽信息、獲取信息、放眼世界的主要窗口之一。在傳統(tǒng)網(wǎng)頁的界面設(shè)計中,人們認為網(wǎng)頁界面設(shè)計就是美工,而美工就是單純對網(wǎng)頁進行裝飾。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展與普及,網(wǎng)頁界面設(shè)計的技術(shù)在不斷的進步,設(shè)計的理念也在不斷的更新,網(wǎng)頁界面設(shè)計不再是單純的視覺設(shè)計,而是將視覺設(shè)計與人的行為習慣、生活方式、心理體驗等結(jié)合在一起的設(shè)計,基于用戶體驗的網(wǎng)頁UI設(shè)計是當前研究的熱點。

一、網(wǎng)頁UI設(shè)計及用戶體驗

UI即User Interface(用戶界面)的簡稱,指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。網(wǎng)頁UI設(shè)計用戶體驗(UserExperience,簡稱UE)則是一種純主觀在用戶使用產(chǎn)品過程中建立起來的感受。由于生活習慣、文化背景、行為方式及心理體驗等不同,用戶體驗產(chǎn)品時會有不同的感受,一個好的UI設(shè)計要能充分滿足大眾的需求,使用戶在體驗過程中都能心情愉悅、操作流暢、交互高效。

就網(wǎng)頁UI設(shè)計而言,用戶瀏覽網(wǎng)頁的需求是什么?抽象出來可以歸納為兩點:一瀏覽信息,二操作數(shù)據(jù)。這里的數(shù)據(jù)是指在數(shù)據(jù)庫中躺著的數(shù)據(jù),用戶在單純?yōu)g覽信息時,不會對頁面背后的“數(shù)據(jù)”造成任何操作,但用戶進行點擊鏈接、跳轉(zhuǎn)頁面和處理信息時,就要和頁面背后的數(shù)據(jù)進行交互。所以,在做網(wǎng)頁UI設(shè)計時候主要滿足于用戶的這兩方面的需求,第一是用戶在瀏覽信息時候,要有一個賞心悅目的界面,即網(wǎng)頁界面的視覺設(shè)計要美觀。第二是用戶在操作數(shù)據(jù)時候要高效,即網(wǎng)頁界面的交互設(shè)計靈活。

二、網(wǎng)頁界面視覺設(shè)計

愛美之心人皆有之,漂亮的網(wǎng)頁界面能吸引瀏覽者的眼球、提高網(wǎng)頁的瀏覽量。傳統(tǒng)網(wǎng)頁美工設(shè)計,更注重網(wǎng)頁的布局以及網(wǎng)頁的顏色搭配,換言之,就是重在設(shè)計網(wǎng)頁平面效果圖和以及對網(wǎng)頁進行裝飾。隨著人們生活節(jié)奏的加快,快餐文化日漸豐富,僅靠傳統(tǒng)網(wǎng)頁美工已不能適應(yīng)當今網(wǎng)頁發(fā)展的需要。那么,如何讓你的網(wǎng)站跟上時代的步伐,滿足當今用戶的需求呢?

從用戶體驗出發(fā):什么東西能讓我們從電腦屏幕上看到接近于現(xiàn)實世界的東西?是視覺吸引,視覺吸引是非常有效的提示工具,通常在用戶第一次打開某個應(yīng)用,或進入某個新的界面時出現(xiàn)。簡單的視覺吸引能扭轉(zhuǎn)乾坤,把令人沮喪萬分的第一次使用經(jīng)歷變成滿意的產(chǎn)品使用體驗。[1]常見的網(wǎng)頁視覺吸引的模式:

1.對話框

這是最常見的視覺吸引模式,它是網(wǎng)頁中一種次要窗口,包含按鈕和各種選項,通過它可以完成特定命令或任務(wù)。

2.提示

提示指給予相應(yīng)的提醒、明示和解釋,它可以出現(xiàn)在網(wǎng)頁中的任何位置,比對話框更能融入到網(wǎng)頁的應(yīng)用情景。

3.使用導(dǎo)航

導(dǎo)航是網(wǎng)頁布局中最重要的元素之一,是網(wǎng)頁主要內(nèi)容的提煉,是網(wǎng)站的框架更是網(wǎng)站信息的分類,直觀漂亮的導(dǎo)航能吸引用戶的操作。

4.視頻演示

將視頻嵌入到網(wǎng)頁當中,通過視頻形象直觀的畫面來吸引瀏覽者。在進行視頻嵌入設(shè)計時,為了便于用戶的操作,一般要提供常見的視頻控制選項(停止、暫停、音量控制等)。

5.首次使用引導(dǎo)

用戶首次使用網(wǎng)頁或是網(wǎng)頁界面中的某些操作時候,提供適當?shù)囊龑?dǎo),幫助用戶進入操作界面,比如說利用圖像或是其他視覺線索來引導(dǎo)用戶使用。

6.持續(xù)視覺吸引

持續(xù)視覺吸引設(shè)計,主要是將一些網(wǎng)頁元素進行有別于其他網(wǎng)頁元素的設(shè)計(比如說,通過字體的大小、顏色區(qū)別開來),并將這些元素一直保持在網(wǎng)頁中,通過持續(xù)的視覺刺激來吸引用戶。

7.可發(fā)現(xiàn)的視覺吸引

可發(fā)現(xiàn)的視覺吸引是一種在保持頁面簡潔的前提下,用戶通過執(zhí)行特定交互操作的方法(如點擊和滑動等),就能看到頁面中某些隱藏的元素。如比較常見的視覺吸引模式是鼓勵用戶刷新數(shù)據(jù)的提示。

三、網(wǎng)頁界面交互設(shè)計

“交互”是人與機器之間的相互作用。良好的交互能保持或是激發(fā)用戶使用網(wǎng)站的興趣,傳統(tǒng)的網(wǎng)頁交互設(shè)計重在技術(shù)上關(guān)注人機之間的交互,忽視了人機之間“情感”交互。發(fā)揮設(shè)計中人的情感體驗作用,使設(shè)計更具有人性化的自由,滿足審美的追求,這不僅需要交互技術(shù),更需要交互藝術(shù)。所以,從用戶體驗出發(fā),來進行網(wǎng)頁界面的交互設(shè)計。

1.交互技術(shù)

人機之間信息交互的有效性主要取決于交互技術(shù)。好的交互主要包括兩方面:

(1)時效性

如今生活節(jié)奏的加快,人們更注重時效性,在人機交互過程中,如果交互不及時,瀏覽者就會厭煩甚至放棄瀏覽該信息,有網(wǎng)絡(luò)調(diào)查研究表明,用戶打開網(wǎng)頁等待的時間最長為五秒,如果五秒之后沒有任何的反饋信息,用戶一般會放棄該網(wǎng)頁的操作。所以,在進行網(wǎng)頁界面設(shè)計時,要考慮到受眾的心理,在提高交互速度的同時,也要為用戶在等待交互過程中提供相關(guān)的信息,減少用戶的疑惑以及焦慮。比如在用戶等待操作時的,提供操作成功與否的信息或是提供操作成功的數(shù)據(jù)量和剩余所需等待的時間等。

(2)直觀性

簡單直觀的交互能幫助用戶快速完成任務(wù),繁瑣的交互會增加用戶操作和思考的時間,也會引起用戶心理上的厭倦。在進行交互設(shè)計時,反饋回來的信息要直接明了,因為在操作過程中用戶都喜歡被告訴怎么做,而不喜歡去思考如何做。同時,交互設(shè)計要減少干擾,讓用戶的操作能更順暢。

2.交互藝術(shù)

交互發(fā)生取決于交互技術(shù),交互持續(xù)取決于交互藝術(shù)。交互藝術(shù),是指運用一定的創(chuàng)意,使用戶在體驗交互的過程中,能沉浸其中,并保持愉悅的心情。在交互設(shè)計中,運用藝術(shù)表現(xiàn)形式,改變傳統(tǒng)媒體的線性秩序敘事方式,強調(diào)觀眾的積極性和能動性,引導(dǎo)用戶更好地進行交互操作,達到人機交互的自然、和諧。