В режиме Дизайн выберите исходную монтажную область и еще одну монтажную область для наложения. Монтажную область наложения можно повторно использовать несколько раз.
Последнее обновление
17 февр. 2022 г.
Научитесь добавлять наложение для имитации эффектов интерактивного слайда.
Adobe XD позволяет размещать содержимое поверх другой монтажной области, а не дублировать его на нескольких монтажных областях, чтобы имитировать эффекты, такие как раскрывающиеся списки, сдвижные клавиатуры и многое другое.
В режиме Прототип перетащите соединитель из исходной монтажной области в монтажную область с содержимым наложения. Щелкните соединитель, чтобы открыть панель Взаимодействие, которая появляется в инспекторе свойств, и задайте следующие параметры.
- Триггер: выберите действие.
- Действие: выберите наложение. Если вы хотите назначить два действия для одного триггера, такого как Tap, установите первую кнопку Action + в Property Inspector на Overlay, а вторую кнопку Action + установите на нетранзитивное действие, такое как Audio playback или Speech playback.
- Анимация: выберите тип анимации. Если вы выберете Слайд вверх или Слайд вниз, XD автоматически разместит наложение на краю исходной монтажной области.
- Смягчение: выберите этот параметр, чтобы смоделировать эффекты смягчения.
- Длительность: введите продолжительность. Максимальная продолжительность, которую вы можете установить между двумя переходящими монтажными областями, составляет пять секунд.
Чтобы отрегулировать положение наложения на исходной монтажной области, щелкните и перетащите зеленый переключатель положения (+).
Для предварительного просмотра ваших наложений в поддерживаемых браузерах щелкните 
.
Вложенные наложения
Adobe XD не поддерживает вложенные наложения, когда вы накладываете наложение поверх другого наложения. В таких сценариях, когда вы подключаете первую монтажную область наложения к другой, первое наложение убирается перед применением второго наложения.
Примеры и образцы файлов
Хотите создавать интерактивные наложения, используя эффекты размытия фона?
- Выберите исходную монтажную область и монтажную область наложения с размытием фона. Дополнительные сведения о том, как добавить размытие фона, см. в разделе Работа с эффектами размытия в XD.
- Переключитесь в режим Прототип для подключения исходной монтажной области к монтажной области наложения.
- Выберите следующие параметры в инспекторе свойств.
- Trigger: Выберите Tap.
- Действие: выберите Наложение.
- Animation: Выберите Dissolve.
- Смягчение: выберите Ускорение.
- Длительность: введите 0,2 сек.
- Подключите как можно больше различных исходных монтажных областей к монтажной области наложения.
- Используйте Предпросмотр на настольном ПК для предварительного просмотра эффекта.
Подробное руководство и образцы файлов, которые можно загрузить, доступны в разделе Создание интерактивного наложения.
Хотите научиться создавать эффект сдвига раскрывающегося списка с помощью наложений? Посмотрите учебное пособие в конце этого примера и выполните следующие действия.
- Выберите исходную монтажную область и монтажную область наложения с раскрывающимся списком элементов.
- Переключитесь в режим Prototype, чтобы соединить исходный артборд с оверлейным артбордом.
- Выберите следующие параметры в инспекторе свойств.
- Триггер: Выберите Нажать.
- Действие: выберите Наложение.
- Анимация: выберите Слайд вправо.
- Смягчение: выберите эффект Ускорение.
- Длительность: введите 0,3 сек.
- Подключите как можно больше различных исходных монтажных областей к монтажной области наложения.
- Используйте Предпросмотр на настольном ПК для предварительного просмотра эффекта.
Подробнее
Чтобы узнать больше об оверлеях в XD, посмотрите это видео.
Время просмотра: 10 минут
Больше таких руководств и образцов файлов можно найти в сообществе XD.
Связанные материалы
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
