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

Установка фиксированного отступа для компонентов и групп

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    5. Основные сведения о рабочей среде
    6. Изменение языка приложения в Adobe XD
    7. Доступ к наборам для дизайна пользовательского интерфейса
    8. Доступность в Adobe XD
    9. Сочетания клавиш
    10. Советы и рекомендации
    11. Варианты условий подписки на Adobe XD
    12. Изменения в начальном плане XD
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Создание прототипов при помощи видео
      3. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Создание гиперссылок
    11. Предварительный просмотр проектов и прототипов
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

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

Adobe XD позволяет устанавливать фиксированные отступы для групп или компонентов с состояниями и автоматически масштабировать фон при изменении контента.

Это снижает наложение элементов дизайна и когнитивное переполнение при создании кнопок, раскрывающихся списков, всплывающих подсказок или модальных диалоговых окон.

1
Использование отступов для создания макета с учетом содержимого

В отличие от адаптивного изменения размера, функция которого действует на изменении размера всей группы, функция отступов заключается в изменении контента внутри группы.

Попрощайтесь с ручным изменением размера и скажите «привет» гибкости и более быстрым технологическим процессам!

Работа с отступами

Отступы — это расстояние от визуального фона до края контента с каждой стороны, которое определяется растянутым фоном. 

XD автоматически определяет фон, когда:

  • Любая фигура, группа или группа типа Boolean располагается в самом нижнем слое группы или компонента и 
  • Другие элементы перекрывают этот самый нижний слой. 
Отступ
Одинаковые отступы для всех направлений

Для точного управления размером фона объекта за счет отступов выполните следующие действия. 

  1. В инспекторе свойств нажмите переключатель, чтобы включить отступы.
  2. В зависимости от ваших требований к дизайну установите значения для типа установки отступов Одинаковые отступы для всех направлений или Различные отступы для разных направлений.
1
Различные отступы для разных направлений

Вы можете видеть параметр отступа, только если элемент фона структуры слоя расположен последним в группе и перекрывает другие объекты.

Когда вы перемещаете контент или изменяете его размер в группе или компоненте, XD определяет фон, вычисляет значения отступов и обновляет их в инспектор свойств.

Обновленные значения сохраняются в группе или компоненте, а размер фон автоматически изменяется. Когда у группы или компонента нет визуального фона, для отступа устанавливается значение «0».

Хотите изменить значения отступов?

выполните одно из следующих действий.

  • В инспекторе свойств обновите значения для уже существующих отступов.
  • Чтобы изменить размер отступов прямо на холсте, нажмите клавишу ` , наведите курсор на область заполнения и перетащите.
  • Чтобы обновить значения отступов для группы или компонента, вручную измените размер или переместите фон на холсте.
  • Чтобы редактировать все значения отступов, нажмите Shift + `.
  • Чтобы редактировать значения противоположных отступов, нажмите ` + Alt.

Примеры

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

  • Хотите изменить текст кнопки? Введите необходимый текст и размер кнопки будет изменен.
  • Хотите добавить больше строк в раскрывающийся список? Используйте повторяющуюся сетку, чтобы создать больше строк в группе, и вы заметите, что размер фона изменяется вместе с повторяющейся сеткой.
Повторяющиеся сетки и отступы
Использование повторяющейся сетки с отступами

Отступы в компонентах по состояниям

Компоненты наследуют поведение с отступами от своего главного компонента. Это означает, что значения отступов, установленные в главном компоненте, синхронизируются между экземплярами или состояниями.

Переопределение отступов происходит в следующих случаях.

  • Изменение значения отступов в экземпляре компонента и в главном компоненте или
  • Значения отступов экземпляра не обновляются.

Что необходимо учитывать

  • Когда вы включаете отступы:
    • Все экземпляры компонентов и состояний автоматически наследуют свойства, установленные в главном компоненте или состоянии по умолчанию, без возможности их локального переопределения.
    • Параметр На задний план на холсте помещает любой элемент группы или компонент прямо над фоном группы.
  • Если фон является группой типа Boolean, маской или компонентом, то для изменения размера объекта применяются правила адаптивного изменения размера.
  • Если вы удалите фон, XD оценит группу и автоматически задействует в качестве фона следующий потенциальный слой, обновив значения отступов. Если фоновый слов отсутствует, значение отступа сбрасывается до «0».

Ограничения

  • Компоненты и точечный текст не могут выступать в роли фона для группы или компонента.
  • Отступы не анимируются в режиме прототипа при использовании состояния наведения или касания в пределах содержимого проекта.

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

Хотите изменить текст кнопки, чтобы он не выходил за пределы кнопки?

1
Образцы файлов

  1. Скачайте и откройте в XD образец файла кнопки.
  2. Выберите объект и его фон.
  3. Для управления фоном и содержимым в пределах кнопки включите отступы в инспекторе свойств.
  4. В зависимости от ваших требований к дизайну выберите и примените необходимые вам параметры отступов.

Подробнее

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

Что дальше?

Теперь вы знаете все необходимое для начала работы с отступами. Сделайте шаг вперед и узнайте, как создавать интерактивные дизайны и прототипы и как предоставить к ним общий доступ участникам проекта, таким как разработчики и коллеги-дизайнеры.

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

Спросите сообщество

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

Логотип Adobe

Вход в учетную запись