Основы проектирования команд в приложениях для WindowsCommand design basics for Windows apps

В приложении Windows командные элементы  — это интерактивные элементы пользовательского интерфейса, которые позволяют пользователям выполнять действия, например отправлять электронное сообщение, удалять элемент или отправлять форму.In a Windows app, command elements are interactive UI elements that let users perform actions such as sending an email, deleting an item, or submitting a form. Командные интерфейсы состоят из общих командных элементов, поверхностей для команд, в которых они размещаются, взаимодействий, которые они поддерживают, и возможностей, которые они предоставляют.Command interfaces are composed of common command elements, the command surfaces that host them, the interactions they support, and the experiences they provide.

Обеспечение лучшего командного взаимодействияProvide the best command experience

Самым важным аспектом командного интерфейса являются действия, которые можно выполнять пользователю.The most important aspect of a command interface is what you're trying to let a user accomplish. Планируя функциональность приложения, учитывайте действия, необходимые для выполнения этих задач, и взаимодействие с пользователем, которое вы хотите включить.As you plan the functionality of your app, consider the steps required to accomplish those tasks and the user experiences you want to enable. Завершив первоначальный черновик этого взаимодействия, вы можете принять решение об инструментах и взаимодействиях для их реализации.Once you've completed an initial draft of these experiences, then you can make decisions on the tools and interactions to implement them.

Вот некоторые общие варианты командного взаимодействия:Here are some common command experiences:

  • отправка или передача информации;Sending or submiting information
  • выбор параметров и пунктов;Selecting settings and choices
  • поиск и фильтрация содержимого;Searching and filtering content
  • открытие, сохранение и удаление файлов;Opening, saving, and deleting files
  • изменение или создание содержимого.Editing or creating content

Проявите изобретательность при разработке командного взаимодействия.Be creative with the design of your command experiences. Выберите устройства ввода, которые поддерживает ваше приложение, и реакцию приложения на каждое устройство.Choose which input devices your app supports, and how your app responds to each device. Реализовав поддержку максимально широкого диапазона возможностей и параметров, вы делаете свое приложение максимально удобным, мобильным и доступным (дополнительные сведения см. в статье Использование команд в приложениях Windows с помощью классов StandardUICommand, XamlUICommand и ICommand).By supporting the broadest range of capabilities and preferences you make your app as usable, portable, and accessible as possible (see Commanding design for Windows apps for more detail).

Выбор правильных командных элементовChoose the right command elements

Использование подходящих элементов в командном интерфейсе позволяет сделать приложение интуитивно понятным. В противном случае оно будет сложным или запутанным.Using the right elements in a command interface can make the difference between an intuitive, easy-to-use app and a difficult, confusing app. В приложении Windows доступен полный набор командных элементов.A comprehensive set of command elements are available in the Windows app. Ниже приведен список некоторых самых распространенных командных элементов UWP.Here's a list of some of the most common UWP command elements.

Изображение кнопки

КнопкиButtons

Кнопки активируют немедленное действие,Buttons trigger an immediate action. например отправку электронного сообщения, подтверждение действия в диалоговом окне или отправку данных формы.Examples include sending an email, submitting form data, or confirming an action in a dialog.

Изображение списка

СпискиLists

Списки представляют элементы в интерактивном перечне или сетке.Lists present items in a interactive list or a grid. Обычно они используются для отображения большого числа параметров или элементов,Usually used for many options or display items. включая раскрывающийся список, поле со списком, представление списка и представление сетки.Examples include drop-down list, list box, list view and grid view.

Изображение элемента управления выделением

Элементы управления выделениемSelection controls

Представляют разные варианты на выбор, например при прохождении опроса или настройке параметров приложения,Lets users choose from a few options, such as when completing a survey or configuring app settings. включая флажок, переключатель и выключатель.Examples include check box, radio button, and toggle switch.

Изображение календаря

Календарь, а также средства выбора даты и времениCalendar, date and time pickers

Календарь и средства выбора даты и времени представляют возможности для просмотра и изменения сведений о дате и времени (например, при создании события или установке будильника),Calendar, date and time pickers enable users to view and modify date and time info, such as when creating an event or setting an alarm. включая средство выбора даты календаря, представление календаря, средства выбора даты и времени.Examples include calendar date picker, calendar view, date picker, time picker.

Изображение средства прогнозируемого ввода текста

Средство прогнозируемого ввода текстаPredictive text entry

Отображает предложения по мере ввода пользователем данных или при выполнении запросов,Provides suggestions as users type, such as when entering data or performing queries. в том числе с использованием поля автозаполнения.Examples include auto-suggest box.

Полный список см. в разделе Элементы управления и пользовательского интерфейсаFor a complete list, see Controls and UI elements

Размещение команд на нужной поверхностиPlace commands on the right surface

Командные элементы можно размещать на ряде поверхностей приложения, в том числе на холсте приложения или в специальных командных контейнерах, таких как панели команд, всплывающее меню панели команд, строка меню и диалоговое окно.You can place command elements on a number of surfaces in your app, including the app canvas or special command containers, such as a command bar, command bar flyout, menu bar, or dialog.

Всегда старайтесь позволить пользователям управлять содержимым напрямую, а не с помощью команд, воздействующих на содержимое. Например, разрешите пользователям изменять расположение списков путем перетаскивания и удаления элементов списка, а не с помощью кнопок "вверх" и "вниз".Always try to let users manipulate content directly rather than through commands that act on the content, such as dragging and dropping to rearrange list items rather than up and down command buttons.

Однако это может оказаться невозможным при использовании определенных устройств ввода или при учете определенных пользовательских возможностей и настроек.However, this might not be possible with certain input devices, or when accommodating specific user abilities and preferences. В этих случаях предоставьте как можно больше возможностей для командных элементов и поместите эти элементы на командную поверхность в своем приложении.In these cases, provide as many commanding affordances as possible, and place these command elements on a command surface in your app.

Ниже приведен список некоторых самых распространенных поверхностей для команд.Here's a list of some of the most common command surfaces.

Изображение холста приложения

Холст приложения (область содержимого)App canvas (content area)

Если команда постоянно требуется пользователю для выполнения основных сценариев, ее можно поместить на холст.If a command is constantly needed for users to complete core scenarios, put it on the canvas. Так как вы можете разместить команды возле объектов, на которые они влияют (или на них), если разместить команды на холсте, их будет просто понять и использовать.Because you can put commands near (or on) the objects they affect, putting commands on the canvas makes them easy and obvious to use. Но выбирайте команды, которые помещаете на холст, тщательно.However, choose the commands you put on the canvas carefully. Большое количество команд занимает слишком много места на экране и может затруднять восприятие интерфейса пользователем.Too many commands on the app canvas take up valuable screen space and can overwhelm the user. Если команда будет использоваться нечасто, ее можно поместить на другую поверхность для команд.If the command won't be frequently used, consider putting it in another command surface.

Изображение панели команд

Панели команд и строки менюCommand bars and menu bars

Панели команд помогают упорядочить команды и упрощают доступ к ним.Command bars help organize commands and make them easy to access. Панели команд можно разместить в верхней части экрана, в нижней части экрана, или как в верхней, так и в нижней частях. Если для функций, существующих в приложении, панель команд не подходит, можно использовать панель меню.Command bars can be placed at the top of the screen, at the bottom of the screen, or at both the top and bottom of the screen (a MenuBar can also be used when the functionality in your app is too complex for a command bar).

Изображение контекстного меню

Меню и контекстные менюMenus and context menus

Меню и контекстные меню экономят место, упорядочивая команды и скрывая их до востребования.Menus and context menus save space by organizing commands and hiding them until the user needs them. Пользователи обычно обращаются к меню или контекстному меню, нажимая кнопку или щелкая элемент управления правой кнопкой мыши.Users typically access a menu or context menu by clicking a button or right-clicking a control.

Всплывающее меню панели команд — это разновидность контекстного меню, которое сочетает в себе преимущества панели команд и контекстного меню с одним элементом управления.The command bar flyout is a type of contextual menu that combines the benefits of a command bar and a context menu into a single control. Оно может содержать ярлыки на часто используемые действия и предоставлять доступ ко второстепенным командам, которые актуальны только в определенном контексте, например командам буфера обмена или пользовательским командам.It can provide shortcuts to commonly-used actions and provide access to secondary commands that are only relevant in certain contexts, such as clipboard or custom commands.

UWP также предоставляет набор традиционных меню и контекстных меню (см. общие сведения о меню и контекстных меню).UWP also provides a set of traditional menus and context menus; for more info, see the menus and context menus overview.

Предоставление отзывов для командыProvide command feedback

Отзывы для команд используются для взаимодействия с пользователями, сообщая об обнаруженном взаимодействии или команде, или о том, как команда была интерпретирована и обработана и была ли команда выполнена успешно или нет.Command feedback communicates to users that an interaction or command was detected, how the command was interpreted and handled, and whether the command was successful or not. Это помогает пользователям понять, что они делают в настоящий момент и что они могут сделать потом.This helps users understand what they've done, and what they can do next. В идеальном случае раздел отзывов должен быть интегрирован естественным образом в пользовательский интерфейс, чтобы пользователям не приходилось прерывать работу с приложением или выполнять дополнительные действия, только если это совершенно необходимо.Ideally, feedback should be integrated naturally in your UI, so users don't have to be interrupted, or take additional action unless absolutely necessary.

Примечание

Предоставляйте отзывы только в случае необходимости и только если они больше нигде не доступны.Provide feedback only when necessary and only if it's not available elsewhere. Не засоряйте пользовательский интерфейс приложения, если только вы не добавляете значимые элементы.Keep your application UI clean and uncluttered unless you are adding value.

Ниже перечислены некоторые способы предоставления отзывов в приложении.Here are some ways to provide feedback in your app.

Изображение области содержимого панели команд

Панель командCommand bar

Область содержимого панели команд — это интуитивно понятная область, которая позволяет обмениваться с пользователями данными о состоянии, если им нужна обратная связь.The content area of the command bar is an intuitive place to communicate status to users if they'd like to see feedback.

Изображение всплывающего элемента

Всплывающие элементыFlyouts

Всплывающие элементы — это облегченные всплывающие контекстно-зависимые окна, которые можно закрыть, если щелкнуть участок экрана за его пределами.Flyouts are lightweight contextual popups that can be dismissed by tapping or clicking somewhere outside the flyout.

Изображение диалогового окна

Диалоговое окноDialog controls

Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении.Dialog controls are modal UI overlays that provide contextual app information. В большинстве случаев диалоговые окна блокируют взаимодействие с окном приложения, пока не будут закрыты явным образом, и зачастую требуют от пользователя выполнить некое действие.In most cases, dialogs block interactions with the app window until being explicitly dismissed, and often request some kind of action from the user. Диалоговые окна могут отвлекать и должны использоваться только в определенных ситуациях.Dialogs can be disruptive and should only be used in certain situations. Подробнее см. в разделе Когда подтверждать или отменять действия.For more info, see the When to confirm or undo actions section.

Совет

Обратите внимание, сколько диалоговых окон подтверждения использует ваше приложение; они могут оказаться очень полезными, если пользователь совершил ошибку, но они также выступают помехой, когда пользователь пытается выполнить действие намеренно.Be careful of how much your app uses confirmation dialogs; they can be very helpful when the user makes a mistake, but they are a hindrance whenever the user is trying to perform an action intentionally.

Когда подтверждать или отменять действияWhen to confirm or undo actions

Независимо от того, насколько хорошо разработан пользовательский интерфейс приложения, все пользователи выполняют действия, которые они не хотели бы выполнять.No matter how well-designed your application's UI is, all users perform an action they wish they hadn't. Ваше приложение может помочь в этой ситуации, требуя подтверждения действия или предоставляя возможность отменить последние действия.Your app can help in these situations by requiring confirmation of an action, or by providing a way to undo recent actions.

Изображение "Рекомендация""

Для имеющих серьезные последствия действий, которые нельзя отменить, рекомендуется использовать диалоговое окно подтверждения.For actions that can't be undone and have major consequences, we recommend using a confirmation dialog. Примеры таких действий:Examples of such actions include:

  • перезапись файла;Overwriting a file
  • закрытие файла без сохранения;Not saving a file before closing
  • подтверждение окончательного удаления файла или данных;Confirming permanent deletion of a file or data
  • покупка (если пользователь не отказался от обязательного подтверждения);Making a purchase (unless the user opts out of requiring a confirmation)
  • отправка формы, например регистрация.Submitting a form, such as signing up for something

Изображение "Рекомендация""

Для действий, которые можно отменить, обычно достаточно простой команды "Отменить".For actions that can be undone, offering a simple undo command is usually enough. Примеры таких действий:Examples of such actions include:

  • удаление файла;Deleting a file
  • удаление электронного письма (не окончательное);Deleting an email (not permanently)
  • изменение содержимого или редактирование текста;Modifying content or editing text переименование файла.- Renaming a file

Оптимизация для определенных типов вводаOptimize for specific input types

Подробнее об оптимизации взаимодействия с пользователем на основе определенного типа ввода или устройства см. в разделе Азбука взаимодействия.See the Interaction primer for more detail on optimizing user experiences around a specific input type or device.