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

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

Узнайте, как использовать монтажные области для создания дизайн-проектов в XD.

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

 
  • Она ищет ресурсы, которые помогут быстро начать работу над проектом.

 

  • Чтобы начать работу, ей нужны учебные пособия, а чтобы продолжить — примеры файлов.

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

Прежде чем продолжить

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

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

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

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

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

Главный экран

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

Пользовательские монтажные области

Приложение XD

Используйте инструмент Монтажная область  для создания дополнительных монтажных областей. 

Свойство монтажной области

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

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

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

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

Используйте Файл > Импорт в приложении XD, чтобы открыть монтажные области Photoshop или Illustrator в приложении XD с сохранением всех монтажных областей и слоев, которые можно редактировать.

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

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

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

Переименование

Переупорядочение

Дважды нажмите на заголовок монтажной области.

Изменение размера

Изменение размера

Перетащите круглый маркер, который появился по краям монтажной области.

Дублировать

Копирование и вставка монтажных областей

Выберите монтажную область и нажмите Ctrl /Cmd + D.

Выровнять и распределить

Выровнять и распределить

Выделите несколько монтажных областей и нажмите Выровнять и распределить в инспекторе свойств. Для перестановки перетащите монтажную область.

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

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

Сетки макета

Сетки макета

Выберите одну или несколько монтажных областей, а в разделе Сетка в инспекторе свойств выберите Макет.

Квадратные сетки

Сетки макета

Выберите одну или несколько монтажных областей в разделе Сетка в инспекторе свойств, выберите Квадрат.

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

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

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

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

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

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

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

Добавить элементы

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

Чтобы изменить фоновый цвет монтажной области, в инспекторе свойств выберите Заливку и примените цвет из палитры цветов.

Создание повторяющихся элементов

Повторяющиеся элементы

Используйте повторяющиеся сетки для создания объектов с повторяющимися элементами, например списками и карточными макетами.

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

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

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

Вертикальная прокрутка

Пунктирная линия и прокручиваемое содержимое

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

Фиксация положения при прокрутке

Пунктирная линия и прокручиваемое содержимое

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

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

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

Возможны изменения

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

Подробнее

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

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

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

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

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

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


Что дальше?

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

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

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

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

Получайте помощь быстрее и проще

Новый пользователь?