聊聊那些讓頁面更加出彩的小細節

 　　今天的案例不服不行!作者分別從場景打造、文字效果、交互元素等五個方面展開，為同學們一一剖開游戲網站的設計細節，特別強調，每方面都有對應的設計方法，都是可以拿來自己上手用的，別說我沒告訴你喲。

　　@暢游VC ：我們在平時浏覽頁面時，經常會為一些優秀作品的細節所驚歎。這些細節之處有的看似非常不起眼，但是設計作品之間的差距有時往往卻正是這些不起眼的細節所決定的。什麼是細節呢?細節一定是很細微的方面麼?其實不然。個人覺得所謂頁面的細節之處，並不是頁面所必須包含的部分，但是卻是拉開頁面水平層次的一個重要方面，而且，細節不一定都是很細微的地方，很多大方面的處理也可以體現出細節。這篇文章我們就給大家總結一些在游戲頁面的設計中所體現出來的細節之處，大家可以看看這些細節的地方自己在平時的設計過程中有沒有注意到。如果有自己沒有注意到的地方，那以後可以自己嘗試一下，相信會幫助你的頁面變的更加出彩!

　　廢話不多說，我們通過下圖來看下本文從哪幾個方面跟大家來聊一聊游戲頁面的細節。

　　一、場景打造

　　關於場景打造這塊內容，這裡主要從場景的層次以及對場景進行一些與游戲主題相呼應的處理這兩個方面來進行描述。我們來看一些相關的例子：

　　上圖綠色圈中的數字代表遠近層次，即1代表離我們最近，2次之，3最遠。那麼此例就通過近景的樹葉，中間的人物以及遠景的天空塔，把畫面的層次體現的非常清楚，畫面感很強，而且主次分明。

　　上面兩張圖大家通過數字的標識也可以清楚地分析出它們的場景層級關系。這些呢都是通過增加一些前景事物的手法來展現場景層級關系，我們呢還可以利用主體元素與內容板塊之間的關系來體現頁面層級，如下圖：

　　上圖呢通過把其中一個人設至於背景之外，甚至放在了內容區裡，而另外一個人設則在背景裡面，以此而拉開頁面的層次感，也是一種不錯的方法。下圖的處理手法類似，這裡不再贅述。

　　下面我們來看一個關於對場景進行一些與游戲主題相呼應的處理的例子。

　　這是一個游戲的官網，受內容的限制，場景的打造上不像普通專題那麼靈活。這裡的背景打造用了並不復雜的手法，但是為了呼應游戲激烈熱血打斗的風格，設計師在處理的時候給導航的hover效果、banner的邊緣處及內容區的部分邊緣都做了切割碎片的效果，而且banner的背景也不是通常的矩形，而是下面斜切了一部分，使整體畫面動感十足。

　　還有，在頁面底部，設計師還做了一塊面積不大的斜三角，與上面呼應這些都是細節的體現。在游戲網站中利用圓、方、三角打造網頁框架的方法非常流行，想學習的同學來優設網搜騰訊美女設計師+空格+驚喜就可以看到咯。

　　你說如果沒有這些細節，頁面就不行了麼。不是，只是缺了這些細節，頁面好像就缺了那麼幾分打斗感。

　　類似的處理形式我們也可以看看下面這個例子。

　　相信大家從圈圈的標識應該也能看出來了，噴濺(血跡)效果幾乎被應用到了上圖的所有元素中，背景的血滴、人物邊緣的處理形式、導航條以及切換標簽幾乎無一例外。

　　二、文字效果

　　關於文字效果這塊內容，這裡主要從字形處理和字效處理兩個方面來進行描述。我們來看一些相關的例子：

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

　　這個呢用的是比較常用的書法體啦，主要是為了跟游戲的logo質感貼近。這裡有一點可取得細節之處就是設計師為了與血染蒼穹的主題相匹配，特意給文字加上了濺血的效果，看起來是不是有點殺戮的趕腳啊。

　　這個例子呢字形上我就不多說了，具體的方法呢詳見暢游VC教程《字體變形記!手把手教你用AI繪制Q版的萌萌哒字體》，這裡主要講解的一個細節的地方呢是文字旁邊的一堆娃娃，有木有趕腳本來就挺Q挺萌的字體加上這些搗蛋鬼之後，更加生動了呢?

　　這個跟上面的那個有相同點哦，這邊也請了娃娃過來，只是不太溫順，拿大斧子砍字，而且這裡設計師還給字做了砍出碎片的感覺，更加生動形象了。這裡還有個細節不知道大家注意到沒，這裡的主標題的字都通過一筆拉絲連接起來了，注意看下面的三個圈。是吧，這些小細節，以後用在自己的作品裡，別說是我說的啊!

　　這個處理手法比較簡單，把每個字分離出來，分別做效果，造成一個字壓著一個字的趕腳，層次感立馬就出現了。這種手法可能平時不太容易想到，但是用過一次也許你就上瘾了。

　　壓軸的出場!這種形式在游戲頁面中的出鏡率還是蠻高的，把文字放在主體的後面，來拉開層次。這裡要注意的是最好文字左右兩邊的數量能相同，這樣能保持平衡啊。另外這裡也是對文字做了切割效果，大家有木有發現凡是跟戰斗扯上關系的，用切割碎片神馬的最貼切了(毛筆字除外)。這個方法很實用，別說我沒告訴你啊!

　　三、頁面引導

　　為什麼要把頁面引導列出來呢?想必大家在浏覽網頁的時候最先注意到的應該都是圖片吧，應該鮮有人去直接掃字，畢竟圖片來的更為直觀。所以呢，頁面的引導性就很重要了。掃一眼畫面，就能猜到專題的大概主題是什麼，場景構造的有代入感，能夠讓浏覽者心甘情願的去閱讀，而且注意各個版塊之間的聯系，這是優秀的頁面應該具備的。

　　這個頁面，通過形象的場景打造，讓浏覽者不用去閱讀文字就能很快明白這是個跟“股票”相關的頁面，代入感極強。假象下如果去掉圈中的細節元素，畫面還會風采依舊麼?下面幾個例子的處理手法跟此例很像，都是通過打造一個非常具體的場景來增強頁面的引導性，這種都需要設計師日常要注意觀察生活中的細節，能夠聯想到與各場景相關的事物，才能打造出精彩的畫面。

　　上圖是一個非常棒的引導案例，設計師在處理的時候通過素材的拼湊疊加，做出右側齒輪機關的導航形式;在交互上通過浏覽者操控錘子去敲擊磬(Qing)，增加了頁面的趣味性;而且在場景的打造上，圈1中的近景與圈2所處的遠景拉開層次，近大遠小，近清晰遠模糊，畫面的縱深感比較強。我們再看一下下面這個例子，看看它的引導是怎麼做的。