游戏与交互设计:Web设计师从游戏中学到的知识(2)

http://www.itjxue.com  2015-08-07 21:12  来源:未知  点击次数: 

在《上古卷轴IV》中:Oblivion,你开始在监狱里,必须通过一个地下洞穴逃脱,沿途会跟大老鼠和偶尔出现的小妖精战斗,通过这种方式来学习游戏的基本控制。

它们为什么有关联?你可能不必为一个复杂的界面提供完整的交互教学,但可以通过智能图形或图表,让用户更迅速地了解内容。你可以抛出一个大概念,然后拆分成小块。用小提示和实例要比长篇大论好的多。通过研究游戏中是怎么用看替代说的,就可以在一些棘手的问题上获得突破了。

战斗场面未必要华丽

游戏设计奇才Jesse Schell说,“游戏,为满足你的好奇心提供了成功的可能性和机会——一个解决问题的机会,做正确的选择,并让人感到自由。” 即使是最平凡的网站也能问出最吸引人的问题——游戏的哪些要素能给人们带去欢乐?

游戏通常在用户输入时给出清晰的反馈。这些元素可以融入界面,不仅仅是通过carousels或accordions的形式。问个简单的问题“你希望学到更多关于此话题的东西吗?” 确定提交表单之后会发现,提升用户交互体验还有很长的路要走哇。

一些Web设计师们已经实现了UI组件的简单化。如今,悬停菜单和提示层已经不是什么新鲜玩意了。这些在游戏中已经成型的套路,如何能为普通UI元素带来更多的创意和乐趣,让我们拭目以待吧。

来点实例

让我们进入正题,来看看如何在下个项目中使用这些UI元素。接下来会展示一些实例,还有一些资源便于之后的扩展学习。

异步加载的信息

这是《辐射》里的加载截图:上面的《辐射:新维加斯》和下面的《辐射3》都有帮助信息和提示,并随主题背景图一起在游戏中展开。相比老套生硬的加载图像,它使用轮盘赌或绿屏变换到指定界面,从而让这个无聊的等待过程成为游戏乐趣的一部分。

Web设计师能从中获得什么:

个性化你的图像,把用户拉入你所创造的屏幕“世界”中。即使你在企业网站工作,你也可以设计信息位用以显示提示和其他帮助信息。那搭建一个零售体育用品网站呢?也许你可以用一个旋转的篮球作为加载动画。还没想好怎么开始?点开本教程学习如何预载内容。

加载一整屏背景图或许太慢了,但你可以给一个div设定彩色背景,然后利用JavaScript去载入提示和信息。为保证效果,加载文件大小最好控制在 30KB以下;当然,越小越好。可以用一个简单的AJAX每几秒就抓取一次内容,或者当然也可以为每次抓取提交一个请求。怎么做完全取决于加载内容的多少 和你有多少时间。看一个这种方式的实例,Website Grader。提交一个链接后,你期待的结果就来了。

(责任编辑:IT教学网)

更多