说明性 UI 指南Instructional UI guidelines

在某些情况下,向用户解释应用中他们不熟悉的功能(例如特定的触摸交互)会很有用。In some circumstances it can be helpful to teach the user about functions in your app that might not be obvious to them, such as specific touch interactions. 在这些情况下,你需要通过用户界面 (UI) 向用户显示说明,以便他们可以使用可能错过的这些功能。In these cases, you need to present instructions to the user through the user interface (UI), so that they can use those features they might have missed.

何时使用说明性 UIWhen to use instructional UI

说明性 UI 必须谨慎使用。Instructional UI has to be used carefully. 如果过度使用,它很容易被忽略或使用户感到厌烦,从而导致效率很低。When overused, it can be easily ignored or annoy the user, causing it to be ineffective.

说明性 UI 应用于帮助用户发现重要但不明显的应用功能,例如触摸手势或他们可能感兴趣的设置。Instructional UI should be used to help the user discover important and non-obvious features of your app, such as touch gestures or settings they may be interested in. 它还可以用于提醒用户有关他们可能忽略的应用中的新功能或更改。It can also be used to inform users about new features or changes in your app that they might have otherwise overlooked.

除非应用依赖触摸手势,否则说明性 UI 不应用于向用户解释应用的基本功能。Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

编写说明性 UI 的原则Principles of writing instructional UI

好的说明性 UI 与用户息息相关,并对用户有教育意义,还能增强用户体验。Good instructional UI is relevant and educational to the user, and enhances the user experience. 它应:It should be:

  • 简单: 用户不会想让他们的体验被复杂信息打断。Simple: Users don't want their experience to be interrupted with complicated information
  • 记忆深刻: 用户不会想在每次尝试某项任务时都看到相同的说明,因此说明应能让他们过目不忘。Memorable: Users don't want to see the same instructions every time they attempt a task, so instructions need to be something they'll remember.
  • 直接相关: 如果说明性 UI 不能向用户解释他们想立即执行的操作,他们也就没有理由关注它。Immediately relevant: If the instructional UI doesn't teach a user about something that they immediately want to do, they won't have a reason to pay attention to it.

避免过度使用说明性 UI,并确保选择正确的主题。Avoid overusing instructional UI, and be sure to choose the right topics. 不要解释:Do not teach:

  • 基本功能: 如果用户需要说明才能使用你的应用,请考虑将应用设计制作的更为直观。Fundamental features: If a user needs instructions to use your app, consider making the app design more intuitive.
  • 明显的功能: 如果用户不用说明就能自行了解某项功能,则说明性 UI 会成为阻碍。Obvious features: If a user can figure out a feature on their own without instruction, then the instructional UI will just get in the way.
  • 复杂的功能: 说明性 UI 需要保持简洁,并且对复杂功能感兴趣的用户通常愿意去查找说明,而无需向他们提供这些说明。Complex features: Instructional UI needs to be concise, and users interested in complex features are usually willing to seek out instructions and don't need to be given them.

避免由于说明性 UI 而给用户造成不便。Avoid inconveniencing the user with your instructional UI. 请勿:Do not:

  • 遮盖重要信息: 说明性 UI 应永远不能妨碍应用的其他功能。Obscure important information: Instructional UI should never get in the way of other features of your app.
  • 强制用户参与: 用户应能够忽略说明性 UI 并仍能继续使用应用。Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • 显示重复信息: 不要让说明性 UI 给用户造成困扰,即使在他们第一次忽略此 UI 时也是如此。Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. 添加用于重新显示说明性 UI 的设置是更好的解决方案。Adding an setting to display instructional UI again is a better solution.

说明性 UI 的示例Examples of instructional UI

下面提供一些实例,其中的说明性 UI 可帮助你的用户了解:Here are a few instances in which instructional UI can help your users learn:

  • 帮助用户发现触控交互。Helping users discover touch interactions. 以下屏幕截图显示,说明性 UI 教玩家如何在“Cut the Rope”游戏中使用触控笔势。The following screen shot shows instructional UI teaching a player how to use touch gestures in the game, Cut the Rope.

    显示说明性 UI 消息“Slide acress to cut the rope”的游戏屏幕截图

  • 留下良好的第一印象。Making a great first impression. 当影音时光首次启动时,说明性 UI 会在不阻碍用户体验的情况下提示他们开始制作电影。When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    影音时光应用的启动屏幕

  • 指导用户在复杂的任务中采取下一步骤。Guiding users to take the next step in a complicated task. 在“Windows 邮件”应用中,收件箱底部的提示将用户指向“设置”**** 以访问较早的消息。In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    显示说明性 UI 消息的“Windows 邮件”应用的裁剪屏幕截图

    在用户单击该消息时,应用的“设置”**** 浮出控件会立即显示在屏幕的右侧,以便用户完成该任务。When the user clicks the message, the app's Settings flyout appears on the right side of the screen, allowing the user to complete the task. 下面的屏幕截图显示了当用户单击说明性 UI 消息之前和之后的“邮件”应用。These screen shots show the Mail app before and after a user clicks the instructional UI message.

    以前Before 完成After
    “Windows 邮件”应用的屏幕截图 带有扩展设置浮出控件的 Windows 邮件应用的屏幕截图