編者按：今天的案例不服不行！作者分別從場(chǎng)景打造、文字效果、交互元素等五個(gè)方面展開(kāi)，為同學(xué)們一一剖開(kāi)游戲網(wǎng)站的設(shè)計(jì)細(xì)節(jié)，特別強(qiáng)調(diào)，每方面都有對(duì)應(yīng)的設(shè)計(jì)方法，都是可以拿來(lái)自己上手用的，別說(shuō)我沒(méi)告訴你喲。

@暢游VC?：我們?cè)谄綍r(shí)瀏覽頁(yè)面時(shí)，經(jīng)常會(huì)為一些優(yōu)秀作品的細(xì)節(jié)所驚嘆。這些細(xì)節(jié)之處有的看似非常不起眼，但是設(shè)計(jì)作品之間的差距有時(shí)往往卻正是這些不起眼的細(xì)節(jié)所決定的。什么是細(xì)節(jié)呢？細(xì)節(jié)一定是很細(xì)微的方面么？其實(shí)不然。個(gè)人覺(jué)得所謂頁(yè)面的細(xì)節(jié)之處，并不是頁(yè)面所必須包含的部分，但是卻是拉開(kāi)頁(yè)面水平層次的一個(gè)重要方面，而且，細(xì)節(jié)不一定都是很細(xì)微的地方，很多大方面的處理也可以體現(xiàn)出細(xì)節(jié)。這篇文章我們就給大家總結(jié)一些在游戲頁(yè)面的設(shè)計(jì)中所體現(xiàn)出來(lái)的細(xì)節(jié)之處，大家可以看看這些細(xì)節(jié)的地方自己在平時(shí)的設(shè)計(jì)過(guò)程中有沒(méi)有注意到。如果有自己沒(méi)有注意到的地方，那以后可以自己嘗試一下，相信會(huì)幫助你的頁(yè)面變的更加出彩！

廢話不多說(shuō)，我們通過(guò)下圖來(lái)看下本文從哪幾個(gè)方面跟大家來(lái)聊一聊游戲頁(yè)面的細(xì)節(jié)。

一、場(chǎng)景打造

關(guān)于場(chǎng)景打造這塊內(nèi)容，這里主要從場(chǎng)景的層次以及對(duì)場(chǎng)景進(jìn)行一些與游戲主題相呼應(yīng)的處理這兩個(gè)方面來(lái)進(jìn)行描述。我們來(lái)看一些相關(guān)的例子：

上圖綠色圈中的數(shù)字代表遠(yuǎn)近層次，即1代表離我們最近，2次之，3最遠(yuǎn)。那么此例就通過(guò)近景的樹(shù)葉，中間的人物以及遠(yuǎn)景的天空塔，把畫(huà)面的層次體現(xiàn)的非常清楚，畫(huà)面感很強(qiáng)，而且主次分明。

上面兩張圖大家通過(guò)數(shù)字的標(biāo)識(shí)也可以清楚地分析出它們的場(chǎng)景層級(jí)關(guān)系。這些呢都是通過(guò)增加一些前景事物的手法來(lái)展現(xiàn)場(chǎng)景層級(jí)關(guān)系，我們呢還可以利用主體元素與內(nèi)容板塊之間的關(guān)系來(lái)體現(xiàn)頁(yè)面層級(jí)，如下圖：

上圖呢通過(guò)把其中一個(gè)人設(shè)至于背景之外，甚至放在了內(nèi)容區(qū)里，而另外一個(gè)人設(shè)則在背景里面，以此而拉開(kāi)頁(yè)面的層次感，也是一種不錯(cuò)的方法。下圖的處理手法類(lèi)似，這里不再贅述。

下面我們來(lái)看一個(gè)關(guān)于對(duì)場(chǎng)景進(jìn)行一些與游戲主題相呼應(yīng)的處理的例子。

這是一個(gè)游戲的官網(wǎng)，受內(nèi)容的限制，場(chǎng)景的打造上不像普通專題那么靈活。這里的背景打造用了并不復(fù)雜的手法，但是為了呼應(yīng)游戲激烈熱血打斗的風(fēng)格，設(shè)計(jì)師在處理的時(shí)候給導(dǎo)航的hover效果、banner的邊緣處及內(nèi)容區(qū)的部分邊緣都做了切割碎片的效果，而且banner的背景也不是通常的矩形，而是下面斜切了一部分，使整體畫(huà)面動(dòng)感十足。

還有，在頁(yè)面底部，設(shè)計(jì)師還做了一塊面積不大的斜三角，與上面呼應(yīng)這些都是細(xì)節(jié)的體現(xiàn)。在游戲網(wǎng)站中利用圓、方、三角打造網(wǎng)頁(yè)框架的方法非常流行，想學(xué)習(xí)的同學(xué)來(lái)優(yōu)設(shè)網(wǎng)搜騰訊美女設(shè)計(jì)師+空格+驚喜就可以看到咯。

你說(shuō)如果沒(méi)有這些細(xì)節(jié)，頁(yè)面就不行了么。不是，只是缺了這些細(xì)節(jié)，頁(yè)面好像就缺了那么幾分打斗感。

類(lèi)似的處理形式我們也可以看看下面這個(gè)例子。

相信大家從圈圈的標(biāo)識(shí)應(yīng)該也能看出來(lái)了，噴濺（血跡）效果幾乎被應(yīng)用到了上圖的所有元素中，背景的血滴、人物邊緣的處理形式、導(dǎo)航條以及切換標(biāo)簽幾乎無(wú)一例外。

二、文字效果

關(guān)于文字效果這塊內(nèi)容，這里主要從字形處理和字效處理兩個(gè)方面來(lái)進(jìn)行描述。我們來(lái)看一些相關(guān)的例子：

上圖中設(shè)計(jì)師就是通過(guò)結(jié)合頁(yè)面主題對(duì)字形做了變形處理，使字體看起來(lái)較為鋒利且充滿戰(zhàn)斗感。有的朋友可能會(huì)說(shuō)自己在文字變形這塊能力較弱，如果是這樣的話大家可以嘗試在某一種字體的基礎(chǔ)上去進(jìn)行微變形，如上圖通過(guò)把文字轉(zhuǎn)化為形狀后，給字形增加一些尖角，或者一些刀子的形狀，這些如果大家自己多去嘗試都還是不算困難的。在效果方面，給字體整體加上了火光，尤其在“火”字的上面加上了一束火焰，使字的整體效果與主題更加貼切。

這個(gè)呢用的是比較常用的書(shū)法體啦，主要是為了跟游戲的logo質(zhì)感貼近。這里有一點(diǎn)可取得細(xì)節(jié)之處就是設(shè)計(jì)師為了與血染蒼穹的主題相匹配，特意給文字加上了濺血的效果，看起來(lái)是不是有點(diǎn)殺戮的趕腳啊。

這個(gè)例子呢字形上我就不多說(shuō)了，具體的方法呢詳見(jiàn)暢游VC教程《字體變形記！手把手教你用AI繪制Q版的萌萌噠字體》，這里主要講解的一個(gè)細(xì)節(jié)的地方呢是文字旁邊的一堆娃娃，有木有趕腳本來(lái)就挺Q挺萌的字體加上這些搗蛋鬼之后，更加生動(dòng)了呢？

這個(gè)跟上面的那個(gè)有相同點(diǎn)哦，這邊也請(qǐng)了娃娃過(guò)來(lái)，只是不太溫順，拿大斧子砍字，而且這里設(shè)計(jì)師還給字做了砍出碎片的感覺(jué)，更加生動(dòng)形象了。這里還有個(gè)細(xì)節(jié)不知道大家注意到?jīng)]，這里的主標(biāo)題的字都通過(guò)一筆拉絲連接起來(lái)了，注意看下面的三個(gè)圈。是吧，這些小細(xì)節(jié)，以后用在自己的作品里，別說(shuō)是我說(shuō)的啊！

這個(gè)處理手法比較簡(jiǎn)單，把每個(gè)字分離出來(lái)，分別做效果，造成一個(gè)字壓著一個(gè)字的趕腳，層次感立馬就出現(xiàn)了。這種手法可能平時(shí)不太容易想到，但是用過(guò)一次也許你就上癮了。

壓軸的出場(chǎng)！這種形式在游戲頁(yè)面中的出鏡率還是蠻高的，把文字放在主體的后面，來(lái)拉開(kāi)層次。這里要注意的是最好文字左右兩邊的數(shù)量能相同，這樣能保持平衡啊。另外這里也是對(duì)文字做了切割效果，大家有木有發(fā)現(xiàn)凡是跟戰(zhàn)斗扯上關(guān)系的，用切割碎片神馬的最貼切了（毛筆字除外）。這個(gè)方法很實(shí)用，別說(shuō)我沒(méi)告訴你啊！

別說(shuō)我沒(méi)告訴你，上面提到的方法這里能找到喲！《玩轉(zhuǎn)字體！BANNER設(shè)計(jì)經(jīng)驗(yàn)分享之字形字體篇》

三、頁(yè)面引導(dǎo)

為什么要把頁(yè)面引導(dǎo)列出來(lái)呢？想必大家在瀏覽網(wǎng)頁(yè)的時(shí)候最先注意到的應(yīng)該都是圖片吧，應(yīng)該鮮有人去直接掃字，畢竟圖片來(lái)的更為直觀。所以呢，頁(yè)面的引導(dǎo)性就很重要了。掃一眼畫(huà)面，就能猜到專題的大概主題是什么，場(chǎng)景構(gòu)造的有代入感，能夠讓瀏覽者心甘情愿的去閱讀，而且注意各個(gè)版塊之間的聯(lián)系，這是優(yōu)秀的頁(yè)面應(yīng)該具備的。

這個(gè)頁(yè)面，通過(guò)形象的場(chǎng)景打造，讓瀏覽者不用去閱讀文字就能很快明白這是個(gè)跟“股票”相關(guān)的頁(yè)面，代入感極強(qiáng)。假象下如果去掉圈中的細(xì)節(jié)元素，畫(huà)面還會(huì)風(fēng)采依舊么？下面幾個(gè)例子的處理手法跟此例很像，都是通過(guò)打造一個(gè)非常具體的場(chǎng)景來(lái)增強(qiáng)頁(yè)面的引導(dǎo)性，這種都需要設(shè)計(jì)師日常要注意觀察生活中的細(xì)節(jié)，能夠聯(lián)想到與各場(chǎng)景相關(guān)的事物，才能打造出精彩的畫(huà)面。

上圖是一個(gè)非常棒的引導(dǎo)案例，設(shè)計(jì)師在處理的時(shí)候通過(guò)素材的拼湊疊加，做出右側(cè)齒輪機(jī)關(guān)的導(dǎo)航形式；在交互上通過(guò)瀏覽者操控錘子去敲擊磬（Qing），增加了頁(yè)面的趣味性；而且在場(chǎng)景的打造上，圈1中的近景與圈2所處的遠(yuǎn)景拉開(kāi)層次，近大遠(yuǎn)小，近清晰遠(yuǎn)模糊，畫(huà)面的縱深感比較強(qiáng)。我們?cè)倏匆幌孪旅孢@個(gè)例子，看看它的引導(dǎo)是怎么做的。

這是一個(gè)內(nèi)容比較多的頁(yè)面，這里設(shè)計(jì)師把每個(gè)大部分的內(nèi)容用色塊進(jìn)行區(qū)分。倘若只是單純的用色塊來(lái)分割每一塊的內(nèi)容，那分割處會(huì)顯得比較生硬，而且容易給人造成內(nèi)容脫離的感覺(jué)，不具有整體性。這里設(shè)計(jì)師巧妙地運(yùn)用鐵鏈+鐮刀的尖頭構(gòu)成一件武器，從而將頁(yè)面的各個(gè)版塊貫穿起來(lái)，這里鏈條不僅起到引導(dǎo)作用，而且還能拉開(kāi)頁(yè)面的層次，這是個(gè)非常棒的處理。

此外，大家注意看每?jī)蓚€(gè)色塊的交接處還有一個(gè)向下提示的圖標(biāo)，這個(gè)圖標(biāo)不僅提示瀏覽者下方還有內(nèi)容，而且像紐扣一樣把兩個(gè)版塊連在一起。這兩處細(xì)節(jié)大家也可以嘗試著運(yùn)用到內(nèi)容較多且分為幾大版塊的頁(yè)面中去。

上面兩個(gè)例子跟鐮刀那個(gè)在引導(dǎo)方式上很相似，如圈中都是通過(guò)某種元素把相鄰的板塊連接起來(lái)，而第一個(gè)頁(yè)面最右上角的內(nèi)容定位標(biāo)簽和第二張圖最下方的TOP按鈕也都是長(zhǎng)頁(yè)面中可以運(yùn)用的細(xì)節(jié)之處，都是非常不錯(cuò)的引導(dǎo)形式。

四、交互元素

頁(yè)面的交互做得好，用戶體驗(yàn)佳也是考量一個(gè)優(yōu)秀頁(yè)面的標(biāo)準(zhǔn)之一。那么對(duì)于游戲?qū)ｎ}頁(yè)面而言，我們對(duì)于頁(yè)面中重要的按鈕、切換標(biāo)簽或者其他交互元素進(jìn)行一些細(xì)節(jié)性的修飾，不僅可以使頁(yè)面的整體元素風(fēng)格看起來(lái)更加統(tǒng)一，也會(huì)提高頁(yè)面的交互性。

這個(gè)頁(yè)面的四個(gè)按鈕，在形式上都區(qū)別于傳統(tǒng)的按鈕。這里之前在設(shè)計(jì)的時(shí)候設(shè)計(jì)師倒是試過(guò)做成傳統(tǒng)按鈕的形式，可是感覺(jué)上總是氛圍不足，而且直白地放一個(gè)按鈕也感覺(jué)比較突兀。后來(lái)經(jīng)過(guò)進(jìn)一步的處理，直接通過(guò)巖石的效果來(lái)做成按鈕，調(diào)成與頁(yè)面調(diào)性相匹配的顏色與質(zhì)感，再結(jié)合不同按鈕的重要性調(diào)整大小，拉開(kāi)空間感，不僅看起來(lái)與整個(gè)頁(yè)面風(fēng)格統(tǒng)一，而且相比傳統(tǒng)按鈕，用戶更有點(diǎn)擊的欲望。

這個(gè)例子與上一個(gè)比較類(lèi)似，這里選取類(lèi)似于翅膀質(zhì)感的水晶來(lái)作為按鈕。與人物一前一后，拉開(kāi)了空間，而且風(fēng)格上也是與頁(yè)面非常搭配，點(diǎn)擊欲較強(qiáng)。

不知道如果大家不看我畫(huà)的框能不能夠發(fā)現(xiàn)上面這個(gè)轉(zhuǎn)盤(pán)的微小細(xì)節(jié)處？

好了，不賣(mài)關(guān)子了。這個(gè)轉(zhuǎn)盤(pán)的最好的細(xì)節(jié)處理的地方就在于獎(jiǎng)品的名稱那里，通常我們?cè)谔幚磉@類(lèi)圓形路徑上寫(xiě)字的情況，都是直接畫(huà)個(gè)圓形的路徑，完了之后在路徑上直接打字，再去調(diào)整文字之間的間距，這樣呢勢(shì)必會(huì)造成一個(gè)問(wèn)題——會(huì)有至多一半的名稱是倒著的。這樣呢會(huì)給瀏覽者在閱讀的時(shí)候造成一定的障礙，這里設(shè)計(jì)師正式考慮到了這一微小的細(xì)節(jié)，所以通過(guò)一定的方法使所有的名稱相對(duì)于水平線而言都是偏正方向的，這樣用戶在閱讀名稱的時(shí)候就會(huì)很容易識(shí)別。

這個(gè)方法稍后優(yōu)設(shè)會(huì)有教程發(fā)布，同學(xué)們留意下喲。

這張圖的切割與按鈕的形狀搭配的非常巧妙，利用對(duì)畫(huà)面的一個(gè)左右切割，打造出了對(duì)戰(zhàn)的感覺(jué)，而且利用冷暖調(diào)進(jìn)行區(qū)分，而下方的“我要報(bào)名”按鈕與切割出相呼應(yīng)做成了三角形的形狀，在下面的三個(gè)按鈕整體呈梯形狀緊隨其后，這一塊按鈕元素與主圖結(jié)合的非常好。試想如果把這些按鈕換成傳統(tǒng)的方形按鈕，效果還會(huì)有這么好么？

五、飛舞的碎碎

看到這個(gè)標(biāo)題大家是不是有點(diǎn)好奇？何為飛舞的碎碎？其實(shí)大家應(yīng)該能夠猜到哈，碎碎基本上在90%以上的游戲頁(yè)面中都可以見(jiàn)到，例如：樹(shù)葉、花瓣、折紙、金幣、火花、碎片等等，這些能夠?yàn)轫?yè)面造勢(shì)，而且拉開(kāi)空間感的零碎物體，這里我們把它叫做碎碎。還不明白？ok，注意下面例子中框內(nèi)的元素。

通過(guò)以上這些例子想必大家對(duì)所謂的飛舞的碎碎應(yīng)該有一個(gè)比較熟悉的了解了吧。有沒(méi)有發(fā)現(xiàn)確實(shí)好多頁(yè)面都有用到這些東西呢？那我們是不是也應(yīng)該給自己的頁(yè)面也加上呢？那么問(wèn)題來(lái)了，到哪去找這些碎碎呢？答案，日常收集吧孩紙。平時(shí)看到一些類(lèi)似的素材就搜集起來(lái)，以備不時(shí)之需，這些元素有的只是通過(guò)一個(gè)原始素材，然后經(jīng)過(guò)放大縮小、高斯模糊、動(dòng)感模糊、水平垂直翻轉(zhuǎn)就可以得到，可見(jiàn)建立一個(gè)屬于自己的素材庫(kù)是多么的重要。

集大成實(shí)例

這是一個(gè)很勁爆的校園活動(dòng)UE，結(jié)合《幻想神域》二次元?jiǎng)勇挠螒蝻L(fēng)格以及活動(dòng)主題“走進(jìn)校園玩家沖”的概念，我們?cè)陧?yè)面的設(shè)計(jì)過(guò)程中盡量把頁(yè)面的氛圍做的活潑歡快一些，另外結(jié)合校園的主題我們聯(lián)想一些與之相關(guān)的事物例如書(shū)本紙張等。那結(jié)合這些考慮的因素，于是乎出來(lái)的以下的作品，大家來(lái)一起找找頁(yè)面中我提到的那些細(xì)節(jié)吧。

文章最開(kāi)始提到頁(yè)面細(xì)節(jié)的時(shí)候也許大家還在想是一些也許只有牛人才會(huì)注意到的地方，那現(xiàn)在大家怎么看呢？其實(shí)這些細(xì)節(jié)大家都是可以做到的，只是有些時(shí)候可能想不到，那現(xiàn)在既然提到了，以后是不是可以嘗試給自己的頁(yè)面加上這些細(xì)節(jié)呢？而且我們通過(guò)瀏覽別人的作品，發(fā)現(xiàn)那些好的細(xì)節(jié)之處也可以自己去試試，那樣不斷的去實(shí)踐，最后才能轉(zhuǎn)化為自己的東西，自己的水平也才能夠提高。

暢游VC的超華麗教程合集！

?讓配色變得簡(jiǎn)單的小工具使用教程！
《VC教程！教你使用最受歡迎的配色小工具KULER》

木有素材也可以快速創(chuàng)造特有氛圍的設(shè)計(jì)方法！
《VC教程！教你快速打造場(chǎng)景氛圍（附PSD下載）》

UI設(shè)計(jì)師來(lái)學(xué)！教你繪制超炫的戰(zhàn)爭(zhēng)按鈕！
《VC教程：超酷現(xiàn)代戰(zhàn)爭(zhēng)按鈕制作過(guò)程》

原文地址：vc.changyou

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量85萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：