去出发首页 经典案例 网站建设 网站优化 网站托管 竞价托管 微信网站 手机网站 建站知识 万词霸屏 关于我们
去出发科技是昆明本土的昆明网站优化、昆明网站SEO优化、昆明网站制作公司,专业提供网络营销,网站优化、网站SEO优化、网站SEM竞价推广、昆明网站制作和网站关键词排名优化等网站优化专项服务,快速提升关键词排名!
咨询,就免费赠送域名与服务器,咨询热线:15687897253当前位置: 主页 > 建站知识 > 网站设计知识 > 【VC观点】小细节让页面更出彩
联系我们
电话咨询:15687897253
E-mail: 844344108@qq.com
地址: 云南省昆明市官渡区云大西路创业大厦A栋216号

【VC观点】小细节让页面更出彩

来源:网站设计知识 作者:设计网站知识 日期:2018-01-12 16:55

昆明网站建设公司,昆明网站制作公司,昆明网络公司,昆明网络营销,昆明搜索引擎优化公司,云南去出发科技股份有限公司
注明:原创于昆明网站建设公司,昆明网站制作公司,昆明网络公司,昆明网络营销,昆明搜索引擎优化公司,云南去出发科技股份有限公司

  我们在平常阅览页面时,常常会为一些优异著作的细节所惊叹。这些细节之处有的看似十分不起眼,可是规划著作之间的距离有时往往却正是这些不起眼的细节所决议的。什么是细节呢?细节必定是很纤细的方面么?其实不然。个人觉得所谓页面的细节之处,并不是页面一切必要包括的部分,可是却是摆开页面水平层次的一个重要方面,并且,细节不必定都是很纤细的当地,许多大方面的处理也能够表现出细节。这篇文章我们就给我们总结一些在游戏页面的规划中所表现出来的细节之处,我们能够看看这些细节的当地自己在平常的规划过程中有没有留意到。如果有自己没有留意到的当地,那今后能够自己测验一下,信任会协助你的页面变的愈加出彩!

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

  一、场景打造

  关于场景打造这块内容,这儿首要从场景的层次以及对场景进行一些与游戏主题相照应的处理这两个方面来进行描绘。我们来看一些相关的比如:

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

  这是一个游戏的官网,受内容的约束,场景的打造上不像一般专题那么灵敏。这儿的布景打造用了并不杂乱的办法,可是为了照应游戏剧烈热血打架的风格,规划师在处理的时分给导航的hover作用、banner的边际处及内容区的部分边际都做了切开碎片的作用,并且banner的布景也不是一般的矩形,而是下面斜切了一部分,使全体画面动感十足,还有,在页面底部,规划师还做了一块面积不大的斜三角,与上面照应这些都是细节的表现。你说如果没有这是细节,页面就不行了么。不是,仅仅缺了这些细节,页面如同就缺了那么几分打架感。

  相似的处理方法我们也能够看看下面这个比如。

  信任我们从圈圈的标识应该也能看出来了,喷溅(血迹)作用简直被使用到了上图的一切元素中,布景的血滴、人物边际的处理方法、导航条以及切换标签简直无一例外。

  二、文字作用

  关于文字作用这块内容,这儿首要从字形处理和字效处理两个方面来进行描绘。我们来看一些相关的比如:

  上图中规划师就是通过结合页面主题对字形做了变形处理,使字体看起来较为尖利且充溢战役感。有的朋友可能会说自己在文字变形这块才干较弱,如果是这样的话我们能够测验在某一种字体的根底上去进行微变形,如上图通过把文字转化为形状后,给字形添加一些尖角,或者一些刀子的形状,这些如果我们自己多去测验都仍是不算困难的。在作用方面,给字体全体加上了火光,尤其在“火”字的上面加上了一束火焰,使字的全体作用与主题愈加恰当。

  这个呢用的是比较常用的书法体啦,首要是为了跟游戏的logo质感靠近。这儿有一点可取得细节之处就是规划师为了与血染天穹的主题相匹配,特意给文字加上了溅血的作用,看起来是不是有点屠戮的赶脚啊。

  这个比如呢字形上我就不多说了,详细的办法呢详见畅游VC教程《让你的字体萌萌哒》,畅游视觉构思中心地址:http://vc.changyou.com/这儿首要解说的一个细节的当地呢是文字周围的一堆娃娃,有木有赶脚本来就挺Q挺萌的字体加上这些捣蛋鬼之后,愈加生动了呢?

  这个跟上面的那个有相同点哦,这边也请了娃娃过来,仅仅不太温顺,拿大斧子砍字,并且这儿规划师还给字做了砍出碎片的感觉,愈加生动形象了。这儿还有个细节不知道我们留意到没,这儿的主标题的字都通过一笔拉丝连接起来了,留意看下面的三个圈。是吧,这些小细节,今后用在自己的著作里,甭说是我说的啊!

  这个处理办法比较简单,把每个字分离出来,别离做作用,形成一个字压着一个字的赶脚,层次感立马就呈现了。这种办法可能平常不太简单想到,可是用过一次或许你就上瘾了。

  压轴的进场!这种方法在游戏页面中的出镜率仍是蛮高的,把文字放在主体的后面,来摆开层次。这儿要留意的是最好文字左右两头的数量能相同,这样能坚持平衡啊。别的这儿也是对文字做了切开作用,我们有木有发现但凡跟战役扯上联络的,用切开碎片神马的最恰当了(毛笔字在外)。这个办法很有用,甭说我没通知你啊!

  三、页面引导

  为什么要把页面引导列出来呢?想必我们在阅览网页的时分最早留意到的应该都是图片吧,应该鲜有人去直接扫字,毕竟图片来的更为直观。所以呢,页面的引导性就很重要了。扫一眼画面,就能猜到专题的大约主题是什么,场景结构的有代入感,能够让阅览者毫不勉强的去阅览,并且留意各个版块之间的联络,这是优异的页面应该具备的。

  这个页面,通过形象的场景打造,让阅览者不用去阅览文字就能很快明白这是个跟“股票”相关的页面,代入感极强。假象下如果去掉圈中的细节元素,画面还会风貌依旧么?下面几个比如的处理办法跟此例很像,都是通过打造一个十分详细的场景来增强页面的引导性,这种都需求规划师日常要留意调查日子中的细节,能够联想到与各场景相关的事物,才干打造出精彩的画面。

  上图是一个十分棒的引导事例,规划师在处理的时分通过资料的凑集叠加,做出右侧齿轮机关的导航方法;在交互上通过阅览者控制锤子去敲击乐器(其实我不知道这厮叫啥姓名),添加了页面的趣味性;并且在场景的打造上,圈1中的近景与圈2所在的远景摆开层次,近大远小,近明晰远含糊,画面的纵深感比较强。我们再看一下下面这个比如,看看它的引导是怎样做的。

  这是一个内容比较多的页面,这儿规划师把每个大部分的内容用色块进行区别。假使仅仅单纯的用色块来切开每一块的内容,那切开处会显得比较僵硬,并且简单给人形成内容脱离的感觉,不具有全体性。这儿规划师奇妙地运用铁链+镰刀的尖头构成一件兵器,从而将页面的各个版块贯穿起来,这儿链条不只起到引导作用,并且还能摆开页面的层次,这是个十分棒的处理。此外,我们留意看每两个色块的交接处还有一个向下提示的图标,这个图标不只提示阅览者下方还有内容,并且像扣子一样把两个版块连在一同。这两处细节我们也能够测验着运用到内容较多且分为几大版块的页面中去。

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

  四、交互元素

  页面的交互做得好,用户体验佳也是考量一个优异页面的规范之一。那么关于游戏专题页面而言,我们关于页面中重要的按钮、切换标签或者其他交互元素进行一些细节性的修饰,不只能够使页面的全体元素风格看起来愈加一致,也会进步页面的交互性。

  这个页面的四个按钮,在方法上都差异于传统的按钮。这儿之前在规划的时分规划师倒是试过做成传统按钮的方法,可是感觉上总是氛围缺乏,并且直白地放一个按钮也感觉比较突兀。后来通过进一步的处理,直接通过岩石的作用来做成按钮,调成与页面调性相匹配的色彩与质感,再结合不同按钮的重要性调整巨细,摆开空间感,不只看起来与整个页面风格一致,并且相比传统按钮,用户更有点击的愿望。

  这个比如与上一个比较相似,这儿选取相似于翅膀质感的水晶来作为按钮。与人物一前一后,摆开了空间,并且风格上也是与页面十分调配,点击欲较强。

  不知道如果我们不看我画的框能不能够发现上面这个转盘的微小细节处?好了,不卖关子了。这个转盘的最好的细节处理的当地就在于奖品的称号那里,一般我们在处理这类圆形途径上写字的状况,都是直接画个圆形的途径,完了之后在途径上直接打字,再去调整文字之间的间距,这样呢势必会形成一个问题——会有至多一半的称号是倒着的。这样呢会给阅览者在阅览的时分形成必定的妨碍,这儿规划师正式考虑到了这一微小的细节,所以通过必定的办法使一切的称号相关于水平线而言都是偏正方向的,这样用户在阅览称号的时分就会很简单辨认。详细的办法呢详见畅游VC教程《途径上的文字》,畅游视觉构思中心地址:http://vc.changyou.com/

  这张图的切开与按钮的形状调配的十分奇妙,利用对画面的一个左右切开,打造出了对战的感觉,并且利用冷暖调进行区别,而下方的“我要报名”按钮与切开出相照应做成了三角形的形状,鄙人面的三个按钮全体呈梯形状紧随其后,这一块按钮元素与主图结合的十分好。试想如果把这些按钮换成传统的方形按钮,作用还会有这么好么?

  五、飘动的碎碎

  看到这个标题我们是不是有点猎奇?何为飘动的碎碎?其实我们应该能够猜到哈,碎碎基本上在90%以上的游戏页面中都能够见到,例如:树叶、花瓣、折纸、金币、火花、碎片等等,这些能够为页面造势,并且摆开空间感的琐细物体,这儿我们把它叫做碎碎。还不明白?ok,留意下面比如中框内的元素。

  通过以上这些比如想必我们对所谓的飘动的碎碎应该有一个比较了解的了解了吧。有没有发现确实很多页面都有用到这些东西呢?那我们是不是也应该给自己的页面也加上呢?那么问题来了,到哪去找这些碎碎呢?答案,日常搜集吧孩纸。平常看到一些相似的资料就搜集起来,以备不时之需,这些元素有的仅仅通过一个原始资料,然后通过扩大缩小、高斯含糊、动感含糊、水平笔直翻转就能够得到,可见树立一个归于自己的资料库是多么的重要。

  六、实例分析

  这是一个屌炸天的学校活动UE,结合《梦想神域》二次元动漫的游戏风格以及活动主题“走进学校玩家冲”的概念,我们在页面的规划过程中尽量把页面的氛围做 的生动愉快一些,别的结合学校的主题我们联想一些与之相关的事物例如书本纸张等。那结合这些考虑的要素,于是乎出来的以下这厮,我们来一同找找页面中我提 到的那些细节吧。