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

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

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

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

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

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