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

Создание прокручиваемых монтажных областей

  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. Изменения в начальном плане 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. Работа с анимацией 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. Экспорт и скачивание ресурсов из спецификаций дизайна
  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. Облачные документы
      1. Проблемы с облачными документами XD
    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. В разделе экспорта не представлены сторонние приложения

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

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

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

Прокручиваемая монтажная область

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

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

    Пунктирная линия и прокручиваемое содержимое
    Пунктирная линия и прокручиваемое содержимое

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

    • Прокрутка: выберите Вертикальная или Нет
    • Фиксировать положение при прокрутке: выберите, чтобы закрепить элементы в фиксированном положении во избежание прокрутки вместе с содержимым. 
    • Высота окна просмотра: укажите высоту области просмотра, через которую видно монтажную область. 

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

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

  3. Соедините монтажные области в режиме прототипа.

  4. В режиме Прототип выберите следующие параметры в инспекторе свойств.

    • Сохранить позицию прокрутки: при переходе к следующей монтажной области сохраняется позиция из предыдущей монтажной области. Дополнительные сведения см. в этом посте в Twitter
    • Фиксировать положение при прокрутке: закрепляет элементы дизайна в фиксированном положении во избежание прокрутки вместе с содержимым. 
    Сохранить позицию прокрутки
    Сохранить позицию прокрутки

    Фиксация положения при прокрутке
    Фиксация положения при прокрутке

  5. Для предварительного просмотра монтажной области выберите «Предпросмотр на настольном ПК» . Перетащите окно предварительного просмотра для просмотра вертикальной прокрутки.

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

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

  1. Используйте инструмент Выбрать, чтобы щелкнуть имя монтажной области или выполнить перетаскивание через монтажные области. Вы также можете щелкнуть название монтажной области на панели Слои, чтобы выбрать ее в окне «Документ».
  2. Чтобы удлинить выбранную монтажную область, перетащите ее нижнюю точку вниз. Пунктирная линия обозначает исходную высоту монтажной области.
  3. Для предварительного просмотра прокрутки на монтажной области прямо в XD используйте параметр Предпросмотр на настольном ПК.

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

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

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

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

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

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

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

Рекомендации

«Закрепленные заголовки и другие фиксированные элементы подобны указателям на трассах — маячки, благодаря которым мы предоставляем соответствующую информацию в соответствующем разделе или помогаем клиентам не сбиться с пути, показывая им нужные действия», —  Оливер Линдберг (Oliver Lindberg). Читайте блог на тему передовых практик создания закрепленных заголовков и других фиксированных элементов.

Логотип Adobe

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