游戲化的網(wǎng)頁設(shè)計

1、    游戲化的網(wǎng)頁設(shè)計    鄭建鵬現(xiàn)代網(wǎng)頁設(shè)計同游戲設(shè)計的界限越來越模糊，這不僅體現(xiàn)為越來越多網(wǎng)頁游戲的出現(xiàn)，更體現(xiàn)在游戲設(shè)計的諸多理念、原則和形態(tài)元素頻頻在網(wǎng)頁設(shè)計中直接出現(xiàn)或深深影響網(wǎng)頁設(shè)計。對于前一現(xiàn)象，盡管網(wǎng)頁游戲不屬于我們探討的范圍，但以簡單游戲作為主體內(nèi)容和線索來組織和設(shè)計的網(wǎng)站越來越受人歡迎卻是不爭的事實(shí)。對后一現(xiàn)象，以更強(qiáng)的互動體驗為目的的游戲設(shè)計在諸多方面啟迪著網(wǎng)頁設(shè)計，如網(wǎng)頁中的懸停菜單和提示層、網(wǎng)站個性化的動畫加載、網(wǎng)頁自定義光標(biāo)和個性圖標(biāo)、網(wǎng)頁關(guān)聯(lián)菜單以及有更強(qiáng)情境感的透視文字設(shè)計等。就網(wǎng)頁設(shè)計的游戲化看，將網(wǎng)頁創(chuàng)意為一款簡單

2、游戲是最常見的方式，這種模式多見于進(jìn)行品牌形象展示的網(wǎng)站之中。直白的產(chǎn)品或品牌訴求是傳統(tǒng)媒體廣告的事，網(wǎng)絡(luò)媒體更適合有個性的、體驗感更強(qiáng)的互動性訴求。游戲色彩的品牌展示網(wǎng)站便是這一理念的最好展現(xiàn)。“走進(jìn)蒙聯(lián)邦，見證一點(diǎn)一滴好牛奶”（）是蒙牛最新的品牌宣傳網(wǎng)站，網(wǎng)站被設(shè)計為一段見證牛奶誕生的旅程：種植牧草、養(yǎng)殖奶牛、初加工、原奶檢驗、產(chǎn)品生產(chǎn)、產(chǎn)品運(yùn)輸、售后服務(wù)等。每個環(huán)節(jié)均以游戲探索的方式展開，簡單的flash游戲讓瀏覽者恰如其分地融入到網(wǎng)站創(chuàng)設(shè)的情境中去，通過有趣的產(chǎn)品生產(chǎn)與加工體驗加深了對產(chǎn)品品質(zhì)的認(rèn)知。相比于將網(wǎng)站本身設(shè)計為游戲，大量從游戲設(shè)計中借鑒理念與元素就不那么簡單了。網(wǎng)站設(shè)計與游

3、戲設(shè)計雖同屬于交互設(shè)計的范疇，但同網(wǎng)站設(shè)計相比，游戲設(shè)計更強(qiáng)調(diào)參與性與帶入感，更注重創(chuàng)設(shè)情境同對象進(jìn)行有效而深入的溝通。游戲設(shè)計多以強(qiáng)烈的故事性吸引游戲者，進(jìn)入游戲之前的真人電影或動畫都具有很強(qiáng)的震撼力。受這一設(shè)計理念的啟發(fā)，許多網(wǎng)站設(shè)計都在載入動畫上花了不少心思，個性化創(chuàng)意型的動畫載入成為這些網(wǎng)站吸引瀏覽者的重要手段?！懊陕?lián)邦”網(wǎng)站的載入動畫是一滴由綠色逐漸變?yōu)榘咨哪桃?，廈門比蒙網(wǎng)絡(luò)科技有限公司網(wǎng)站則將公司吉祥物和標(biāo)志圖形一頭在地平線上奔跑的“比蒙巨獸”作為載入動畫。在大型游戲設(shè)計中，伴隨游戲角色的行動會不時有大量對話框出現(xiàn)在頁面的相應(yīng)位置，這些對話框和提示欄延伸到網(wǎng)頁設(shè)計上便是懸浮菜單和

4、提示層的設(shè)計。phorce是一款可以給mac充電的電腦包，號稱世界首款智能時尚包。其網(wǎng)站在向瀏覽者展示包的內(nèi)部結(jié)構(gòu)時，就使用了大量的懸停菜單和提示層。該品牌一款黑色電腦包的內(nèi)部被展示在電腦屏幕上，七八個圓圈內(nèi)的“十”標(biāo)記分布在包內(nèi)部多個位置上。當(dāng)鼠標(biāo)移至某一標(biāo)記時，相應(yīng)的菜單提示便展現(xiàn)出來，用以介紹開關(guān)按鈕、電池芯、usb口等諸多部分的特殊構(gòu)造和功能。在游戲設(shè)計中，參與者經(jīng)常要根據(jù)畫面提示，尤其是鼠標(biāo)的提示來執(zhí)行一些必要的操作，以完成游戲任務(wù)。為體現(xiàn)更好的引導(dǎo)性，實(shí)現(xiàn)更好的游戲欲望激發(fā)，游戲中鼠標(biāo)的光標(biāo)在經(jīng)過某個目標(biāo)區(qū)域或物體時經(jīng)常會變得個性化起來，這在網(wǎng)頁設(shè)計中也得到了很好的體現(xiàn)。mini-

5、z是美國科學(xué)工程有限公司（as&e）推出的世界首款手持x光檢測儀，這種便攜式檢測設(shè)備無需設(shè)置即可掃描難以到達(dá)的物體，如地鐵或汽車上無人看管的箱包、背包或包裹等。mini-z先進(jìn)的x光成像技術(shù)可以檢測到并突出顯示透射式x光系統(tǒng)可能遺漏的塑料槍、陶瓷刀、爆炸品和毒品等有機(jī)材料，并可在平板屏幕上顯示檢測目標(biāo)的實(shí)時圖像。其產(chǎn)品介紹網(wǎng)站結(jié)合視頻影像、動畫和模擬操作設(shè)置了城市地鐵、港口、邊境和機(jī)場四種場合下mini-z的檢測場景，使瀏覽者通過高浸入式的情境化網(wǎng)站體驗，深入感受產(chǎn)品的獨(dú)特優(yōu)勢。在每一種場景下，網(wǎng)頁會在頁面左下角展現(xiàn)模擬的檢測儀器界面，網(wǎng)頁主體畫面則是特寫的被檢物體。當(dāng)鼠標(biāo)移至被檢測物體之上時，光標(biāo)會變化為檢測儀界面的模擬形態(tài)，網(wǎng)站瀏覽者恰似在親自操作檢測儀器并實(shí)時了解到檢測結(jié)果。除此之外，將網(wǎng)站導(dǎo)航鏈接或其他菜單設(shè)計在一體化的關(guān)聯(lián)圖形上，以集中吸引瀏覽者注意力，減輕瀏覽者尋找網(wǎng)頁內(nèi)容的視覺付出也同樣受到游戲設(shè)計的影響。在游戲設(shè)計中，人物角色是核心要素，所有設(shè)計均圍繞其展開，關(guān)聯(lián)菜單的使用非常普遍，也極為便利。游戲設(shè)計不斷web化，web設(shè)計不斷游戲化，這是當(dāng)今交互設(shè)計的趨勢?？纯达L(fēng)靡網(wǎng)絡(luò)的