编者按：今天的案例不服不行！作者分别从场景打造、文字效果、交互元素等五个方面展开，为同学们一一剖开游戏网站的设计细节，特别强调，每方面都有对应的设计方法，都是可以拿来自己上手用的，别说我没告诉你哟。
@畅游VC ：我们在平时浏览页面时，经常会为一些优秀作品的细节所惊叹。这些细节之处有的看似非常不起眼，但是设计作品之间的差距有时往往却正是这些不起眼的细节所决定的。什么是细节呢？细节一定是很细微的方面么？其实不然。个人觉得所谓页面的细节之处，并不是页面所必须包含的部分，但是却是拉开页面水平层次的一个重要方面，而且，细节不一定都是很细微的地方，很多大方面的处理也可以体现出细节。这篇文章我们就给大家总结一些在游戏页面的设计中所体现出来的细节之处，大家可以看看这些细节的地方自己在平时的设计过程中有没有注意到。如果有自己没有注意到的地方，那以后可以自己尝试一下，相信会帮助你的页面变的更加出彩！
废话不多说，我们通过下图来看下本文从哪几个方面跟大家来聊一聊游戏页面的细节。
一、场景打造
关于场景打造这块内容，这里主要从场景的层次以及对场景进行一些与游戏主题相呼应的处理这两个方面来进行描述。我们来看一些相关的例子：
上图绿色圈中的数字代表远近层次，即1代表离我们最近，2次之，3最远。那么此例就通过近景的树叶，中间的人物以及远景的天空塔，把画面的层次体现的非常清楚，画面感很强，而且主次分明。
上面两张图大家通过数字的标识也可以清楚地分析出它们的场景层级关系。这些呢都是通过增加一些前景事物的手法来展现场景层级关系，我们呢还可以利用主体元素与内容板块之间的关系来体现页面层级，如下图：
上图呢通过把其中一个人设至于背景之外，甚至放在了内容区里，而另外一个人设则在背景里面，以此而拉开页面的层次感，也是一种不错的方法。下图的处理手法类似，这里不再赘述。
下面我们来看一个关于对场景进行一些与游戏主题相呼应的处理的例子。
这是一个游戏的官网，受内容的限制，场景的打造上不像普通专题那么灵活。这里的背景打造用了并不复杂的手法，但是为了呼应游戏激烈热血打斗的风格，设计师在处理的时候给导航的hover效果、banner的边缘处及内容区的部分边缘都做了切割碎片的效果，而且banner的背景也不是通常的矩形，而是下面斜切了一部分，使整体画面动感十足。
还有，在页面底部，设计师还做了一块面积不大的斜三角，与上面呼应这些都是细节的体现。在游戏网站中利用圆、方、三角打造网页框架的方法非常流行，想学习的同学来优设网搜腾讯美女设计师+空格+惊喜就可以看到咯。
你说如果没有这些细节，页面就不行了么。不是，只是缺了这些细节，页面好像就缺了那么几分打斗感。
类似的处理形式我们也可以看看下面这个例子。
相信大家从圈圈的标识应该也能看出来了，喷溅（血迹）效果几乎被应用到了上图的所有元素中，背景的血滴、人物边缘的处理形式、导航条以及切换标签几乎无一例外。
（举报）