Руководство пользователя Отмена

Добавление наложений

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    5. Основные сведения о рабочей среде
    6. Изменение языка приложения в Adobe XD
    7. Доступ к наборам для дизайна пользовательского интерфейса
    8. Доступность в Adobe XD
    9. Сочетания клавиш
    10. Советы и рекомендации
    11. Варианты условий подписки на Adobe XD
    12. Изменения в начальном плане XD
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Создание прототипов при помощи видео
      3. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Создание гиперссылок
    11. Предварительный просмотр проектов и прототипов
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

Научитесь добавлять наложение для имитации эффектов интерактивного слайда.

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

Клавиатура появляется как наложение на монтажной области
Клавиатура появляется как наложение на монтажной области

  1. В режиме Дизайн выберите исходную монтажную область и еще одну монтажную область для наложения. Монтажную область наложения можно повторно использовать несколько раз. 

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

    • Триггер: выберите действие.
    • Действие: выберите наложение. Если нужно назначить два действия для одного триггера, такого как Нажатие, для первой кнопки Действие + в инспекторе свойств установите значение Наложение, а для второй кнопки Действие + установите непереходное действие, такое как Воспроизведение звука или Проигрывание речи.
    • Анимация: выберите тип анимации. Если вы выберете Слайд вверх или Слайд вниз, XD автоматически разместит наложение на краю исходной монтажной области.
    • Смягчение: выберите этот параметр, чтобы смоделировать эффекты смягчения.
    • Длительность: введите продолжительность. Максимальная продолжительность, которую вы можете установить между двумя переходящими монтажными областями, составляет пять секунд. 
    Добавление клавиатуры как наложения на исходной монтажной области
    Добавление клавиатуры как наложения на исходной монтажной области

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

  4. Для предварительного просмотра ваших наложений в поддерживаемых браузерах щелкните 

Вложенные наложения

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

Примеры и образцы файлов

Хотите создавать интерактивные наложения, используя эффекты размытия фона? 

  1. Выберите исходную монтажную область и монтажную область наложения с размытием фона. Дополнительные сведения о том, как добавить размытие фона, см. в разделе Работа с эффектами размытия в XD
  2. Переключитесь в режим Прототип для подключения исходной монтажной области к монтажной области наложения.
  3. Выберите следующие параметры в инспекторе свойств. 
    • Триггер: выберите Нажатие.  
    • Действие: выберите Наложение.
    • Анимация: выберите Затухание. 
    • Смягчение: выберите Ускорение.
    • Длительность: введите 0,2 сек.
  4. Подключите как можно больше различных исходных монтажных областей к монтажной области наложения. 
  5. Используйте Предпросмотр на настольном ПК для предварительного просмотра эффекта.

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

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

  1. Выберите исходную монтажную область и монтажную область наложения с раскрывающимся списком элементов.  
  2. Переключитесь в режим Прототип для подключения исходной монтажной области к монтажной области наложения. 
  3. Выберите следующие параметры в инспекторе свойств. 
    • Триггер: выберите Нажатие.  
    • Действие: выберите Наложение.
    • Анимация: выберите Слайд вправо.
    • Смягчение: выберите эффект Ускорение.
    • Длительность: введите 0,3 сек.
  4. Подключите как можно больше различных исходных монтажных областей к монтажной области наложения. 
  5. Используйте Предпросмотр на настольном ПК для предварительного просмотра эффекта.

Подробнее

Хотите узнать больше о наложениях в XD? Посмотрите это видео.
Время просмотра: 10 минут

Больше таких руководств и образцов файлов можно найти в сообществе XD.

Логотип Adobe

Вход в учетную запись