起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識小細節讓頁面更加出彩
我們在平時瀏覽頁面時，經常會為一些優秀作品的細節所驚嘆。這些細節之處有的看似非常不起眼，但是設計作品之間的差距有時往往卻正是這些不起眼的細 節所決定的。什么是細節呢？細節一定是很細微的方面么？其實不然。個人覺得所謂頁面的細節之處，并不是頁面所必須包含的部分，但是卻是拉開頁面水平層次的 一個重要方面，而且，細節不一定都是很細微的地方，很多大方面的處理也可以體現出細節。這篇文章我們就給大家總結一些在游戲頁面的設計中所體現出來的細節之處，大家可以看看這些細節的地方自己在平時的設計過程中有沒有注意到。如果有自己沒有注意到的地方，那以后可以自己嘗試一下，相信會幫助你的頁面變的更加出彩！
廢話不多說，我們通過下圖來看下本文從哪幾個方面跟大家來聊一聊游戲頁面的細節。
關于場景打造這塊內容，這里主要從場景的層次以及對場景進行一些與游戲主題相呼應的處理這兩個方面來進行描述。我們來看一些相關的例子：
上圖綠色圈中的數字代表遠近層次，即1代表離我們最近，2次之，3最遠。那么此例就通過近景的樹葉，中間的人物以及遠景的天空塔，把畫面的層次體現的非常清楚，畫面感很強，而且主次分明。
上面兩張圖大家通過數字的標識也可以清楚地分析出它們的場景層級關系。這些呢都是通過增加一些前景事物的手法來展現場景層級關系，我們呢還可以利用主體元素與內容板塊之間的關系來體現頁面層級，如下圖：
上圖呢通過把其中一個人設至于背景之外，甚至放在了內容區里，而另外一個人設則在背景里面，以此而拉開頁面的層次感，也是一種不錯的方法。下圖的處理手法類似，這里不再贅述。
下面我們來看一個關于對場景進行一些與游戲主題相呼應的處理的例子。
這是一個游戲的官網，受內容的限制，場景的打造上不像普通專題那么靈活。這里的背景打造用了并不復雜的手法，但是為了呼應游戲激烈熱血打斗的風格， 設計師在處理的時候給導航的hover效果、banner的邊緣處及內容區的部分邊緣都做了切割碎片的效果，而且banner的背景也不是通常的矩形，而 是下面斜切了一部分，使整體畫面動感十足，還有，在頁面底部，設計師還做了一塊面積不大的斜三角，與上面呼應這些都是細節的體現。你說如果沒有這是細節， 頁面就不行了么。不是，只是缺了這些細節，頁面好像就缺了那么幾分打斗感。
類似的處理形式我們也可以看看下面這個例子。
相信大家從圈圈的標識應該也能看出來了，噴濺（血跡）效果幾乎被應用到了上圖的所有元素中，背景的血滴、人物邊緣的處理形式、導航條以及切換標簽幾乎無一例外。
關于文字效果這塊內容，這里主要從字形處理和字效處理兩個方面來進行描述。我們來看一些相關的例子：
上圖中設計師就是通過結合頁面主題對字形做了變形處理，使字體看起來較為鋒利且充滿戰斗感。有的朋友可能會說自己在文字變形這塊能力較弱，如果是這 樣的話大家可以嘗試在某一種字體的基礎上去進行微變形，如上圖通過把文字轉化為形狀后，給字形增加一些尖角，或者一些刀子的形狀，這些如果大家自己多去嘗 試都還是不算困難的。在效果方面，給字體整體加上了火光，尤其在“火”字的上面加上了一束火焰，使字的整體效果與主題更加貼切。
這個呢用的是比較常用的書法體啦，主要是為了跟游戲的logo質感貼近。這里有一點可取得細節之處就是設計師為了與血染蒼穹的主題相匹配，特意給文字加上了濺血的效果，看起來是不是有點殺戮的趕腳啊。
這個例子呢字形上我就不多說了，具體的方法呢詳見暢游VC教程《讓你的字體萌萌噠》，暢游視覺創意中心地址：http://vc.changyou.com/。這里主要講解的一個細節的地方呢是文字旁邊的一堆娃娃，有木有趕腳本來就挺Q挺萌的字體加上這些搗蛋鬼之后，更加生動了呢？
這個跟上面的那個有相同點哦，這邊也請了娃娃過來，只是不太溫順，拿大斧子砍字，而且這里設計師還給字做了砍出碎片的感覺，更加生動形象了。這里還 有個細節不知道大家注意到沒，這里的主標題的字都通過一筆拉絲連接起來了，注意看下面的三個圈。是吧，這些小細節，以后用在自己的作品里，別說是我說的 ?。?/p>
這個處理手法比較簡單，把每個字分離出來，分別做效果，造成一個字壓著一個字的趕腳，層次感立馬就出現了。這種手法可能平時不太容易想到，但是用過一次也許你就上癮了。
壓軸的出場！這種形式在游戲頁面中的出鏡率還是蠻高的，把文字放在主體的后面，來拉開層次。這里要注意的是最好文字左右兩邊的數量能相同，這樣能保持平衡啊。另外這里也是對文字做了切割效果，大家有木有發現凡是跟戰斗扯上關系的，用切割碎片神馬的最貼切了（毛筆字除外）。這個方法很實用，別說我沒告訴你??！
為什么要把頁面引導列出來呢？想必大家在瀏覽網頁的時候最先注意到的應該都是圖片吧，應該鮮有人去直接掃字，畢竟圖片來的更為直觀。所以呢，頁面的 引導性就很重要了。掃一眼畫面，就能猜到專題的大概主題是什么，場景構造的有代入感，能夠讓瀏覽者心甘情愿的去閱讀，而且注意各個版塊之間的聯系，這是優 秀的頁面應該具備的。
這個頁面，通過形象的場景打造，讓瀏覽者不用去閱讀文字就能很快明白這是個跟“股票”相關的頁面，代入感極強。假象下如果去掉圈中的細節元素，畫面 還會風采依舊么？下面幾個例子的處理手法跟此例很像，都是通過打造一個非常具體的場景來增強頁面的引導性，這種都需要設計師日常要注意觀察生活中的細節， 能夠聯想到與各場景相關的事物，才能打造出精彩的畫面。
上圖是一個非常棒的引導案例，設計師在處理的時候通過素材的拼湊疊加，做出右側齒輪機關的導航形式；在交互上通過瀏覽者操控錘子去敲擊樂器（其實我 不知道這廝叫啥名字），增加了頁面的趣味性；而且在場景的打造上，圈1中的近景與圈2所處的遠景拉開層次，近大遠小，近清晰遠模糊，畫面的縱深感比較強。 我們再看一下下面這個例子，看看它的引導是怎么做的。
這是一個內容比較多的頁面，這里設計師把每個大部分的內容用色塊進行區分。倘若只是單純的用色塊來分割每一塊的內容，那分割處會顯得比較生硬，而且 容易給人造成內容脫離的感覺，不具有整體性。這里設計師巧妙地運用鐵鏈+鐮刀的尖頭構成一件武器，從而將頁面的各個版塊貫穿起來，這里鏈條不僅起到引導作 用，而且還能拉開頁面的層次，這是個非常棒的處理。此外，大家注意看每兩個色塊的交接處還有一個向下提示的圖標，這個圖標不僅提示瀏覽者下方還有內容，而 且像紐扣一樣把兩個版塊連在一起。這兩處細節大家也可以嘗試著運用到內容較多且分為幾大版塊的頁面中去。
上面兩個例子跟鐮刀那個在引導方式上很相似，如圈中都是通過某種元素把相鄰的板塊連接起來，而第一個頁面最右上角的內容定位標簽和第二張圖最下方的TOP按鈕也都是長頁面中可以運用的細節之處，都是非常不錯的引導形式。
頁面的交互做得好，用戶體驗佳也是考量一個優秀頁面的標準之一。那么對于游戲專題頁面而言，我們對于頁面中重要的按鈕、切換標簽或者其他交互元素進行一些細節性的修飾，不僅可以使頁面的整體元素風格看起來更加統一，也會提高頁面的交互性。
這個頁面的四個按鈕，在形式上都區別于傳統的按鈕。這里之前在設計的時候設計師倒是試過做成傳統按鈕的形式，可是感覺上總是氛圍不足，而且直白地放 一個按鈕也感覺比較突兀。后來經過進一步的處理，直接通過巖石的效果來做成按鈕，調成與頁面調性相匹配的顏色與質感，再結合不同按鈕的重要性調整大小，拉 開空間感，不僅看起來與整個頁面風格統一，而且相比傳統按鈕，用戶更有點擊的欲望。
這個例子與上一個比較類似，這里選取類似于翅膀質感的水晶來作為按鈕。與人物一前一后，拉開了空間，而且風格上也是與頁面非常搭配，點擊欲較強。
不知道如果大家不看我畫的框能不能夠發現上面這個轉盤的微小細節處？好了，不賣關子了。這個轉盤的最好的細節處理的地方就在于獎品的名稱那里，通常 我們在處理這類圓形路徑上寫字的情況，都是直接畫個圓形的路徑，完了之后在路徑上直接打字，再去調整文字之間的間距，這樣呢勢必會造成一個問題——會有至多一半的名稱是倒著的。這樣呢會給瀏覽者在閱讀的時候造成一定的障礙，這里設計師正式考慮到了這一微小的細節，所以通過一定的方法使所有的名稱相對于水平線而言都是偏正方向的，這樣用戶在閱讀名稱的時候就會很容易識別。具體的方法呢詳見暢游VC教程《路徑上的文字》，暢游視覺創意中心地址：http://vc.changyou.com/
這張圖的切割與按鈕的形狀搭配的非常巧妙，利用對畫面的一個左右切割，打造出了對戰的感覺，而且利用冷暖調進行區分，而下方的“我要報名”按鈕與切 割出相呼應做成了三角形的形狀，在下面的三個按鈕整體呈梯形狀緊隨其后，這一塊按鈕元素與主圖結合的非常好。試想如果把這些按鈕換成傳統的方形按鈕，效果 還會有這么好么？
看到這個標題大家是不是有點好奇？何為飛舞的碎碎？其實大家應該能夠猜到哈，碎碎基本上在90%以上的游戲頁面中都可以見到，例如：樹葉、花瓣、折紙、金幣、火花、碎片等等，這些能夠為頁面造勢，而且拉開空間感的零碎物體，這里我們把它叫做碎碎。還不明白？ok，注意下面例子中框內的元素。
通過以上這些例子想必大家對所謂的飛舞的碎碎應該有一個比較熟悉的了解了吧。有沒有發現確實好多頁面都有用到這些東西呢？那我們是不是也應該給自己 的頁面也加上呢？那么問題來了，到哪去找這些碎碎呢？答案，日常收集吧孩紙。平時看到一些類似的素材就搜集起來，以備不時之需，這些元素有的只是通過一個 原始素材，然后經過放大縮小、高斯模糊、動感模糊、水平垂直翻轉就可以得到，可見建立一個屬于自己的素材庫是多么的重要。
這是一個非常厲害的校園活動UE，結合《幻想神域》二次元動漫的游戲風格以及活動主題“走進校園玩家沖”的概念，我們在頁面的設計過程中盡量把頁面的 氛圍做的活潑歡快一些，另外結合校園的主題我們聯想一些與之相關的事物例如書本紙張等。那結合這些考慮的因素，于是乎出來的以下這廝，大家來一起找找頁面 中我提到的那些細節吧。
文章最開始提到頁面細節的時候也許大家還在想是一些也許只有牛人才會注意到的地方，那現在大家怎么看呢？其實這些細節大家都是可以做到的，只是有些 時候可能想不到，那現在既然提到了，以后是不是可以嘗試給自己的頁面加上這些細節呢？而且我們通過瀏覽別人的作品，發現那些好的細節之處也可以自己去試 試，那樣不斷的去實踐，最后才能轉化為自己的東西，自己的水平也才能夠提高。
原文來自：暢游視覺設計中心
- 目前還沒評論，等你發揮！
