Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Последнее обновление
17 февр. 2023 г.
- Руководство пользователя Adobe XD
- Введение
- Новые возможности Adobe XD
- Распространенные вопросы
- Создание дизайна, прототипов и совместная работа в Adobe XD
- Управление цветом
- Системные требования
- Основные сведения о рабочей среде
- Изменение языка приложения в Adobe XD
- Доступ к наборам для дизайна пользовательского интерфейса
- Доступность в Adobe XD
- Сочетания клавиш
- Советы и рекомендации
- Дизайн
- Монтажные области, направляющие и слои
- Фигуры, объекты и путь
- Выделение, изменение размера и поворот объектов
- Перемещение, выравнивание, распределение и упорядочивание объектов
- Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
- Задание обводки, заливки и теней для объектов
- Создание повторяющихся элементов
- Создание перспективных проектов с помощью 3D-преобразований
- Редактирование объектов с помощью логических операций
- Текст и шрифты
- Компоненты и состояния
- Маскировка и эффекты
- Макет
- Видео и анимации Lottie
- Создание прототипа
- Создание интерактивных прототипов
- Анимирование прототипов
- Свойства объекта, которые поддерживаются при автоматическом анимировании
- Создание прототипов с клавиатуры и геймпада
- Создание прототипов с помощью голосовых команд и воспроизведения
- Создание синхронизированных переходов
- Добавление наложений
- Создание голосовых прототипов
- Создание якорных ссылок
- Создание гиперссылок
- Предварительный просмотр проектов и прототипов
- Публикация, экспорт и проверка
- Публикация выбранных монтажных областей
- Предоставление совместного доступа к проектам и прототипам
- Настройка разрешений на доступ к ссылкам
- Работа с прототипами
- Просмотр прототипов
- Работа со спецификациями дизайна
- Предоставление общего доступа к спецификациям дизайна
- Проверка спецификаций дизайна
- Навигация в спецификациях дизайна
- Проверка и комментирование спецификаций дизайна
- Экспорт ресурсов дизайна
- Экспорт и загрузка ресурсов из спецификаций дизайна
- Корпоративный групповой совместный доступ
- Резервное копирование или перенос ресурсов XD
- Системы дизайна
- Системы дизайна с библиотеками Creative Cloud Libraries
- Работа с ресурсами документа в Adobe XD
- Работа с библиотеками Creative Cloud Libraries в Adobe XD
- Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
- Работа с проектными токенами
- Использование ресурсов из библиотек Creative Cloud Libraries
- Облачные документы
- Интеграция и плагины
- Работа с внешними ресурсами
- Работа с ресурсами проекта из Photoshop
- Копирование ресурсов из Photoshop
- Как импортировать или открыть проекты Photoshop
- Работа с ресурсами Illustrator в Adobe XD
- Импортирование и открытие проектов Illustrator
- Копирование векторных объектов из Illustrator в XD
- Плагины для Adobe XD
- Создание плагинов и управление ими
- Интеграция Jira с XD
- Подключаемый модуль Slack для XD
- Подключаемый модуль Zoom для XD
- Публикация работы из XD на Behance
- XD для iOS и Android
- Устранение неполадок
- Выявленные неполадки и исправленные ошибки
- Установка и обновления
- Запуск и сбой
- Облачные документы и библиотеки Creative Cloud Libraries
- Прототип, публикация и обзор
- Импорт, экспорт и работа с другими приложениями
Ищете информацию о выравнивании ресурсов проекта с помощью направляющих и сеток? Вы обратились по адресу!
Привет, меня зовут Джинни! Я ведущий дизайнер, работающий над проектом UX-дизайна в приложении XD, где есть несколько монтажных областей и объектов.
- Она ищет ресурсы для быстрого создания макетов и размещения объектов с помощью направляющих.
- Ей нужна помощь в выравнивании и определении структуры объекта в рамках дизайн-проекта с использованием сеток.
Звучит знакомо? Если вы столкнулись с такими же проблемами, читайте дальше, и вы узнаете, как создавать и использовать направляющие и сетки в монтажных областях.
Прежде чем продолжить
Создание направляющих и управление ими
После того как ваши монтажные области будут размещены на холсте дизайна, сверху и слева от них появится область, позволяющая перетаскивать направляющие. Вы можете быстро выполнять привязку к центру по горизонтали и вертикали, копировать и вставлять на несколько монтажных областей, удалять и переключать их видимость.
Прочтите и вы узнаете, как создавать направляющие и управлять ими.
Создание направляющих
Вы хотите выровнять и расположить объекты на монтажных областях сверху вниз? Используйте вертикальные направляющие. Если вы хотите выровнять и расположить объекты слева направо, используйте горизонтальные направляющие.
Вертикальные направляющие
Для создания вертикальной направляющей наведите курсор мыши на левую рамку монтажной области, чтобы появился значок 
. Щелкните и удерживайте значок, а затем перетащите его в нужную позицию.
Горизонтальные направляющие
Чтобы создать горизонтальную направляющую, наведите курсор на верхнюю рамку монтажной области, пока не появится значок 
. Перетащите его в нужное место.
Копирование и вставка направляющих
Теперь, когда вы создали направляющие, вы можете использовать параметр Копировать/вставить направляющие для быстрого создания их дубликатов.
Копирование направляющих
Чтобы скопировать направляющие из монтажной области, выберите область, затем выберите Просмотр > Направляющие > Копировать направляющие.
Вставка направляющих
Чтобы вставить скопированные направляющие, нажмите Просмотр или щелкните правой кнопкой мыши по монтажной области > Направляющие > Вставить направляющие.
Удаление направляющих
Вы можете удалить за раз одну или несколько направляющих.
Чтобы удалить направляющую, перетащите ее за пределы монтажной области.
Чтобы удалить несколько направляющих из монтажной области, выберите монтажную область и нажмите Вид или щелкните правой кнопкой мыши по монтажной области. Выберите Направляющие > Удалить направляющие.
Скрытие и блокировка направляющих
Вы хотите временно скрыть направляющие и включить их при необходимости? Используйте параметр Скрыть все направляющие.
Вы также можете заблокировать направляющие на всех монтажных областях, чтобы предотвратить их случайное перемещение и изменение.
Чтобы скрыть и заблокировать направляющие в macOS и Windows:
Скрыть направляющие
- Нажмите вариант Вид > Скрыть все направляющие в верхней строке меню. Вы также можете использовать сочетание клавиш Command + ; для скрывания направляющих в macOS.
- Щелкните правой кнопкой мыши по монтажной области и выберите Направляющие > Скрыть все направляющие. Вы также можете использовать сочетание клавиш Ctrl + ;, чтобы скрыть направляющие в Windows.
Блокировка направляющих
- Нажмите Вид > Блокировать все направляющие в верхней строке меню. Вы также можете в macOS использовать сочетание клавиш Command + Shift + ; , чтобы заблокировать направляющие.
- Щелкните правой кнопкой мыши по монтажной области и выберите Направляющие > Блокировать все Направляющие. Вы также можете в Windows использовать сочетание клавиш Ctrl + Shift + ; чтобы заблокировать направляющие.
Выравнивание объектов с помощью быстрых направляющих
Теперь, когда вы изучили основы создания направляющих и управления ими, вы можете использовать быстрые направляющие для временной привязки направляющих при создании объектов или монтажных областей или при манипулировании ими.
Быстрые направляющие включены по умолчанию. Когда вы перемещаете объект или монтажную область, быстрые направляющие позволяют выравнивать, редактировать и трансформировать объекты или монтажные области относительно других объектов, монтажных областей или и того, и другого путем выравнивания привязки.
Размещение объектов с помощью сеток
Теперь, когда вы ознакомились с основной информацией о направляющих в XD, узнайте, как определять структуру дизайна и выравнивать объекты на монтажной области с помощью макета или квадратных сеток.
Чтобы добавить макет или квадратные сетки, выберите одну или несколько монтажных областей. Перейдите в раздел Сетка в Инспекторе свойств и выберите либо Макет, либо Квадрат.
Сетки макета
Сетки макета — это сетки столбцов, которые полезны при выравнивании объектов дизайна или проектировании для экранов разных размеров. Вы можете легко и быстро настроить их в соответствии со своими потребностями.
Квадратные сетки
Квадратные сетки имеют горизонтальные и вертикальные линии для точного определения размеров и выравнивания объектов при разработке мобильных приложений или значков.
Установка параметров сетки
После того как макет и квадратные сетки добавлены в монтажные области, вы можете персонализировать параметры отображения для сеток, настроив параметры в разделе «Сетка» инспектора свойств. Прочтите этот материал, и вы узнаете, как изменить размер сетки, количество столбцов, свойства средника и поля для ваших сеток.
В зависимости от ваших потребностей в дизайне, вы можете изменить размер сетки для квадратных сеток.
Размер сетки — это расстояние между линиями в квадратной сетке. Чтобы изменить значение размера сетки, введите необходимое число в поле Размер квадратов в инспекторе свойств.
С макетной сеткой, которая применяется к монтажной области, вы можете установить количество столбцов, ширину столбца, свойства средника и размеры полей в разделе «Сетка» инспектора свойств.
Изменение количества столбцов
Введите значение в поле Столбцов. В веб-дизайне обычно используются сетки на 12 или 16 столбцов.
Изменение свойств ширины столбца и средника
Чтобы изменить ширину столбцов, введите значение в поле Ширина колонки. Чтобы определить собственную ширину средника, измените стандартное поле Ширина средника.
Теперь, когда вы изменили количество столбцов, ширину средника и столбца, узнайте, как настроить поля монтажной области. Поля представляют собой расстояние между сеткой макета и краем монтажной области. Читайте дальше, чтобы узнать, как настроить положение полей со всех сторон.
Изменение связанных полей слева и справа
Чтобы настроить связанное поле с левой и правой стороны, щелкните значок 
и измените значение.
Изменение поля с каждой стороны
Чтобы по отдельности настраивать левое, правое, верхнее и нижнее поля, щелкните значок 
, а затем введите значения.
Повысьте свою производительность с помощью сеток
Теперь, когда вы знаете, как задавать предпочтения для своих сеток, читайте дальше, и вы узнаете, как добавлять цвета сетки и управлять их видимостью.
Добавление цветов
Вы хотите изменить внешний вид сеток? Используйте палитру цветов в инспекторе свойств, чтобы добавить и изменить цвет сетки.
A. Цветовое поле B. Ползунок цвета C. Пипетка
Нажмите на поле рядом со значением Размер квадратов для квадратных сеток и Столбцов для макетных сеток.
Из палитры цветов вы можете:
- Настроить цвет, используя поле «Цвет» и шкалу цвета.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
- Установить непрозрачность заливки с помощью шкалы цвета или ввести значение в процентах. Если вы зададите значение 0, сетка макета переключится на отображение в контуре.
Скрытие и показ сеток
Вы можете контролировать видимость макетных и квадратных сеток с помощью параметра Скрыть макетные/квадратные сетки или показать макетные/квадратные сетки.
Скрытие сетки макета
- Выберите Вид > Скрыть сетку макета. Вы также можете в macOS использовать сочетание клавиш Command + Shift + ', чтобы скрыть макетные сетки.
- В инспекторе свойств выберите тип сетки из выпадающего списка Сетка и установите рядом с ним флажок. Вы также можете в Windows использовать сочетание клавиш Ctrl + Shift + ", чтобы скрывать макетные сетки.
Показ квадратной сетки
- Выберите Вид > Показать квадратную сетку. Вы также можете в macOS использовать сочетание клавиш Command + ' , чтобы скрыть макетные сетки.
- В инспекторе свойств выберите тип сетки из выпадающего списка Сетка и установите рядом с ним флажок. Вы также можете в Windows использовать сочетание клавиш Ctrl + ", чтобы показать квадратные сетки.
Видео: как добавлять направляющие и макетные сетки?
«При работе над проектами дизайна используйте направляющие, которые помогут вам выстроить объекты в ряд, или убедитесь, что элементы расположены правильно», — говорит Ховард Пински (Howard Pinsky), старший ИТ-евангелист XD.
Советы и рекомендации
- Чтобы привязать объект к макетной или квадратной сетке, перетаскивайте объект в сторону сетки, пока один из краев объекта не окажется в зоне привязки сетки.
- Направляющие привязываются к выбранным объектам или объектам верхнего уровня, нарисованным на холсте. Чтобы отключить привязку, нажмите ⌘ (на macOS) или Ctrl (на Windows).
- Чтобы разместить направляющую с шагом в 10 пикселей на холсте, нажмите клавишу Shift.
- Чтобы вернуться к стандартной квадратной или макетной сетке, нажмите Использовать по умолчанию в разделе «Сетка» инспектора свойств.
Что дальше?
Мы научили вас размещать и выравнивать объекты на монтажных областях с помощью направляющих и сеток. Сделайте следующий шаг и научитесь пользоваться повторяющимися сетками для создания объектов с повторяющимися элементами.
Есть вопрос или идея?
Adobe MAX
— творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн
Adobe MAX
Творческая конференция
С 14 по 16 октября очно в Майами-Бич и онлайн