今天的案例不服不行!作者分别从场景打造、文字效果、交互元素等五个方面展开，为同学们一一剖开游戏网站的设计细节，特别强调，每方面都有对应的设计方法，都是可以拿来自己上手用的，别说我没告诉你哟。

　　@畅游VC ：我们在平时浏览页面时，经常会为一些优秀作品的细节所惊叹。这些细节之处有的看似非常不起眼，但是设计作品之间的差距有时往往却正是这些不起眼的细节所决定的。什么是细节呢?细节一定是很细微的方面么?其实不然。个人觉得所谓页面的细节之处，并不是页面所必须包含的部分，但是却是拉开页面水平层次的一个重要方面，而且，细节不一定都是很细微的地方，很多大方面的处理也可以体现出细节。这篇文章我们就给大家总结一些在游戏页面的设计中所体现出来的细节之处，大家可以看看这些细节的地方自己在平时的设计过程中有没有注意到。如果有自己没有注意到的地方，那以后可以自己尝试一下，相信会帮助你的页面变的更加出彩!

　　废话不多说，我们通过下图来看下本文从哪几个方面跟大家来聊一聊游戏页面的细节。

　　一、场景打造

　　关于场景打造这块内容，这里主要从场景的层次以及对场景进行一些与游戏主题相呼应的处理这两个方面来进行描述。我们来看一些相关的例子：

　　上图绿色圈中的数字代表远近层次，即1代表离我们最近，2次之，3最远。那么此例就通过近景的树叶，中间的人物以及远景的天空塔，把画面的层次体现的非常清楚，画面感很强，而且主次分明。

　　上面两张图大家通过数字的标识也可以清楚地分析出它们的场景层级关系。这些呢都是通过增加一些前景事物的手法来展现场景层级关系，我们呢还可以利用主体元素与内容板块之间的关系来体现页面层级，如下图：

　　上图呢通过把其中一个人设至于背景之外，甚至放在了内容区里，而另外一个人设则在背景里面，以此而拉开页面的层次感，也是一种不错的方法。下图的处理手法类似，这里不再赘述。

　　下面我们来看一个关于对场景进行一些与游戏主题相呼应的处理的例子。

　　这是一个游戏的官网，受内容的限制，场景的打造上不像普通专题那么灵活。这里的背景打造用了并不复杂的手法，但是为了呼应游戏激烈热血打斗的风格，设计师在处理的时候给导航的hover效果、banner的边缘处及内容区的部分边缘都做了切割碎片的效果，而且banner的背景也不是通常的矩形，而是下面斜切了一部分，使整体画面动感十足。

　　还有，在页面底部，设计师还做了一块面积不大的斜三角，与上面呼应这些都是细节的体现。在游戏网站中利用圆、方、三角打造网页框架的方法非常流行，想学习的同学来优设网搜腾讯美女设计师+空格+惊喜就可以看到咯。

　　你说如果没有这些细节，页面就不行了么。不是，只是缺了这些细节，页面好像就缺了那么几分打斗感。

　　类似的处理形式我们也可以看看下面这个例子。

　　相信大家从圈圈的标识应该也能看出来了，喷溅(血迹)效果几乎被应用到了上图的所有元素中，背景的血滴、人物边缘的处理形式、导航条以及切换标签几乎无一例外。

　　二、文字效果

　　关于文字效果这块内容，这里主要从字形处理和字效处理两个方面来进行描述。我们来看一些相关的例子：

　　上图中设计师就是通过结合页面主题对字形做了变形处理，使字体看起来较为锋利且充满战斗感。有的朋友可能会说自己在文字变形这块能力较弱，如果是这样的话大家可以尝试在某一种字体的基础上去进行微变形，如上图通过把文字转化为形状后，给字形增加一些尖角，或者一些刀子的形状，这些如果大家自己多去尝试都还是不算困难的。在效果方面，给字体整体加上了火光，尤其在“火”字的上面加上了一束火焰，使字的整体效果与主题更加贴切。

　　这个呢用的是比较常用的书法体啦，主要是为了跟游戏的logo质感贴近。这里有一点可取得细节之处就是设计师为了与血染苍穹的主题相匹配，特意给文字加上了溅血的效果，看起来是不是有点杀戮的赶脚啊。

　　这个例子呢字形上我就不多说了，具体的方法呢详见畅游VC教程《字体变形记!手把手教你用AI绘制Q版的萌萌哒字体》，这里主要讲解的一个细节的地方呢是文字旁边的一堆娃娃，有木有赶脚本来就挺Q挺萌的字体加上这些捣蛋鬼之后，更加生动了呢?

　　这个跟上面的那个有相同点哦，这边也请了娃娃过来，只是不太温顺，拿大斧子砍字，而且这里设计师还给字做了砍出碎片的感觉，更加生动形象了。这里还有个细节不知道大家注意到没，这里的主标题的字都通过一笔拉丝连接起来了，注意看下面的三个圈。是吧，这些小细节，以后用在自己的作品里，别说是我说的啊!

　　这个处理手法比较简单，把每个字分离出来，分别做效果，造成一个字压着一个字的赶脚，层次感立马就出现了。这种手法可能平时不太容易想到，但是用过一次也许你就上瘾了。

　　压轴的出场!这种形式在游戏页面中的出镜率还是蛮高的，把文字放在主体的后面，来拉开层次。这里要注意的是最好文字左右两边的数量能相同，这样能保持平衡啊。另外这里也是对文字做了切割效果，大家有木有发现凡是跟战斗扯上关系的，用切割碎片神马的最贴切了(毛笔字除外)。这个方法很实用，别说我没告诉你啊!

　　三、页面引导

　　为什么要把页面引导列出来呢?想必大家在浏览网页的时候最先注意到的应该都是图片吧，应该鲜有人去直接扫字，毕竟图片来的更为直观。所以呢，页面的引导性就很重要了。扫一眼画面，就能猜到专题的大概主题是什么，场景构造的有代入感，能够让浏览者心甘情愿的去阅读，而且注意各个版块之间的联系，这是优秀的页面应该具备的。

　　这个页面，通过形象的场景打造，让浏览者不用去阅读文字就能很快明白这是个跟“股票”相关的页面，代入感极强。假象下如果去掉圈中的细节元素，画面还会风采依旧么?下面几个例子的处理手法跟此例很像，都是通过打造一个非常具体的场景来增强页面的引导性，这种都需要设计师日常要注意观察生活中的细节，能够联想到与各场景相关的事物，才能打造出精彩的画面。

　　上图是一个非常棒的引导案例，设计师在处理的时候通过素材的拼凑叠加，做出右侧齿轮机关的导航形式;在交互上通过浏览者操控锤子去敲击磬(Qing)，增加了页面的趣味性;而且在场景的打造上，圈1中的近景与圈2所处的远景拉开层次，近大远小，近清晰远模糊，画面的纵深感比较强。我们再看一下下面这个例子，看看它的引导是怎么做的。