设计说明性 UI 指南

Applies to Windows and Windows Phone

设计说明性用户界面 (UI),可向用户解释如何使用你的 Windows 应用商店应用。

应做事项和禁止事项

  • 使用说明性 UI 向新用户介绍你的应用可以执行哪些操作。
  • 用于新功能的提示或者关于你的应用在更新后有何变化的特定详细信息。
  • 将说明性 UI 和特定任务集成。
  • 不要阻止与应用程序 UI 交互。

其他使用指南

在某些情况下,帮助用户与你的 Windows 应用商店应用交互的最佳方法是在你的应用的 UI 中对用户进行解释。我们使用术语“说明性 UI”来表示此类指南。一个很好的示例是使用 UI 元素(比如直接文本或浮出控件)以告知用户何时需要使用触摸交互来完成任务。

请记住,说明性 UI 不能替代细致周到的设计。如果你太频繁或脱离上下文使用它,则可能中断应用流程并降低其有效性。在添加说明性 UI 之前,请探索向用户介绍你的应用的其他方法。有关布局、导航和控件的更多信息,请参阅相关主题。

下面提供一些示例,其中的说明性 UI 可帮助你的用户学习以下内容:

  • 帮助用户发现触控交互。 以下屏幕截图显示,说明性 UI 教玩家如何在“Cut the Rope”游戏中使用触控笔势。

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

  • 留下良好的第一印象。 考虑使用说明性 UI 向新用户介绍你的应用可以执行哪些操作。例如,当 Movie Moments 首次发布时,说明性 UI 会提示用户开始制作电影。

    Movie Moments 应用的启动屏幕

  • 指导用户在复杂的任务中采取下一步骤。 在“Windows 邮件”应用中,收件箱底部的提示将用户指向访问较早消息的“设置”

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

    在用户单击该消息时,应用的“设置”浮出控件会立即显示在屏幕的右侧,以便用户完成该任务。下面的屏幕截图显示了当用户单击说明性 UI 消息之前和之后的“邮件”应用。

    之前之后
    “Windows 邮件”应用的屏幕截图带有扩展“设置”浮出控件的“Windows 邮件”应用的屏幕截图

     

  • 介绍 UI 更改。如果在你的应用的最新版本中对 UI 进行了重要更改,用户可能希望看到有关新功能的提示或应用如何更改的特定详细信息。

说明性 UI 设计的原则

  • 保持简洁。一次介绍一个概念,并在需要时使用图像。请考虑在你的 Windows 应用商店应用的“设置”浮出控件中添加“帮助”部分,以解释复杂的功能。
  • 在上下文中解释。将说明性 UI 与任务相结合有助于用户完成任务。若在用户最需要时介绍概念,则用户更愿意保留概念。
  • 不要阻止交互。在显示说明性 UI 时确保用户仍可与你的应用交互。说明性 UI 应帮助用户,而不是碍手碍脚地打扰他们。
  • 解释后消失。当不再相关时立即删除说明性 UI,或者允许用户取消。 另外,在大多数情况下,用户只需要显示一次说明性 UI 即可。避免重复显示相同的说明性 UI。
  • 尽量少用。周到的设计和“帮助”部分通常能够向用户解释享受你的应用需要了解的一切。在向你的应用添加说明性 UI 之前,请考虑设计选项的宽度。

相关主题

对于设计人员
Microsoft 设计原则
布局
控件
应用帮助指南
对于开发人员 (HTML)
创建 UI (JavaScript)
对于开发人员 (XAML)
创建 UI (C#/C++/VB)

 

 

显示:
© 2015 Microsoft