Хотите задать вопрос или поделиться идеей? Присоединяйтесь к сообществу Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы!
Последнее обновление
17 июн. 2021 г.
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Узнайте, как использовать подборки в 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 минута.
Что дальше?
Мы познакомили вас с тем, как использовать подборки для задания определенных пространств между элементами. Теперь рассмотрим, как создавать интерактивные прототипы и открывать к ним доступ дизайнерам и другим участникам проекта, чтобы получать от них отзывы.
Есть вопрос или идея?
