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

Свойство «Модальное окно (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

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

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

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

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

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

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

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

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

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

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

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

Заголовок

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

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

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

Действия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прокрутка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обширный обзор имеющейся литературы на эту тему показал, что определенных правил использования модальных окон нет, есть только ряд рекомендаций и указаний. Автор статьи объединил все лучшие руководства, советы и рекомендации в блок-схему, которая не только поможет понять, нужен ли вашему дизайну оверлей, но и позволит убедительно обосновать свое решение.

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

Пример: Регистрационная форма сервиса AKIRA для владельцев корпоративного полиса медицинского страхования Manulife Financial. Что значит “номер страхового полиса Manulife”?

Вы в замешательстве. Как будет лучше поступить? Прервать сценарий? Добавить ещё одну страницу? Или модальное окно? Как принять верное решение?

Проблема: определенных правил использования модальных окон не существует

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

Модальные окна помогают не потерять контекст

‍Однажды кого-то заинтересовал вопрос: «Как вывести на экран важную информацию, не потеряв контекст текущего экрана?» — бинго! Так и появились модальные окна.

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

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

‍Кто-нибудь когда-нибудь задавался вопросом: «В чем разница между модальными, диалоговыми окнами и оверлеем? Часто их принимают за один и тот же элемент, или же считают различия между ними просто формальностью. Давайте все же определимся с терминами, прежде чем продолжить:

• Диалоговое окно (Dialog): Диалог — разговор между двумя людьми. В пользовательском интерфейсе диалог — это «разговор» между системой и пользователем, который осуществляется посредством диалоговых окон.
• Режим (Mode): Особое состояние системы, в котором одна и та же система имеет несколько разных пользовательских интерфейсов. Каждый режим может предлагать различные виды действий или одни и те же действия, но с разными результатами, которые зависят от режима работы системы.
• Оверлей (Overlay): Окно с контентом, которое отображается поверх другой страницы. Оверлеи обычно заметны меньше, чем основная страница.
• Затемнение/Осветление (Scrim/Lightbox): Временное затемнение, которое может быть применено к экрану, чтобы сделать контент менее заметным для создания эффекта лайтбокса (Lightbox), когда более светлый оверлей выделяется на темном фоне.
• Модальное окно (Modal): Блокировка содержимого фоновой страницы во время взаимодействия пользователя с оверлеем.
• Немодальное окно (Non-modal): Пользователи могут продолжать взаимодействовать с содержимым фоновой страницы (например, кликать на ссылки или нажимать кнопки), в то время как оверлей по-прежнему остается видимым.

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

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

Карта модальных окон для разных компонентов

‍Для того чтобы вам было еще проще, я нарисовал удобную диаграмму, которая объединяет все, о чем мы говорили выше ☝️, и актуальные компоненты из Material Design от Google.

Итог: моя схема принятия решений

‍Я объединил все лучшие руководства, советы и рекомендации в блок-схему, которая, при правильном использовании, поможет вам понять, нужен ли вашему дизайну оверлей. Вы можете использовать эту блок-схему вместе с приведенной выше картой компонентов, которая позволит вам подобрать наиболее подходящий из них. В совокупности эти инструменты позволят вам найти лучшее решение для вашего дизайна и дадут вам убедительное обоснование этого решения.

Также рекомендую пользоваться этим шаблоном для записи ваших ответов на вопросы блок-схемы.

Заключение

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

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

Ссылки

• ‍‍Popups: 10 Problematic Trends and Alternatives
• ‍https://www.nngroup.com/articles/modes/
• ‍https://www.nngroup.com/articles/modal-nonmodal-dialog/
• ‍https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1
• ‍https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

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

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

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

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

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

Лист

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

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

Полный экран

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

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

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

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

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

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

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

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

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

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

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

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