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

滑块菜单

《寓言3》出了，其身临其境的菜单系统与《寓言2》截然不同，如上图。但《寓言2》中美丽的滑块菜单，我们也把它列了出来。

滑动滑块，内容在右侧屏幕中随之变化。按钮下面还有相应的下拉菜单。不可用的内容会暗掉。上面那张图是顶级分类“服装”。接下来的内容显示为“大衣”，然后是特定的衣物。这是在给你的电子商务网站提供灵感吗？

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

你的网站上曾出现过一个菜单飞出来占满整个屏幕的情况吗？然后当你在上面划过时，还能在展出子菜单……还TM四级！看到这么惊悚的菜单，谁不想马上离开啊。把菜单设计的小一点，在容易看到的范围内，而且便于操作，这是让用户不会远离你的王道啊。

现在已经有一些能在任何div容器里自定义滚动条的滑块脚本了。 为什么不把按钮放到div里？因为可能某些类型的菜单设置（如娱乐或时尚网站中的），可用性和可扩展性要比下拉或弹出菜单更强。为onClick事件加一 个AJAX loader，你会得到一个用户更容易识别的界面。目标就是当菜单展开时，用户能够在一屏里对它们进行操作。既然有必要往菜单里加东西，就别让它们看起来很笨拙。

屏幕透视

先来看段视频

必须承认，当第一眼看到《Halo Reach》屏幕时我心跳不已。当你进入主菜单时，会发现文字都是斜的。《Halo Reach》整个游戏使用的都是菜单屏幕右边缘透视的角度。这是一种视觉暗示。当你把控制器往右推会发生什么呢？屏幕跳动、横滚、模糊，然后切换到下一 屏，这时内容和图像看上去就是向左倾斜的了。在一个tab下就是你的角色了，在那动来动去的。棒极了，对吗。我坐在那玩了一会儿。当然，我的直觉告诉我， 我想这么做。

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

其实在Photoshop里很容易就能模仿出这样的菜单效果。准备一张足够大的、能涵盖两屏的全景背景图片，利用倾斜的CSS3版式，再搞一个处理快速水平滚动的JavaScript脚本的水平滚动，你就可以拥有像游戏中一样的效果了。

把它放在一个更小的屏幕里，使用在一个两帧动画的banner或按钮上，你会得到惊喜的（你的客户也会哦）。我从没见人在Web上使用它，但我做了一个小示例，希望能成为你实现它的起点。

此外，注意到了吗，在《Halo Reach》里，它将很平凡的菜单屏幕与游戏世界中的景观巧妙地结合在一起。帅呆了。它传递了一种感受方式，就像飞机降落前透过窗户看城市一样。刺激并诱 惑着你成为更深层次互动和行动的一部分。这种集成方式并不适合所有网站的体验，但它有存在的意义，在适当的时候，值得去尝试。千万不要低估了喜悦的力量。

关联菜单

视频游戏中的关联菜单跟网页中的子菜单如出一辙。像《刺客信条：兄弟会》中的关联菜单（上图），玩家所选择的行动的具体方案完全取决于他们的位置。如果你选 择要施魔法，那菜单中就会出现火球或雷击供你选择。如果你选择移动，就会出现跑、攀爬、躲避，这些都呈现在一个星状菜单中。带有图标的星状菜单非常受欢 迎，但这种关联菜单只能应用于简单，并且文本比较少的垂直短列表中。

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

当你邀请一位用户执行特殊操作时，关联菜单可以提升体验。与单纯的链接列表相比，它更有趣。现在我们已经可以在一些Web应用和小型社会化媒体分享工具中见到此类用法了。

当你在设计关联菜单时，至少要考虑它的路径。星状菜单可以为用户提供3-8个选项，这样的界面可以增添视觉兴趣。要尽可能地保持它的简洁和清晰。因为它们可以在用户要做出选择时提供相关参考，从而提高转换率。同时别忘了它们要易于点击，但别设计的太重。

想体验一下星状菜单有多有趣吗？来试试 TuneGlue’s musicmap

这个使用Flash实现的，当然，你完全可以用JavaScript建立一个简单的星状菜单。更复杂的也不是不行，在菜单中嵌套菜单，就像这个：

星状菜单不局限于关联菜单。对弹出式面板菜单同样有效，而且开发和测试上也花不了太多时间。

现在，轮到你了

很多出色的设计想法都可以从视频游戏中收集、借鉴而来。游戏可以为设计提供灵感，帮助你奖励和取悦用户，让界面既直观又富有乐趣。

你正在建立一个非营利性的募捐网站吗？可以考虑使用捐款跟踪排行榜。列出访问你博客排名前10位的读者，给他们更大的动力参与到评论中。

研究如何使用图标，思考实现方法，它会让你的网站使用起来友好且有趣。让提示变得有爱，或考虑添加些可供下载的内容作为奖励或激励（为玩家提供“DLC”。 译者注：“DLC”一般指在游戏发售后，厂商又推出的下载包，对游戏内容进行扩展，如增加新地图，新游戏模式等）。通过观察和有创造性地实践，你的网站将 会更具吸引力，并且更易使用。不要忘了，勤做研究，其乐无穷哦！

更多资源

我不是这篇文章的创造者，只是思想的搬运工。我一直坚持着这样的设计理念，所以当读完这篇文章时，我坚持要把它译完，分享给更多设计师，希望能与更多人产生共鸣。

What Web Designers Can Learn From Video Games

Smashing Magazine版权所有

作者：Smashing Magazine

译者：UCD翻译小组，波希米亚

原文地址： http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/