【設(shè)計(jì)幫幫忙】第六期視頻 - 武俠類游戲網(wǎng)頁(yè)的設(shè)計(jì)

主要內(nèi)容

初期構(gòu)思 

人物的處理和搭配 

素材的選擇 

常用技巧，場(chǎng)景，光效的搭配

宙宙】這個(gè)大家在官網(wǎng)上應(yīng)該有看過(guò)。他是屬于左上跟左下有分別的它的一個(gè)選項(xiàng)。然后中間為主體網(wǎng)頁(yè)內(nèi)容的形式。大家有什么問(wèn)題可以直接說(shuō)，我覺(jué)得通過(guò)問(wèn)題去解決問(wèn)題還是比較好的。

韓老師】因?yàn)槲抑耙部紤]過(guò)做一些游戲的網(wǎng)站，但我遇到一些什么問(wèn)題呢，比如說(shuō)這個(gè)人物，是你之前就已經(jīng)選好了呢還是你自己設(shè)定的，比如說(shuō)具體哪個(gè)人物我要放在這個(gè)頁(yè)面里會(huì)比較好？

宙宙】人物的話在做網(wǎng)站前都會(huì)有一個(gè)素材庫(kù)，有很多各種各樣的人物，供我們美宣這塊來(lái)選擇。選擇好了之后，比方說(shuō)中間天明這個(gè)人物，他一開(kāi)始是海報(bào)形式的，然后我們選擇他可能是他對(duì)展示方面，內(nèi)容方面相對(duì)來(lái)說(shuō)比較合適。比如說(shuō)他左邊可以放東西，全部的人物可以放在右邊。而且他是游戲的主角，所以會(huì)根據(jù)頁(yè)面你初期想到的東西來(lái)挑選人物角色，而不是說(shuō)根據(jù)你后面想到的頁(yè)面來(lái)畫(huà)角色，這樣相對(duì)來(lái)說(shuō)時(shí)間會(huì)比較長(zhǎng)一點(diǎn)。

韓老師】場(chǎng)景也是這個(gè)游戲里面的嗎？

宙宙】場(chǎng)景的話大部分是游戲原版的東西，因?yàn)槭亲非笳媛?，所以相?duì)來(lái)說(shuō)會(huì)用游戲原版的東西。

大飛老師】這里面有沒(méi)有游戲之外的元素？

宙宙】沒(méi)有，全部是游戲本身的東西。

大飛老師】可不可以先分享分享圖形的一些處理方法？比如說(shuō)我們的排版啊背景你為什么這么處理啊怎么處理的啊，用的什么素材啊，包括左下角的那些墨都是怎么做出來(lái)的啊。

宙宙】其實(shí)一開(kāi)始在排版，人物，素材全部拼合好之后，顏色也調(diào)完了之后，其實(shí)這個(gè)光是做一個(gè)補(bǔ)充的作用。因?yàn)檎w來(lái)說(shuō)他是有一個(gè)景深的過(guò)程，相對(duì)比較模糊，人物前景的部分是比較真實(shí)的，它有一個(gè)光從后面打上來(lái)，我會(huì)加上一個(gè)光的效果，而且是加在劍的上面，能提高劍的力度感。

韓老師】人物是左手拿劍，導(dǎo)航斜著放是不是跟他這個(gè)手勢(shì)有關(guān)系？

宙宙】導(dǎo)航斜著放是排版的一個(gè)創(chuàng)新。因?yàn)槲覀冺?yè)面只有一屏，游戲官網(wǎng)默認(rèn)的第一屏是控制在560px到700px之間，所以在這個(gè)基礎(chǔ)上，如果導(dǎo)航放在上面或者是放在旁邊，不是特別的合適，所以我就用了左上或者是左下，在技術(shù)上是保持浮動(dòng)的，這樣的話中間這一塊是獨(dú)立開(kāi)的。

大飛老師】很多同學(xué)想知道背景的處理方法，景深是怎么做的。

宙宙】首先我們?cè)诠倬W(wǎng)首頁(yè)選素材的時(shí)候其實(shí)也蠻糾結(jié)的，因?yàn)槠鋵?shí)天明他的素材不是特別特別的多。然后在選人物的時(shí)候他動(dòng)作首先要有代表性，然后也要和原版動(dòng)畫(huà)有關(guān)聯(lián)，所以在挑選過(guò)程當(dāng)中我們選了這樣一張素材來(lái)做人物的主體。然后因?yàn)檫@個(gè)素材他是3渲染出來(lái)的，渲染的過(guò)程中光暈光效啊他都會(huì)整合到一起來(lái)渲染。然后我們拿到這個(gè)素材的時(shí)候我們也蠻糾結(jié)的，因?yàn)闆](méi)有通道啊，也沒(méi)有那種單獨(dú)的人物的帶透明背景的png格式的圖片。沒(méi)辦法我們也就只能把他扣出來(lái)，然后扣完了之后發(fā)現(xiàn)整體的感覺(jué)還是可以的，那種感覺(jué)，動(dòng)作還是比較適合現(xiàn)在的官網(wǎng)的那種形式。

宙宙】其實(shí)本身游戲的官網(wǎng)它都會(huì)有一個(gè)一樣的部分，這個(gè)是強(qiáng)制性的。就是無(wú)論你做什么樣的一個(gè)頁(yè)面他都會(huì)有這樣的一個(gè)東西。然后為了保證在頁(yè)面設(shè)計(jì)的過(guò)程當(dāng)中不需要有這樣的元素，其實(shí)相對(duì)來(lái)說(shuō)在頁(yè)面整體除了slogan以外，是做完之后再做這一塊的，有點(diǎn)像強(qiáng)加進(jìn)去的。

韓老師】因?yàn)槟莾河幸粋€(gè)煙嘛，所以我覺(jué)得有可能是，因?yàn)檫x圖的問(wèn)題，這個(gè)劍會(huì)擋住文字的區(qū)域，所以說(shuō)用這個(gè)煙讓文字去突出一些。如果沒(méi)有這個(gè)東西它可能文字跟這個(gè)劍有一個(gè)沖突，在視覺(jué)上不是表現(xiàn)得很好。

宙宙】就是因?yàn)橛羞@樣一個(gè)文字部分，大家也看到劍是黑色的嘛，我可能“除了戰(zhàn)斗”的“斗”字會(huì)跟劍有一個(gè)沖突。所以我弄了一個(gè)筆刷來(lái)讓文字的部分去凸顯出來(lái)。

韓老師】還有就是我在考慮的時(shí)候，比如你這個(gè)視頻的位置，為什么不放在左下角呢？那邊比較空，比如說(shuō)你要是自適應(yīng)的話拉過(guò)來(lái)也可以看到。還是因?yàn)樗@個(gè)視頻這個(gè)區(qū)域確實(shí)很重要，所以說(shuō)擺在文字的下面？

宙宙】其實(shí)這個(gè)要看網(wǎng)站體現(xiàn)的一些功能方面的一些東西。因?yàn)槠鋵?shí)這個(gè)頁(yè)面它如果放大其實(shí)相對(duì)來(lái)說(shuō)還是蠻大的。然后大家看到我用了很多參考線。

他這個(gè)是一個(gè)網(wǎng)站，比如說(shuō)960的一個(gè)視覺(jué)窗口嘛，我們做的時(shí)候都會(huì)考慮一個(gè)960或者說(shuō)980的一個(gè)寬度，所以最好所有的內(nèi)容就在這個(gè)范圍內(nèi)顯示，否則很多小的屏幕超出的內(nèi)容就顯示不出來(lái)了。所以視頻那塊我會(huì)放在左下角。

韓老師】如果說(shuō)考慮960，你左上角的那個(gè)logo會(huì)不會(huì)擋住文字？

宙宙】那塊的話我會(huì)做頁(yè)面的收縮。因?yàn)槭亲鰂lash后面會(huì)縮一點(diǎn)。所以想對(duì)來(lái)說(shuō)，可能logo這個(gè)部分會(huì)很靠近slogan。

韓老師】我為什么問(wèn)這個(gè)問(wèn)題呢，是因?yàn)槲以谧鲰?yè)面的時(shí)候我做的屏幕也很大，但就是說(shuō)我在設(shè)計(jì)的時(shí)候我也會(huì)考慮到980里面我去給他試一下，每個(gè)地方都不會(huì)有干擾。所以說(shuō)每個(gè)文字的擺放位置啊包括它的一個(gè)比例關(guān)系啊可能都會(huì)去考慮。這樣的話在大屏里沒(méi)有問(wèn)題，但我小屏的話因?yàn)槲覀冏龅氖亲赃m應(yīng)的嘛，所以logo各種位置的擺放都要是合理的。我們做的時(shí)候真正會(huì)考慮什么呢，一個(gè)是用戶比例，我們會(huì)問(wèn)用戶或者找一些調(diào)研的參數(shù)。我都會(huì)跟客戶去溝通，考不考慮這種分辨率，如果考慮的話我在設(shè)計(jì)的時(shí)候它的整個(gè)的比例關(guān)系，比如說(shuō)這個(gè)文字的寬度我會(huì)稍微往這個(gè)人這邊去靠一靠，我怕稍微有些影響。就是這些東西我會(huì)考慮的多一點(diǎn)。

宙宙】這個(gè)我會(huì)跟市場(chǎng)那邊去溝通。就像我們這一版本的，可能針對(duì)筆記本用戶會(huì)比較多一點(diǎn)嘛，然后筆記本用戶最普通的應(yīng)該是在1366的寬度，所以我們?cè)谧鲞@個(gè)最小我們就放在了1366這個(gè)寬度。所以其實(shí)后面的logo和slogan其實(shí)不會(huì)擋住的。

大飛老師】如果我從視覺(jué)層面來(lái)說(shuō)，我可能會(huì)喜歡把這個(gè)人物更突出一些，怎么樣讓這個(gè)人物有大片的這種感覺(jué)。如果我提視覺(jué)需求的話我可能需要那個(gè)云是不是也有一點(diǎn)這種速度感。完了在前景的時(shí)候，我想象你這個(gè)人在動(dòng)的一瞬間停止了，就是把劍往下一伸也好，就是他有那種魄力感，魄力感的話比如說(shuō)那個(gè)云是不是跟人有一個(gè)互動(dòng)，因?yàn)檫@個(gè)人很厲害是吧，就是云會(huì)不會(huì)因?yàn)檫@個(gè)人有一些變化。前景會(huì)不會(huì)有一些石塊啊，這個(gè)景深會(huì)更好。是不是這樣，這是我個(gè)人的觀點(diǎn)。

 宙宙】這個(gè)相對(duì)來(lái)說(shuō)層次方面會(huì)有更大的提升，但是實(shí)際上做網(wǎng)站的時(shí)候，你東西加得越多，反而就是妨礙視覺(jué)。你會(huì)覺(jué)得這個(gè)東西特別多特別雜，你要去抓那些主體內(nèi)容可能就要找。

 大飛老師】我明白，你說(shuō)的是提高那個(gè)視覺(jué)的信噪比，把沒(méi)用的東西一定要降低，突出的是人物還有那個(gè)slogan，還有產(chǎn)品的主題。我說(shuō)的那些不影響你的這些。你現(xiàn)在也有云，我那個(gè)也是云，但是我的那個(gè)云是動(dòng)態(tài)的跟那個(gè)人的能力是有互動(dòng)的。然后比如說(shuō)你這個(gè)劍嘩往前一伸，它后面會(huì)體現(xiàn)他這個(gè)人的（武術(shù)）能力。比如說(shuō)這個(gè)云啊會(huì)有變化，你想象咱們看過(guò)的一些大片，那種戰(zhàn)斗的場(chǎng)景，他在做這個(gè)動(dòng)作的時(shí)候他這個(gè)人物跟環(huán)境會(huì)有互動(dòng)。

宙宙】相當(dāng)于是人物的那個(gè)氣場(chǎng)。

楊老師】咱們一般做這種游戲官網(wǎng)，我們肯定要考慮到這個(gè)網(wǎng)站它有相當(dāng)一部分的視覺(jué)元素，那么除了這一部分之外，它應(yīng)該還有一些實(shí)體的信息。我想問(wèn)咱們這個(gè)游戲官網(wǎng)他這個(gè)主次比例是怎么分的。像這個(gè)頁(yè)面的話我們一看就知道這是游戲的一個(gè)主角，在這里它信息量相對(duì)要小一點(diǎn)。這種是所有網(wǎng)頁(yè)都這么分配嗎，還是說(shuō)他有一定的分配標(biāo)準(zhǔn)？

宙宙】這個(gè)其實(shí)在做游戲網(wǎng)頁(yè)之前，就像畫(huà)東西一樣前期你要有一個(gè)構(gòu)思。然后這個(gè)構(gòu)思它在網(wǎng)站設(shè)計(jì)的時(shí)候它叫網(wǎng)站策劃。包括它的一個(gè)信息排版，有多少內(nèi)容，人物占多少比例，這個(gè)在設(shè)計(jì)的時(shí)候要跟市場(chǎng)還有運(yùn)營(yíng)要確定一個(gè)網(wǎng)站策劃的一個(gè)內(nèi)容。

楊老師】那就是說(shuō)視覺(jué)占多少，設(shè)計(jì)占多少還是要根據(jù)不同的公司的運(yùn)營(yíng)狀態(tài)來(lái)規(guī)劃，對(duì)嗎？

宙宙】對(duì)。其實(shí)相對(duì)來(lái)說(shuō)是根據(jù)不同的一個(gè)策劃來(lái)定的，因?yàn)槭袌?chǎng)的需求不一樣。比如說(shuō)像我們現(xiàn)在給大家展示的這個(gè)頁(yè)面他其實(shí)是一個(gè)概念站類型，相對(duì)來(lái)說(shuō)做的更多的他可能是偏向flash類型的，它屬于一個(gè)純展示的頁(yè)面，而不像其他信息類型的網(wǎng)頁(yè)是資料查詢那種類型的。就像這種頁(yè)面就是一個(gè)比較烘托人物的一個(gè)官網(wǎng)類型。

楊老師】那我可不可以這樣理解，這個(gè)游戲現(xiàn)在要上線了，然后它怎么怎么樣地。拿我們企業(yè)站來(lái)說(shuō)的話就是偏品牌化的，如果是這個(gè)類型的話他可能就是視覺(jué)會(huì)偏重很多。然后比如說(shuō)有的網(wǎng)站它已經(jīng)上線了，比如說(shuō)有什么公測(cè)啊什么動(dòng)態(tài)啊這些東西，這種就是信息比較多一點(diǎn)是嗎。那像這種，剛才我們講的兩個(gè)類型（視覺(jué)和信息類型），不管是哪一種類型，比如說(shuō)一個(gè)游戲，它一般也是有好幾個(gè)人物，那我們應(yīng)該用哪一個(gè)，這個(gè)我們?cè)趺磥?lái)分呢？

宙宙】這個(gè)其實(shí)是根據(jù)游戲本身的一個(gè)特色。比如這邊人物的一個(gè)選擇，是要根據(jù)游戲里面，市場(chǎng)會(huì)定下來(lái)，他們會(huì)提供游戲人物的信息列表給我們，我們?cè)購(gòu)闹刑暨x人物。人物是市場(chǎng)或者運(yùn)營(yíng)那邊規(guī)定的，不是想選誰(shuí)就選誰(shuí)的。因?yàn)橛螒蚬镜脑O(shè)計(jì)嘛他更多的是偏向于市場(chǎng)需求的，前期市場(chǎng)已經(jīng)做過(guò)一些調(diào)查，然后在官網(wǎng)里要突出誰(shuí)，凸顯的是哪些角色，這個(gè)網(wǎng)站公開(kāi)之后主題是什么。比方說(shuō)我們這個(gè)網(wǎng)站的主題是“除了戰(zhàn)斗別無(wú)選擇”，突出一個(gè)戰(zhàn)斗的一個(gè)特色，所以相對(duì)來(lái)說(shuō)他會(huì)選一些比較暴力的角色來(lái)體現(xiàn)，而不是像一些比較唯美的女性角色。

其實(shí)大家都很喜歡頁(yè)面設(shè)計(jì)，但是游戲這塊，相對(duì)來(lái)說(shuō)是看市場(chǎng)的定位是怎樣的。

楊老師】我為什么問(wèn)這個(gè)問(wèn)題呢，因?yàn)槿绻覀冊(cè)O(shè)計(jì)師在開(kāi)始設(shè)計(jì)的時(shí)候?qū)φ麄€(gè)的官網(wǎng)沒(méi)有一個(gè)清楚的規(guī)劃的話，可能在做視覺(jué)的時(shí)候容易失控。剛剛我問(wèn)的兩個(gè)問(wèn)題，第一個(gè)是視覺(jué)和信息的比重，第二個(gè)是氛圍的烘托。如果你這兩個(gè)一開(kāi)始重心抓不住的話，做到后面可能這個(gè)畫(huà)面整體的感覺(jué)就會(huì)按照自己喜歡的地方去做了。

宙宙】其實(shí)在人物的選擇上面或者說(shuō)背景的選擇上，其實(shí)都要去溝通的。因?yàn)橄裎覀冏龉倬W(wǎng)的時(shí)候其實(shí)限制的東西會(huì)非常多，比如你不能去選哪一些角色，比如你這次的主題是戰(zhàn)斗你不能去選一些唯美的女性的角色，因?yàn)檫@種女性的角色是體現(xiàn)不出比較壯觀的場(chǎng)景啊或者說(shuō)有暴力傾向的人物啊或者說(shuō)戰(zhàn)斗的姿態(tài)，去體現(xiàn)官網(wǎng)的那種氛圍。