滑块菜单

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

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

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

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

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

屏幕透视

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

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

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

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

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

出处：蓝色理想
责任编辑：moby

上一页 Web设计师能从游戏中学到些什么 [6] 下一页 Web设计师能从游戏中学到些什么 [8]