位置:设计主页 > 网站制作 > 前端开发 >

聊聊那些让网站页面更加出彩的小细节(3)

来源:畅游VC 作者:畅游VC 时间:2014-11-07 09:00

三、页面引导

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

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

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

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

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

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

四、交互元素

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

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

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

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

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

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

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