如何設計游戲官網？《天神紀》設計思路實戰分享

 

　　前所未有的東方幻想作品

　　《天神紀》原名《ASTA》意為”涅盤之路”，既意味著游戲內的最高等級，又意味著通往修行最高境界的路途。《天神紀》追求全新概念的東方幻想主題，融合了中、日、韓等亞洲國家的服裝、宗教、歷史、文化。《天神紀》世界裡隨著游戲角色的成長其外貌會發生改變。此外，該作通過大膽的色彩應用、美工技法、天氣效果讓玩家們身處夢境般的世界。

　　官網地址： http://tsj.changyou.com/

　　世界觀以東方哲學為基礎

　　《天神紀》采用東方哲學、陰陽五行、輪回、悟道等東方素材和世界觀。開發商PolygonGames CEO申國喜稱：”《天神紀》世界觀以東方哲學為基礎，劇情以陰陽五行為基礎。此外，相生相克的元素適用於游戲技能和道具，輪回影響角色成長和外形自定義。當玩家完成劇情任務時會悟道，培養技能。”

　　根據游戲風格找出關鍵詞:

　　以上文字中提到了此款游戲融合了中、日、韓等亞洲國家的宗教、歷史、文化，世界觀以東方哲學為基礎，從而我們找出：

　　日本：——神道、浮世繪;

　　中國：——佛教、玄學、水墨、琴棋書畫……

　　韓國：——巫法、暈染;

　　因包含了整個東方，中日韓為主，但也包括了東南亞的密宗和波若。

　　根據關鍵詞找出相關資料圖：

　　官網風格初嘗試:(組內比稿)

　　起初方案畫面想走生命之神和死亡之神相愛相殺的一個基調，由於主宣形象的素材質量未達預期，准備出的針對性交互難以實現。經過多次交流與溝通後，我們決定重新設計一套注重情感化設計的常規方案，來保證整個網站的品質感。

　　為了設計好新的方案，我們對網站內容進行了再一次的審視：

　　風格上我們決定從”異”字出發，不僅要畫面”異”而且形式也是”異”。但此版又太過於表現形式而忽視內容的展示。最終決定拋棄人物為主體的思路，著重渲染場景來突出意境。作為一款具有(中、日、韓、東南亞)多國風格的游戲，我們在視覺處理上采用同一個月亮不同國家的形式去展現各國特色，比如中國的月下竹林、日本的屏風屋檐、韓國的書香研台、東南亞的詭異寺廟……等。由於沒有合適的場景素材，所有場景都需要我們自己繪制+素材組合。

　　我們找了一些極具東方特色圖片作為參考:

　　官網設計實踐過程：

　　構思與素材整合：

　　首頁設計的品質直接影響到整站的優良，在本次首頁設計中，著重營造畫面的故事感和意境的打造。大視角的背景設計讓用戶視野更寬廣，代入感更強，配合寧靜的海面、月亮、船上的女子以及紅色的樹，使整個頁面透出一種安靜唯美的感覺。配色上也大膽的使用了藍、紅、黃色的搭配突出”異”的感覺。

　　導航部分的重構設計

　　對內容進行歸類整合之後我們發現，我們無法用單一導航容納全部內容。即使用容量較大的左導航可以解決內容方面的問題，誤導用戶意外跳出的幾率仍然很高。因此，我們使用了雙導航幫助用戶整理出浏覽的最佳維度。

　　為了避免兩個導航占據較大的頁面空間，干擾用戶浏覽，我們開始將導航設計為自動隱藏，但測試之後發現用戶難以理解，因此我們讓導航保留固定位置但采用融於背景的色系來避免這個問題。

　　同時，我們為不起眼的副導航加入一個動畫效果，在載入頁面後播放，通過這樣的方式使兩個導航都起到了應有的作用。

　　在導航的位置確定下來之後，下一步就是確定網站的結構。在舊方案中的單一頁面場景內浏覽已經不再適用，為了防止分頁浏覽顯得過於單調，我們在切換時加入了動畫效果。接下來的問題是，代表游戲的LOGO和SLOGAN放在哪裡才算合適呢?

　　SLOGAN部分的重構設計

　　經過多次討論，我們確定了游戲定位的權重遠高於游戲LOGO。在不破壞畫面視覺效果的基礎上，我們決定將SLOGAN放在頁面中上方。在眼動測試中，用戶浏覽到這個位置時，瞳孔直徑有較為明顯的變化。

　　為了強化這個效果並突出游戲定位，我們做了一個大膽的嘗試，讓SLOGAN在網站內全頁面存在並作為全部頁面的視覺重心。同時，為了讓用戶不至於對相同的元素產生視覺疲勞，我們同樣使用了載入頁面後播放的動畫效果。

　　盡管LOGO的重要程度低於SLOGAN，但我們考量到作為一個初次與用戶見面的游戲，我們不能只讓玩家注意到這個站做得好，同時更要讓玩家記住游戲的名字。但LOGO與強化設計過的SLOGAN放在一起會產生沖突。我們需要為LOGO找到一個突出且獨立的放置位置，要求是足夠醒目，又不會因為長期出現而造成用戶的視覺疲勞。最終我們決定在頁面的過場動畫中加入LOGO，利用緩存特性來實現設計目標。當用戶初次訪問網站時會在LOADING時長期出現，而回訪時則會快速跳過，避免用戶產生反感。

　　構思與素材整合：

　　游戲特色頁著重強調內容特色和世界觀，顛覆了以往以人物為主體的設計形式，轉由帶有故事性的場景為主導，整個頁面運用比較懷舊的色調來突出滄桑感，突出引導入口的作用。主要表現東南亞文化的神秘特征，東南亞密宗的特色是充滿神秘色彩，重視神通、鬼神、及神秘體驗。所以在頁面設計上我們注重神秘的打造，陰暗的色彩氛圍、遠景的詭異的廟宇、散落的枯葉以及空中的鬼怪等。

　　為了讓用戶更全面的了解游戲，更好的體驗游戲的獨特魅力，我們在影、音、畫三方面的視覺表現上做足了功夫。

　　構思與素材整合：

　　游戲中的音樂表現不俗，象征著中國文化博大精深，所以在音樂對應的頁面就表現中國，中國文化最講究境界。竹子和古筝是中國的代表，古筝的音律配合波浪洶湧以竹林為背景，形成天地合一的境界。在表現形式上，沒有使用傳統播放器的形式，而是把古筝跟水波結合起來，水波隨著古筝的音樂頻率躍動，讓音樂完全融入到場景中。交互方面讓用戶撥動琴弦播放音樂，提高用戶參與度。在FLASH實踐方面使用了可視化波譜分析技術，讓音符隨著音樂的播放，在層疊的波浪中隨著音樂的節奏舞動，使得用戶在享受音樂的同時，更增添了視覺上的享受。

　　構思與素材整合：

　　日本的文化講究”靜”，所以在頁面設計中運用了屏風、香爐等元素創造了一個寂靜且充滿冥想的空間。隨著頁面打開屏風也隨之緩慢的向兩邊移動，設計素材選取了游戲截圖中檀木屏風和框體，配合古代香爐，展示了東方古色古香的奇異世界。為了突出空