具有引导性的移动应用界面设计模式.pdf

具有引导性的移动应用界面设计模式 文字工作搞的有点儿奔放了啊，一直玩到周日晚间这般时候；任何其他事情恐怕都难以让自己有这 样的劲头了吧。也难说。其实周末两天主要是收拾家当准备搬家；忙里抽闲做做内容，纯当休闲 娱乐。 今次的译文，与之前一篇产品早期原型设计与用户测试方面的文章类似，也是来自一本 新书， Mobile Design Pattern Gallery( 移动应用设计模式画廊 ) ，有兴趣的同学可以搜搜，我就不加 书店链接了。确实没时间念叨那些有的没的了，有点闹不住了；让我们欢快的进入正文吧。 前段日子，我们 (英文原文作者 ) 的团队接到了一个新的移动应用项目。悲催的是，当时所有的移动 方面的设计师都已经被其他项目买票了，剩下的设计师所擅长的领域基本都在企业级应用或效率工 具等方面。于是，我制作了一个包含大量移动应用截图的快速教程，希望帮助他们尽快熟悉新方向 。结果真心好，培训效果喜人，这套教程也成为我们手头的移动应用设计模式参考，并逐步编纂 成书。 我(英文原文作者 )个人对其中关于 引导“ ”方面的话题最有爱，在这里分享给大家。需要提一下，虽然 这些设计模式都是基于移动应用归纳出的最佳实践方式，但它们在某种程度上同样适用于移动化的 网站设计。 还记得第一次使用 Photoshop 时的情形吗？给我印象最深刻的就是一个空白画布和左侧的一堆强大 工具。话说，当时我也只是假设它们很强大，实际上不能确定，因为面对这样一个界面，我完全不 知道从哪里开始使用。于是我只好又买来一本 “Teach Yourself Photoshop in 24 Hours ，花点时间 ” 自学先。 (24 小时系列教程，小 C 我只看过 JavaScript 一本，印象里真心烂。 ) 10多年之后的现在，移动市场中出现了成千上万的应用，每个类别中，都有好几打功能几乎完全相 同的。这些应用多数是免费的，所以我们时常会随便挑一个下载安装，花 5分钟研究一下那些直觉 性很差的用户界面，然后卸掉，再去装另外一个玩玩看。 Layar Reality Browser 是一款基于 增强现实“ ”(Augmented Reality ，简称 AR) 技术的移动应用，它的 初期版本如下图所示： 是什么让我经由这块大片灰色的界面得到了 增强现实“ ”？答案就是 引导“ ”。对于移动应用来说， “ 引导 ”的本质就是一种小提示，当用户第一次使用 app 的时候显示出来，向用户推荐一些常用功能的 操作方式，或引领他们完成一个预设的教学目标。简单却用心的引导方式可以很有效的在初次体验 中提升用户满意度。 移动应用的引导模式大致分为八类： 对话 (Dialog) 带有介绍文案的简单对话框是移动应用中最普遍的引导方式，也许是因为在开发编码方面相对容易 些的缘故。不过由于太常见了，这种模式也非常容易被用户直接无视。 保持介绍文案的言简意赅是非常重要的，没人愿意在这里阅读大量内容。另外有一点需要注意，对 于非常重要的信息，最好在应用内部留有能够重新阅读这些提示内容的入口。下面的截图出 自TargetWeight 和 ActionMethod 这两款应用的首页。 提示 (Tip) 这种方式比起 对话“ ”来说，具有更强的上下文相关性。我们可以在应用的任何一个视图界面中使用 提示，而不仅是首页。在 eBay 的app 中(如下图左侧所示 ) ， 保存搜索结果“ ”的功能就是通过提示来吸 引眼球的。试想如果这里不使用如此明显的提示，用户的目光会很容易忽视掉这块原本是呈现标题 的地方。另外， Android 中用来引导用户对首页进行自定义的操作提示也是个很典型的范例 (下图 右侧 ) ，有些类似 Windows 中的曲别针君。 ShoppingList 会在用户使用的过程中渐进式的对一些主要功能进行提示，引导用户操作。 通常的原则，是在当前需要突出的相关功能旁边放置提示气泡，保持介绍文案的简短，并且在用户 开始执行对应的操作时移除提示。 游历 (Tour) 游历可以带来终极的引导体验 —— 通过对关键屏和重要功能的连续展示，在最短的时间内引领用户 对应用进行全面的探索。 Nike GPS 应用是该方式的一个不错的例子，它特别为移动设备进行了优化