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

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

Читайте этот раздел далее, чтобы узнать, как пользоваться горизонтальными и вертикальными группами прокрутки в 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 используйте трекпад и колесико мыши, щелкните и перетащите, чтобы проверить эффекты горизонтальной и вертикальной прокрутки.
• Комбинируйте группы прокрутки с состояниями компонентов и типами действий, например Наложением, Автоматическим анимированием, а также действием Прокрутить к. 
• Используйте отступы, чтобы лучше управлять сдвигом в группах прокрутки.
• Используйте вложенные группы прокрутки при создании проектов с несколькими уровнями прокрутки.

Что дальше?

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

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