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

主要內(nèi)容

初期構(gòu)思 

人物的處理和搭配 

素材的選擇 

常用技巧，場景，光效的搭配

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

韓老師】因為我之前也考慮過做一些游戲的網(wǎng)站，但我遇到一些什么問題呢，比如說這個人物，是你之前就已經(jīng)選好了呢還是你自己設(shè)定的，比如說具體哪個人物我要放在這個頁面里會比較好？

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

韓老師】場景也是這個游戲里面的嗎？

宙宙】場景的話大部分是游戲原版的東西，因為是追求正版嘛，所以相對來說會用游戲原版的東西。

大飛老師】這里面有沒有游戲之外的元素？

宙宙】沒有，全部是游戲本身的東西。

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

宙宙】其實一開始在排版，人物，素材全部拼合好之后，顏色也調(diào)完了之后，其實這個光是做一個補充的作用。因為整體來說他是有一個景深的過程，相對比較模糊，人物前景的部分是比較真實的，它有一個光從后面打上來，我會加上一個光的效果，而且是加在劍的上面，能提高劍的力度感。

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

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

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

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

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

韓老師】因為那兒有一個煙嘛，所以我覺得有可能是，因為選圖的問題，這個劍會擋住文字的區(qū)域，所以說用這個煙讓文字去突出一些。如果沒有這個東西它可能文字跟這個劍有一個沖突，在視覺上不是表現(xiàn)得很好。

宙宙】就是因為有這樣一個文字部分，大家也看到劍是黑色的嘛，我可能“除了戰(zhàn)斗”的“斗”字會跟劍有一個沖突。所以我弄了一個筆刷來讓文字的部分去凸顯出來。

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

宙宙】其實這個要看網(wǎng)站體現(xiàn)的一些功能方面的一些東西。因為其實這個頁面它如果放大其實相對來說還是蠻大的。然后大家看到我用了很多參考線。

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

韓老師】如果說考慮960，你左上角的那個logo會不會擋住文字？

宙宙】那塊的話我會做頁面的收縮。因為是做flash后面會縮一點。所以想對來說，可能logo這個部分會很靠近slogan。

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

宙宙】這個我會跟市場那邊去溝通。就像我們這一版本的，可能針對筆記本用戶會比較多一點嘛，然后筆記本用戶最普通的應(yīng)該是在1366的寬度，所以我們在做這個最小我們就放在了1366這個寬度。所以其實后面的logo和slogan其實不會擋住的。

大飛老師】如果我從視覺層面來說，我可能會喜歡把這個人物更突出一些，怎么樣讓這個人物有大片的這種感覺。如果我提視覺需求的話我可能需要那個云是不是也有一點這種速度感。完了在前景的時候，我想象你這個人在動的一瞬間停止了，就是把劍往下一伸也好，就是他有那種魄力感，魄力感的話比如說那個云是不是跟人有一個互動，因為這個人很厲害是吧，就是云會不會因為這個人有一些變化。前景會不會有一些石塊啊，這個景深會更好。是不是這樣，這是我個人的觀點。

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

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

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

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

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

楊老師】那就是說視覺占多少，設(shè)計占多少還是要根據(jù)不同的公司的運營狀態(tài)來規(guī)劃，對嗎？

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

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

宙宙】這個其實是根據(jù)游戲本身的一個特色。比如這邊人物的一個選擇，是要根據(jù)游戲里面，市場會定下來，他們會提供游戲人物的信息列表給我們，我們再從中挑選人物。人物是市場或者運營那邊規(guī)定的，不是想選誰就選誰的。因為游戲公司的設(shè)計嘛他更多的是偏向于市場需求的，前期市場已經(jīng)做過一些調(diào)查，然后在官網(wǎng)里要突出誰，凸顯的是哪些角色，這個網(wǎng)站公開之后主題是什么。比方說我們這個網(wǎng)站的主題是“除了戰(zhàn)斗別無選擇”，突出一個戰(zhàn)斗的一個特色，所以相對來說他會選一些比較暴力的角色來體現(xiàn)，而不是像一些比較唯美的女性角色。

其實大家都很喜歡頁面設(shè)計，但是游戲這塊，相對來說是看市場的定位是怎樣的。

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

宙宙】其實在人物的選擇上面或者說背景的選擇上，其實都要去溝通的。因為像我們做官網(wǎng)的時候其實限制的東西會非常多，比如你不能去選哪一些角色，比如你這次的主題是戰(zhàn)斗你不能去選一些唯美的女性的角色，因為這種女性的角色是體現(xiàn)不出比較壯觀的場景啊或者說有暴力傾向的人物啊或者說戰(zhàn)斗的姿態(tài)，去體現(xiàn)官網(wǎng)的那種氛圍。