应用设置指南Guidelines for app settings

应用设置是 Windows 应用的用户可自定义部分,可通过应用设置页面访问。App settings are the user-customizable portions of your Windows app accessed through an app settings page. 例如,新闻阅读器应用可以让用户指定要显示的新闻源或屏幕上要显示的列数,而天气应用则可以让用户在摄氏度和华氏度之间进行选择。For example, a news reader app might let the user specify which news sources to display or how many columns to display on the screen, while a weather app could let the user choose between Celsius and Fahrenheit. 本文将提供有关创建和显示应用设置的建议和最佳做法。This article provides recommendations and best practices for creating and displaying app settings.

何时提供设置页面When to provide a settings page

以下是属于应用设置页面的应用选项的示例:Here are examples of app options that belong in an app settings page:

  • 影响应用的行为并且不需要频繁调整的配置选项,例如在天气应用中在摄氏度或华氏度之间选择默认的温度单位,更改邮件应用的帐户设置、通知设置或辅助选项。Configuration options that affect the behavior of the app and don't require frequent readjustment, like choosing between Celsius or Fahrenheit as default units for temperature in a weather app, changing account settings for a mail app, settings for notifications, or accessibility options.
  • 取决于用户首选项的选项,如音乐、音效或颜色主题。Options that depend on the user's preferences, like music, sound effects, or color themes.
  • 不经常访问的应用信息,例如隐私策略、帮助、应用版本或版权信息。App information that isn't accessed very often, such as privacy policy, help, app version, or copyright info.

包含在典型应用工作流中的命令(例如在艺术应用中更改画笔大小)不应该在设置页面上。Commands that are part of the typical app workflow (for example, changing the brush size in an art app) shouldn't be in a settings page. 若要了解有关命令放置的详细信息,请参阅命令设计基础知识To learn more about command placement, see Command design basics.

常规建议General recommendations

  • 保持设置页面简洁,并使用二进制(开/关)控件。Keep settings pages simple and make use of binary (on/off) controls. 通常,切换开关是二进制设置的最佳控件。A toggle switch is usually the best control for a binary setting.
  • 对于让用户从最多 5 个互相排斥的一组相关选项中选择一个项的设置,请使用单选按钮For settings that let users choose one item from a set of up to 5 mutually exclusive, related options, use radio buttons.
  • 在应用设置页面上为所有应用设置创建入口点。Create an entry point for all app settings in your app setting's page.
  • 使设置保持简单。Keep your settings simple. 定义智能默认值,并使设置数保持最少。Define smart defaults and keep the number of settings to a minimum.
  • 当用户更改设置时,应用应当立即反映所做的更改。When a user changes a setting, the app should immediately reflect the change.
  • 不要包括属于常见应用工作流的命令。Don't include commands that are part of the common app workflow.

入口点Entry point

用户进入应用设置页面的方式应取决于应用的布局。The way that users get to your app settings page should be based on your app's layout.

导航窗格Navigation pane

对于导航窗格布局,应用设置应为导航选项列表中最后一项,并且应固定到底部:For a nav pane layout, app settings should be the last item in the list of navigational choices and be pinned to the bottom:

导航窗格的应用设置入口点

应用栏App bar

如果使用应用栏或工具栏,请将设置入口点作为最后的项目之一放在“更多”溢出菜单中。If you're using an app bar or tool bar, place the settings entry point as one of the last items in the "More" overflow menu. 如果使用户更容易发现设置入口点对应用来说很重要,请将入口点直接放在应用栏上,而不是放在溢出菜单中。If greater discoverability for the settings entry point is important for your app, place the entry point directly on the app bar and not within the overflow.

应用栏的应用设置入口点

中心Hub

如果你要使用中心布局,应用设置的入口点应放置在应用栏的“更多”溢出菜单中。If you're using a hub layout, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

选项卡/透视表Tabs/pivots

对于表或透视表布局,我们不推荐将应用设置入口点作为顶部项之一放在导航中。For a tabs or pivots layout, we don't recommended placing the app settings entry point as one of the top items within the navigation. 相反,应用设置的入口点应放置在应用栏的“更多”溢出菜单中。Instead, the entry point for app settings should be placed inside the "More" overflow menu of an app bar.

大纲-细节Master-details

与其将应用设置入口点深埋在大纲-细节窗格中,不如将其设置为高级大纲窗格上的最后一个固定项。Instead of burying the app settings entry point deeply within a master-details pane, make it the last pinned item on the top level of the master pane.

布局Layout

应用设置窗口应全屏打开,并填满整个窗口。The app settings window should open full-screen and fill the whole window. 如果应用设置菜单拥有最多 4 个顶级组,这些组应串联在一列中。If your app settings menu has up to four top-level groups, those groups should cascade down one column.

桌面上应用设置页面的布局

“颜色模式”设置"Color mode" settings

如果你的应用允许用户选择应用的颜色模式,请使用单选按钮组合框提供这些选项,标头为“选择应用模式”。If your app allows users to choose the app's color mode, present these options using radio buttons or a combo box with the header "Choose an app mode". 选项应包括以下内容The options should read

  • 轻型Light
  • 深色Dark
  • Windows 默认值Windows default

我们还建议添加一个指向 Windows 设置应用的“颜色”页面的超链接,用户可以访问和修改当前的默认应用模式。We also recommend adding a hyperlink to the Colors page of the Windows Settings app where users can access and modify the current default app mode. 对于超链接文本,请使用字符串“Windows 颜色设置”。Use the string "Windows color settings" for the hyperlink text.

“选择模式”部分

“关于”部分和“反馈”按钮About section and Feedback button

我们建议将“关于此应用”部分放在你的应用中作为专用页面或放在其自己的部分中。We recommend placing "About this App" section in your app either as a dedicated page or in its own section. 如果你需要“发送反馈”按钮,请将该按钮放置在“关于此应用”页面的底部。If you want a "Send Feedback" button, place that toward the bottom of the "About this App" page.

在“法律”副标题下,放置任何“使用条款”和“隐私声明”(应为带有环绕文本的超链接按钮)以及其他法律信息,如版权。Under a "Legal" subheader, place any "Terms of Use" and "Privacy Statement" (should be hyperlink buttons with wrapping text) as well as additional legal information, such as copyright.

附带“提供反馈”按钮的“关于此应用”部分

当你有一个要包括在应用设置页面中的项目列表后,请考虑以下指南:Once you have a list of items that you want to include in your app settings page, consider these guidelines:

  • 将相似或相关的设置分到单个设置标签下。Group similar or related settings under one settings label.

  • 尽力使设置总数保持在 4 个或 5 个以下。Try to keep the total number of settings to a maximum of four or five.

  • 无论应用的上下文如何,都显示相同的设置。Display the same settings regardless of the app context. 如果某些设置在特定的上下文不相关,则在应用“设置”浮出控件中禁用这些设置。If some settings aren't relevant in a certain context, disable those in the app settings flyout.

  • 使用描述性的单个词标签来介绍设置。Use descriptive, one-word labels for settings. 例如,对于与帐户相关的设置,将该设置命名为“帐户”而非“帐户设置”。For example, name the setting "Accounts" instead of "Account settings" for account-related settings. 如果希望设置只有一个选项并且设置不为其本身提供描述性标签,则请使用“选项”或“默认”。If you only want one option for your settings and the settings don't lend themselves to a descriptive label, use "Options" or "Defaults."

  • 如果设置直接链接到 Web 而非浮出控件,请使用可视化提示让用户知道这一情况,例如超链接样式的“帮助(在线)”或“Web 论坛”。If a setting directly links to the web instead of to a flyout, let the user know this with a visual clue, such as "Help (online)" or "Web forums" styled as a hyperlink. 请考虑将多个指向 Web 的链接分组到一个具有单个设置的浮出控件。Consider grouping multiple links to the web into a flyout with a single setting. 例如,“关于”设置可以打开具有指向“使用条款”、“隐私策略”和“应用支持”的链接的浮出控件。For example, an "About" setting could open a flyout with links to your terms of use, privacy policy, and app support.

  • 将不太常用的设置组合到一个入口中,以便每个更常见的设置都有其各自的入口。Combine less-used settings into a single entry so that more common settings can each have their own entry. 将仅包含信息的内容或链接放入“关于”设置。Put content or links that only contain information in an "About" setting.

  • 不要复制“权限”窗格中的功能。Don't duplicate the functionality in the "Permissions" pane. 默认情况下,Windows 提供此窗格,你无法修改它。Windows provides this pane by default and you can't modify it.

  • 向“设置”浮出控件添加设置内容Add settings content to Settings flyouts

  • 在单个列中从上至下展示内容,支持滚动(如果需要)。Present content from top to bottom in a single column, scrollable if necessary. 滚动限制的最大值是屏幕高度的两倍。Limit scrolling to a maximum of twice the screen height.

  • 使用以下应用设置控件:Use the following controls for app settings:

    • 切换开关:用于让用户将值设置为打开或关闭。Toggle switches: To let users set values on or off.
    • 单选按钮:用于让用户从多达 5 个互相排斥的一组相关选项中选择一个项。Radio buttons: To let users choose one item from a set of up to 5 mutually exclusive, related options.
    • 文本输入框:用于让用户输入文本。Text input box: To let users enter text. 使用与要从用户那里获取的文本类型(如电子邮件或密码)相对应的文本输入框类型。Use the type of text input box that corresponds to the type of text you're getting from the user, such as an email or password.
    • 超链接:用于将用户带到应用中的其他页面或外部网站。Hyperlinks: To take the user to another page within the app or to an external website. 当用户单击超链接时,“设置”浮出控件将会消失。When a user clicks a hyperlink, the Settings flyout will be dismissed.
    • 按钮:用于让用户立即启动操作,不会消除当前的“设置”浮出控件。Buttons: To let users initiate an immediate action without dismissing the current Settings flyout.
  • 如果禁用其中一个控件,则添加描述性消息。Add a descriptive message if one of the controls is disabled. 将此消息置于禁用的控件上。Place this message above the disabled control.

  • 在为“设置”浮出控件和标头设置动画后,将内容和控件作为单个块进行动画处理。Animate content and controls as a single block after the Settings flyout and header have animated. 使用左偏移 100px 的 enterPageEntranceThemeTransition 动画为内容创建动画。Animate content using the enterPage or EntranceThemeTransition animations with a 100px left offset.

  • 使用节标题、段落和标签来协助组织和阐述内容(如果需要)。Use section headers, paragraphs, and labels to aid organize and clarify content, if necessary.

  • 如果你需要重复设置,请使用 UI 的其他级别或展开/折叠模式,但避免两级以上深度的层次结构。If you need to repeat settings, use an additional level of UI or an expand/collapse model, but avoid hierarchies deeper than two levels. 例如,天气应用提供按城市设置(即,列出各个城市)并让用户在城市上点击以打开一个新浮出控件或展开以显示设置选项。For example, a weather app that provides per-city settings could list the cities and let the user tap on the city to either open a new flyout or expand to show the settings options.

  • 如果加载控件或 Web 内容需要花费时间,请使用不确定的进度控件以指示用户该信息正在加载。If loading controls or web content takes time, use an indeterminate progress control to indicate to users that info is loading. 有关详细信息,请参阅进度控件指南For more info, see Guidelines for progress controls.

  • 请勿使用导航按钮或提交更改按钮。Don't use buttons for navigation or to commit changes. 使用超链接导航到其他页面(而不是使用提交更改按钮)从而自动保存在用户取消“设置”浮出控件时对应用设置所做的更改。Use hyperlinks to navigate to other pages, and instead of using a button to commit changes, automatically save changes to app settings when a user dismisses the Settings flyout.