Компьютеры и связь
Юридическая консультация
Семья и дом
Еда и кулинария
Города и страны, туризм
Ваш вопрос
Датахакер
Нужен небольшой диалог поверх текущего экрана после нажатия на кнопку. Сейчас у меня показывается другая страница целиком, а хотелось бы оставить основной экран сзади и слегка затемнить его. Отдельный маленький фрейм с текстом диалога уже нарисован. Как настроить такое наложение в прототипе?
Датахакер
Крестику тоже назначил Close overlay.
4.1 Fast
Открытие поверх экрана В Prototype протяните связь от кнопки к отдельному фрейму диалога. Для триггера On click выберите Open overlay. Назначение связи должно указывать именно на маленький диалог, а не на копию всего экрана.
Вид наложения Настройте Position, например центр. Для затемнения включите Add background behind overlay и подберите цвет с непрозрачностью. Сам диалог должен оставаться хорошо читаемым поверх фона.
Закрытие Можно включить Close when clicking outside. Если в диалоге есть крестик, назначьте ему Close overlay. В показе последовательно проверьте открытие, нажатие внутри диалога и закрытие. Обычный переход Navigate to заменяет экран, поэтому для описанной задачи нужен другой тип действия.
Датахакер
Было Navigate to, поэтому заменялся весь экран.
4o
Свяжите кнопку с фреймом диалога в режиме Prototype и выберите действие Open overlay. Оно показывает диалог поверх текущего экрана. Задайте положение, включите Add background behind overlay для затемнения и при необходимости Close when clicking outside. Проверьте результат в показе прототипа: исходный экран должен оставаться сзади.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
v4-flash
v4-flash
Как сделать наложение в фигме?
Откройте вкладку Prototype у макета. Найдите кнопку, которая должна открывать диалог, и убедитесь, что рядом существует отдельный фрейм с содержимым окна. В его границы должны входить текст, фон и кнопки самого диалога.
Протяните связь от кнопки открытия к этому фрейму. В настройках взаимодействия выберите On click, затем Open overlay. Проверьте название назначения: случайная связь с большим экраном даст совсем другой размер наложения.
Выберите положение диалога. Начните с центра, если это обычное окно подтверждения. Ручное размещение пригодится, когда окно должно появляться около определённого элемента, но сначала удобнее проверить сам принцип работы.
Включите Add background behind overlay. Настройте цвет и непрозрачность затемнения. Например, для светлого интерфейса полупрозрачный тёмный фон помогает отделить диалог от основного экрана. Смотрите, чтобы текст подложки не спорил с содержимым окна по заметности.
Решите, как окно закрывается. Для учебного диалога можно включить Close when clicking outside. Если есть крестик или кнопка Отмена, назначьте ей действие Close overlay. Само изображение крестика без взаимодействия ничего не закрывает.
Запустите показ прототипа с исходного экрана. Нажмите кнопку открытия, затем попробуйте нажать внутри диалога и за его пределами. Проверьте, что закрытие соответствует выбранному поведению и возвращает к тому же основному экрану.
Если вместо наложения происходит полная смена экрана, проверьте тип действия. Для этого случая требуется Open overlay. При работе с общим диалогом учитывайте, что настройки наложения относятся к самому оверлею и используются при его повторном открытии из разных мест.