Adobe xd создание сайта
Обновлено: 19.05.2024
Посмотрите, как перевести свои дизайн и прототипы Adobe XD в живые, полностью функциональные веб-сайты.
Мне нравится способность Webflow преобразовывать мои веб-проекты во что-то особенное — не требуя от меня кодирования. Но прежде чем произойдёт какое-либо из этих преобразований, большинство дизайнеров работают в своём дизайнерском инструменте. Для меня — это Adobe XD. Давайте рассмотрим, как я перехожу от слоёв к divs.
Проектирование с опытом
Прежде чем приступить к проектированию следующего веб-сайта технологичной компании “единорога”, я хочу продумать компоненты, страницы и сценарии, которые мне нужно будет спроектировать. Каждый шаг из XD легко смоделировать в Webflow.
Я разбиваю дизайн своего веб-сайта на пять разделов:
1. Система
Здесь я создаю свою систему дизайна, всё в одной монтажной области, включая элементы брендинга, такие как:
Также, я включаю больше веб-ориентированных элементов:
- CTAs (кнопки и/или текстовые ссылки)
- Компоненты (карточки, основные разделы, формы, и т.д.)
- Символы (повторяющиеся элементы, такие как глобальная навигация и футер)
Это позволяет мне подумать о том, на чём я хочу создать свой сайт. Как только я спроектировал всё это, я сохраняю их в панели Assets (Ресурсы), XD.
ПАНЕЛЬ ASSETS — ВАШ ДРУГ
Когда я запускаю какой-либо проект, я делаю мудборд в качестве основы для моей системы дизайна. Я добавляю свой логотип, цвета, иконки и заголовки, уровней от h1 до h6.
Затем выберите цвета или стиль знаков (или, любую монтажную область, целиком), откройте панель Assets и щелкните иконку плюс, рядом с соответствующим типом ресурсов. Это добавит все ваши цвета и/или стили текста в панель ресурсов, что значительно упростит их применение к вашему дизайну.
Не верите мне? Вот GIF:
В Webflow я выполняю те же действия. Добавляю семейство шрифтов и глобальные цвета, а также загружаю изображения в панели ресурсов, прежде чем я сделаю что-нибудь ещё. Этот раунд выполнен на высоте. Вот как выбирать и добавить шрифты Google.
После добавления, я настрою свой h1-h6, текст body и paragraph.
Вот как я создаю глобальные цвета:
GIF показывающая действия по добавлению глобальных цветов.
- Создайте div (не задавайте ему название класса)
- Задайте цвет фона
- Сохранить цвет как глобальный образец
Повторите это для каждого цвета бренда. Я предлагаю загружать все сразу, прежде чем вы начнете свой проект. У Adobe, есть удобная классификация о том, как экспортировать ресурсы дизайна или монтажных областей.
2. Карта сайта
Здесь я создаю карту сайта, отображающую все необходимые страницы и иерархические взаимоотношения между ними. Это помогает мне увидеть, сколько монтажных областей мне понадобится в последующих трёх разделах.
3. Варфрейм (wireframe)
Вайфрейминг (wireframing), помогает мне настроить контент и определить изменяемый пользовательский опыт сайта, пока я всё ещё работаю в XD. Здесь я создаю каждый контейнер (container), строку (row) и div, а затем группирую их, чтобы облегчить переход в Webflow.
Другими словами: Я стараюсь всегда думать с точки зрения модели коробки в Интернете, поэтому стараюсь соотносить макет и веб-сайт, один в один, насколько это возможно.
МАКЕТ МОНТАЖНОЙ ОБЛАСТИ
Затем я хочу настроить макет на своих монтажных областях. Я использую параметры, которые мне нужны для данного проекта веб-сайта, впрочем мои по умолчанию — 1200px с 15 колонками. Для этого выделите монтажную область и выберите необходимый макет на панели свойств.
Повторить это в Webflow довольно легко. Проверьте этот шаблон Webflow — клонировать его будет отличным способом узнать, как настроить свой сайт.
4. Высокая точность (Hifi)
Вот где я начинаю применять элементы моей системы к своему вайрфрейму, формируя визуализацию скелета на уровне производства.
Затем я прервусь, чтобы выполнить некоторое волшебство. Нет, я не сделаю вас невидимым — видел, что это делают с людьми.
525,600 минут в год. В каких единицах измерения, вы измеряете год?
С повтором сетки. Вы сэкономите много времени.
Дизайн — это повторение. Вот почему так здорово брать что-то вроде слоёв изображений, повторяющихся сеток и просто дублировать их — снова и снова. Ох, и снова. Что на самом деле не так долго.
Большая часть? Она поможет вам моделировать проекты, которые вы создадите в Webflow, используя Collection Lists (Списки коллекций).
5. Прототип
На этом заключительном этапе я начинаю применять набор инструментов для создания прототипов XD, чтобы связывать страницы, добавить переходы и состояния, а также отполировать предварительный просмотр, прежде чем я воплощу его в жизнь с помощью Webflow. Этот последний шаг является необязательным, но помогает поддерживать соотношение “один в один” между макетами и сайтом, о которых я упоминал ранее, и он отлично подходит, чтобы проиллюстрировать ценности клиентам, если это необходимо.
Возвращаемся обратно к Webflow
Завершающим этапом данного процесса является, конечно же, перенос всей своей работы из XD в Webflow. Следуя описанным здесь шагам, вы убедитесь, что вы идёте к успеху — даже на этапе быстрой разработки — в Webflow.
С легкостью готовьте и публикуйте проекты веб-сайтов с помощью Adobe XD. Создавайте динамичные макеты, разрабатывайте интерактивные элементы, делитесь прототипами для получения отзывов и передавайте материалы на последующий этап — и всё это в одном инструменте.
ПРЕИМУЩЕСТВА
Практическая реализация проектов
Создавайте интерактивные проекты веб-сайтов, которые будут выглядеть как настоящие уже через несколько секунд. Используйте наборы элементов интерфейса и предварительно подобранных параметров монтажной области, а также импортируйте имеющиеся разработки веб-сайтов из Photoshop или Sketch.
Быстрота работы и простота использования всех функций
Работайте оперативно благодаря интуитивно понятному интерфейсу, высокой производительности и встроенным инструментам для совместной работы. Любой сможет работать в XD так, как ему удобно, независимо от уровня навыков.
Создание реалистичных прототипов
С помощью интерактивных прототипов легче реализовывать идеи. Не стройте догадки, согласовывайте всё с заинтересованными сторонами и впечатляйте клиентов — больше не придется тратить время на статические файлы PDF и вложения электронной почты.
Преимущества Creative Cloud
Работайте слажено, используя Photoshop и Illustrator. Получите доступ к ресурсам для разработки от Adobe Fonts и Adobe Stock. Показывайте свои проекты и ищите вдохновение в Behance. XD — это единственное программное обеспечение для разработки веб-сайтов в составе Creative Cloud.
ВОЗМОЖНОСТИ
Мощные функции
Программное обеспечение XD позволит вам воплотить идеи в жизнь. Оно включает все инструменты, необходимые для разработки красивых интерактивных проектов. Создавайте современные веб-сайты и следите за новыми возможностями.
Content-Aware Layout
Безо всяких усилий адаптируйте компоненты для экранов различных размеров. Настройте масштабирование кнопок на основе меток. Функция Content-Aware Layout автоматически настраивается в ходе разработки, что позволяет выполнять нужные действия без утомительной ручной работы. Подробнее
Воспроизведение видео и анимаций Lottie
Импорт и рендеринг анимаций. Внедрение воспроизводимых видеоклипов в ваши проекты. Создание ярких и реалистичных прототипов с движением.
Компоненты и состояния
Создавайте элементы конструкции и при необходимости повторно используйте их. Применяйте различные интерактивные функции к одному компоненту и мгновенно вносите изменения в нескольких системах. Подробнее
Auto-Animate
Добавляйте в прототипах эффекты движения, интерактивные элементы и плавные переходы без написания кода и использования специальных инструментов. Функция Auto-Animate позволяет определить различия между монтажными областями и построить изображение с эффектом движения. Подробнее
Готовы начать работу с XD?
ПЛАГИНЫ
Совершенствование проектов с помощью плагинов
Откройте для себя новые функции и инструменты веб-дизайна благодаря плагинам XD. Выбирайте из более чем 300 плагинов, которые выводят веб-дизайн на новый уровень. Импортируйте готовые изображения, создавайте проекты в соответствии с требованиями к специальным возможностям, экспортируйте их в формат HTML — на каждом этапе работы над проектом вы сможете найти подходящий плагин.
Создавайте интерактивные прототипы и экспортируйте коды.
Экспортируйте проекты для совместной работы и передавайте их командам разработчиков.
Автоматизируйте локализацию текста в проектах по веб-дизайну.
Lorem Ipsum
Вставляйте в проекты замещающий текст Lorem Ipsum.
Создавайте проекты с учетом специальных возможностей с помощью средств проверки контрастности и генераторов нечувствительности к цвету.
Quick Mockup
Используйте готовые элементы интерфейса и шаблоны для создания макетов в различных стилях.
Часто задаваемые вопросы
С помощью лучшего программного обеспечения для разработки вы сможете создавать красивые веб-сайты, каким бы ни был ваш уровень навыков. В зависимости от цели может потребоваться использование нескольких инструментов. Adobe XD объединяет все возможности различных средств для разработки веб-сайтов в одном уникально мощном инструменте. XD предлагает функции и предварительно настроенные шаблоны, которые предназначены специально для разработки профессиональных дизайнов веб-сайтов. Вы можете работать с сетками макетов, стеками, интеллектуальным заполнением, якорными ссылками и другими объектами.
Специализированное программное обеспечение позволяет разработчикам создавать и настраивать дизайн веб-сайтов. Инструменты разработки веб-сайтов помогают воплотить в жизнь замысел и показать, как он будет выглядеть и работать, своим коллегам, клиентам и другим заинтересованным сторонам.
Большинство инструментов для веб-дизайна предлагают средства векторного рисования для создания макета и оформления веб-сайтов. Для некоторых инструментов разработчикам необходимо использовать встроенные шаблоны и перетаскиваемые элементы. Инструменты веб-дизайна позволяют создавать макеты страниц, применять цвета и оформление, а также добавлять значки и изображения.
Такие инструменты, как Adobe XD, предлагают функции создания прототипов, которые позволяют превратить статический дизайн в интерактивный прототип с реалистичным моделированием активного веб-сайта.
Некоторые средства разработки являются универсальными, позволяя создавать веб-сайты и управлять рабочими процессами и совместной работой с заинтересованными сторонами. Универсальные инструменты дают возможность делиться проектами для сбора отзывов и комментариев, а также подготавливать материалы для передачи разработчикам. После этого материалы преобразуются в формат HTML/CSS для последующей интеграции в производственную среду.
Adobe XD — это специально созданный векторный инструмент для разработки дизайна и прототипов. Он выпущен мировым лидером в области разработки креативных приложений. Adobe XD имеет надежный и интуитивно понятный интерфейс для разработчиков с любым уровнем навыков. XD позволяет создавать профессиональные дизайны веб-сайтов и интерактивные прототипы, делиться проектами для получения отзывов и комментариев, а также передавать их разработчикам.
Adobe XD — это интуитивно понятное и простое в использовании универсальное программное обеспечение для дизайна веб-сайтов, предназначенное для разработчиков с любым уровнем навыков. Adobe предлагает бесплатные обучающие инструменты для начинающих разработчиков, которые помогут научиться создавать веб-сайты с помощью XD. Вы можете воспользоваться ресурсом Let’s XD, чтобы получить подробную информацию и узнать, как специалисты используют XD для создания профессиональных интерактивных веб-сайтов.
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, а затем перетащите, чтобы временно отключить умные направляющие.
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
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. Просто щелкните внутри окна, чтобы добавить новый пустой экран. Для разных проектов вы можете создать любой другой шаблон экрана, с точными размерами вашего целевого устройства .
Если вы кликните по логотипу 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 (Вертикальная). Затем растяните нижнюю часть вашего артборда до нужного вам размера. Готово! Чтобы просмотреть прокрутку воспользуйтесь окном предварительного просмотра.
ФИКСИРОВАННЫЕ ОБЪЕКТЫ
Совет. Убедитесь, что фиксированные элементы находятся в верхних слоях вашего макета, так что они не перекрываются прокручиваемыми объектами. Перейдите в меню 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.
Читайте также: