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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Фиксированная/переменная ширина
• Фиксированная/переменная высота
• Фиксированное/переменное левое поле
• Фиксированное/переменное правое поле
• Фиксированное/переменное верхнее поле
• Фиксированное/переменное нижнее поле

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

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

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

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

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

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