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

Адаптивное изменение размера и ограничения

  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 была разработана функция адаптивного изменения размера, которая позволяет изменять размеры объектов, сохраняя пространственные отношения при разных размерах для лучшей адаптации к множественным размерам экрана.

Адаптивное изменение размера
Адаптивное изменение размера

Работа с адаптивным изменением размера

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

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

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

Адаптивное изменение размера при работе с изменяемым размером ресурса

Центральные поля адаптивного изменения размера

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

Изменение размера группы с использованием центральных полей, выделенных розовым цветом

Адаптивное изменение размера и группы

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

Ручное редактирование ограничений

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

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

  • Фиксированная/переменная ширина
  • Фиксированная/переменная высота
  • Фиксированное/переменное левое поле
  • Фиксированное/переменное правое поле
  • Фиксированное/переменное верхнее поле
  • Фиксированное/переменное нижнее поле
Установка ограничений для отдельных объектов

Установка ограничений для группы объектов
Установка ограничений для группы объектов

Адаптивное изменение размеров монтажных областей

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

Чтобы включить адаптивное изменение размера:

  1. Выберите монтажную область в режиме дизайна.

  2. В инспекторе свойств нажмите переключатель для включения адаптивного изменения размера.

    Включение адаптивного изменения размера, выбор ручного изменения размера и просмотр ограничений
    Переключатель включения/выключения адаптивного изменения размера

  3. Выберите один из следующих вариантов адаптивного изменения размера:

    • Авто: автоматическое использование ограничений для изменения размера монтажной области.
    • Вручную: ручная установка пользователем ограничений, которые доступны в инспекторе свойств.
    Включение адаптивного изменения размера, выбор ручного изменения размера и просмотр ограничений
    Включение адаптивного изменения размера, выбор ручного изменения размера и просмотр ограничений

Переопределение адаптивного изменения размера для групп

Хотя адаптивное изменение размера является поведением по умолчанию при изменении размера множественных объектов и групп, вы можете: 

  • Нажать клавишу Shift для масштабируемого изменения размера, чтобы временно переопределить адаптивное поведение. Потянуть за один из угловых маркеров выделения, чтобы зафиксировать пропорции вашей группы при изменении размера.
  • Отключить функцию адаптивного изменения размера в инспектор свойств.
Логотип Adobe

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