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

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

之所以要進(jìn)行這次改版是因?yàn)槔瞎倬W(wǎng)品質(zhì)感較差，延展性較差，用戶體驗(yàn)薄弱，固需要重新制作擁有更高用戶價(jià)值的頁(yè)面。

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

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

改版后:

改版前：

提綱

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

官網(wǎng)背景處理

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

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

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

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

造型思考：因?yàn)槭遣呗杂螒?，顧使用?quán)利象征的獅頭作為造型，也因?yàn)辇垬拥腢I已經(jīng)被其他同類產(chǎn)品大量使用顧在此也做了規(guī)避。

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

結(jié)案陳詞

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

來(lái)源：http://www.tgideas.com/?p=920