Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Последнее обновление
2021-06-17
Узнайте, как использовать подборки в Adobe XD для создания динамических макетов, реагирующих на изменение контента.
Подборки в Adobe XD позволяют задавать определенные фиксированные промежутки между объектами в группе. Когда вы изменяете размер, порядок или структуру объектов в подборке, XD автоматически сохраняет заданное пространство между объектами.
Подборки в сочетании с отступами и адаптивными размерами — это мощная комбинация функций, повышающих контроль и скорость проектирования. Использование подборок в компонентах позволяет легко автоматизировать создание макета и редактирование кнопок, меню, раскрывающихся меню, карточных макетов.
Прежде чем продолжить
Убедитесь, что вы знакомы с основами создания макетов с учетом содержимого:
Ограничения
Прежде чем приступать к работе с подборками, учтите следующие ограничения:
- Если объект увеличивается при наведении мышки, фон остается неизменным и элементы подборки не отдаляются.
- Компоненты не могут выступать в качестве фона для отступа и подборок. Вместо этого следует создать один компонент, который содержит и контент, и фон.
- Не поддерживается:
- Преобразование специальных групп в качестве масок или логических групп в подборки.
- Изменение размера подборок в направлении подборки.
- Выбор элемента подборки и элементов за ее пределами.
Включение подборок
Можно включать подборки в группе или компоненте, где включены адаптивные размеры. Установите флажок Подборки в элементах управления адаптивными размерами в инспекторе свойств.
XD автоматически определяет ориентацию подборки на основе структуры вашей группы или компонента. Однако если нужно изменить ориентацию подборки, выберите По вертикали или По горизонтали внутри области Подборка в инспекторе свойств.
При работе с компонентами управление ориентацией подборки доступно только в главном компоненте.
Что происходит при включении подборок?
При включении подборки XD выполняет следующие действия.
- Автоматически определяет фон (группу или фигуру, расположенную внизу панели «Слои») и выполняет наложение на холст со всеми объектами в группе.
- Включает и вычисляет значения отступов.
- Определяет ориентацию подборки: по вертикали или по горизонтали.
- Группирует перекрывающиеся для сохранения макета.
- Определяет и исправляет значения интервалов между элементами.
Изменение элементов подборки
Создав элементы подборки, используйте любой из следующих вариантов для их редактирования:
Переместите элементы или воспользуйтесь функцией «Выравнивание» Измените размер объектов и текста в подборке
Перемещайте элементы свободно или используйте инструменты Выравнивания для элементов подборки по направлению от нее.
Выберите объект, размер которого вы хотите изменить, и другие объекты в подборке будут автоматически перемещены, чтобы сохранить относительное расстояние между ними. Используйте функцию Автовысота текста для динамической регулировки высоты текста в подборке без изменения его ширины.
Редактируйте расстояния между объектами Регулируйте расстояния внутри подборки
Выберите объект внутри группы или компонента, организованных в подборку, и наведите курсор на промежутки. Розовая подсветка показывает пространство между объектами в подборке. Нажмите и перетащите выделенный объект, чтобы отредактировать пространство между объектами.
Выберите всю подборку и удерживайте клавишу S на клавиатуре, чтобы настроить промежутки внутри подборки. Клавишу S можно также использовать для изменения отступов.
Выравнивание расстояний в подборке Дублирование элементов в подборке
Перетащите и нажмите Shift или Shift + S (если выделение находится за пределами подборки).
С помощью клавиш Cmd + D создайте дубликат элемента внутри подборки и расположите его под выбранным элементом.
Переупорядочить элементы подборки
Создав и изменив элементы подборки, используйте любой из следующих вариантов, чтобы изменить их порядок:
- Выберите элементы подборки и перетащите их вдоль направления подборки на холсте.
- Используйте клавиши Cmd +] и Cmd + [ для перемещения вверх и вниз в подборке и Cmd + Shift +] и Cmd + Shift + [, чтобы сделать выделенный элемент первым или последним в подборке. Эти команды также доступны в контекстном меню (по щелчку правой кнопкой мыши).
- Новое положение элемента подборки выделяется розовыми прямоугольниками. Чтобы сохранить выравнивание при изменении порядка элементов, нажмите Shift, чтобы заблокировать элементы подборки в направлении перетаскивания и сохранить исходное выравнивание.
Создать или изменить фон подборки
При создании подборки XD определяет фон автоматически. Однако при включении подборок для группы или компонента фоном становится слой группы, расположенный ниже всех в подборке и перекрывающийся с содержимым группы или компонента.
XD не поддерживает экземпляры компонентов в качестве фона.
Чтобы создать и изменить фон подборки, выполните следующие действия.
- Создайте фигуру или группу внутри подборки, которые будут действовать как ее фон. Можно также создать фон вне подборки и скопировать его в соответствующую группу.
- В нужной подборке выберите элемент, который хотите использовать в качестве фона.
- Щелкните правой кнопкой мыши и выберите Создать фон или Заменить фон. Выбранный элемент перемещается в конец подборки и масштабируется в соответствии со значениями размера подборки и отступов.
Больше действий с элементами подборки
Вы узнали, как создавать подборки и работать с ними, и вот еще несколько дополнительных советов по использованию подборок.
Вложения и перестановка подборок
Можно добиться четкого и удобного редактирования макетов за счет вложенных подборок, например горизонтальной подборки, вложенной в вертикальную. Глубина вложенности не ограничена. Посмотрите эту анимированную иллюстрацию, чтобы понять принцип работы вложенных подборок.
Подборки в компонентах и состояниях
Можно использовать подборки и отступы в компонентах для определения повторно используемых элементов пользовательского интерфейса в контексте систем дизайна. При работе с компонентами, которым требуется обновление подписи или строки, использование подборок позволяет макету компонента реагировать на изменения и автоматизирует ручную компоновку. Например, если у вас есть несколько экземпляров с переопределением контента, используйте подборки для глобального редактирования промежутков и управления ими. Вам больше не нужно редактировать каждую карту вручную!
Подборки, применяемые к главным компонентам, автоматически применяются ко всем их экземплярам и состояниям. Также можно создавать компонент, связанный с подборками, и изменять эти подборки.
Как переопределение ведет себя с подборками?
- Переопределение промежутков происходит, когда вы вручную изменяете промежутки между двумя элементами подборки в экземпляре или состоянии. Если изменить промежутки в главном компоненте, изменения не будут применены к экземпляру или состоянию.
- Экземпляры могут содержать переопределения контента или макета для таких элементов, как большая область текста. Эти экземпляры могут быть по-прежнему синхронизированы с главным по значениям отступов или промежутков между ними.
Подробнее
«Подборки в сочетании с отступами и адаптивными размерами — это мощная комбинация функций при работе в системе проектирования. Когда подборки применяются к главному компоненту, любой экземпляр данного компонента будет соответствовать структуре этой подборки», — Дани Бомонт, главный менеджер продукта, XD.
Подробнее о начале работы с подборками в компонентах и группах см. в этом видео.
Время просмотра: 1 минута.
Что дальше?
Мы познакомили вас с тем, как использовать подборки для задания определенных пространств между элементами. Теперь рассмотрим, как создавать интерактивные прототипы и открывать к ним доступ дизайнерам и другим участникам проекта, чтобы получать от них отзывы.
Есть вопрос или идея?
Вход в учетную запись