拍案叫绝的设计--小细节让页面更加的出彩

拍案叫绝的设计--小细节让页面更加的出彩

今天这个案例，真的让人不得不服！它从场景打造、文字效果、交互元素等五个方面着手，为同学们逐一剖析，把游戏网站的设计细节展现在大家面前，特别要重点说说，每一个方面都存在与之相对应的设计方法，这些方法全都是能够供自己取用实践的，可一定甭说我没把这事儿告知你呀。

平时浏览页面之际，常因一些优秀作品的细节而顿感惊叹。那些细节之处存在看似极不起眼的状况对，然而设计作品间的差距有时恰恰由这类不起眼的细节予以决定，什么是细节情形的，细节必定决然为很细微的方面吗，实则并非如此这般，个人认为据那般所说关于页面的细节层面，并非页面必定必须需要包含的部分呀，可是却是实现拉开页面水平层次现象的一个关键重要方面呢，并且再者而言，所描述论述所谓的细节不一定全都是全然完全涉及很细微的地方呀，好多较大方面挺大方面的处理同样也可以充分彰显展示浮现体现出相关一系列细节的情况啦。就这篇文章而言，我们会给大家去总结一些，在游戏页面的设计当中所展现出来的细节之处，大家能够去看看，这些细节的地方，自己于平常的设计过程当中有没有留意到。要是存在自己未曾注意到的地方，此后可以自行尝试一下，相信会助力你的页面变得愈发出彩！

不要啰啰嗦嗦说许多没用的话，我们借助图片大全，来看一下爱游戏登录入口网页版平台，关于本文，是依照哪几个方面，来同大家讲一讲游戏页面中的具体细微之处的，。

一、场景打造

在场景打造这个方面的内容上，这儿主要是从场景的层次，以及针对场景开展一些和游戏主题起到呼应作用的处理，这两个层面来予以描述 。我们来瞧一瞧一些相关的例子 ：

上图，绿色圈里的数字表征远近层次，其中，1意味着离我们最近，2其次之，3最为远。如此，此例借由近景的树叶，居间的人物乃至远景的天空塔，极其清晰地体现出画面的层次，画面感十足，并且主次分明 。

大家通过数字标识，能清楚把上面两张图片搜索的场景层级关系分析出来。 通过增加一些前景事物的手法展现场景层级关系，关于这些。利用主体元素与内容板块之间的关系去体现页面层级，像下面的图这样 ，我们也可以做到 。

那上面的图呀，是通过将其中一个人设放置到背景之外，甚至是放到内容区域里面，然而另外一个人设却是在背景当中，凭借这样的方式从而拉开页面的层次感，这也算是一种不错的方法呢。

以下呢，我们来瞧一瞧，有一个例子，是关于针对场景开展一些和游戏主题相呼应的处理的呀。

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

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

你讲要是不存在这些细致之处，页面就会不行了吗。并非如此，仅仅是缺少了这些细微的地方，页面仿佛就缺失了那么些许打斗的感觉。

二、文字效果

说到文字效果这部分内容，这儿主要是从字形处理以及字效处理这两个方面着手展开描述，我们来瞧一瞧一些相关的例子，。

在上图里，设计师是借助结合页面主题，针对字形实施了变形处理，从而让字体看上去颇为锋利，且洋溢着战斗感。有的朋友或许会表示自身在文字变形这方面能力欠佳，倘若如此，大家能够试着在某一种字体的基础之上开展微变形，就像上图那样，先把文字转化成形状，而后给字形添加一些尖角，或者一些刀子的形状，这些要是大家自己多多去尝试，其实都不算困难的。在效果这一方面，给字体整个儿都添加上了火光，特别是“火”这个字的上头，加了一束火焰，如此使得字的整体呈现效果，跟主题愈发地贴近了。

而这个呢，所运用的乃是相对较为常用的书法体啦，其主要目的在于能够跟游戏的logo质感达成贴近呈现。在此处存在着一点可供获取的细节之处哟爱游戏最新官网登录入口，那便是设计师为了实现与血染苍穹的主题相搭配之目的，特意给予文字增添了溅血的效果呢，如此样子看上去是不是会有着那种带有杀戮意味出来的感觉呀。

压阵的登场亮相！这般形式于游戏页面里的出现频率还是颇高的，将文字置于主体的后边，以此来拉开层次关系。此处需要留意的是， optimal 的情况是文字左右两侧的数量能够一致，如此方能维持平衡状态啊。此外在这里也是针对文字施加了切割效果，诸位有没有察觉到凡是跟战斗有所关联的，采纳切割碎片之类的最为契合了（毛笔字除外）。这个办法极为实用，可不要说我未曾告知你呀！

三、页面引导

为何要将页面引导罗列呈现呢，想必诸位在浏览网页之际最先留意到的大概都是图片呀，应当极少有人会径直去扫视文字呢，毕竟图片来得更为直接直观呀。所以呀，页面的引导性就显得极为重要了呢。匆匆瞥一眼画面，便能推测出专题的大致主题是啥，场景构建得颇具代入感，能令浏览者心悦诚服地去开展阅读，并且留意各个版块之间的关联，这是出色的页面理应具备的呀。

这个页面呀，借助形象的场景予以打造，促使那浏览者，无需去阅读文字，便能很快通晓这乃是个关乎“股票”的页面咧，其代入感可强大喇。假象之下哟，要是把圈中的细节元素给去掉，那画面倘若还能够风采依旧嘛？接下来的几个例子当中咯，处理手法跟这一例是挺相像的呀，皆是借助达成一个非常具体的场景，来强化页面的引导性能咧，种类这般情形都得需设计师，在日常的时候要留意观察生活里的细节，能够联想至与各场景相关联的事物哟，如此方才能够打造出美妙精彩耐人寻味的画面呀！标点和语气词是为了增加可读性，你可以根据需求适当调整 。

右面这幅图是个极其出色的引导范例，设计师进行处理之际，借由素材的拼接叠加，造就出右侧齿轮机关那般的导航样式；于交互方面，依靠浏览者操控锤子去击打磬（Qing），增添了页面的趣味性；并且在场景构建上，圈1里的近景同圈2所在的远景划分出层次，呈现近大远小、近清晰远模糊的状况，画面的纵深感颇为强烈。我们再瞧瞧下面这个实例，瞅瞅它的引导究竟是怎么开展的，。

这是个页面内容较多的页面，在此页面中设计师对每个大部分的内容运用色块加以区分。要是仅单纯用地块分割每一块内容，那分割处会显得生硬，还易给人造成内容脱离之感，缺乏整体性。在此设计师匠心独运地运用铁链与镰刀的尖头构成一件武器，借此将页面各个版块贯穿起来，此处链条不但起到了引导作用，还能拉开页面层次，这是项极为出色的处理。

此外，大家留意查看一下呀，每两个色块相互交接在一起的地方，并且呢还有那么一个呀，向下提示指引的图标，此图标不但能够提示出来浏览者以下方面呀，仍存在着内容，而且就好似纽扣那般呀，它能将两个不同的版块衔接连接在一起。对于这两处不太容易被注意到的细节呢，大家是否有想过往往内容数量比较多，并且是划分成几大不同版块的页面当中呀，去试着运用一下的想法呢。

四、交互元素

能否拥有良好的页面交互，以及是否具备出色的用户体验，也是衡量一个优秀页面的其中一项标准。就游戏专题页面来说，我们针对页面里重要的按钮、切换标签或者别的交互元素，开展一些细节方面的修饰，这不但能够让页面的整体元素风格看上去更为统一，而且还会提升页面的交互性。

在这个页面里，存在着四个按钮，它们在形式之上，皆与传统的按钮有所区别。于此之前，在进行设计期间，设计师确曾尝试将其做成传统按钮的形式，然而，在感觉方面却始终是氛围欠缺，并且，直接放置一个按钮也感觉颇为突兀。随后，经过更进一步的处理，是以岩石的效果直接做成的按钮，将其调成匹配页面调性的颜色与质感，再依据不同按钮的重要性对大小予以调整，从而拉开空间感，如此一来，不但看上去与整个页面风格相统一，而且相较于传统按钮，用户更具点击的欲望。

不知道，要是大家不去看我所画的框，能不能够察觉到，上面这个转盘，微小细节之处呢？

好啦，不再故弄玄虚啦。这个转盘在把细节处理得最为出色的地方是奖品的名称那儿，一般而言，我们处理这种在圆形路径上写字的情形时，都是径直去画一个圆形的路径，之后在路径上直接进行打字操作，接着再去对文字之间的间距予以调整 ，就变成这样了。所以必然会引发一个问题 ，那就是会存在至多一半的名称呈现倒着的状态 。这般情况会给浏览者于阅读之际造成一定阻碍，为此这儿的设计师切实考量到了这一小细节，故而借由一定方式让所有名称对水平线来说都偏向正方向，如此一来用户阅读名称时便能轻易识别。

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

五、飞舞的碎碎

提到这个标题，大家是不是会抱有几分奇特的好奇之感哦？那何为飞舞着的碎碎呢？实际上呀，大家应该是能够大致猜测出来哒，碎碎基本上都是能在超过90%以上的游戏页面当中被见到的哟，就比如说如同树叶一般的，像花瓣那样的呈现形态，类似折纸样式的物体，有着金币模样的东西，如同火花似的元素或者碎片等等这般的物品，这些是可以给页面营造出一种氛围状态，并且能够使其产生拉开空间感效果如此局面的零碎的物体类，在这里我们把它们全部称作是碎碎呐。还是依旧并未理解透彻吗？好嘞，那就留意下面所举例子里面那个框内所包含的元素哦。

经由上述这般例子，想必大伙对于那所谓的飞舞着的碎碎，应当存有一个相对较为熟悉的认知了吧。有没有察觉到确实有好多页面都运用到了这些玩意儿呢？那么我们是不是同样也应当给自己的页面添加上呢？如此一来问题便出现了，到何处去寻觅这些碎碎呢？答案是，日常进行收集吧孩子。平常倘若见到一些类似模样的素材，那就把它们收集起来，以应对将来可能出现的不时之需，这些元素有的仅仅是借助一个原始素材，接着经过放大缩小、高斯模糊、动感模糊、水平垂直翻转这般操作便能够获取，由此可见构建一个属于自身的素材库是何等的重要啊。

集大成实例

其一，这存在着一个相当劲爆的校园活动 UE，对《幻想神域》的二次元动漫游戏风格予以结合，并且关联活动主题为「走进校园玩家冲」的概念，其二，在页面进行设计的进程当中，已然尽力将页面的氛围营造得显得更为活泼轻快些许，其三，结合校园的那类主题，我们联想到一些跟其相关的事物，像书本纸张等，其四，基于这些所考虑的诸多因素，所以于这般情况下产生了以下的作品，其五，大家一块儿来查找页面里我所提及的那些细节哟。

文章初始提及页面细节时，或许大伙儿心里还揣测着大概只是一些唯有牛人方才能够留意到的所在，现下诸位又作何见解呢，事实剖析这些个细致末梢皆是大家伙都具有可行做到之实效的状况，但只是在有一些时段中大概率是不会思虑而至，则当下既然已然提及于此爱游戏ayx官网登录入口，往后是不是能够试着为自身已有的页面添入此类细致末梢之物呢，并且我们凭借浏览其他人的创作成品，发觉那些具备良好呈现的细致末梢之处同样可以自行去尝试体验一番，如此沿着路径持续地予以实践作为，最终才能够将其转变成为自身所独有的内涵之物，自身所置身的水准方可得以提升进步。