JunChen::Wish Room 1906

Promoting Usability, Accessibility and Web Standards...

上一篇:A Psychological Tip 一个心理学的秘诀 | 返回首页 | 下一篇:鼠标发展史

XMB (Cross Media Bar) 界面设计浅析

发表于 2006年06月23日 10:57 PM @ 分类:用户体验及交互设计

Cross Media Bar,通常也被缩写为 XMB,是 Sony 公司开发的一套 GUI 界面。最初是被用在 PS2 DVD Movie playback HUD上,并且也被作为最新 PSX 控制台界面,比如大家所熟悉的 PSP 操作系统界面。XMB 由具有层级关系的图标菜单组成,一级图标水平排列,二级图标跟随所属一级图标呈垂直状排列。如下图:

Cross Media Bar (XMB), screenshot of PSX device.

操作 XMB 界面至少需要 6 个按钮:4向操作键、确定键、取消键。4 向操作键主要用来选择一二级图标菜单——左右选择一级、上下选择二级。确定键和取消键毋庸置疑的用来确定选择或取消选择。同时当用户处在三级和四级菜单(如果有)的时候,可以用左方向键实现取消(即返回上层),用右方向键实现确认(非最终菜单情况下)。很贴心并容易理解,在很多手机的 GUI 里也有类似的设计。

PSP XMB interface

除了上述的操作感,还有很多优点:

  • 良好的层次感,降低了初级用户和高级用户之间的差距;十字导航的想法可能来源于十字键的设计,在一些游戏中也有相似的交互设计;
  • 流畅的导航操纵性和良好的位置感,克服并还利用了手持设备操作的有限性实现图标菜单的聚焦,尽量用最少的按键完成操作,这一点用鼠标操作是体会不到的;
  • 统一、高科技感但十分柔和的 UI 设计,视线集中在左上侧黄金分割点上(XMB 在 16:9 屏幕上的优势);
  • 图标菜单的可扩展性。由于是独立设备上的 GUI 系统,XMB 的十字菜单原则上可以无限扩展,不过当然也没这个必要,合理的一级图标数应当控制在 10 个以内。

没有实机的话,这里有一个 Flash体验版,不过并不完美,没有体现出三级和四级菜单的操作,用鼠标操作就如上文所说的,也不能体会到精髓。

相关文章

引用 Trackback

本文引用地址:http://www.junchenwu.com/cgi-bin/mt-tb.cgi/341.

评论

allankliu 说:

我想了解一下是否有用JS/CSS/HTML来实现这种XMB界面的代码可供参考?

发表评论