游戲化的網頁設計

鄭建鵬

現代網頁設計同游戲設計的界限越來越模糊，這不僅體現為越來越多網頁游戲的出現，更體現在游戲設計的諸多理念、原則和形態元素頻頻在網頁設計中直接出現或深深影響網頁設計。

對于前一現象，盡管網頁游戲不屬于我們探討的范圍，但以簡單游戲作為主體內容和線索來組織和設計的網站越來越受人歡迎卻是不爭的事實。對后一現象，以更強的互動體驗為目的的游戲設計在諸多方面啟迪著網頁設計，如網頁中的懸停菜單和提示層、網站個性化的動畫加載、網頁自定義光標和個性圖標、網頁關聯菜單以及有更強情境感的透視文字設計等。

就網頁設計的游戲化看，將網頁創意為一款簡單游戲是最常見的方式，這種模式多見于進行品牌形象展示的網站之中。直白的產品或品牌訴求是傳統媒體廣告的事，網絡媒體更適合有個性的、體驗感更強的互動性訴求。游戲色彩的品牌展示網站便是這一理念的最好展現。“走進蒙聯邦，見證一點一滴好牛奶”（mengniu.qq.com）是蒙牛最新的品牌宣傳網站，網站被設計為一段見證牛奶誕生的旅程：種植牧草、養殖奶牛、初加工、原奶檢驗、產品生產、產品運輸、售后服務等。每個環節均以游戲探索的方式展開，簡單的Flash游戲讓瀏覽者恰如其分地融入到網站創設的情境中去，通過有趣的產品生產與加工體驗加深了對產品品質的認知。

相比于將網站本身設計為游戲，大量從游戲設計中借鑒理念與元素就不那么簡單了。網站設計與游戲設計雖同屬于交互設計的范疇，但同網站設計相比，游戲設計更強調參與性與帶入感，更注重創設情境同對象進行有效而深入的溝通。游戲設計多以強烈的故事性吸引游戲者，進入游戲之前的真人電影或動畫都具有很強的震撼力。受這一設計理念的啟發，許多網站設計都在載入動畫上花了不少心思，個性化創意型的動畫載入成為這些網站吸引瀏覽者的重要手段。

“蒙聯邦”網站的載入動畫是一滴由綠色逐漸變為白色的奶液，廈門比蒙網絡科技有限公司網站則將公司吉祥物和標志圖形——一頭在地平線上奔跑的“比蒙巨獸”作為載入動畫。

在大型游戲設計中，伴隨游戲角色的行動會不時有大量對話框出現在頁面的相應位置，這些對話框和提示欄延伸到網頁設計上便是懸浮菜單和提示層的設計。Phorce是一款可以給Mac充電的電腦包，號稱世界首款智能時尚包。其網站在向瀏覽者展示包的內部結構時，就使用了大量的懸停菜單和提示層。該品牌一款黑色電腦包的內部被展示在電腦屏幕上，七八個圓圈內的“十”標記分布在包內部多個位置上。當鼠標移至某一標記時，相應的菜單提示便展現出來，用以介紹開關按鈕、電池芯、USB口等諸多部分的特殊構造和功能。在游戲設計中，參與者經常要根據畫面提示，尤其是鼠標的提示來執行一些必要的操作，以完成游戲任務。為體現更好的引導性，實現更好的游戲欲望激發，游戲中鼠標的光標在經過某個目標區域或物體時經常會變得個性化起來，這在網頁設計中也得到了很好的體現。

Mini-Z是美國科學工程有限公司（AS&E）推出的世界首款手持X光檢測儀，這種便攜式檢測設備無需設置即可掃描難以到達的物體，如地鐵或汽車上無人看管的箱包、背包或包裹等。Mini-Z先進的X光成像技術可以檢測到并突出顯示透射式X光系統可能遺漏的塑料槍、陶瓷刀、爆炸品和毒品等有機材料，并可在平板屏幕上顯示檢測目標的實時圖像。其產品介紹網站meetminiz.com結合視頻影像、動畫和模擬操作設置了城市地鐵、港口、邊境和機場四種場合下Mini-Z的檢測場景，使瀏覽者通過高浸入式的情境化網站體驗，深入感受產品的獨特優勢。在每一種場景下，網頁會在頁面左下角展現模擬的檢測儀器界面，網頁主體畫面則是特寫的被檢物體。當鼠標移至被檢測物體之上時，光標會變化為檢測儀界面的模擬形態，網站瀏覽者恰似在親自操作檢測儀器并實時了解到檢測結果。

除此之外，將網站導航鏈接或其他菜單設計在一體化的關聯圖形上，以集中吸引瀏覽者注意力，減輕瀏覽者尋找網頁內容的視覺付出也同樣受到游戲設計的影響。在游戲設計中，人物角色是核心要素，所有設計均圍繞其展開，關聯菜單的使用非常普遍，也極為便利。

游戲設計不斷Web化，Web設計不斷游戲化，這是當今交互設計的趨勢。看看風靡網絡的各種大型網游和以互動游戲為設計主體內容的品牌傳播網站，就不難了解到這一點。不過，需要明確的是，所有交互設計都應是以用戶的良好體驗為目的的。endprint