Как копировать в adobe xd
Adobe Experience Design (Adobe XD) — одна из последних новинок от компании Adobe, призванная стать конкурентом полюбившемуся всем дизайнерам интерфейсов Sketch.app.
Имея в своем арсенале схожие со Sketch.app функции, а также все возрастающее количество UI-китов, пригодных для использования в Adobe XD, в скором времени эта программа может перетянуть на себя значительную часть пользователей, которые или еще не слезли с Photoshop и создают веб-проекты в нем или еще только выбирают подходящую под свои задачи программу.
Эта статья познакомит вас с 10 полезными хитростями, которые помогут сэкономить массу времени при освоении программы Adobe XD, а также ответит на вопросы, которые, вполне вероятно, возникали у вас в процессе работы с ней.
Наследование настроек текста
Когда вы выбираете инструмент «Текст» и начинаете печатать, то XD по умолчанию использует стандартный стиль текста. Однако, если у вас есть стиль, который вы бы хотели скопировать, просто кликните по объекту инструментом выделения. Затем переключитесь на инструмент «Текст» и либо кликните курсором, чтобы установить точку ввода текста, либо перетащите копируемый объект в область ввода текста. Текст, который вы напечатаете после этого будет наследовать скопированный, в том числе шрифт, междустрочный интервал и интервал между символами.
Замыкание кривой
Как правило, редактировать кривую в Adobe XD очень легко— просто кликните и добавьте точку в любом месте, когда у вас выбран инструмент «Перо». Однако, вы также можете замкнуть кривую, нажав на начальную точку. Если вы хотите замкнуть кривую закруглением, кликните и перетащите ее. И, конечно, как насчет этой начальной точки? Удерживайте нажатой клавишу Cmd, если вы работаете в Mac или клавишу Ctrl, если работаете в Windows 10, когда вы нажимаете и перетаскиваете эту начальную точку, чтобы переместить ее, без присоединения.
Реалистичное размытие фона
С функцией размытие фона теперь вы можете создавать реалистичное размытие фона, которое ваши разработчики смогут дублировать. Некоторые из самых популярных прототипов, которыми я поделилась связаны с регулировкой эмуляции настроек iOS: Dark, Light и ExtraLight.
- Dark: Размытие 25, Яркость 0, Непрозрачность 55%
- Light: Размытие 30, Яркость 15, Непрозрачность 0%
- ExtraLight: Размытие 24, Яркость 40, Непрозрачность 50%
Конвертирование базовых объектов в кривую
Вместо того, чтобы создавать свои иконки с нуля, часто легче начать с простых фигур, таких как прямоугольник или овал. Чтобы преобразовать ее в кривую, просто дважды кликните по простой фигуре, для ее конвертации. (Если вы не внесете никаких изменений, она вернется в исходное состояние.) Если по какой-то причине вы хотите убедиться, что ваши объекты остаются кривой несмотря ни на что, используйте Cmd+8 на Mac или Ctrl+8 на Windows 10, чтобы конвертировать объект в кривую. Если вы находитесь на границе фигуры, ваш курсор изменится на «Перо», чтобы добавить точку вдоль линии. Вы даже можете разорвать существующую фигуру, выбрав инструмент «Перо» и нажав на начальную точку.
Перемещение с помощью инструмента «Рука»
Мне часто задают вопросы об инструменте «Рука». Все очень просто: удерживайте нажатой клавишу Space, чтобы временно преобразовать ваш текущий инструмент в инструмент «Рука». Затем нажмите левую клавишу мыши и перетащите курсор для перемещения по холсту. Еще один совет от профи — если вы работаете на ноутбуке с трекпадом или используете Magic Mouse, вы можете провести двумя пальцами по экрану, чтобы перемещаться по холсту.
Сочетания клавиш для быстрого выбора цвета
Это из наших недавних и любимых нововведений. В прошлом году мы добавили поддержку шестнадцатеричных цветовых значений. Вы можете напечатать любое шестнадцатеричное значение, чтобы оно повторялось для всех шести значений.
Создание дубликата vs. Копировать и вставить
На наших форумах нас часто спрашивают, зачем в нашей программе есть команда «Создать дубликат», когда есть функции Копировать» и «Вставить». Суть в том, что при дублировании объект помещается на тот же уровень по Z-координате, в то время как «Копировать» + «Вставить» переместит его вверх по Z-координате. Это важно помнить, когда вы работаете над сложными файлами! Вы также можете использовать функции «Копировать» + «Вставить», чтобы перемещать объекты по группам.
Экспорт исходников
Экспорт ресурсов является важной частью рабочего процесса дизайнера, особенно при передаче разработчикам. Наш экспортный процесс учитывает, что ресурсы разных размеров являются важной частью современного дизайна графического интерфейса пользователя.
По умолчанию XD будет экспортировать с различным разрешением, в зависимости от платформы. Например, если вы экспортируете для iOS, вам понадобятся 1x, 2x, и 3x версии ресурсов. Если вы создаете иконку в разрешении 100 x 100 и установите «designed at 1x», мы будем экспортировать версии 100 x 100, 200 x 200 и 300 x 300 для полного набора. Однако, если вы создадите иконку в разрешении 90 x 90 и установите «designed at 3x,» мы будем экспортировать в 30 x 30, 60 x 60, и 90 x 90 для создания 1x, 2x, и 3x версий.
Управление редактированием контекста
До того, как мы создали панель слоев, единственным способом обойти это было возможно, используя редактирование контекста. Группы и повторяющиеся сетки (repeat grids) – очень мощные функции, которые вы можете использовать для выравнивания, выделения и повторения. Часто, я использую вложенные группы для работы с чем-то вроде сложной панели пиктограмм, содержащей такие элементы как иконки, текст и фон. В этом случае иконка представляет собой группу, и эта группа находится на том же уровне, что и текстовый элемент, и прямоугольник. Несколько концепций, которые я обычно выделяю в советах:
Прямое выделение. Обычно люди спрашивают, где инструмент «Прямое выделение», и ответ таков: он встроен прямо в инструмент выделения! Удерживайте нажатой клавишу Cmd (Mac) или Ctrl (Windows 10) чтобы выбрать объект, вне зависимости от того, как глубоко от вложен.
- Открытие редактирования контекста.Вы можете открыть редактирование контекста прямо в группе или повторяющейся сетке двойным щелчком по любому объекту внутри них. Теперь внутри редактирования контекста, можно манипулировать со всеми объектами в нем (например, выделять и выравнивать по отношению друг к другу).
- Закрытие редактирования контекста.Теперь, когда вы в редактировании контекста, вы можете нажать Escape, чтобы выйти из него.
Этот набор функций позволяет легко перемещаться между группами, без необходимости искать их на панели слоев. Сосредотачивая свою работу на холсте, вы можете видеть вещи в контексте всего дизайна.
Если вам понравились эти советы и хитрости по некоторым наименее известным функциям Adobe XD, посмотрите мой подробный разбор Repeat Grid – одной из самых популярных функций нашего продукта.
Хотите больше публикаций подобного рода? Ставьте лайки, делайте репосты, и напишите мне (или в комментариях, или в Twitter) какую тему вы хотите, чтобы я подробно разобрала в следующий раз!
Автор: Элейн, продакт-менеджер в компании Adobe
Источник: sketchapp.me
Группируйте, блокируйте, дублируйте, зеркально отражайте и копируйте объекты в Adobe XD.
Можно объединить несколько объектов в группу, чтобы работать с ними как с единым целым. Затем можно переместить или трансформировать группу объектов, не влияя на их атрибуты или относительное расположение. Например, можно сгруппировать объекты в структуру логотипа, чтобы перемещать и масштабировать логотип, как единое целое. Вы можете разгруппировать группу, чтобы вернуться к управлению редактированием для отдельных компонентов.
Вы также можете редактировать свойства заливки и обводки для всех объектов в группе на уровне группы.
Группы также могут быть вложенными. Их можно сгруппировать внутри других объектов или групп для формирования более крупных групп.
Выделите объекты, которые нужно сгруппировать, или группу, которую нужно разгруппировать.
В системе Mac: выберите Объект > Группировать или Объект > Разгруппировать в главном меню или выберите Группировать или Разгруппировать в контекстном меню.
В системе Windows: выберите объекты для группирования или разгруппирования, щелкните их правой кнопкой мыши и выберите Группировать или Разгруппировать в контекстном меню.
Вы также можете группировать объекты на панели «Слои». Дополнительные сведения о слоях см. в разделе Работа со слоями.
Выбор объектов в группе или в нескольких группах
Обычно вы можете выбрать объект, просто щелкнув по нему. Когда объект является частью группы, при щелчке по объекту выделяется вся группа.
Чтобы выбрать объект в группе, щелкните его дважды или щелкните его один раз, удерживая нажатой клавишу Cmd / Ctrl.
Чтобы выделить объекты в нескольких группах, используйте сочетание Cmd/Ctrl+Shift+щелчок для добавления объектов к выделению независимо от того, в какие группы они входят. После выбора объектов вы можете легко изменить их общие атрибуты в инспекторе свойств , а также сгруппировать, заблокировать, переключить их видимость и т. д.
Блокирование объектов не позволяет выделять и редактировать их.
- В системе Mac: выберите объект и нажмите Объект > Блокировать . Или щелкните правой кнопкой по выбранному объекту и выберите Блокировать в контекстном меню.
- В системе Windows: щелкните правой кнопкой по выбранному объекту и выберите Блокировать в контекстном меню.
Когда объект заблокирован, на нем появляется значок блокировки при его выборе.
Чтобы разблокировать объекты, выделите их и нажмите значок блокировки или выберите Объект > Разблокировать .
Вы также можете использовать параметры блокировки/разблокировки на панели Слои .
Выделите один или несколько объектов. Удерживая нажатой клавишу Option (Mac) или Alt (Windows), перетащите объекты (но не за маркер на ограничительной рамке). В системе Mac вы также можете выбрать Правка > Дублировать , чтобы дублировать объект.
Вы можете выбрать объект или группу объектов, скопировать (Ctrl + C или Cmd + C) и вставить их (Ctrl + V или Cmd + V) на несколько монтажных областей. Когда вы вставляете их, XD автоматически размещает их в той же позиции X и Y, где находился исходный объект. Эта функция особенно полезна при копировании верхних и нижних колонтитулов на нескольких монтажных областях.
Если монтажная область выбрана, но отсутствует в области просмотра, XD не сможет выполнить вставку на эту монтажную область.
Вы также можете скопировать стиль объекта и вставить этот стиль на другие объекты или текстовые элементы в вашем проекте. Скопируйте объект, щелкните другой объект правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу Ctrl (Mac), и выберите Вставить оформление . Будет скопировано и вставлено только форматирование объекта.
Используйте функцию зеркального отражения объектов или элементов для более быстрого и точного проектирования на холсте. Вы также можете переключаться между вертикальным и горизонтальным отражением и просматривать перевернутые объекты во всех форматах отображения, таких как предварительный просмотр, мобильный телефон и браузер.
XD поддерживает сочетания клавиш, которые позволяют ускорить работу с документами. Многие сочетания клавиш указаны в меню рядом с названием команды.
Скачайте и распечатайте удобную для печати версию этих сочетаний клавиш.
Щелкните для скачивания.
В XD представлен новый плагин, который позволяет вам просмотреть все сочетания клавиш. Чтобы установить этот плагин, выберите «Плагины > Сочетания клавиш > Установить». После установки плагина используйте следующие сочетания клавиш для доступа к сочетаниям клавиш клавиатуры.
- Mac: Shift + Cmd + f
- Windows: Shift + Ctrl + f
Сочетание клавиш в macOS
Сочетание клавиш в Windows
Меню | Сочетание клавиш в macOS | Сочетание клавиш в Windows |
---|---|---|
Отменить | Cmd + Z | Ctrl + Z |
Повторить | ⇧ + Cmd + Z | Ctrl + Shift + Z |
Вырезать | Cmd + X | Ctrl + X |
Копировать | Cmd + C | Ctrl + C |
Вставить | Cmd + V | Ctrl + V |
Вставить оформление (в режиме оформления) и Вставить взаимодействие (в режиме прототипа) | Cmd + Alt + V | Ctrl + Alt + V |
Дублировать | Cmd + D | Ctrl + D |
Удалить | ⌫ | Удалить |
Выделить все | Cmd + A | Ctrl + A |
Отменить все выделения | ⇧+ Cmd + A | Ctrl + Shift + A |
Меню | Сочетание клавиш в macOS | Сочетание клавиш в Windows |
---|---|---|
Создать | Cmd + N | Ctrl + N |
Открыть. | Cmd + Shift + O | Ctrl + Shift + O |
Закрыть | Cmd + W | Alt + F4 |
Сохранить. | Cmd + S | Ctrl + S |
Сохранить как. | ⇧+ Cmd + S | Ctrl + Shift + S |
Сохранить как локальный документ | Alt + Shift + Cmd + S | Shift + Ctrl + Alt + S |
Экспортировать пакет | Shift + Cmd + E | Ctrl + Shift + E |
Экспортировать выделенное | Cmd + E | Ctrl + E |
Экспортировать в интегрированное стороннее приложение (если приложение, интегрированное с XD, установлено на вашем компьютере) | Alt + Cmd + E | Недоступно |
Импортировать | Shift + Cmd + I | Ctrl + Shift + I |
Меню | Сочетание клавиш в macOS | Сочетание клавиш в Windows |
---|---|---|
Переключиться на инструмент «Перо» | P | P |
Точка преобразования | Двойной щелчок | Двойной щелчок |
Ассиметричная контрольная точка | Alt | Alt |
Привязать угол контрольной точки | Shift | Shift |
Привязать угол опорной точки | Shift | Shift |
Суммировать | Alt + Cmd + U | Ctrl + Alt + U |
Вычесть | Alt + Cmd + S | Ctrl + Alt + S |
Пересечь | Alt + Cmd + I | Ctrl + Alt + I |
Исключить наложение | Alt + Cmd + X | Ctrl + Alt + X |
Преобразовать в контур | Cmd + 8 | Ctrl + 8 |
Adobe XD является одним из самых используемых бесплатных инструментов для UI / UX дизайна, а также прототипирования в сфере мобильного дизайна. Как часть Adobe Creative Cloud, eXperience Design предлагает интуитивно понятный интерфейс и множество опций. Вы сможете создавать и тестировать свои проекты когда полностью ознакомитесь с интерфейсом приложения.
Эта статья поможет вам понять потенциал Adobe XD и начать собственный дизайн-проект для Android и iOS. Это займет у вас не больше часа ! Adobe XD доступен как для Windows, так и для Mac OS.
Мы будем следовать официальному руководству Adobe XD, добавляя некоторые комментарии, советы и дополнительные шаги, чтобы прояснить применяемость данного инструмента. В конце концов, мы применим почти все аспекты данного программного обеспечения. Конечно, достаточно просто прочесть эту статью, чтобы что-то понять, но будет ещё лучше, если вы будете следовать учебному курсу, одновременно используя программу.
Начиная с Adobe XD
Загрузить бесплатную версию XD можно с официального сайта Adobe. После того как вы откроете программу, вы найдете различные шаблоны дизайна для новых проектов.
В следующей статье я создам новый проект с нуля . В этом случае я буду использовать учебник XD, чтобы показать его характеристики.
- Для панорамирования : используйте ваш трекпад, или нажмите пробел+мышь, или нажмите колесико мыши.
- Для увеличения : коснитесь двумя пальцами трекпада, или Ctrl(Cmd)+колесо мыши, или Ctrl(Cmd)+(+/-). Приблизить выбранный элемент, нажмите Ctrl(Cmd)+3.
- Для выбор : используйте клик левой кнопкой мыши. Выбор группы внутри прямоугольной области: щелкните и перетащите.
Используйте эти простые параметры навигации, чтобы увеличить масштаб экрана проекта, и вы увидите что-то вроде этого:
Данное учебное руководство создано таким образом, чтобы вы могли закончить приложение Campvives от Talin Wadsworth. С этого момента вы можете приступать к обучению. Я всё объясню и добавлю некоторые упражнения, чтобы охватить основные свойства XD.
1. ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР ТЕКУЩЕГО ПРОЕКТА
Предварительный просмотр будет нашим основным экраном прототипа в Adobe XD. Здесь мы имеем возможность протестировать приложение, понажимать кнопки, проверить различные экраны и переходы.
Совет: При изменении чего-либо в рабочей области, экран предварительного просмотра будет автоматически обновляться . Попробуйте открыть проект на втором экране, чтобы увидеть изменения в реальном времени!
Конечно, предварительный просмотр не является функциональным приложением . Он отображает только пользовательский интерфейс (UI), который мы задаем в нашей рабочей области, перемещаясь между различными экранами в соответствии со связями прототипа. Тем не менее, это хороший пример того, как будет выглядеть дизайн в конечном варианте , и насколько успешно происходит взаимодействие пользователя с приложением.
Совет. Сделать скриншот или записать экран, чтобы поделиться своим проектом в процессе разработки (Cmd+Shift+5 для Mac или Windows+G для Windows 10). Лучший способ поделиться прототипом приложения, мы узнаем в последней главе .
2. СОЗДАНИЕ ЭКРАНА ЗАСТАВКИ (splash screen)
Обратите внимание, что в верхнем левом углу рабочей области есть две вкладки: Design и Prototype (Дизайн и Прототип) . По умолчанию проект открывается на вкладке Design, которая используется для создания и изменения визуальных свойств пользовательского интерфейса (UI).
Выберите инструмент Artboard (Монтажная область) на панели инструментов слева (или горячей клавишей A) , и вы увидите, что панель параметров справа, изменится, отобразив различные шаблоны оформления, соответствующие наиболее часто используемым устройствам.
В нашем случае, проект создаётся для монтажных областей iPhone 6/7/8. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства .
Смените имя в левом верхнем углу экрана, дважды щелкнув по нему. Переименуйте проект в «Splash».
Теперь выберите инструмент Selection (Выделение) на панели инструментов (слева или горячей клавишей V) , и перетащите логотип на экран заставки. Теперь щелкните по имени («Splash») или дважды щелкните по экрану заставки. Мы можем изменить фон в параметрах Appearance (Внешний вид) в правом меню. Появится общее окно выбора цвета. Здесь можно отметить несколько возможностей:
- Сохранение цветов . Мы можем сохранить любой из цветов для последующего использования, нажав клавишу +. Для того, чтобы удалить цвет из палитры проекта, просто перетащите его за пределы окна.
- Использование градиентов . Кликнув по вкладке «Solid Color» (Сплошной цвет), вы откроете меню градиентов. Они пригодятся для создания фоновых градиентов.
- Пипетка . Используйте пипетку, чтобы захватить любой цвет на вашем экране.
Если вы кликните по логотипу Campvives, то увидите дополнительные опции Appearance. Здесь можно выбирать не только заливку, но и рамки любого изображения. В случае с фигурами, созданными в Adobe XD, доступно редактирование деталей границы. Это поможет вам изменить стиль брендинга вашего приложения, а также протестировать различные закруглённые или резкие формы.
ИЗМЕНЯЕМЫЙ РАЗМЕР И ПОЗИЦИОНИРОВАНИЕ
Возможно, вы могли заметить опцию Responsive Resize (Свободное изменение размера) , над вкладкой Appearance. Эта функция появились с обновления сентября 2018 года. Она позволяет объектам группы сохранять их размещение и масштаб при изменении размера группы .
Для более глубокого понимания того, как использовать Responsive Resize, я рекомендую вам потратить 4 минуты на просмотр официального видео от Adobe CC на Youtube.
В верхней части правого меню вы найдете несколько кнопок, для простого изменения размера и перемещения объектов. Они часто экономят время, когда определяют точные размеры или позиции на вашем макете. Другим вспомогательным инструментом является Grid (Сетка), которую вы найдете в нижней части правого меню при выборе имени артборда. Отобразите макет экрана или квадратную сетку, это поможет вам с пропорциями и позиционированием.
3. РАБОТА С ИЗОБРАЖЕНИЕМ ПРОФИЛЯ
В этом разделе мы покажем, как подгонять изображения под форму и как создавать собственные формы.
Вы можете перетащить в выбранную форму любое изображение, напрямую с вашего компьютера или из рабочего пространства Adobe XD. Изображение автоматически заполняет область соответствующую выбранной форме, просто дважды щелкнете по изображению, чтобы изменить его размер. На макете отобразится только часть изображения, которая расположена внутри формы.
Попробуем заменить наш прямоугольник на новый. Для того, чтобы удалить предыдущий прямоугольник, нажмите Del, либо щелкните правой кнопкой мыши + Del. Для того, чтобы создать новый, выберите инструмент Rectangle (Прямоугольник) в панели инструментов слева (или нажмите R) .
Выберите начальную точку для фигуры и перетащите мышь в противоположный угол. Для нового прямоугольника доступны следующие параметры, такие как: Fill (Заливка), Border (Рамка) или Shadow (Тень). Также, мы можем перетащить любую картинку, как мы это делали используя круглую форму.
Совет. Если вы выберете прямоугольник, вы заметите небольшие круглые точки вблизи его углов. Потяните за одну из круглых точек, расположенных рядом с углами вашего изображения, чтобы создать скругления формы . Делать кнопки, таким образом, очень просто!
Помимо инструмента Rectangle, вы также можете использовать инструменты Ellipse (Овал) (клавиша E), Line (Линия) (клавиша L) и Pen (Перо) (клавиша P) для создания свободных форм.
4. РАСТЯГИВАНИЕ СПИСКА ПОСТОВ БЛОГА
В этом разделе вы научитесь размножать сгруппированные сетки. Эта функция обычно используется для создания копий одной и той же структуры, например, при создании меню, записей в блогах или списков.
Просто выберите всю сетку и нажмите кнопку Repeat Grid (Повторить сетку) в правом меню. Сетка будет выделена пунктирными линиями зеленого цвета. Выберете и перетащить любую из точек границы сетки, чтобы расширить ее, повторяя все содержимое.
Пользуясь профессиональным советом этого урока, вы сможете быстро обновлять все изображения. Если вы пожелаете изменить какой-либо отдельный элемент сетки, Воспользуйтесь кнопкой Ungroup Grid (Разгруппировать сетку) .
5. ПОЗВОЛЬТЕ ПРОКРУТИТЬ ЭТО
Что делать, если мы хотим создать экраны прокрутки? На данный момент мы можем это сделать, но только для вертикальных направлений . Горизонтальная прокрутка пока ещё находится в разработке.
Просто выберите ваш артборд и измените параметр Scrolling (Прокрутка) на Vertical (Вертикальная). Затем растяните нижнюю часть вашего артборда до нужного вам размера. Готово! Чтобы просмотреть прокрутку воспользуйтесь окном предварительного просмотра.
ФИКСИРОВАННЫЕ ОБЪЕКТЫ
У вас может возникнуть желание зафиксировать некоторые объекты во время прокрутки, например верхнюю или нижнюю панель. Просто выберите нужные вам элементы и отметьте опцию «Fix position when scrolling» (Зафиксировать положение во время прокрутки) .
Совет. Убедитесь, что фиксированные элементы находятся в верхних слоях вашего макета, так что они не перекрываются прокручиваемыми объектами. Перейдите в меню Layers (Слои) в нижнем левом углу рабочей области (или нажмите сочетание клавиш Ctrl[Cmd]+Y), чтобы проверить это.
6. СДЕЛАЙТЕ ПРОЕКТ ИНТЕРАКТИВНЫМ
Пришло время узнать о режиме прототипирования . Начните с выбора вкладки Prototype (Прототип) в верхнем левом углу рабочей области.
Прототипирование позволяет связывать экраны между собой, чтобы просмотреть, как пользователи будут взаимодействовать с вашим приложением. Используйте окно предварительного просмотра, чтобы протестировать связи прототипа.
Каждый объект может быть связан с другим экраном. Пользуясь этим, вы сможете установить соединение, перетащив синюю стрелку до нужной точки другого экрана.
После создания соединений, вам будут доступны различные параметры:
- Trigger (Триггер). Он задаёт начало действия. При нажатии на объект это происходит по умолчанию. Вы можете установить задержку, чтобы экран, через некоторое время автоматически переключался в нужную точку на другом экране.
- Action (Действия). По умолчанию, действие, находится в режиме Transition (Переход). Эта функция помогает приложению сменить экран назначения. Другим параметром является Overlay (Наложение), он может использоваться для доступа к меню или неполным экранам на текущем экране. Позже мы рассмотрим Overlay (Наложение) более подробно. Последним действием является Previous Artboard (Предыдущий артборд), которое заставляет экран вернуться к предыдущему, когда происходят условия триггера.
- Destination (Место назначения). Это следующий экран, конец вашей синей стрелки.
- Animation (Анимация). Анимация создаёт эффект перехода между экранами. Вам доступны настройки интенсивности и продолжительности эффекта.
Создание оверлея меню
Чтобы создать всплывающее меню, вы должны создать новый артборд с прозрачным фоном. Вы можете изменить непрозрачность цвета фона во вкладке Appearance (Правое меню).
На этом артборде мы можем создать своё меню. Я рекомендую вам взглянуть на мою предыдущую статью, где вы сможете найти полезную информацию и ссылки, если вы хотите загрузить бесплатные элементы для вашего дизайна, такие как шаблоны меню или иконки.
Поскольку меню, которое мы разработали, не охватывает весь экран, мы можем использовать его по принципу наложения. Для этого нам просто нужно определить соединение в рабочей области Prototype, и выбрать действие Overlay.
7. СПОСОБ ПОДЕЛИТЬСЯ ПРОТОТИПОМ ЧТОБЫ ПОЛУЧИТЬ ОБРАТНУЮ СВЯЗЬ
Это заключительная глава небольшого вводного курса. До сих пор мы проверяли наш прогресс в окне предварительного просмотра на своём компьютере. Однако функция совместного доступа позволяет создать общедоступную или закрытую ссылку, чтобы открыть макет вашего приложения в браузере.
В этом случае может пригодиться официальная документация Adobe, узнайте больше о способах публикации здесь.
Совет. Когда вы публикуете превью своего приложения, отправьте ссылку по электронной почте, чтобы открыть непосредственно со своего смартфона . Вы будете тестировать свое приложение прямо с мобильного устройства!
8. ДОПОЛНИТЕЛЬНАЯ ГЛАВА: ЭКСПОРТ ВАШИХ ИЗОБРАЖЕНИЙ
Это одна из самых простых и важных частей вашей работы. Если вы хотите, чтобы кто-то использовал ваш дизайн интерфейса (UI design) при их разработке, вы должны экспортировать изображения в правильные форматы .
Adobe XD поддерживает экспорт отдельных изображений и всего экрана для устройств с различными характеристиками. Просто выберите выходные ресурсы, а XD сгенерирует файлы изображений в отдельных папках в соответствии с плотностью целевого экрана.
Вам доступен экспорт сразу всех экранов проекта, а так же возможность экспортировать определенные объекты из рабочей области.
Выводы
Вы должны были изучить основы Adobe XD следуя этим шагам. Программное обеспечение постоянно развивается, и каждое обновление приносит новые возможности, поэтому будьте в курсе последних событий.
Adobe XD — это очень простой, интуитивно понятный и вместе с тем мощный инструмент для создания интерфейсов приложений, а также проектирования и создания прототипов UI.
Adobe Experience Design — отличное приложение для UI / UX дизайнеров, среди всех прочих функций, оно предоставляет вам возможности как для разработки дизайна, так и для создания взаимодействия прототипа с переходами между монтажными областями. Вот список моих любимых советов и трюков, которые позволят вам использовать потенциал XD.
Вот 40-минутное видео, которое я сделал, а ниже вы найдете резюме:
Вы можете создавать простые макеты и вайрфреймы с помощью мобильного приложения Adobe Comp для iOS и Android. Преимущественно быстрое и интуитивное прототипирование с применением пальца или стилуса с множеством предопределенных жестов. Также легко создать вайрфрейм на встрече с вашим клиентом. Несмотря на то, что Adobe Comp не поддерживает экспорт в Adobe XD, вы можете экспортировать в Illustrator, а затем скопировать и вставить в Adobe XD для редактирования векторных фигур.
Если вы хотите передать растровые изображения между Photoshop и Adobe XD, просто сделайте выделение в Photoshop, а затем нажмите Cmd + Shift + c (скопировать все объединенные копии, которые отображаются при выделении), а затем нажмите Cmd + v в Adobe XD. Однако, вы также можете экспортировать векторные слои из Photoshop, щелкнув правой кнопкой мыши на слой и выбрав “Копировать SVG” и вставить в XD.
В Adobe XD вы можете включить сетку для монтажных областей с помощью горячих клавиш Cmd + ‘. По умолчанию сетка имеет значение 8 px, поэтому сдвиг Shift + стрелка влево / вправо не помещается в сетку. Нажмите на название монтажной области, чтобы выбрать её, и измените значение по умолчанию 8px на 10 пиксельную сетку, чтобы соответствовать значению сдвига. Сделайте это по умолчанию для дальнейших проектов.
Сейчас в Adobe XD, нет таких направляющих, как в Photoshop, тем не менее умные направляющие появляются при перетаскивании и обеспечивают более удобное позиционирование элементов. Однако иногда такое поведение по умолчанию может привести к нежелательной привязке. Просто нажмите Cmd, а затем перетащите, чтобы временно отключить умные направляющие.
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
Читайте также: