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

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

Поиск

Последнее обновление 21 февр. 2023 г.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанные ресурсы

Совместный доступ к прототипам для проверки

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

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