大家好，我是阿槍，在這里與大家分享《絲路英雄》官網(wǎng)改版的一些總結(jié)與心得，希望能給大家的工作帶來幫助。

之所以要進行這次改版是因為老官網(wǎng)品質(zhì)感較差，延展性較差，用戶體驗薄弱，固需要重新制作擁有更高用戶價值的頁面。

PS:WebGame = 網(wǎng)頁游戲

開講前先給大家看看改版的效果,如果想體驗網(wǎng)頁效果請點擊sl.qq.com

改版后:

改版前：

#p#

提綱

1.網(wǎng)頁游戲現(xiàn)狀分析
2.產(chǎn)品設(shè)計思考
3.設(shè)計執(zhí)行細節(jié)
4.結(jié)案陳詞

網(wǎng)頁游戲現(xiàn)狀分析

1.收入逐漸提高，在公司內(nèi)部得到了一定程度的重視
2.成立了單獨負責(zé)網(wǎng)頁游戲的項目組
3.市場價值高，潛力巨大
4.急需提高游戲品質(zhì)，以迎合用戶對網(wǎng)頁游戲的要求提高
5.人群比傳統(tǒng)網(wǎng)絡(luò)游戲受教育程度高，消費能力更強
6.由于是 |騰訊游戲| 旗下產(chǎn)品，必須把頁面的品質(zhì)感與其他游戲官網(wǎng)看齊，以維護公司的品牌形象

產(chǎn)品設(shè)計思考

區(qū)分官網(wǎng)背景同質(zhì)化

目前WEBGAME中存在了許多古代策略游戲，《絲路英雄》也是其中一款，而同類產(chǎn)品的官網(wǎng)也存在著大量的同質(zhì)化現(xiàn)象，大部分的官網(wǎng)頭部都以火焰攻打城門為背景。

而悲劇的事情是，開發(fā)公司提供的CG原畫也是火焰攻打城門，且品質(zhì)并不優(yōu)秀。

在這樣的環(huán)境下，我選擇了放棄攻打城門的場景轉(zhuǎn)而制作戰(zhàn)爭后的場景，以達到既能區(qū)分同質(zhì)產(chǎn)品也不失戰(zhàn)爭感的視覺效果。在加如灰塵火星的FLASH后，效果更佳。
處理后得到下圖：

#p#

同理處理人物素材得到下圖：

古代游戲人物素材處理中，通過高光工具提亮鎧甲高光部分是最常用的手法之一做完以上兩部后就得到了較理想的場景及人物素材了。

制作UI提高網(wǎng)站品質(zhì)

WEBGAME制作周期短成本低，但同時連帶而來的硬傷則是游戲本身品質(zhì)無法與大型網(wǎng)絡(luò)游戲相比較，其游戲內(nèi)的UI品質(zhì)感較差不利于配合市場活動的游戲官網(wǎng)，所以我選擇了自己制作UI。
下圖為《絲路英雄》游戲界面：

可見其游戲UI粗糙，沒經(jīng)過周全的思考，且可用性很低。于是我堅決的拋棄了游戲本身的UI轉(zhuǎn)而自行制作UI。
以下是制作出來的UI

#p#

使用目前較流行的重質(zhì)感與輕質(zhì)結(jié)合的手法

絲路官網(wǎng)采用了| 重 | 中 | 輕 | 重 的UI布局，要注意的是變化過層不可過分突兀

當(dāng)然設(shè)計師在選擇重質(zhì)感的擺放位置時需要根據(jù)不同的產(chǎn)品特性及頁面布局來進行選擇。而某些成熟產(chǎn)品可以擯棄掉重質(zhì)感的使用，轉(zhuǎn)而通過輕質(zhì)感來突出官網(wǎng)功能，如《地下城與勇士》最新改版官網(wǎng)。

在古代游戲頁面里加入某些現(xiàn)代元素使頁面古代而不古板

在官網(wǎng)內(nèi)加入常用的易于識別的小英文，阿拉伯?dāng)?shù)字，小對話框，現(xiàn)代寫實人物，以及合適的現(xiàn)代小零件等等，可使本身為古代題材的官網(wǎng)變的不古板

騰訊游戲內(nèi)多款網(wǎng)頁游戲設(shè)計的取舍

由于公司未來還有同類的產(chǎn)品需要上線，且重要級別比絲路英雄高，顧在最開始我把更有利于表現(xiàn)戰(zhàn)斗的紅色留給了后面的產(chǎn)品轉(zhuǎn)而使用冷色系來制作頁面。下圖是冷色系飛機稿：

#p#

后在與項目組的PK中，項目組提及到官網(wǎng)UI與游戲UI的落差感太大，顧糾正了顏色的取向轉(zhuǎn)而使用暖色系：

雖然這個冷色系的官網(wǎng)最后成了飛機稿，但說這個是想表明的是當(dāng)有許多自身產(chǎn)品同質(zhì)化的時候，設(shè)計師有必要長遠考慮而做出一定的取舍。
區(qū)分內(nèi)部產(chǎn)品的手法除了顏色區(qū)分還有質(zhì)感的區(qū)分，而針對古代游戲進行多種不同的金屬質(zhì)感的區(qū)分將會是不錯的著手點。

以上幾點設(shè)計前的考慮都是最后成品所得效果不可或缺的，所以描寫的比較詳細，
另外也有其他是需要設(shè)計時要注意的在此就簡略帶過
1.重要的【開始游戲】按鈕
 首當(dāng)其沖的就是WEBGAME官網(wǎng)內(nèi)最最重要的元素是：開始游戲而非傳統(tǒng)網(wǎng)游的下載游戲,需謹慎使用FLASH避免造成運營的事故

2.比傳統(tǒng)網(wǎng)游更需要好看的官網(wǎng)
  WEBGAME比起傳統(tǒng)MMORPG更需要一個美麗的官網(wǎng)來協(xié)助項目組及品牌組“拉新”，因為WEBGAME游戲內(nèi)的畫面質(zhì)量普片較差

3.節(jié)省后續(xù)的廣告制作工作
  WEBGAME官網(wǎng)上線后我們的將不再支持WEBGAME的活動圖片制作，固要在官網(wǎng)設(shè)計時做一個包容性較強的活動圖片框架又 或者盡早的制定廣告規(guī)范,且應(yīng)為易于執(zhí)行的規(guī)范

4.規(guī)避弱項
    項目組的同事普片認為“游戲截圖”是必須存在的欄目，但WEBGAEM的游戲畫面卻是不堪入目，所以需要在設(shè)計上對游戲截圖進行弱化，從而達到規(guī)避自己弱項的目的，同時可以此為契機，推動游戲游戲官網(wǎng)首頁內(nèi)容壓縮

5.根據(jù)用戶群制作更適合的網(wǎng)頁
  WEBGAME有許多小顯示器及NOTEBOOK用戶，應(yīng)非常注意一屏內(nèi)容的控制，尤其是服務(wù)器列表頁
6.服務(wù)器列表頁文件大小控制
    服務(wù)器列表頁應(yīng)與重構(gòu)同事一同協(xié)商以降低服務(wù)器列表頁的文件大小，因為服務(wù)器列表頁將是大量玩家訪問的頁面，降低文件大小可避免運營事故以及降低運營成本，PS：在同樣用戶基數(shù)的情況下WEBGAME用戶訪問官網(wǎng)的比例遠遠高于傳統(tǒng)網(wǎng)絡(luò)游戲

設(shè)計執(zhí)行細節(jié)

官網(wǎng)背景處理

#p#

把飽和度降到零后再用色彩平衡添加少量紅色。再把對比度提高，得到一張殘舊的背景圖片，把遠景用高光工具提亮，得到戰(zhàn)爭后的黎明的感覺，并可拉出場景的空間感覺。把一些精度較低的地方用加深工具抹黑以隱藏本身圖片的破綻，再用印章工具把右邊的塔樓印到左邊后得到中景，同理是為了空間感覺。最后還是用印章工具把一些不利于頁面結(jié)構(gòu)的東西涂掉，例如鎖鏈及沒用的木板。經(jīng)過以上處理后就能得到一張品質(zhì)較高的背景圖。

PS：降低飽和度是處理品質(zhì)較差素材的常用手法

制作官網(wǎng)質(zhì)感UI的思考

質(zhì)感思考：鑒于《絲路英雄》乃三國時代的產(chǎn)物，顧UI大多使用的是三國時期流行的黑鐵的顏色。

造型思考：因為是策略游戲，顧使用權(quán)利象征的獅頭作為造型，也因為龍樣的UI已經(jīng)被其他同類產(chǎn)品大量使用顧在此也做了規(guī)避。

工程量的評：由于自行繪制UI是很辛苦的且非常耗時的，所以只在頭部導(dǎo)航繪制UI及非常重要的開始游戲進行了UI的繪制，到功能部分則采用了更利于使用的輕質(zhì)感。

結(jié)案陳詞

網(wǎng)頁游戲官網(wǎng)設(shè)計的環(huán)境比較險要，硬傷多多，則需要設(shè)計師有比較強的適應(yīng)能力，且設(shè)計師不應(yīng)因為自己所帶的產(chǎn)品本身質(zhì)量較差而感到泄氣，放棄了設(shè)計高品質(zhì)頁面的理念，應(yīng)想辦法克服困難達到最終目標，并可提升自己的設(shè)計能力，不以物喜，不以己悲。

原文：http://www.tgideas.com/?p=920