Начало работы с монтажными областями в Adobe XD

Познакомьтесь с Джинни (Jeanee) — графическим дизайнером, которого выбрали руководителем проекта UX-дизайна. Она предлагает Adobe XD своей рабочей группе, участники которой имеют разный уровень опыта в дизайне и инструментах UX.

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

Ознакомьтесь с основами XD:

• Обзор Adobe XD
• Ознакомление с рабочей средой XD
• Управление цветом

Настройка монтажных областей за 4 простых шага

Что такое монтажная область? Монтажные области представляют собой экраны вашего приложения или страницы вашего веб-сайта. Это упрощает процессы проектирования и создает интерактивные проекты для экранов разных размеров в одном документе. Используйте монтажные области для создания проекта XD.

Прочтите, и вы узнаете, как настроить монтажные области.

Создать новую монтажную область

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

Используйте имеющуюся монтажную область из Photoshop и Illustrator

Вы можете импортировать имеющиеся монтажные области из Photoshop или Illustrator в приложении XD без их повторного создания. 

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

Управлять монтажными областями

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

Применение макета или квадратных сеток

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

Создание монтажных областей

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

Добавление визуальных и текстовых элементов

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

Создание прокручиваемых монтажных областей

Хотите добавить в свой дизайн эффекты вертикальной и горизонтальной прокрутки? Используйте группы прокрутки для создания прототипа окна содержимого.

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

Окончательный дизайн

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

Подробнее

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

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

Советы и рекомендации

Теперь, когда у вас есть базовые знания о монтажных областях в XD, предлагаем несколько полезных советов:

• Чтобы измерить расстояние от объекта до краев монтажной области, щелкните по объекту и нажмите кнопку Параметр (в macOS) или Alt (в Windows).
• Чтобы выключить опцию прокрутки в монтажной области, выберите монтажную область в инспекторе свойств, измените значение параметра Прокрутка на Нет.

Дополнительные советы по работе с монтажными областями получите у @Elainecchao, менеджера продукта XD в Twitter.

Что дальше?

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

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