导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

应用设置指南

在默认情况下,Window 为每个 Windows 应用商店应用提供了“设置”窗格。“设置”窗格的顶部列出了应用设置的"入口点"。每个入口点均可打开一个“设置”浮出控件,其中显示了自身的设置选项。本主题将介绍有关创建和显示应用设置的最佳做法。

请将此操作功能视为我们的应用功能大全系列的一部分。:  Windows 应用商店应用 UI 全解

示例

用户可以从屏幕的一侧轻扫以显示超级按钮,然后按“设置”超级按钮以显示“设置”窗格。

OneDrive 应用的设置浮出控件。

注意  Windows 向 Windows 应用商店应用中的每个“设置”窗格添加两个默认入口点:“权限”和“评分和评论”。请注意,如果未通过 Windows 应用商店安装你的应用(例如,如果它是旁加载的企业应用),则你的应用的“设置”窗格将不会包括“评分和评论”入口点。“设置”窗格的底部包含系统设置,如音量、亮度和电源。

我的应用是否应该包括应用设置?

默认情况下,所有 Windows 应用商店应用都包括具有“权限”和“评分和评论”部分的“设置”窗格。下面是属于“设置”窗格中的其他设置的示例:

  • 影响应用的行为而且不需要经常调整的配置选项,例如,在天气应用中在摄氏度和华氏度之间选择默认的温度单位,或者更改邮件应用的帐户设置。
  • 依赖用户的首选项的选项,例如音乐、音效或颜色主题。
  • 不经常需要的应用信息,例如隐私策略、帮助、应用版本或版权信息。

包含在典型应用工作流中的命令(例如在艺术应用中更改画笔大小)不应该显示在“设置”窗格中。改为将最常使用的命令放置在顶部或底部应用栏。若要了解有关命令放置的详细信息,请参阅命令模式Guidelines for app bars 提供了可供应用栏使用的建议。

应做事项和禁止事项

一般原则

  • 在“设置”窗格中为所有应用设置创建入口点。
  • 保持设置简单化。定义智能默认值,并使设置数保持最少。
  • 如果需要,可以从应用 UI 的元素链接到“设置”窗格或深入链接到特定的“设置”浮出控件。例如,你可以从底部应用栏中的"帮助"按钮以及“设置”窗格中的"帮助"入口点链接到你的帮助“设置”浮出控件。
  • 当用户更改设置时,你的应用应当立即反映所做的更改。立即或在用户完成与浮出控件的交互操作时应用设置更改。
  • 使用适用于 WinJS (SettingsFlyout) 和 XAML (SettingsFlyout) 的“设置”浮出控件。默认情况下,这些控件实现 UI 设计指南(如设计设置 UI 部分中所述)。
  • 请勿在应用设置中包括属于常见应用工作流的命令,例如,在艺术应用中更改画笔颜色。这些命令位于应用栏或画布上。有关详细信息,请参阅概念性概述的命令模式应用栏指南
  • 请勿在“设置”窗格中使用入口点来直接执行操作。入口点应打开“设置”浮出控件。
  • 请勿使用导航的“设置”窗格。当“设置”窗格关闭时,用户在应用中的位置应当与他们单击“设置”超级按钮时所在的位置相同。顶部应用栏是更适合的导航位置。
  • 请勿将“设置”浮出控件类用作所有用途的控件。它们仅适用于在“设置”窗格中从入口点启动的“设置”浮出控件。

入口点

入口点是出现在“设置”窗格顶部的标签,会打开“设置”浮出控件,你可以在其中显示一个或多个设置选项。如果你有一列要包含的设置,请考虑以下用于入口点的指南:

  • 将相似或相关的选项一起组合到一个入口点中。避免向你的“设置”窗格添加四个以上入口点。
  • 无论应用的上下文如何,都显示相同的入口点。如果某些设置与特定的上下文不相关,则在“设置”浮出控件中禁用这些设置。
  • 尽可能为你的入口点使用一个词的描述性标签。例如,对于与帐户相关的设置,可以输入“帐户”而不是“帐户设置”。如果你希望你的设置只有一个入口点并且不为该设置提供描述性标签,则请使用“选项”或“默认”。
  • 如果入口点是直接指向 Web 而不是浮出控件的链接,则让用户看到一个可视化提示,例如,超链接样式的“帮助(在线)”或“Web 论坛”。请考虑将多个指向 web 的链接分组到一个具有单个入口点的浮出控件。例如,“关于”入口点应打开具有指向“使用条款”、“隐私策略”和“应用支持”的链接的浮出控件。
  • 将不太常用的设置组合到一个入口点中,以便每个更常见的设置都有其各自的入口点。将仅包含信息的内容或链接放入“关于”入口点中。
  • 请勿复制“权限”窗格中的功能。默认情况下,Windows 提供了此窗格,你无法修改它。

设计设置 UI

注意  某人情况下,在 WinJS 和 XAML 中可用的“设置”浮出控件遵循这些指南,除了与标头和边框颜色相关的指南。使用这些控件(SettingsFlyout (HTML)SettingsFlyout (XAML))确保你的“设置”浮出控件遵循 UI 指南并传递一致的用户体验。
  • 始终在“设置”窗格中从入口点启动“设置”浮出控件。
  • 使用容易消除的表面,该表面显示在主应用内容的顶部并在用户单击浮出控件之外的区域时消失。这让用户可以快速更改设置并返回到应用中。
  • 确保你的“设置”浮出控件显示在超级按钮和“设置”窗格所在的屏幕的同一侧。使用 SettingsEdgeLocation 属性来确定“设置”超级按钮显示在屏幕的哪一侧。
  • 从“设置”窗格所在的屏幕的同一侧(而不要从屏幕的顶部或底部)滑入浮出控件。
  • 不管方向如何,浮出控件都必须采用全屏高度,并且应该采用窄(346 像素)或宽(646 像素)格式。选择适合于内容的宽度且不要创建自定义大小。
  • 浮出控件标题应包含一个后退按钮、用来打开该浮出控件的入口点的名称以及应用的图标。
  • 该标头的背景颜色应与磁贴的背景颜色相同。
  • 边框颜色应与标头采用相同的颜色,但是应该暗 20%。
  • 在白色背景上显示“设置”内容。

向“设置”浮出控件添加设置内容

  • 在单个列中从上至下展示内容,支持滚动(如果需要)。滚动限制的最大值是屏幕高度的两倍。
  • 使用以下应用设置控件:

    • 切换开关:用于让用户将值设置为打开或关闭。
    • 单选按钮组:用于让用户从多达 5 个互相排斥的一组相关选项中选择一个选项。
    • 文本输入框:用于让用户输入文本。使用与要从用户那里获取的文本类型(如电子邮件或密码)相对应的文本输入框类型。
    • 超链接:用于将用户带到应用中的其他页面或外部网站。当用户单击超链接时,“设置”浮出控件将会消失。
    • 按钮:用于让用户立即启动操作,不会消除当前的“设置”浮出控件。
  • 如果禁用其中一个控件,则添加描述性消息。将此消息置于禁用的控件上。
  • 在为“设置”浮出控件和标头设置动画后,将内容和控件作为单个块进行动画处理。使用左偏移 100px 的 enterPageEntranceThemeTransition 动画为内容创建动画。
  • 使用部分标头、段落和标签来帮助组织和阐述内容(如果需要)。
  • 如果你需要重复设置,请使用 UI 的其他级别或展开/折叠模式,但避免两级以上深度的层次结构。例如,天气应用提供按城市设置(即,列出各个城市)并让用户在城市上点击以打开一个新浮出控件或展开以显示设置选项。
  • 如果加载控件或 Web 内容需要花费时间,请使用不确定的进度控件以指示用户该信息正在加载。有关详细信息,请参阅进度控件指南
  • 请勿使用导航按钮或提交更改按钮。使用超链接导航到其他页面(而不是使用提交更改按钮)来自动保存在用户取消“设置”浮出控件时对应用设置所做的更改。

相关主题

对于设计人员
布局
命令模式
Guidelines for app help
Guidelines for app bars
选择控件指南
对于开发人员 (HTML)
设置 UI 的布局
WinJS.UI.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Adding app settings
Quickstart: Add app help
控件列表
对于开发人员 (XAML)
设置 UI 的布局
SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Add app settings
Quickstart: Add app help
控件列表
示例
应用设置示例

 

 

显示:
© 2015 Microsoft