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

Создание интерактивных прототипов

  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. В разделе экспорта не представлены сторонние приложения

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

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

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

Установка главного экрана

Главный экран — это первый экран вашего приложения или веб-сайта. Навигация ваших пользователей по приложению или веб-сайту начинается с главного экрана.

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

  1. Переключитесь в режим Прототип.

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

  3. Щелкните значок «Главная». Его цвет изменится на синий, указывая, что монтажная область теперь успешно установлена в качестве главного экрана.

    Параметр установки главного экрана

    Главный экран установлен

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

Настройка нескольких потоков в проекте

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

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

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

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

Создание связи между интерактивными элементами и целевыми экранами
Настройка нескольких потоков

  1. Переключитесь в режим Прототип.
  2. Установите главную монтажную область, чтобы определить отправную точку вашего проекта.
  3. Задайте имя для каждого потока для удобства организации.
  4. Если ваш проект состоит из нескольких потоков, установите главные монтажные области для каждого из этих потоков.
  5. Щелкните следующий связываемый объект или монтажные области. На объекте или монтажной области появится связывающий указатель со стрелкой. Используйте перетаскивание мышью, чтобы поместить маркер на целевом объекте или монтажной области.

Добавляйте взаимодействия для объектов и монтажных областей

После того как экраны выбраны и соединены, вы можете сделать прототипы более привлекательными, добавив триггеры и действия для объектов и монтажных областей. Для этого выполните действия, описанные ниже.

  1. Выберите объект и нажмите + рядом с ним или нажмите + в Инспекторе свойств.Установите Триггеры и Тип действия.После выбора типа действия установите конкретные параметры для такого типа действия, включая Назначение (если применимо).

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

    Параметры прототипов
    Параметры прототипов

    A. Выберите «Нажатие», «Перетаскивание», «Наведение», «Время», «Клавиши и геймпад», «Голос» или «Конец воспроизведения». B. Задайте время задержки в секундах. C. Установите «Переход», «Автоматическое анимирование», «Наложение», «Переход к», «Предыдущая монтажная область», «Воспроизведение звука», «Проигрывание речи», «Воспроизведение видео» или «Воспроизведение Lottie». D. Измените монтажную область назначения, если это необходимо. E. Установите «Растворение» или «Нет». F. Выберите эффект смягчения. G. Введите продолжительность в секундах. 

  2. Если вы выберете Нажатие в качестве триггера, то сможете комбинировать два действия, например переход с непереходным действием, таким как воспроизведение речи или звука. Чтобы добавить второе действие, установите для первой кнопки + Действие в Инспекторе свойств параметр Переход, Автоматическое анимирование, Наложение, Прокрутка к или Предыдущая монтажная область, затем установите для второй кнопки Действие + параметр Автоматическое воспроизведение или Проигрывание речи.

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

  3. Вы также можете комбинировать несколько триггеров для создания дополнительных взаимодействий без распределения триггеров по разным объектам на монтажной области. Для этого используйте кнопку «+» на холсте или нажмите кнопку «+» в инспекторе свойств, а затем выберите ТриггерыДействие и Назначение.

    Помните, что вы можете применить триггеры Нажатие, Перетаскивание, Наведение и Время только раз, а Голос и Клавиши и геймпад — много раз. 

    Объединение нескольких триггеров
    Объединение нескольких триггеров


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

  4. Для предварительного просмотра прототипа выберите «Предпросмотр на ПК» .

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

Советы

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

Чтобы временно скрыть соединительные линии в режиме прототипа, удерживайте клавишу Option (macOS) или Alt (Windows).

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

Чтобы применить определенное взаимодействие к другому объекту, выберите этот объект или монтажную область, выберите «Копировать», щелкните целевой объект или монтажную область и в контекстном меню выберите «Вставить взаимодействие».

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

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

    Выбор предыдущей монтажной области
    Выбор предыдущей монтажной области

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

    Установка цели
    Установка цели

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

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

Отмена связи монтажных областей

  1. В режиме Прототип выберите Место назначения > Нет.

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

    Отмена связи монтажных областей
    Отмена связи монтажных областей

    Параметр Нет доступен, только если монтажная область связана с целью.

  2. Просмотрите связь в браузере. Любая целевая связь, ранее установленная от этого элемента, удалена.

Предварительный просмотр и запись взаимодействий

Запись прототипов не поддерживается в Adobe XD в Windows. Тем не менее есть обходной метод. Нажмите клавиши Windows + G и используйте собственное средство записи для записи окна предварительного просмотра.

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

  1. Нажмите значок «Предпросмотр на ПК». Откроется окно предварительного просмотра с фокусом на монтажной области.

    Чтобы проверить навигацию между экранами, щелкните интерактивные элементы.

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

  2. Чтобы записать взаимодействие, нажмите значок Запись в окне предварительного просмотра. Чтобы остановить запись, нажмите Esc или значок Запись еще раз.

    .
    Запись взаимодействий прототипа

  3. Укажите имя и место сохранения записи. Запись сохраняется как файл формата MP4.

Подробнее

Из этого видео вы узнаете, как приступить к работе с интерактивными ресурсами: 

Логотип Adobe

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