Руководство по параметрам приложений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. Переключатель «toggle switch», как правило, является лучшим элементом управления для двоичного параметра.A toggle switch is usually the best control for a binary setting.
  • Для параметров, которые позволяют пользователям выбрать один из нескольких (до пяти) взаимоисключающих связанных параметров, используйте переключатели.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
  • Стандартная WindowsWindows 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."

  • Если параметр ведет не к всплывающему элементу, а непосредственно на веб-сайт, сообщите об этом пользователю при помощи визуальной подсказки, оформленной в стиле гиперссылки. Примеры: «Справка (в Интернете)» или «Интернет-форумы».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. Используйте для содержимого анимацию enterPage или EntranceThemeTransition со смещением влево на 100 пикселей.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.

  • Если необходимо повторить настройки, используйте дополнительный уровень пользовательского интерфейса или модель развертывания и свертывания, но избегайте иерархий глубже двух уровней.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.