Модальное окно что это
Перейти к содержимому

Модальное окно что это

  • автор:

Свойство «Модальное окно (Modal)»

Свойство Modal (Модальная) указывает, открывается ли форма или отчет как модальный окно. Когда форма или отчет открываются в виде модального окна, необходимо закрыть его, прежде чем перемещать фокус к другому объекту. Свойство имеет значение типа Boolean, доступное для чтения или записи.

выражение.Modal

выражение — обязательный аргумент. Выражение, которое возвращает один из объектов в списке «Применяется к».

Замечания

Свойство Modal может принимать следующие значения:

Visual Basic

Форма или отчет открывается как модальное окно.

(Значение по умолчанию.) Форма открывается как немодальное окно.

Это свойство можно задать с помощью страницы свойств формы или отчета, макроса или кода Visual Basic для приложений (VBA).

При открытии модального окна другие окна в Microsoft Office Access 2007 будут недоступны, пока не будет закрыта форма (однако можно переключиться на окна других приложений). Чтобы также отключить доступ к меню и к панелям инструментов, задайте значение «Да» для свойств Modal (Модальное окно) и PopUp (Всплывающее окно).

Свойство BorderStyle (Тип границы) используется для указания типа границы формы. Обычно для свойства BorderStyle модальных форм задается значение Dialog (Диалог).

С помощью свойств Modal (Модальное окно), PopUp (Всплывающее окно) и BorderStyle (Тип границы) можно создать настраиваемое диалоговое окно. Задайте для свойств Modal и PopUp значение Yes (Да), а для свойства BorderStyle — значение Dialog (Диалог).

Форма становится модальной, только если свойство Modal имеет значение «Да» и выполняются следующие условия:

  • Форма открывается в режиме формы в области навигации.
  • Форма открывается в режиме формы с помощью макроса или кода VBA.
  • Выполняется переключение из конструктора в режим формы.

В модальной форме нельзя переключаться из режима формы в Режим таблицы, однако можно сначала переключиться в режим конструктора, а затем — в режим таблицы.

Форма не является модальной в режиме конструктора или режиме таблицы, а также при переключении из режима таблицы в режим формы.

Примечание: Чтобы открыть форму, в которой свойства Modal (Модальное окно) и PopUp (Всплывающее окно) имеют значения «Да», можно воспользоваться значением «Диалог» аргумента «Режим окна» в макрокоманде ОткрытьФорму.

Пример

Для получения значения свойства Modal формы Order Entry можно использовать следующий синтаксис:

Dim b As Booleanb = Forms(«Order Entry»).Modal

Для задания значения свойства Modal применяется следующий синтаксис:

Forms(«Order Entry»).Modal = True

Модальное окно что это

Модальность — это метод проектирования, который представляет контент временно в режиме, отделенном от предыдущего контекста пользователя и требует явного действия для выхода. Представление контента с помощью модальности поможет:

  • Сосредоточиться на самостоятельной задаче или наборе тесно связанных вариантов

Предупреждение
Модальное окно

В iOS существуют предупреждения, представления активности (или общие списки) и списки действий, которые вы используете в приложении при определенных ситуациях. Чтобы отобразить модальное содержимое в вашем приложении, iOS 13 и более поздние версии поддерживают следующие стили представления.

Лист

Стиль отображения в виде листов выглядит как карточка, которая частично покрывает основное содержание и затемняет все незакрытые области, чтобы предотвратить взаимодействие с ними. Верхний край родительского вида или предыдущая карточка видна позади текущей карточки для того, чтобы напомнить людям о приостановленной задаче во время ее открытия. Пользователи отклоняют карточку:

  • Проведя вниз от верхней части экрана
  • Проведя пальцем вниз из любого места на экране, когда содержимое карточки прокручивается вверх
  • Нажимая на кнопку

Полный экран

Полноэкранный стиль представления охватывает весь экран. Предыдущий вид покрывается полностью, сводя к минимуму визуальное отвлечение. Пользователи выходят из полноэкранного модального представления, нажимая кнопку.

Используйте полноэкранное модальное представление для такого погружающего контента, как видео, фотографии, изображения с камеры, или для сложной задачи, выигрывающей на фоне полноэкранного представления. Например, разметка документа или редактирование фотографии.

Если вы используете текущий контекстный стиль модального представления для отображения модального содержимого в разделенной области просмотра, всплывающем окне или другом представлении, которое не является полноэкранным, вам следует переключиться на использование листа при представлении модального содержимого в компактной среде.

Используйте модальность, только когда это имеет смысл. Создавайте модальные окна только тогда, когда важно сосредоточить внимание людей на выборе или выполнении задачи, отличной от их текущей. Модальный опыт выводит пользователей из их текущего контекста и требует действий для отстранения, поэтому важно использовать его только тогда, когда он приносит явную выгоду.

Зарезервируйте оповещения для предоставления важной и призывающей к действию информации. Как правило, возникает предупреждение из-за возникшей проблемы. Поскольку оповещение прерывает процесс и требует нажатия для его отклонения, важно, чтобы люди чувствовали, что такое вторжение оправдано.

Сделайте модальные задачи простыми, короткими и сфокусированными. Избегайте создания приложения внутри другого. Если модальная задача слишком сложна, люди могут потерять из виду задачу, которую они приостановили, когда вошли в модальный контекст. Будьте особенно осторожны при создании модальных задач, включающих иерархию представлений, потому что люди могут потеряться и забыть, каким образом вернуться к началу. Если модальная задача должна содержать подпредставления, укажите единый путь по иерархии и четкое направление к завершению. Старайтесь не использовать кнопку «Готово» (кроме случаев выполнения задачи).

Всегда добавляйте кнопку, которая закрывает модальное представление. Например, вы можете использовать Готово или Отмена. Включение кнопки гарантирует, что модальное представление будет доступно для вспомогательных технологий и обеспечит альтернативу жестам отклонения.

При необходимости помогите людям избежать потери данных, получив подтверждение перед закрытием модального представления. Независимо от того, используют ли люди жест отклонения или кнопку для закрытия представления: если действие может привести к потере пользовательского контента, представьте лист действий, который объяснит ситуацию и предоставит пользователям способы ее разрешения.

Не показывайте карточки, которые появляются сверху всплывающего экрана. Несмотря на то, что вы можете отобразить карту во всплывающем экране, поверх окна появляться ничего не должно (кроме, возможно, предупреждения). В редких случаях, когда вам нужно показать новый экран после того, как люди предпримут какие-либо действия во всплывающем окне, закройте окно перед показом нового экрана.

Показывайте заголовок, который четко определяет модальную задачу. Когда пользователи входят в модальное задание, то отходят от своего предыдущего контекста, поэтому было бы неплохо прояснить новый контекст. Вы можете показать текст, который более полно описывает задачу, в других частях представления.

Скоординируйте внешний вид модального вида с вашим приложением. Например, если модальное представление содержит панель навигации, оно должно иметь такой же внешний вид, что и панель навигации в вашем приложении.

Выберите модальный стиль перехода, подходящий для вашего приложения. Используйте стиль перехода, который координируется с вашим приложением и повышает осведомленность о текущем изменении контекста. Переход по умолчанию сдвигает модальное представление вверх от нижней части экрана и обратно. Используйте согласованные модальные стили перехода во всем приложении.

Модальное окно Modal

Модальное окно — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.

Раньше в Контуре этот компонент назывался Лайтбоксом, но мы переименовали его, чтобы не было разночтений. В профессиональном сообществе «модальное окно» более распространенный и устоявшийся термин.

Когда использовать

Используйте модальное окно для второстепенного содержимого страниц, которое требуется только в некоторых случаях, или для того, чтобы сосредоточить внимание пользователя на совершаемом действии. Как правило, это настройки, создание новых документов, заполнение небольших форм, пошаговый мастер. Например, для ввода адреса — при клике по ссылке открывается модальное окно.

Не используйте модальное окно для больших форм. Большие формы — это формы которые не помещаются в два экрана монитора. Если важно оставить контекст страницы для такой формы, возможно вам подойдет сайдпейдж.

Описание работы

Модальное окно появляется поверх страницы, затемняя ее. Это помогает сфокусировать внимание пользователя на конкретных действиях, не теряя при этом общий контекст.

Модальное окно может состоять из:

  • «Шапки» — заголовка и крестика,
  • контент-зоны,
  • «подвала» — или «терминальной зоны» с кнопками основных действий.

Ни один из этих пунктов, кроме крестика, не является обязательным.

Заголовок

Если модальное окно предназначено для выполнения одной конкретной задачи, она должна быть отражена в заголовке. Заголовок должен быть кратким (1-3 слова) и являться названием процесса или объекта.

Если модальное окно носит информационный характер, заголовок должен емко передавать суть сообщения:

В модальных окнах с подтверждением заголовком является вопрос:

Действия

Чаще всего в модальном окне есть минимум два терминальных (закрывающих окно) действия:

  1. Черная кнопка — действие по умолчанию, сохраняет проделанную работу или подтверждает вызванную ранее команду. Такую кнопку нельзя называть «ОК».
  2. Кнопка отмены — закрывает модальное окно не выполняя основное действие, называется «Отменить», не должна называться «Отмена».

Кнопки и ссылки расположены слева направо на специальной плашке отделенной чертой. Чем правее кнопка — тем менее важное и менее частотное действие. Черта отделяет кнопки, делает их более заметными и помогает ориентироваться в интерфейсе. Используйте эти приемы и в обычных формах.

Закрытие модального окна

В правом верхнем углу модального окна всегда должна быть кнопка закрытия в виде крестика. Действие кнопки аналогично действию ссылки «Отменить». Также модальное окно должно закрываться по нажатию клавиши Esc на клавиатуре.

Модальные окна, содержащие формы или другие контролы, позволяющие внести изменения, не должны закрываться при клике за пределами окна, особенно если случайный клик может привести к потере введеных данных.

Модальные окна, несущие чисто информационную функцию, могут закрываться при клике за пределами окна.

Если было изменение данных, всегда уточняйте у пользователя перед закрытием модального окна — сохранить данные или уйти без сохранения. Больше советов по работе с данными форм в гайде сохранение данных.

Не делайте модальные окна исчезающие по таймауту, есть вероятность, что пользователь не увидит их, или не успеет разобрать, что было написано в этом окне.

Размер и расположение

По горизонтали модальное окно позиционируется по центру. По вертикали — по центру и на 10% смещенным к верхней части окна браузера.

Если размер модального окна по вертикали приближается к размеру окна браузера, чтобы модальное окно не прилипало к верхней границе, оно позиционируется с отступом 40 px от верхнего края.

Размер модального окна должен соответствовать его содержимому — внутри окна не должно быть пустых областей.

В то же время, если контент требует большого экранного пространства — модальное окно должно иметь максимально возможный размер.

Например, если внутри длинный список — модальное окно должно открываться на максимально возможную высоту, а скролл работать как описано ниже. Если интерактивная карта — максимальную высоту и ширину.

В случае, если высота модального окна при работе с ним может сильно меняться, такое окно лучше располагать с фиксированным отступом от верхней границы экрана, чтобы, например, при переключении между вкладками, окно не меняло свое положение.

Прокрутка

Избегайте ситуаций, когда контента внутри модального окна становится больше высоты экрана минимально поддерживаемого разрешения. Подумайте над тем, чтобы вместо модального окна сделать отдельную страницу или сайдпейдж.

Если высота контента внутри модального окна больше высоты окна браузера, окно открывается на всю высоту окна браузера и позиционируется с отступом 40 px от верхнего края страницы. Полоса прокрутки должна появляться у всей страницы, а не внутри модального окна. Контент страницы под затемнением не должен скроллиться.

Во время прокрутки модальное окно занимает всю высоту окна без отступов, а после прокрутки до нижнего края — позиционируется с отступом 40 px от нижнего края страницы.

Залипающие панели

Если важно чтобы в любом положении прокрутки были доступны элементы управления модальным окном в футере, или был виден заголовок, заголовок и футер могут залипать. При этом окно так же открывается с отступом от верхнего края окна браузера, и прокручивается до появления отступа снизу.

Выбор режима в котором работает модальное окно — с залипаниями или в обычном, и то, какие части должны залипать остается на усмотрение дизайнера.

Следите за тем, чтобы контент страницы или модального окна не скакали при открытии и закрытии окна, или открытии новых модальных окон. Такое случается при появлении или исчезновении полосы прокрутки — с полосой прокрутки страница становится у́же.

Наложение модальных окон

Если нужно вызвать из модального окна еще одно модальное окно, при открытии нового окна затемнение не должно множиться. Затемнение должно быть одно, все открытые ранее модальные окна должны быть помещены под него.

Это исключительный случай, старайтесь избегать вложенности модальных окон.

Мини-модалка

Используется для диалоговых окон, в которых мало контента и нет дополнительных контролов.

Мини-модалка может содержать одну или две кнопки в одну строку, две кнопки в две строки, либо три кнопки в три строки. В последнем случае допускается отделять третью кнопку отступом, если ее смысл сильно отличается от остальных.

У мини-модалки всегда должна быть иконка. Если подобрать иконку по смыслу не получается, используйте дефолтную.

В некоторых случаях полезно красить иконку.

Фокус и работа с клавиатурой

Если модальное окно содержит поля ввода, при открытии окна на десктопе ставьте фокус в первое поле автоматически. На мобильных устройствах, где фокус открывает виртуальную клавиатуру такое поведение лучше отключать.

Если это поле заполнено, и с большой вероятностью будет изменено, можно выделить значение, чтобы при вводе первого символа старое значение было стерто.

При открытом модальном окне нажатие Tab не переводит фокус на элементы страницы, фокус переходит только по элементам модального окна включая крестик.

Клавиша Esc закрывает модальное окно.

Дизайн, размеры и отступы

Модальное окно с терминальной плашкой:

Дополнительные кнопки и ссылки в терминальной плашке:

Модальное окно без терминальной плашки:

Нельзя использовать модальное окно с кнопками основных действий не отделенные чертой (без терминальной плашки), если в нем присутствуют поля не выровненные по левому краю, или текст выровненный по центру:

Модальное окно без заголовка:

Если модальное окно не содержит контента, не следует использовать терминальную плашку:

Информационное модальное окно — окно без кнопок:

Модальное окно что это

Модальное или немодальное окно: как выбрать?

В статье разбираемся что такое модальное и немодальное окно и в каких случаях их лучше всего использовать.

5 янв. 2021

Что такое модальное окно


Модальное окно — это окно, которое блокирует работу пользователя, но оставляет главный экран видимым вместе с модальным окном. Пользователи должны взаимодействовать с модальным окном, прежде чем смогут вернуться в родительское приложение.

Преимущество модальных окон в том, что в пользовательском интерфейсе они обеспечивают быстрое, целенаправленное и контекстное взаимодействие. Когда используется модальное окно, загрузка новой страницы не требуется. Такие окна снижают нагрузку с веб-сайта и оптимизируют его работу.

Язык модальных окон


Чтобы вам легко было воспринимать дальнейшую теорию, давайте сразу рассмотрим основные определения:

  • Диалог — в пользовательском интерфейсе — это «разговор» между системой и пользователем.
  • Модальность — особое состояние системы, когда одна и та же система имеет разные интерфейсы. Каждая модальность может сопровождаться различными действиями, или одно и то же действие может приводить к различным результатам в зависимости от модальности системы.
  • Оверлей — окно, которое отображается поверх страницы. Обычно окно оверлея значительно меньше страницы под ним.
  • Скрим/лайтбокс — временный эффект, применяемый к страницам: их содержимое становится менее заметно/более затемнено; собственно, отсюда и название «лайтбокс» (световой куб) — оно описывает визуальный эффект, фокусирующий внимание пользователя на содержимом оверлея.

Типы модальных окон


Nielsen Norman Group создали удобную схему, на которой показаны основные отличия между типами модельных окон:

Большинство модальных окон легко идентифицируются, поскольку визуально перекрывают главное экран: то же самое со всплывающими окнами, которые исчезают из основного окна в фоновом режиме, всплывающих меню и всплывающих диалоговых окон, лайтбоксов, оповещений…

Многие модальные экраны на мобильных устройствах занимают весь экран, поскольку пространство экрана ограничено. В итоге их сложнее отличить от немодальных окон, так как теперь они закрывают основное окно.

Что такое немодальное окно


Основное различие заключается в способе взаимодействия с каждым из окон. Пользователь может продолжить взаимодействие с основным контентом (и, возможно, даже переместить окно, свернуть его и т.д.), Пока диалог открыт. Немодальные экраны позволяют пользователям переходить назад и вперед на основном уровне навигации приложения.

Когда следует использовать модальность

Модальные экраны следует использовать, когда нужно привлечь полное внимание пользователя к определенному блоку информации. Модальное окно требует, чтобы люди сосредоточились на одной задаче, прежде чем продолжить работу в основном потоке приложения.

«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple

Google советует использовать модальные экраны(диалоговые окна) для…

«Критически важной информации, которая требует конкретной пользовательской задачи, решения или подтверждения» Google

  1. Используйте модальные диалоговые окна для важных предупреждений, чтобы предотвратить или исправить критические ошибки.
  2. Используйте модальные диалоговые окна, чтобы запросить у пользователя ввод информации, критически важной для продолжения текущего процесса. Когда отсутствие информации не позволяет системе продолжить процесс, инициированный пользователем, модальный диалог может запросить у пользователя эту информацию.
  3. Модальные диалоги могут использоваться для разбиения сложной информации на более простые и удобоваримые фрагменты.
  4. Используйте модальные диалоговые окна, чтобы запрашивать информацию, которая, если будет предоставлена, может значительно уменьшить работу или усилия пользователей.

Когда не следует использовать модальность

  1. Не используйте модальные диалоги для несущественной информации, не связанной с текущим пользовательским потоком.
  2. Избегайте модальных диалогов, которые прерывают важные процессы, такие как потоки оформления заказа. Оформление заказа — это процесс с высокими ставками как для пользователей, так и для предприятий: пользователи хотят убедиться, что процесс является плавным, безопасным и безошибочным, а компании хотят, чтобы пользователь следовал их решению о покупке. Модальные диалоги, если они необоснованны, могут в лучшем случае отвлекать пользователей и в худшем случае подрывать их доверие.
  3. Избегайте модальных диалогов для принятия сложных решений, требующих дополнительных источников информации, недоступных в модальном окне. Модальные диалоги следует использовать для коротких прямых диалогов с пользователем. Если модальное окно требует от пользователя проведения сложного исследования или обращения к дополнительным источникам информации (потенциально заблокированным модальным окном), то это не тот элемент пользовательского интерфейса, который подходит для этого взаимодействия.

Когда следует использовать немодальное окно

Немодальные окна полезны, когда пользователям нужно быстро переключаться между режимами, чтобы получить доступ к определенной информации. Например, Google Mail использует немодальные окна в качестве метода по умолчанию для создания новых сообщений электронной почты. Пользователи могут продолжить работу с открытым этим окном, свернуть составленное электронное письмо, не теряя его (или, при желании, развернуть его в модальное окно). Это отдельное представление позволяет пользователям находить старые электронные письма или дополнительную информацию, которая может быть полезна для составления текущего электронного письма.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *