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

Создание групп прокрутки в Adobe XD

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Управление цветом
    5. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    6. Основные сведения о рабочей среде
    7. Изменение языка приложения в Adobe XD
    8. Доступ к наборам для дизайна пользовательского интерфейса
    9. Доступность в Adobe XD
    10. Сочетания клавиш
    11. Советы и рекомендации
  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. Корпоративный групповой совместный доступ
    14. Резервное копирование или перенос ресурсов XD
  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 позволяют определять участки внутри монтажной области, которые будут прокручиваться независимо от остальной части монтажной области, создавая таким образом эффекты горизонтальной или вертикальной прокрутки. Группы прокрутки удобны при разработке элементов пользовательского интерфейса, например «карусели» изображений, ползунков продуктов или интерактивных карт.

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

Эффект карусели, созданный при помощи групп прокрутки
Эффект карусели, созданный при помощи групп прокрутки

Прежде чем продолжить

Ограничение

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

Создание эффекта горизонтальной прокрутки

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

прокрутка по горизонтали

  1. В режиме Проект выберите объекты, которые необходимо преобразовать в группу прокрутки.
  2. Щелкните значок  в инспекторе свойств. Размеры окна просмотра скорректируются соответствующим образом автоматически. Кроме того, можно использовать сочетание ⇧⌘H в macOS и Shift + Ctrl + H в Windows для создания эффекта горизонтальной прокрутки.
  3.  Чтобы просмотреть эффект горизонтальной прокрутки целиком, выберите .

Создание эффекта вертикальной прокрутки

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

вертикальная прокрутка

  1. В режиме Проект выберите объекты, которые вы хотите преобразовать в группу прокрутки.
  2. Выберите значок в инспекторе свойств, чтобы выполнить прокрутку вверх и вниз. Размеры окна просмотра скорректируются соответствующим образом автоматически. Кроме того, можно использовать сочетание ⇧⌘V в macOS и Shift + Ctrl + V в Windows для создания эффекта вертикальной прокрутки.
  3. Чтобы просмотреть эффект вертикальной прокрутки целиком, выберите .

Создание эффекта горизонтальной и вертикальной прокрутки

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

по горизонтали и по вертикали

  1. В режиме Проект выберите объекты, которые вы хотите преобразовать в группу прокрутки.
  2. Выберите значок  в инспекторе свойств. Размеры окна просмотра скорректируются соответствующим образом автоматически. Кроме того, можно использовать сочетание ⇧⌘D в macOS и Shift + Ctrl + D в Windows для создания сочетания эффектов горизонтальной и вертикальной прокрутки.
  3. Чтобы просмотреть эффект горизонтальной и вертикальной прокрутки целиком, выберите .

Подробнее

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

Время просмотра: 6 мин.

Советы и рекомендации

Теперь вы знаете, как создавать эффект горизонтальной и вертикальной прокрутки в XD, и вот еще несколько полезных советов и приемов.

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

Что дальше?

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

Есть вопрос или идея?

Спросите сообщество

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?