浅谈那些让页面更加出彩的设计小细节

【 tulaoshi.com - 平面设计 】

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

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

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

一、场景打造

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

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

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

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

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

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

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

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

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

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

二、文字效果

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

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

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

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

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

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

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

别说我没告诉你，上面提到的方法这里能找到哟!《玩转字体!BANNER设计经验分享之字形字体篇》

三、页面引导

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

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

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

这是一个内容比较多的页面，这里设计师把每个大部分的内容用色块进行区分。倘若只是单纯的用色块来分割每一块的内容，那分割处会显得比较生硬，而且容易给人造成内容脱离的感觉，不具有整体性。这里设计师巧妙地运用铁链+镰刀的尖头构成一件武器，从而将页面的各个版块贯穿起来，这里链条不仅起到引导作用，而且还能拉开页面的层次，这是个非常棒的处理。

此外，大家注意看每两个色块的交接处还有一个向下提示的图标，这个图标不仅提示浏览者下方还有内容，而且像纽扣一样把两个版块连在一起。这两处细节大家也可以尝试着运用到内容较多且分为几大版块的页面中去。

上面两个例子跟镰刀那个在引导方式上很相似，如圈中都是通过某种元素把相邻的板块连接起来，而第一个页面最右上角的内容定位标签和第二张图最下方的TOP按钮也都是长页面中可以运用的细节之处，都是非常不错的引导形式。

四、交互元素

页面的交互做得好，用户体验佳也是考量一个优秀页面的标准之一。那么对于游戏专题页面而言，我们对于页面中重要的按钮、切换标签或者其他交互元素进行一些细节性的修饰，不仅可以使页面的整体元素风格看起来更加统一，也会提高页面的交互性。

这个页面的四个按钮，在形式上都区别于传统的按钮。这里之前在设计的时候设计师倒是试过做成传统按钮的形式，可是感觉上总是氛围不足，而且直白地放一个按钮也感觉比较突兀。后来经过进一步的处理，直接通过岩石的效果来做成按钮，调成与页面调性相匹配的颜色与质感，再结合不同按钮的重要性调整大小，拉开空间感，不仅看起来与整个页面风格统一，而且相比传统按钮，用户更有点击的欲望。

这个例子与上一个比较类似，这里选取类似于翅膀质感的水晶来作为按钮。与人物一前一后，拉开了空间，而且风格上也是与页面非常搭配，点击欲较强。

不知道如果大家不看我画的框能不能够发现上面这个转盘的微小细节处?

好了，不卖关子了。这个转盘的最好的细节处理的地方就在于奖品的名称那里，通常我们在处理这类圆形路径上写字的情况，都是直接画个圆形的路径，完了之后在路径上直接打字，再去调整文字之间的间距，这样呢势必会造成一个问题会有至多一半的名称是倒着的。这样呢会给浏览者在阅读的时候造成一定的障碍，这里设计师正式考虑到了这一微小的细节，所以通过一定的方法使所有的名称相对于水平线而言都是偏正方向的，这样用户在阅读名称的时候就会很容易识别。

这个方法稍后优设会有教程发布，同学们留意下哟。

这张图的切割与按钮的形状搭配的非常巧妙，利用对画面的一个左右切割，打造出了对战的感觉，而且利用冷暖调进行区分，而下方的我要报名按钮与切割出相呼应做成了三角形的形状，在下面的三个按钮整体呈梯形状紧随其后，这一块按钮元素与主图结合的非常好。试想如果把这些按钮换成传统的方形按钮，效果还会有这么好么?

五、飞舞的碎碎

看到这个标题大家是不是有点好奇?何为飞舞的碎碎?其实大家应该能够猜到哈，碎碎基本上在90%以上的游戏页面中都可以见到，例如：树叶、花瓣、折纸、金币、火花、碎片等等，这些能够为页面造势，而且拉开空间感的零碎物体，这里我们把它叫做碎碎。还不明白?ok，注意下面例子中框内的元素。

通过以上这些例子想必大家对所谓的飞舞的碎碎应该有一个比较熟悉的了解了吧。有没有发现确实好多页面都有用到这些东西呢?那我们是不是也应该给自己的页面也加上呢?那么问题来了，到哪去找这些碎碎呢?答案，日常收集吧孩纸。平时看到一些类似的素材就搜集起来，以备不时之需，这些元素有的只是通过一个原始素材，然后经过放大缩小、高斯模糊、动感模糊、水平垂直翻转就可以得到，可见建立一个属于自己的素材库是多么的重要。

集大成实例

这是一个很劲爆的校园活动UE，结合《幻想神域》二次元动漫的游戏风格以及活动主题走进校园玩家冲的概念，我们在页面的设计过程中尽量把页面的氛围做的活泼欢快一些，另外结合校园的主题我们联想一些与之相关的事物例如书本纸张等。那结合这些考虑的因素，于是乎出来的以下的作品，大家来一起找找页面中我提到的那些细节吧。

文章最开始提到页面细节的时候也许大家还在想是一些也许只有牛人才会注意到的地方，那现在大家怎么看呢?其实这些细节大家都是可以做到的，只是有些时候可能想不到，那现在既然提到了，以后是不是可以尝试给自己的页面加上这些细节呢?而且我们通过浏览别人的作品，发现那些好的细节之处也可以自己去试试，那样不断的去实践，最后才能转化为自己的东西，自己的水平也才能够提高。