На предустановленных монтажных областях: перетащите нижнюю точку монтажной области вниз, чтобы увеличить ее длину по сравнению с экраном устройства. Пунктирная линия обозначает начало прокручиваемого содержимого.
Последнее обновление
10 февр. 2023 г.
Узнайте, как создавать прокручиваемые монтажные области.
Когда вы создаете дизайн XD, монтажная область может оказаться недостаточно длинной, чтобы вместить все содержимое. Удлиняя монтажную область и выбирая параметры в зависимости от нужд вашего проекта, вы можете вертикально прокручивать монтажную область, чтобы подстраиваться под размеры разных устройств.
Вертикальная прокрутка помогает имитировать эффекты прокрутки при разработке прокручиваемых раскрывающихся списков или веб-сайтов. Однако для добавления нового уровня взаимодействия при разработке многопанельных интерфейсов, карт и горизонтальных галерей изображений можно использовать группы прокрутки.
Создание вертикальной прокрутки
В режиме Дизайн выберите следующие параметры в инспекторе свойств.
- Прокрутка: выберите Вертикальная или Нет.
- Фиксировать положение при прокрутке: выберите, чтобы закрепить элементы в фиксированном положении во избежание прокрутки вместе с содержимым.
- Высота окна просмотра: укажите высоту области просмотра, через которую видно монтажную область.
Вы можете применить эффект вертикальной прокрутки для перемещения содержимого монтажной области вверх и вниз.
Соедините монтажные области в режиме прототипа.
В режиме Прототип выберите следующие параметры в инспекторе свойств.
- Сохранить позицию прокрутки: при переходе к следующей монтажной области сохраняется позиция из предыдущей монтажной области. Дополнительные сведения см. в этом посте в Twitter.
- Фиксировать положение при прокрутке: закрепляет элементы дизайна в фиксированном положении во избежание прокрутки вместе с содержимым.
Для предварительного просмотра монтажной области выберите «Предпросмотр на настольном ПК» . Перетащите окно предварительного просмотра для просмотра вертикальной прокрутки.
Примеры и образцы файлов
Хотите создать раскрывающийся список с вертикальной прокруткой с помощью предустановленных монтажных областей?
- Используйте инструмент Выбрать, чтобы щелкнуть имя монтажной области или выполнить перетаскивание через монтажные области. Вы также можете щелкнуть название монтажной области на панели Слои, чтобы выбрать ее в окне «Документ».
- Чтобы удлинить выбранную монтажную область, перетащите ее нижнюю точку вниз. Пунктирная линия обозначает исходную высоту монтажной области.
- Для предварительного просмотра прокрутки на монтажной области прямо в XD используйте параметр Предпросмотр на настольном ПК.
Скачайте образцы файлов и попробуйте выполнить это самостоятельно либо просмотрите это видео, чтобы получить больше информации.
Время просмотра: 1 мин.
При создании дизайна для ПК или мобильных устройств хотите ли вы, чтобы отдельные части сайта отображались только при прокрутке, а элементы дизайна закреплялись, не плавая в меню? Посмотрите это видео, чтобы узнать больше о прокручиваемых монтажных областях и фиксированных элементах.
Время просмотра: 1 мин.
Больше таких руководств и образцов файлов можно найти в сообществе XD.
Советы и рекомендации
Чтобы создать эффекты горизонтальной прокрутки в проектах, используйте группы прокрутки. Группы прокрутки позволяют создавать прототип окна для контента, который можно прокручивать по горизонтали, вертикали или в обоих направлениях.
Связанные ресурсы
Есть вопрос или идея?
Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
