應用程式設定的指導方針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. 如果您的應用程式設定功能表最多有四個最上層群組,這些群組應該重疊顯示下一欄。If your app settings menu has up to four top-level groups, those groups should cascade down one column.

桌上型電腦的應用程式設定頁面配置

「色彩模式」設定"Color mode" settings

如果您的應用程式可讓使用者選擇應用程式的色彩模式,請使用選項按鈕下拉式方塊與「選擇 app 模式」標題呈現這些選項。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 設定] 應用程式的 [色彩] 頁面,使用者存取和修改目前的預設 app 模式。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.

  • 嘗試將總設定數維持在最多四或五個。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 論壇」。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. 考慮將網站的多個連結群組到含有單一設定的飛出視窗。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.

  • 如果載入控制項或網頁內容需要時間,請使用不確定的進度控制項,向使用者指出資訊正在載入。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.