三、页面引导
为什么要把页面引导列出来呢?想必大家在浏览网页的时候较早注意到的应该都是图片吧,应该鲜有人去直接扫字,毕竟图片来的更为直观。所以呢,页面的引导性就很重要了。扫一眼画面,就能猜到专题的大概主题是什么,场景构造的有代入感,能够让浏览者心甘情愿的去阅读,而且注意各个版块之间的联系,这是优秀的页面应该具备的。
这个页面,通过形象的场景打造,让浏览者不用去阅读文字就能很快明白这是个跟“股票”相关的页面,代入感极强。假象下如果去掉圈中的细节元素,画面还会风采依旧么?下面几个例子的处理手法跟此例很像,都是通过打造一个非常具体的场景来增强页面的引导性,这种都需要设计师日常要注意观察生活中的细节,能够联想到与各场景相关的事物,才能打造出精彩的画面。
上图是一个非常棒的引导案例,设计师在处理的时候通过素材的拼凑叠加,做出右侧齿轮机关的导航形式;在交互上通过浏览者操控锤子去敲击磬(Qing),增加了页面的趣味性;而且在场景的打造上,圈1中的近景与圈2所处的远景拉开层次,近大远小,近清晰远模糊,画面的纵深感比较强。我们再看一下下面这个例子,看看它的引导是怎么做的。
这是一个内容比较多的页面,这里设计师把每个大部分的内容用色块进行区分。倘若只是单纯的用色块来分割每一块的内容,那分割处会显得比较生硬,而且容易给人造成内容脱离的感觉,不具有整体性。这里设计师巧妙地运用铁链+镰刀的尖头构成一件武器,从而将页面的各个版块贯穿起来,这里链条不仅起到引导作用,而且还能拉开页面的层次,这是个非常棒的处理。
此外,大家注意看每两个色块的交接处还有一个向下提示的图标,这个图标不仅提示浏览者下方还有内容,而且像纽扣一样把两个版块连在一起。这两处细节大家也可以尝试着运用到内容较多且分为几大版块的页面中去。
上面两个例子跟镰刀那个在引导方式上很相似,如圈中都是通过某种元素把相邻的板块连接起来,而首先个页面最右上角的内容定位标签和第二张图最下方的TOP按钮也都是长页面中可以运用的细节之处,都是非常不错的引导形式。
(举报)