正文

游戏化的网页设计

2015年01月01日 18:39:46 来源: 中国网信网
   【打印】  【纠错】

    同网站设计相比,游戏设计更强调参与性与带入感,更注重创设情境同对象进行有效而深入的沟通

  现代网页设计同游戏设计的界限越来越模糊,这不仅体现为越来越多网页游戏的出现,更体现在游戏设计的诸多理念、原则和形态元素频频在网页设计中直接出现或深深影响网页设计。

  对于前一现象,尽管网页游 戏不属于我们探讨的范围,但以简单游戏作为主体内容和线索来组织和设计的网站越来越受人欢迎却是不争的事实。对后一现象,以更强的互动体验为目的的游戏设计在诸多方面启迪着网页设计,如网页中的悬停菜单和提示层、网站个性化的动画加载、网页自定义光标和个性图标、网页关联菜单以及有更强情境感的透视文字设计等。

  就网页设计的游戏化看,将网页创意为一款简单游戏是最常见的方式,这种模式多见于进行品牌形象展示的网站之中。直白的产品或品牌诉求是传统媒体广告的事,网络媒体更适合有个性的、体验感更强的互动性诉求。游戏色彩的品牌展示网站便是这一理念的最好展现。“走进蒙联邦,见证一点一滴好牛奶”(mengniu.qq.com)是蒙牛最新的品牌宣传网站,网站被设计为一段见证牛奶诞生的旅程:种植牧草、养殖奶牛、初加工、原奶检验、产品生产、产品运输、售后服务等。每个环节均以游戏探索的方式展开,简单的Flash游戏让浏览者恰如其分地融入到网站创设的情境中去,通过有趣的产品生产与加工体验加深了对产品品质的认知。

  相比于将网站本身设计为游戏,大量从游戏设计中借鉴理念与元素就不那么简单了。网站设计与游戏设计虽同属于交互设计的范畴,但同网站设计相比,游戏设计更强调参与性与带入感,更注重创设情境同对象进行有效而深入的沟通。游戏设计多以强烈的故事性吸引游戏者,进入游戏之前的真人电影或动画都具有很强的震撼力。受这一设计理念的启发,许多网站设计都在载入动画上花了不少心思,个性化创意型的动画载入成为这些网站吸引浏览者的重要手段。

  “蒙联邦”网站的载入动画是一滴由绿色逐渐变为白色的奶液,厦门比蒙网络科技有限公司网站则将公司吉祥物和标志图形——一头在地平线上奔跑的“比蒙巨兽”作为载入动画。

  在大型游戏设计中,伴随游戏角色的行动会不时有大 量 对话框出现 在页 面的相应位 置,这些 对话框和提示栏延伸到网页设计上便是悬浮菜单和提示层的设计。

  Phorce是一款可以给Mac充电的电脑包,号称世界首款智能时尚包。其网站在向浏览者展示包的内部结构时,就使用了大量的悬停菜单和提示层。该品牌一款黑色电脑包的内部被展示在电脑屏幕上,七八个圆圈内的“十”标记分布在包内部多个位置上。当鼠标移至某一标记时,相应的菜单提示便展现出来, 用以介绍开关按钮、电池芯、USB口等诸多部分的特殊构造和功能。在游戏设计中,参与者经常要根据画面提示,尤其是鼠标的提示来执行一些必要的操作,以完成游戏任务。为体现更好的引导性,实现更好的游戏欲望激发,游戏中鼠标的光标在经过某个目标区域或物体时经常会变得个性化起来,这在网页设计中也得到了很好的体现。

  Mini-Z是美国科学工程有限公司(AS&E)推出的世界首款手持X光检测仪,这种便携式检测设备无需设置即可扫描难以到达的物体,如地铁或汽车上无人看管的箱包、背包或包裹等。Mini-Z先进的X光成像技术可以检测到并突出显示透射式X光系统可能遗漏的塑料枪、陶瓷刀、爆炸品和毒品等有机材料,并可在平板屏幕上显示检测目标的实时图像。其产品介绍网站meetminiz.com结合视频影像、动画和模拟操作设置了城市地铁、港口、边境和机场四种场合下Mini-Z的检测场景,使浏览者通过高浸入式的情境化网站体验,深入感受产品的独特优势。在每一种场景下,网页会在页面左下角展现模拟的检测仪器界面,网页主体画面则是特写的被检物体。当鼠标移至被检测物体之上时,光标会变化为检测仪界面的模拟形态,网站浏览者恰似在亲自操作检测仪器并实时了解到检测结果。

  除此之外,将网站导航链接或其他菜单设计在一体化的关联图形上,以集中吸引浏览者注意力,减轻浏览者寻找网页内容的视觉付出也同样受到游戏设计的影响。

  在游戏设计中,人物角色是核心要素,所有设计均围绕其展开,关联菜单的使用非常普遍,也极为便利。

  游戏设计不断Web化,Web设计不断游戏化,这是当今交互设计的趋势。看看风靡网络的各种大型网游和以互动游戏为设计主体内容的品牌传播网站,就不难了解到这一点。不过,需要明确的是,所有交互设计都应是以用户的良好体验为目的的。(郑建鹏)

关闭

中共中央网络安全和信息化委员会办公室
中华人民共和国国家互联网信息办公室 © 版权所有
承办:国家互联网应急中心
技术支持:长安通信科技有限责任公司
京ICP备14042428号

Produced By CMS 网站群内容管理系统 publishdate:2020/05/20 09:15:25