Что размещается в диалоговых окнах
Диалоговые окна и всплывающие элементы - UWP applications
- Чтение занимает 3 мин
В этой статье
Диалоговые окна и всплывающие элементы используются для временного отображения элементов пользовательского интерфейса, если происходит нечто, требующее уведомления, подтверждения или дополнительных сведений от пользователя.Dialogs and flyouts are transient UI elements that appear when something happens that requires notification, approval, or additional information from the user.
API платформы: класс ContentDialog, класс FlyoutPlatform APIs: ContentDialog class, Flyout class
Диалоговые элементы управленияDialogs
Диалоговые окна — это модальные наложения пользовательского интерфейса, которые предоставляют контекстную информацию о приложении.Dialogs are modal UI overlays that provide contextual app information. Диалоговые окна блокируют взаимодействие с окном приложения, пока пользователь явно не закроет окно.Dialogs block interactions with the app window until being explicitly dismissed. Они часто требуют от пользователя совершения каких-либо действий.They often request some kind of action from the user.
Всплывающие элементыFlyouts
Всплывающий элемент — это облегченное всплывающее контекстно-зависимое окно, отображающее элемент пользовательского интерфейса в зависимости от действий пользователя.A flyout is a lightweight contextual popup that displays UI related to what the user is doing. Он включает логику расположения и размеров и может использоваться для отображения дополнительного элемента управления или отображения дополнительных сведений об элементе.It includes placement and sizing logic, and can be used to reveal a secondary control or show more detail about an item.
В отличие от диалогового окна, всплывающий элемент можно быстро закрыть нажатием или щелчком за его пределами, нажатием клавиши Escape или кнопки "Назад", изменением размера окна приложения или ориентации устройства.Unlike a dialog, a flyout can be quickly dismissed by tapping or clicking somewhere outside the flyout, pressing the Escape key or Back button, resizing the app window, or changing the device's orientation.
Выбор правильного элемента управленияIs this the right control?
Диалоговые окна и всплывающие элементы позволяют пользователям быть в курсе важной информации, но также мешают взаимодействию с пользователем.Dialogs and flyouts make sure that users are aware of important information, but they also disrupt the user experience. Так как диалоговые окна модальны (приводят к блокировке), они прерывают работу пользователей и мешают им выполнять дальнейшие действия, пока не произойдет взаимодействие с диалоговым окном.Because dialogs are modal (blocking), they interrupt users, preventing them from doing anything else until they interact with the dialog. Всплывающие элементы в меньшей степени мешают взаимодействию с пользователем, но отображение слишком большого числа всплывающих элементов может отвлекать.Flyouts provide a less jarring experience, but displaying too many flyouts can be distracting.
Определив, собираетесь ли вы использовать диалоговое окно или всплывающий элемент, необходимо выбрать один из этих вариантов.Once you've determined that you want to use a dialog or flyout, you need to choose which one to use.
Учитывая то, что, в отличие от всплывающих элементов, диалоговые окна блокируют взаимодействие, последние следует использовать в тех случаях, когда пользователь должен уделить все внимание определенной информации или ответить на вопрос.Given that dialogs block interactions and flyouts do not, dialogs should be reserved for situations where you want the user to drop everything to focus on a specific bit of information or answer a question. С другой стороны, всплывающие элементы можно использовать для привлечения внимания к определенной информации, которую пользователь вполне может проигнорировать.Flyouts, on the other hand, can be used when you want to call attention to something, but it's ok if the user wants to ignore it.
Используйте диалоговое окно в следующих целях.
Use a dialog for...
- Чтобы сообщить важную информацию, которую пользователь должен прочитать и осознать перед продолжением работы.Expressing important information that the user must read and acknowledge before proceeding. Пример.Examples include:
- угроза безопасности пользователя;When the user's security might be compromised
- намерение изменить ценные данные без возможности отмены действия;When the user is about to permanently alter a valuable asset
- намерение удалить ценные данные;When the user is about to delete a valuable asset
- подтверждение покупки из приложения;To confirm an in-app purchase
- Сообщения об ошибках, которые относятся к приложению в целом, например ошибка подключения.Error messages that apply to the overall app context, such as a connectivity error.
- Вопросы, если приложению нужно задать пользователю блокирующий вопрос, например, если приложение не может сделать выбор от имени пользователя.Questions, when the app needs to ask the user a blocking question, such as when the app can't choose on the user's behalf. Блокирующий вопрос нельзя проигнорировать или отложить. У пользователя должны быть понятные варианты выбора.A blocking question can't be ignored or postponed, and should offer the user well-defined choices.
Используйте всплывающий элемент в следующих целях. Use a flyout for...
- сбор дополнительных сведений для завершения действия;Collecting additional information needed before an action can be completed.
- Отображение временно актуальных сведений.Displaying info that's only relevant some of the time. например, когда пользователь щелкает эскиз изображения в приложении фотоальбома, можно использовать всплывающий элемент для отображения увеличенного варианта этого изображения;For example, in a photo gallery app, when the user clicks an image thumbnail, you might use a flyout to display a large version of the image.
- отображение дополнительной информации, например подробных сведений или более длинных описаний элемента на странице.Displaying more information, such as details or longer descriptions of an item on the page.
Как избавиться от ненужных диалоговых окон и всплывающих элементовWays to avoid using dialogs and flyouts
Учитывайте важность информации, которую требуется отобразить: важна ли она настолько, чтобы прерывать пользователя?Consider the importance of the information you want to share: is it important enough to interrupt the user? Также учтите частоту отображения информации. Если диалоговое окно или уведомление отображается каждые несколько минут, возможно, следует выделить для этой информации место в основном пользовательском интерфейсе.Also consider how frequently the information needs to be shown; if you're showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead. Возьмем, к примеру, клиент чата. Вместо того чтобы отображать всплывающий элемент каждый раз, когда друг выполняет вход, можно отображать список друзей, находящихся на данный момент в сети, и выделять друзей, выполняющих вход.For example, in a chat client, rather than showing a flyout every time a friend logs in, you might display a list of friends who are online at the moment and highlight friends as they log on.
Диалоговые окна часто используются для подтверждения действия (например, удаления файла) перед его выполнением.Dialogs are frequently used to confirm an action (such as deleting a file) before executing it. Если ожидается, что пользователь будет часто выполнять определенное действие, вы можете предоставить пользователю возможность отменить ошибочное действие, чем запрашивать его подтверждение каждый раз.If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time.
Как создать диалоговое окноHow to create a dialog
См. статью Диалоговые окна.See the Dialogs article.
Как создать всплывающий элементHow to create a flyout
См. статью Всплывающий элемент.See the Flyout article.
ПримерыExamples
Что такое диалоговое окно?
Обновлено: 10.11.2017 компанией Computer Hope
Диалоговое окно (также обозначается как , диалоговое окно , также называемое диалоговым окном ) - это обычный тип окна в графическом интерфейсе пользователя операционной системы. Он отображает информацию и запрашивает у пользователя ввод.
Например, когда вы используете программу и хотите открыть файл, вы взаимодействуете с диалоговым окном «Открыть файл». Если в Microsoft Windows щелкнуть файл правой кнопкой мыши и выбрать Properties , откроется диалоговое окно Properties .
НаконечникВы можете нажать клавишу Esc, чтобы отменить или закрыть диалоговое окно.
ЗаметкаЕсли диалоговое окно было создано приложением, оно называется дочерним окном родительского приложения.
Модальные и немодальные диалоги
Модальное диалоговое окно временно блокирует доступ к остальной части приложения до его закрытия. Пока модальное диалоговое окно открыто, оно всегда активно и предотвращает открытие любых других диалоговых окон или окон, пока оно не будет закрыто.
Немодальное диалоговое окно позволяет использовать остальную часть приложения, пока оно открыто. Его могут скрыть окна других приложений.
Документ-модальный диалог используется в современных версиях macOS X и в некоторых приложениях, таких как Opera. Вместо того чтобы появляться в собственном окне, диалог представляется как «лист», прикрепленный к окну. Пока он открыт, модальное диалоговое окно блокирует доступ пользователя к родительскому окну документа, но другие окна документов в приложении все еще могут использоваться.Примером модального диалогового окна документа является диалоговое окно «Сохранить как» в приложении TextEdit OS X, показанное ниже.
Окно "О программе", Условия использования операционной системы, Панель мест
.Windows Программирование / диалоговые окна - Викиучебники, открытые книги для открытого мира
Из Wikibooks, открытые книги для открытого мира
Перейти к навигации Перейти к поиску| Найдите окна программирования / диалога для Windows в одном из родственных проектов Викиучебника: Викиучебник не имеет страницы с таким точным названием. Другие причины, по которым это сообщение может отображаться:
|
карт - разместить диалоговое окно щелчка в Android?
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
Почему кнопки «ОК» в диалоговых окнах лучше всего работают справа
Дизайнеры часто задаются вопросом, где разместить свои кнопки «ОК» и «Отмена» в диалоговых окнах. Кнопка «ОК» - это основное действие, выполняющее задачу.
Кнопка «Отмена» - это дополнительное действие, которое возвращает пользователя к исходному экрану без завершения задачи. Исходя из их функций, как лучше всего их разместить? Должна ли кнопка «ОК» располагаться перед кнопкой «Отмена» или после?
Согласованности платформы недостаточно
Многие считают, что в качестве ответа используются следующие соглашения о платформе.Хотя это может показаться решением проблемы, на самом деле это не так. Он не дает ответа на вопрос, какое место размещения лучше подходит для пользователей и почему. Предложение следовать соглашениям о платформе ради единообразия просто недостаточно и оставляет дизайнеров с пустыми руками.
«Последовательность» - популярное слово среди дизайнеров. Это также популярный предлог, чтобы не задумываться о проблемах дизайна, с которыми сталкиваются пользователи. Какая польза от соблюдения дизайнерских соглашений, если никто не знает, почему они существуют?
Что делать, если определенные правила дизайна вредны для пользователей? Должны ли дизайнеры слепо следовать ему ради последовательности? Должны ли сохраняться плохие методы проектирования, потому что дизайнеры хотят прибегать к согласованности дизайна платформы как к ответу на каждую проблему?
Существуют определенные соглашения о конструкции платформы, которые сегодня широко используются, поскольку они работают на пользователей.Но дело в том, что согласованность дизайна платформы никогда не должна удовлетворять дизайнера как единственная причина что-то делать. Ключевым моментом является понимание причин, по которым вы должны разрабатывать пользовательский интерфейс одним способом, а не другим.
Размещение кнопок имеет значение
Кто-то может возразить, что сделать ваши кнопки действий заметными, придав им больший визуальный вес и четкую и четкую метку, более важно, чем их размещение. Несмотря на то, что визуальный вес и метки кнопок действий являются важным аспектом дизайна, который следует учитывать, это не единственный аспект.
Сосредоточиться только на одном аспекте дизайна, а не на других, - это действие небрежного дизайнера. Дотошный дизайнер подумал бы о том, как каждый аспект дизайна влияет на пользователя. Дизайнерам сложнее всего понять, как расположены первичные и вторичные действия. Вот почему дискуссия о кнопках «ОК» / «Отмена» так популярна среди дизайнеров.
Почему кнопки «ОК» лучше всего работают справа
Когда вы откажетесь от аргументов в пользу соглашений о платформе, вы зададитесь вопросом, какое размещение работает лучше всего.Вы можете решить эту проблему, проанализировав, как дизайн влияет на пользователей.
Меньше визуальных фиксаций
Необходимо проверить, верны ли общие предположения дизайнеров. Некоторые дизайнеры считают, что для пользователей лучше разместить основное действие слева перед второстепенным, потому что оно ближе и, следовательно, для щелчка требуется меньше времени.
В этом есть смысл, но нельзя игнорировать тот факт, что пользователи будут просматривать все свои варианты, прежде чем выбирать, какое действие предпринять.Это означает, что большинство пользователей не будут слепо нажимать кнопку основного действия, не глядя на кнопку дополнительного действия рядом с ней.
Сначала они увидят основное действие слева, а затем - второстепенное действие справа. Затем они вернутся к основному действию, чтобы щелкнуть по нему. Это создает в общей сложности три визуальных фиксации в разных направлениях.
С кнопкой «ОК» слева визуальные фиксации больше и текут в нескольких направлениях
С кнопкой «ОК» справа визуальные фиксации меньше и текут в одном направлении
Сравните это с основным действием, расположенным справа от диалогового окна, и второстепенным действием, расположенным слева.Пользователи начинают с того, что смотрят на второстепенное действие, и переводят взгляд на основное действие, чтобы нажать кнопку. Это создает в общей сложности две визуальные фиксации в одном направлении, обеспечивая пользователям более быстрый визуальный поток.
Пользователи фиксируют каждую кнопку только один раз и заканчивают на кнопке основного действия. Если вы оставите основное действие слева, это может облегчить пользователям доступ к нему, но если посмотреть на скорость с точки зрения мыслительных процессов и визуальных фиксаций пользователя, размещение основного действия в правой части диалогового окна на самом деле происходит быстрее.
Соответствует ожидаемым функциям кнопок
Когда пользователи нажимают кнопки дополнительных действий, они ожидают, что приложение ничего не сделает, и вернут их на исходный экран. Таким образом, кнопки «Отмена» действуют как кнопки «Назад».
Когда пользователи нажимают кнопки основных действий, они ожидают, что приложение выполнит действие, указанное в кнопке, и переведет их на следующий экран. Таким образом, кнопки «ОК» работают как кнопки «Далее». Размещение кнопки дополнительного действия слева и кнопки основного действия справа соответствует функциям кнопок «Назад» и «Далее», которые пользователь может ожидать.
Это похоже на расположение кнопок нумерации страниц. Кнопка, которая переводит пользователей на следующую страницу, находится справа, а кнопка, которая возвращает пользователей на их предыдущую страницу, находится слева. Такое расположение кнопок работает, потому что оно соответствует направлению чтения и навигации пользователя слева направо, где вправо - это направление прогресса, а влево - направление регресса.
«ОК» продвигает пользователей к следующему экрану, а «Отмена» возвращает пользователей к их исходному экрану
Кнопки «ОК» и «Отмена» в диалоговых окнах должны следовать аналогичному шаблону взаимодействия, потому что они функционируют как кнопки разбивки на страницы .Не только это, но и левая и правая диаграмма направленности - это то, к чему привыкли пользователи в западном мире. Если вы разместите основное действие справа, а дополнительное - слева, это упростит работу с кнопками диалогового окна и сделает их более понятными для пользователей.
Обеспечивает пользователям более эффективный поток задач
Кнопку, расположенную в правом нижнем углу диалогового окна, пользователям легче нажимать, потому что она соответствует диаграмме Гутенберга. На диаграмме Гутенберга нижняя правая область - это область терминала.Это область, в которой глаза пользователя заканчивают сканирование.
Размещение кнопки в области терминала позволяет пользователям увидеть основное действие, которое им нужно выполнить последним. Это улучшает не только визуальный поток, но и поток задач. При сканировании пользователи не пропустят кнопку основного действия. Их глаза будут попадать прямо на него, когда они закончат, так что они могут щелкнуть по нему сразу.
Сканирование диалогового окна и выполнение действий выполняется быстро и легко, поскольку глаза пользователя останавливаются на кнопке основного действия.
Пуговицы в углах или держать их вместе?
Еще один вопрос, который часто задают дизайнеры, заключается в том, должны ли они размещать кнопки по углам или держать их вместе. Когда вы помещаете свои основные и второстепенные действия в углы диалогового окна, оно хорошо сопоставляется с левым и правым направлениями навигации. Однако, поскольку кнопки «ОК» и «Отмена» не являются кнопками навигации, следовать направленному сопоставлению не нужно. Иногда это может принести больше вреда, чем пользы.
Большое визуальное разделение между кнопками затрудняет сравнение действий и изолирует одно действие от другого
Если приложение собирается выполнить важное действие, которое пользователь не может отменить, важно, чтобы пользователи видели 'Отмена 'вместе с кнопкой' ОК '.В этом случае кнопка «Отмена» может работать как кнопка «Назад», но это более важно, потому что она действует как кнопка безопасности, предотвращающая любые изменения.
Опасность размещения кнопки «Отмена» в дальнем левом углу заключается в том, что пользователи могут не заметить ее из-за большого визуального разделения между двумя кнопками. Объединение кнопки «Отмена» вместе с кнопкой «ОК» упрощает пользователям просмотр и сравнение двух действий одним взглядом, чтобы выбрать лучшее.
Заключение
Дизайнеры часто используют диалоговые окна, когда пользователям нужно прочитать важное сообщение или какое-то важное действие, которое им нужно предпринять.Порядок размещения кнопок может повлиять на то, какое действие выберет пользователь. Когда вы размещаете свои кнопки в порядке, понятном и эффективном для пользователей, вы не позволяете им выбрать неправильное действие и совершить ошибку.
Расположение кнопок важно, но не забывайте также обращать внимание на визуальный вес и метки ваших кнопок. Все эти аспекты дизайна вступают в игру, когда пользователи просматривают диалоговые окна. Теперь, когда вы понимаете, почему кнопки «ОК» работают лучше всего справа, у вас будет лучший аргумент для ссылки, чем аргумент согласованности платформы.
