探討觸摸界面的網(wǎng)頁互動(dòng)設(shè)計(jì)

蔣 真, 應(yīng)國虎

(上海師范大學(xué) 數(shù)理學(xué)院,上海 200234)

如果說鼠標(biāo)的發(fā)明,為電腦走進(jìn)千家萬戶提供了契機(jī);那么觸摸屏的延伸,為智能移動(dòng)終端產(chǎn)品的普及、為網(wǎng)絡(luò)個(gè)性化服務(wù)的拓展帶來了方便.Stephen Woods在《HTML5觸摸界面設(shè)計(jì)與開發(fā)》一書中寫到:“市面上有數(shù)百種的移動(dòng)設(shè)備在售.它們千差萬別,各有千秋,但它們有一個(gè)共同的特點(diǎn):先進(jìn)的Web 瀏覽器和觸摸界面”[1].這一特點(diǎn)不僅顯示出網(wǎng)頁自動(dòng)獲取新數(shù)據(jù)的速度,而且還保證了用戶離線后仍然可以高效地訪問,尤其是為適應(yīng)Web技術(shù)發(fā)展而重設(shè)的超文本標(biāo)記語言HTML5,使更多功能上的優(yōu)化選擇得以實(shí)現(xiàn),并展示出更多觸摸體驗(yàn)功能上的新潛力.超文本標(biāo)記語言HTML5的頒布和實(shí)施,賦予了Web 應(yīng)用開發(fā)的新標(biāo)準(zhǔn),也掀開了網(wǎng)頁互動(dòng)設(shè)計(jì)的新篇章.

1 網(wǎng)頁互動(dòng)設(shè)計(jì)的時(shí)代要求分析

互動(dòng),它是一種對象之間相互作用而使彼此產(chǎn)生積極影響的過程.互動(dòng)設(shè)計(jì)就是通過對產(chǎn)品的界面和人的行為進(jìn)行關(guān)系設(shè)計(jì),讓產(chǎn)品和它的使用者之間建立一種有機(jī)聯(lián)系,從而可以有效達(dá)到使用者的目標(biāo).顯然,這種互動(dòng)設(shè)計(jì)與計(jì)算機(jī)的使用有著天然的聯(lián)系,同時(shí)網(wǎng)頁的互動(dòng)設(shè)計(jì)又有其自身的特點(diǎn).

第一,互動(dòng)是人與計(jì)算機(jī)聯(lián)系的基本要求.正如《數(shù)碼平面設(shè)計(jì)指南》的作者鮑勃·戈登、麥琪·戈登(英)所指出的:“與電腦交流互動(dòng)是數(shù)碼世界信息傳播的基本原則,用戶幾乎對電腦屏幕上的每一種內(nèi)容都需要進(jìn)行某種程度的互動(dòng).網(wǎng)站的設(shè)計(jì)目的正在于此——鼓勵(lì)訪問者參觀網(wǎng)站,進(jìn)入網(wǎng)站的各個(gè)區(qū)域,從而獲取相關(guān)的信息”,因此書中要求“網(wǎng)絡(luò)設(shè)計(jì)師必須充分認(rèn)識互動(dòng)的理念,并在設(shè)計(jì)中將其發(fā)揚(yáng)光大”[2].對此,韓高路在其《網(wǎng)絡(luò)藝術(shù)設(shè)計(jì)》中將眼光放得更遠(yuǎn),認(rèn)為“網(wǎng)絡(luò)未來的發(fā)展趨勢就是互動(dòng)性”[3],這里所指的“互動(dòng)性”已經(jīng)不是那種單純的人機(jī)的機(jī)械互動(dòng),而已經(jīng)上升至一種人機(jī)的藝術(shù)互動(dòng).

第二,互動(dòng)設(shè)計(jì)與藝術(shù)表現(xiàn)密不可分.韓高璐認(rèn)為:“網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意是緊密結(jié)合的”.因?yàn)榛?dòng)與藝術(shù)的完美結(jié)合,能夠增強(qiáng)吸引力、增加趣味性,從而加大信息的傳遞和吸收.曹田泉在其《新媒體實(shí)驗(yàn)藝術(shù)與設(shè)計(jì)》一書中也說過:“網(wǎng)絡(luò)上五花八門的創(chuàng)意和藝術(shù)思維一經(jīng)先進(jìn)技術(shù)的改造,就足以造成令人驚詫的視覺體驗(yàn)與沖擊”[4].技術(shù)的發(fā)展帶來了設(shè)計(jì)的進(jìn)步,而網(wǎng)頁的互動(dòng)更促進(jìn)了設(shè)計(jì)者與用戶的聯(lián)系,這種聯(lián)系是一種參與的聯(lián)系、合作的聯(lián)系,是實(shí)現(xiàn)網(wǎng)頁內(nèi)容與精彩效果互動(dòng)展示的聯(lián)系.正如杜尚所說:“人人都是藝術(shù)家”、“觀眾完成藝術(shù)作品”.所以,網(wǎng)頁的互動(dòng)設(shè)計(jì)就必須從藝術(shù)的角度出發(fā),并要符合藝術(shù)美的規(guī)律,使廣大網(wǎng)頁用戶能夠達(dá)到一種身心上的沖擊、享受、感染等的審美和體驗(yàn).

其三,互動(dòng)能夠觸發(fā)用戶的情感.卓嘉在其《體驗(yàn)式展示設(shè)計(jì)》中就注意到了互動(dòng)與人的情感之間的聯(lián)系,并認(rèn)為“在設(shè)計(jì)當(dāng)中引入互動(dòng)的概念,即將展示設(shè)計(jì)提升到‘信息——人——信息’的層次,簡單的觸摸屏在受眾的精神層面產(chǎn)生情感的共鳴是一種更有效的互動(dòng)手段”[5].作為移動(dòng)終端的觸摸屏,拓展和延伸了人們獲取信息的途徑,充實(shí)和豐富了人們碎片時(shí)段的享用,由此而體現(xiàn)網(wǎng)絡(luò)的情感關(guān)懷也就成為網(wǎng)頁互動(dòng)設(shè)計(jì)的重要內(nèi)涵.吳旭剛、羅穎在其的《物聯(lián)網(wǎng)時(shí)代的自然交互設(shè)計(jì)》中就說到:“漂亮的、有趣的、個(gè)性化的設(shè)計(jì)表達(dá)了對用戶情感的關(guān)注,開始注重和強(qiáng)調(diào)用戶作為個(gè)體的多樣性,情感價(jià)值成為目前產(chǎn)品設(shè)計(jì)的一個(gè)有價(jià)值的目標(biāo)”[6].設(shè)計(jì)師不僅是設(shè)計(jì)“事”、“物”的創(chuàng)造者,更是生活信息和互動(dòng)體驗(yàn)的傳播者,要讓用戶在使用過程中有愉悅感、成就感,并感覺到被尊重,就要在網(wǎng)頁的設(shè)計(jì)中處處體現(xiàn)設(shè)計(jì)者對公眾的熱情與服務(wù),并在互動(dòng)的友好氛圍中實(shí)現(xiàn)用戶的網(wǎng)上體驗(yàn).

2 網(wǎng)頁設(shè)計(jì)模式上的互動(dòng)特征

基于互聯(lián)網(wǎng)快速強(qiáng)大的各種交互功能,如今的網(wǎng)頁設(shè)計(jì)正不斷創(chuàng)新出設(shè)計(jì)者與用戶的互動(dòng)體驗(yàn)元素.設(shè)計(jì)從圖片展示、置入音樂的二維靜態(tài)網(wǎng)頁,到全景環(huán)視、轉(zhuǎn)換立體三維動(dòng)態(tài)網(wǎng)頁,聲音、影像和動(dòng)畫等各個(gè)設(shè)計(jì)環(huán)節(jié)無不蘊(yùn)藏著設(shè)計(jì)者提供給用戶的互動(dòng)交流方式.而用戶則在觸摸、點(diǎn)擊、滑移的過程中,實(shí)現(xiàn)網(wǎng)上巡游和查閱.

2.1 網(wǎng)頁的“隨機(jī)性”打開

為使用戶能在臺式機(jī)、筆記本、平板、手機(jī)等各種終端設(shè)備上打開網(wǎng)頁,網(wǎng)頁的“隨機(jī)性”也就成為了滿足人們隨時(shí)隨地移動(dòng)瀏覽網(wǎng)頁的基本要求.而響應(yīng)式網(wǎng)頁的設(shè)計(jì)成功,將人們的這一愿望變成了現(xiàn)實(shí).由于響應(yīng)式Web設(shè)計(jì)較多地使用CSS3布局框架、即彈性布局和流動(dòng)布局,使網(wǎng)頁在適應(yīng)不同終端分辨率上、在網(wǎng)頁元素的重新組合中得到了保障,因此網(wǎng)頁顯示也就有了“隨機(jī)性”的特點(diǎn),網(wǎng)頁頁面也就有能力自動(dòng)響應(yīng)用戶們的各種設(shè)備環(huán)境并且兼容多個(gè)終端而不再為每個(gè)終端做一個(gè)特定的版本(圖1、2、3).

圖1 臺式機(jī)/筆記本頁面

圖2 平板電腦頁面

圖3 手機(jī)頁面

“隨機(jī)性”網(wǎng)頁的設(shè)計(jì)運(yùn)行,不但保證了信息的順達(dá)、畫面的完整,而且還滿足了設(shè)計(jì)者統(tǒng)一的設(shè)計(jì)理念和功能服務(wù)需求,使用戶完全可以隨意使用自身的終端設(shè)備,進(jìn)而隨處可以達(dá)到順意瀏覽、安心體驗(yàn)的效果.

2.2 內(nèi)容的“特寫式”顯示

傳統(tǒng)的網(wǎng)頁設(shè)計(jì)中,小圖片的比例較多,而且零零散散分布各處,導(dǎo)致用戶視覺混亂而無法了解設(shè)計(jì)者具體需要傳達(dá)的內(nèi)容.為了能使用戶在第一時(shí)間了解網(wǎng)站的主打產(chǎn)品或信息,愈來愈多的商業(yè)網(wǎng)站頁面開始使用“特寫式”的全屏網(wǎng)頁設(shè)計(jì)(圖4、5).

圖4 突出眼鏡的廣告頁面

圖5 醒目文字的網(wǎng)頁設(shè)計(jì)

“特寫式”頁面設(shè)計(jì)的理念,就是要突出主題,即:展示主體、明顯標(biāo)題.“特寫式”的頁面設(shè)計(jì)完全與以往面面俱到的“全景式”相反,能夠提供更為強(qiáng)烈的感官?zèng)_擊.而充滿屏幕的全屏設(shè)計(jì),對于大屏幕來說,顯然要將這一“特寫式”的視覺效果最大化,而對于手機(jī)類的小屏幕來說,也可以清晰展現(xiàn),一目了然,并以此營造一種感官?zèng)_擊效果,把眼光留住、或吸引更多的注意力.

2.3 元素的“動(dòng)態(tài)化”表現(xiàn)

網(wǎng)頁內(nèi)容元素的靜態(tài)呈現(xiàn)與動(dòng)態(tài)表現(xiàn)相比較,顯然動(dòng)態(tài)表現(xiàn)的元素對用戶的吸引力更大,所以網(wǎng)頁上的各種動(dòng)畫、滾動(dòng)字幕等視覺上的動(dòng)態(tài)效果設(shè)計(jì)也就越來越多,形式表現(xiàn)也越來越豐富多彩.一種長篇幅的動(dòng)態(tài)網(wǎng)頁,就是利用“視差滾動(dòng)”效果的網(wǎng)頁設(shè)計(jì)方式來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)變化.在分層的頁面上附有插圖與各種配飾小圖形,通過以不同速度移動(dòng)多層背景,達(dá)到一種立體動(dòng)態(tài)的效果,從而帶給用戶以特殊的視覺感受,而對動(dòng)態(tài)元素進(jìn)行觸摸或點(diǎn)擊,也許就會(huì)成為一種自然而然的行為動(dòng)作(圖6).

隨著jQuery插件和CSS3的不斷優(yōu)化,不需太多代碼也能制作出效果酷炫的網(wǎng)頁界面上的一些動(dòng)態(tài)元素,以鼠標(biāo)符號為例,當(dāng)鼠標(biāo)移到圖片上就能產(chǎn)生一個(gè)轉(zhuǎn)換、位移、變形等的動(dòng)態(tài)效果或方式.如圖7所示的礦泉水產(chǎn)品宣傳廣告,就很好地利用了這一效果和方式,在水瓶周圍設(shè)計(jì)了許多水珠,這些水珠可以跟著用戶的鼠標(biāo)隨之移動(dòng),如此逼真的設(shè)計(jì)效果加強(qiáng)了用戶的體驗(yàn)感.

圖6 視差滾動(dòng)的網(wǎng)頁設(shè)計(jì)

圖7 可移動(dòng)的水珠設(shè)計(jì)

2.4 圖塊的“歸類型”展示

Giles Colborne在《簡約至上:交互設(shè)計(jì)策略》中指出:“把相似的元素放在一起,能夠有效減少視覺上的干擾因素,也不必要解釋它們之間的關(guān)系,這樣也可以讓用戶更容易集中注意力”[7].當(dāng)今,大多網(wǎng)頁設(shè)計(jì)時(shí)都利用“歸類性”的方式,把相似元素集中在一起,加強(qiáng)瀏覽時(shí)的信息整合.把圖片或色塊元素有規(guī)則地放置一起,看似是一個(gè)色塊或是一張圖片,其實(shí)當(dāng)鼠標(biāo)移動(dòng)到上面時(shí)色塊會(huì)被推開顯示圖片,而鼠標(biāo)離開又會(huì)恢復(fù)原來的色塊與圖片,并且圖片或色塊背后都蘊(yùn)藏著內(nèi)容的鏈接需要用戶去挖掘,起到了替代大量信息文字的功能作用(圖8).

圖片與色塊的切換類似于幻燈片播放效果,這種顯示風(fēng)格不僅能消除分辨率兼容問題,而且導(dǎo)航欄也易于使用,還可以完美兼容移動(dòng)瀏覽器.用戶者可根據(jù)自己想了解的內(nèi)容,通過點(diǎn)擊網(wǎng)頁中指示性的箭頭標(biāo)記,隨意進(jìn)行前后上下翻閱或點(diǎn)擊動(dòng)態(tài)圖片出現(xiàn)相關(guān)信息內(nèi)容.如圖9:淘寶、唯品會(huì)等網(wǎng)購類型的網(wǎng)站,商品都是以表格形式呈現(xiàn),一件件商品都是整齊排列,用戶者清晰所見,當(dāng)鼠標(biāo)移至商品立刻出現(xiàn)相關(guān)商品的價(jià)格或者尺碼并且商品動(dòng)態(tài)旋轉(zhuǎn)以便全方位為用戶展示.

圖8 圖片與色塊網(wǎng)頁

2.5 行動(dòng)的“指示性”標(biāo)識

加瑞特在其《用戶體驗(yàn)要素:以用戶為中心的產(chǎn)品設(shè)計(jì)》一書中指出:網(wǎng)頁設(shè)計(jì)中的導(dǎo)航設(shè)計(jì)傳達(dá)出來的信息,幫助用戶去理解“哪個(gè)有效的選擇會(huì)最好地支持他們的任務(wù)或他們想要達(dá)到的目標(biāo)”,這也就是為什么在網(wǎng)站中,清晰地告訴用戶“他們在哪兒”以及“他們能去哪兒”非常重要的原因[8].在網(wǎng)頁中設(shè)計(jì)者設(shè)置各種“利用行動(dòng)或者言語提示”向用戶全面展示網(wǎng)頁蘊(yùn)藏的信息和服務(wù)選項(xiàng),其目的就是要避免用戶在進(jìn)出網(wǎng)頁、或在運(yùn)行某種陌生任務(wù)時(shí)的那種茫然不知所措的尷尬局面.

由此可見,網(wǎng)頁設(shè)計(jì)中的行動(dòng)按鈕應(yīng)突出顯示和強(qiáng)調(diào)視覺線索,使它能夠帶領(lǐng)用戶迅速清晰的采取行動(dòng),而各種別具風(fēng)格的 “指示性”標(biāo)識設(shè)計(jì),正是能夠明確提示和告知用戶進(jìn)入下一場景或眼下的具體位置.如圖10所示的是該網(wǎng)頁利用卡通手指來指示用戶應(yīng)該點(diǎn)擊哪兒,下一步該如何做等.再例如,登陸郵箱頁面或者在進(jìn)入某些需要注冊的網(wǎng)頁時(shí),在登陸選項(xiàng)的旁邊都會(huì)設(shè)計(jì)一個(gè)“忘記密碼”的提示圖標(biāo),來提醒用戶者忘記密碼該怎樣解決.

圖10 “卡通手”標(biāo)示指示

圖11 “ 隱身性”導(dǎo)航欄

2.6 瀏覽的“隱身性”導(dǎo)游

橫跨頁面頂部、或位于左右的側(cè)邊、或底部的導(dǎo)航欄,稱之為“頁面導(dǎo)游”.導(dǎo)航內(nèi)容順序或垂直排列或橫向分布,用戶點(diǎn)擊相對應(yīng)的導(dǎo)航內(nèi)容時(shí)頁面將自動(dòng)滑到相對應(yīng)的版頁,甚至用戶在瀏覽頁面時(shí)有的導(dǎo)航欄還會(huì)一直跟隨頁面移動(dòng),便于隨時(shí)切換人們所需的版面信息.用戶觸碰某一項(xiàng)菜單時(shí)便會(huì)彈出相關(guān)鏈接的二、三級菜單信息,鼠標(biāo)離開時(shí)這些繁瑣的條條框框便會(huì)消失隱藏起來,時(shí)刻方便用戶的互動(dòng)與體驗(yàn).如圖11所示,鼠標(biāo)懸停在側(cè)邊時(shí)導(dǎo)航欄即可出現(xiàn).

導(dǎo)航欄的設(shè)計(jì)可以說充滿著互動(dòng)性:當(dāng)人們向下拖動(dòng),網(wǎng)頁上的導(dǎo)航欄會(huì)自動(dòng)隱藏;而當(dāng)用戶再次向上拖動(dòng),導(dǎo)航欄則會(huì)重新出現(xiàn).當(dāng)用戶專注于他們非常感興趣的內(nèi)容時(shí),看似多余的導(dǎo)航欄就會(huì)隱身而去;而當(dāng)用戶想更換瀏覽內(nèi)容時(shí),導(dǎo)航欄將會(huì)再次現(xiàn)身.這種“隱身性”導(dǎo)游,既提升了瀏覽上下文的連貫性(聚焦內(nèi)容本身),也增加了屏幕的空間范圍.動(dòng)感的導(dǎo)航設(shè)計(jì)與簡潔界面所產(chǎn)生強(qiáng)烈對比,作為一個(gè)視覺元素和服務(wù)功能,非常有效地加強(qiáng)了用戶繼續(xù)閱讀的興趣或持續(xù)關(guān)注的熱情.

2.7 網(wǎng)頁的“自助式”空間

圖12 用戶者可選擇背景音樂網(wǎng)頁設(shè)計(jì)

設(shè)計(jì)者為了充分發(fā)揮使用者的主導(dǎo)性,因此在網(wǎng)頁上添加了自定義一欄,不管用戶訪問的是什么類型的網(wǎng)站,它都是一個(gè)“自助式”的產(chǎn)品.人們可以設(shè)計(jì)屬于自己的網(wǎng)頁,從背景色彩到界面設(shè)計(jì),從想要瀏覽的信息內(nèi)容到烘托情感的背景音樂.用戶根據(jù)自己喜好搭配想要體驗(yàn)的要素,從而增強(qiáng)其互動(dòng)體驗(yàn)感.

如圖12所示的咖啡網(wǎng)站的首頁,就打出主旨標(biāo)語:再現(xiàn)的一個(gè)咖啡館環(huán)境的聲音,來提高你的創(chuàng)造力并且?guī)椭愀玫毓ぷ?在頁面左側(cè)設(shè)計(jì)了播放各種場景環(huán)境音效(清晨街邊雜音、午餐休息室、校園內(nèi)等)用戶可以隨意選擇這些環(huán)境聲激發(fā)用戶者的創(chuàng)造力,也更易于他們沉浸到工作中.

3 網(wǎng)頁互動(dòng)設(shè)計(jì)的發(fā)展趨勢

大數(shù)據(jù)時(shí)代的到來,使互聯(lián)網(wǎng)成為人們獲取信息和交流感受的主要平臺.人們通過互聯(lián)網(wǎng)去實(shí)現(xiàn)自己的要求、意愿和目標(biāo)已不再是幻想,而是成為了一種可能和現(xiàn)實(shí).可以說,互聯(lián)網(wǎng)已經(jīng)逐步滲透到人們學(xué)習(xí)、工作、娛樂等的方方面面,并對人們的事業(yè)、企業(yè)的發(fā)展和社會(huì)的進(jìn)步產(chǎn)生了前所未有的影響.社會(huì)的推進(jìn)需要網(wǎng)絡(luò)的伴隨和同行,人們的生活也同樣需要網(wǎng)絡(luò)的關(guān)懷和陪伴.這種“以信息化帶動(dòng)社會(huì)進(jìn)步、以社會(huì)進(jìn)步促進(jìn)信息化”的科學(xué)發(fā)展愿景,將會(huì)全面提升今后網(wǎng)站的改革和創(chuàng)新.

3.1 “人性化”體現(xiàn)將是網(wǎng)站建設(shè)的核心

網(wǎng)站的建設(shè)無外乎:策劃創(chuàng)新、界面友好、營銷合理,但其中的“界面友好”,將決定網(wǎng)站建設(shè)是否成功建設(shè)的關(guān)鍵.施奈德曼·普萊薩特曾說:“設(shè)計(jì)是為人服務(wù)的,人性化設(shè)計(jì)是以人為中心和尺度,滿足人的社會(huì)需要與情感需要”.由此可見,“界面友好”型網(wǎng)頁的設(shè)計(jì)不但要在信息傳遞的正能量上加以強(qiáng)化,并且還要在以人為本的理念上加以重視.

如今,人機(jī)交互的研究重點(diǎn)已放在了智能化交互、多模態(tài)(多通道)和多媒體交互、虛擬交互以及人機(jī)協(xié)同交互等方面,也就是“以人為中心”的人機(jī)交互技術(shù)層面.它促進(jìn)了新時(shí)代網(wǎng)頁平面設(shè)計(jì)的變革,改變了以往用戶只能單一或被動(dòng)接受的狀況,并使用戶能夠參與到網(wǎng)頁的互動(dòng)中.而在此基礎(chǔ)上,未來的“界面友好”設(shè)計(jì)將會(huì)更加關(guān)注廣大使用者的行為和情感,用戶的需求和感受將會(huì)成為今后產(chǎn)品開發(fā)和網(wǎng)頁設(shè)計(jì)的一種服務(wù)意識和自覺要求,而生動(dòng)、誘人的互動(dòng)體驗(yàn)也將會(huì)更加吸引用戶的參與與合作,并以此體現(xiàn)網(wǎng)站對用戶的誠意和熱情.

事實(shí)上,“界面友好”就是一種以人為本的聯(lián)系媒介,它是企業(yè)的形象、公司的代言,而它所具有的呈現(xiàn)方式就是方便、實(shí)用、快捷、時(shí)代氣息強(qiáng)烈的藝術(shù)創(chuàng)新設(shè)計(jì),它在滿足用戶指尖輕輕點(diǎn)擊的同時(shí),大量運(yùn)動(dòng)的動(dòng)態(tài)交互界面也在指尖的移動(dòng)間得到信息釋放、畫面展現(xiàn)以及感受反饋,進(jìn)而為用戶的積極參與提供信息分享、情感交流的互動(dòng)平臺和體驗(yàn)空間.

3.2 互動(dòng)特色將是網(wǎng)站追求的目標(biāo)

對網(wǎng)站的內(nèi)容信息而言,層面上的全面展現(xiàn)和層次上的深度揭示,往往取決于網(wǎng)站對使用者的友好程度和吸引力,它集中反映在包括頁面色彩、排版構(gòu)圖以及交互鏈接等的互動(dòng)設(shè)計(jì)上.而對使用者來說,由于他們在經(jīng)歷和參與后的那種體驗(yàn)感受和感觸,將會(huì)對網(wǎng)站的能力做出相應(yīng)的評價(jià),而這種評價(jià)顯然會(huì)對企業(yè)產(chǎn)生一定影響,因此Jesse James Garrett就特別強(qiáng)調(diào):“在網(wǎng)站上,用戶體驗(yàn)比任何一個(gè)其他產(chǎn)品都顯得更重要”.而從這種體驗(yàn)重要性也折射出網(wǎng)站應(yīng)具有的那種自身特色,那種不同于其他網(wǎng)站的互動(dòng)特色.一般而言,互動(dòng)特色可以根據(jù)產(chǎn)品的特征、信息的結(jié)構(gòu)進(jìn)行開發(fā)設(shè)計(jì);也可以針對軟件技術(shù)和互動(dòng)插件進(jìn)行潛力挖掘;還可以通過環(huán)境因素、氛圍條件進(jìn)行藝術(shù)創(chuàng)造.互動(dòng)特色是網(wǎng)站的一種優(yōu)勢體現(xiàn),是有別于競爭對手的一個(gè)核心競爭力.

3.2.1 根據(jù)產(chǎn)品特征、信息結(jié)構(gòu)進(jìn)行開發(fā)設(shè)計(jì)

當(dāng)大型真人相親類節(jié)目搬上電視銀幕時(shí),各種綜藝類真人秀節(jié)目如雨后春筍般不停地冒出來,其中紅遍大江南北的親子類真人秀節(jié)目《爸爸去哪兒》,在滿足了觀眾對明星與子女之間的情感故事的好奇心后,該節(jié)目竟然還衍生出一系列產(chǎn)品,例如:相關(guān)網(wǎng)絡(luò)游戲、生活產(chǎn)品等.

圖13 互動(dòng)游戲設(shè)計(jì)

這一事實(shí)也再次證明,孩子的成長始終是關(guān)注的重點(diǎn),而作為相關(guān)兒童類網(wǎng)頁的設(shè)計(jì)也將理所當(dāng)然地肩負(fù)起孩子成長的責(zé)任.因此在網(wǎng)頁互動(dòng)設(shè)計(jì)上不僅要更多體現(xiàn)孩子們的特點(diǎn),而且還要迎合孩子們的興趣,開創(chuàng)游戲化的創(chuàng)新設(shè)計(jì)和互動(dòng)測試,吸引孩子和家長們一起去參與和觸碰,從而大大提高網(wǎng)頁互動(dòng)的趣味和樂趣,使孩子在參與中增長知識、在點(diǎn)擊觸碰下快樂成長,也使孩子和家長之間的感情更加親密、更加融洽.如圖13所示的就是一款吸引兒童的網(wǎng)絡(luò)知識游戲頁面.

3.2.2 針對軟件技術(shù)、和互動(dòng)插件進(jìn)行潛力挖掘

“my own bike——我的自行車”網(wǎng)站充分讓用戶互動(dòng)體驗(yàn)了一把.在網(wǎng)頁中間擺放了一輛商家已經(jīng)搭配好的自行車雛形,而在自行車雛形的每一個(gè)部件上都有指示標(biāo)記顯示,當(dāng)人們點(diǎn)擊標(biāo)記時(shí)便出現(xiàn)商家提供的各種款式、色彩的配件,用戶可以從中選擇并搭配出自己的自行車而價(jià)格也隨之更改(圖14).

圖14 商業(yè)網(wǎng)站提供的產(chǎn)品雛形及款式與顏色的選擇

這種與用戶利益直接相關(guān)的獨(dú)特互動(dòng)方式,顯然得到了用戶和消費(fèi)者的歡迎,它也將為那些類似于組合型產(chǎn)品提供了網(wǎng)頁互動(dòng)設(shè)計(jì)的范本,并在此基礎(chǔ)上將會(huì)有所提高和加強(qiáng).

3.2.3 通過環(huán)境因素、氛圍條件進(jìn)行藝術(shù)創(chuàng)造

當(dāng)今,化繁為簡的設(shè)計(jì)思想已逐漸為人們所接受,而崇尚簡約也將成為未來網(wǎng)頁互動(dòng)設(shè)計(jì)的主要方向.作為簡約或單純的設(shè)計(jì)其實(shí)是多個(gè)方面.

眼下,一縷按鈕的“清新”之風(fēng),正在觸摸屏網(wǎng)頁上吹拂.不設(shè)底色、不加紋理,薄如蟬翼的線框按鈕,在確保功能屬性的同時(shí),還顯示出薄透的那種“清新”的視覺美感.

同樣,在單頁網(wǎng)站超長滾動(dòng)獲得用戶好評的情形下,更多留白空間與快速響應(yīng)技術(shù)合并而成的超長、超寬網(wǎng)頁設(shè)計(jì)將是發(fā)展趨勢.這樣的設(shè)計(jì)能夠?qū)?fù)雜的東西濃縮簡化,使內(nèi)容組織更加有序,格式顯示也更趨于合理,也使人們可以在移動(dòng)手指間獲取信息.

簡約的扁平化設(shè)計(jì)可以說是去繁就簡的設(shè)計(jì)美學(xué).實(shí)際上,去掉所有裝飾性的設(shè)計(jì),就是對之前所推崇的擬物化設(shè)計(jì)的一種回歸.扁平化設(shè)計(jì)所丟棄的某些效果,或許能使表現(xiàn)元素獲得更為直觀、簡單、純真的視覺感受.扁平化設(shè)計(jì)的目的就在于以最簡約的方式,分配和表現(xiàn)網(wǎng)頁中的內(nèi)容信息,并引導(dǎo)客戶直抵目標(biāo)內(nèi)容,避免由于內(nèi)容過多而產(chǎn)生的主題不明、焦點(diǎn)分散的問題.

4 結(jié) 語

互聯(lián)網(wǎng)平臺使網(wǎng)絡(luò)設(shè)計(jì)者和網(wǎng)絡(luò)使用者走到了一起,而網(wǎng)絡(luò)的互動(dòng)又使設(shè)計(jì)者和使用者聯(lián)系在了一起.他們彼此的距離,正是通過互動(dòng)設(shè)計(jì)的情感關(guān)懷而被縮短;他們相互的溝通,也正是在觸摸點(diǎn)擊的互動(dòng)交流中得到強(qiáng)化;諸多網(wǎng)頁的拓展設(shè)計(jì)、表現(xiàn)手段和藝術(shù)美感,更是在發(fā)揮廣大用戶主觀能動(dòng)性的互動(dòng)協(xié)同參與中得到功能釋放、效果顯現(xiàn)以及各種體驗(yàn)的實(shí)現(xiàn)和完成.正如有人所說的那樣:“互聯(lián)網(wǎng)本身是原始的,枯燥無味的,是人類通過這個(gè)開放的平臺分享他們的一切才變得多姿多彩”.

參考文獻(xiàn):

[1] WOODS S. HTML5觸摸界面設(shè)計(jì)與開發(fā)[M].北京:人民郵電出版社,2014.

[2] 鮑勃·戈登,麥琪·戈登.數(shù)碼平面設(shè)計(jì)指南[M].合肥:安微美術(shù)出版社,2007.

[3] 韓高路.網(wǎng)絡(luò)藝術(shù)設(shè)計(jì)[M].沈陽:遼寧美術(shù)出版社,2011.

[4] 曹田泉.新媒體實(shí)驗(yàn)藝術(shù)與設(shè)計(jì)[M].長沙:湖南美術(shù)出版社,2010.

[5] 卓嘉.體驗(yàn)式展示設(shè)計(jì)[M].重慶:西南師范大學(xué)出版社,2013.

[6] 吳旭剛,羅穎.物聯(lián)網(wǎng)時(shí)代的自然交互設(shè)計(jì)[J].設(shè)計(jì)藝術(shù)研究,2013,3(5):5-8.

[7] COLBORNE G.簡約至上:交互式設(shè)計(jì)四策略[M].北京:人民郵電出版社,2011.

[8] GARRETT J J.用戶體驗(yàn)要素:以用戶為中心的產(chǎn)品設(shè)計(jì)[M].北京:機(jī)械工業(yè)出版社,2011.

[9] HOEKMAN R J R,SPOOL J.網(wǎng)站設(shè)計(jì)解構(gòu):有效的交互設(shè)計(jì)框架和模式[M].北京:人民郵電出版社,2010.

[10] 郭曉寒,何雨津.互動(dòng)媒體藝術(shù)[M].重慶:西南師范大學(xué)出版社,2008.

[11] HOEKMAN R J R.瞬間之美_WEB界面設(shè)計(jì)如何讓用戶心動(dòng)[M].北京:人民郵電出版社,2009.

[12] KADLEC T.響應(yīng)式web設(shè)計(jì)實(shí)踐[M].北京:人民郵電出版社,2013.

[13] WEINSCHENK S.設(shè)計(jì)師要懂得心理學(xué)[M].北京:人民郵電出版社,2013.