Как создать прототип в adobe xd

Обновлено: 06.01.2025

Узнайте, как создавать интерактивные прототипы, каркасы и графику с помощью XD.

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

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

Adobe XD хорошо интегрируется с Photoshop, Illustrator и After Effects.

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

Создание дизайна, прототипов и совместная работа в Adobe XD

Технологический процесс можно кратко описать с помощью следующих шагов.

Создание дизайна. Создавайте элементы макета дизайна, добавляйте монтажные области и импортируйте ресурсы из других приложений, таких как Adobe Illustrator, Adobe Photoshop и Adobe After Effects. Воспользуйтесь плагинами, чтобы автоматизировать повторяющиеся операции или части технологических процессов дизайнера, которые являются утомительными, сложными или рутинными.
Создание прототипа. Выберите объекты или монтажные области в своем дизайне и создайте взаимосвязи между монтажными областями.
Предоставление доступа. Как только ваш проект будет готов к рассмотрению, вы можете поделиться прототипами или спецификациями дизайна или экспортировать проект либо ресурсы для заинтересованных сторон.

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

Дизайн

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

Adobe XD упрощает совместную работу дизайнеров и рецензентов над общими прототипами. Как рецензент, вы можете работать с прототипами следующими способами:

Давайте сначала рассмотрим настройки и параметры ссылки прототипа.

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

A. Пригласить B. Настройки масштабирования C. Полноэкранный режим D. Поддержка и обратная связь E. Уведомления F. Настройки учетной записи

Приглашение: чтобы пригласить других заинтересованных лиц по ссылке прототипа, щелкните Пригласить . Когда вы приглашаете заинтересованное лицо, вы можете установить уровень доступа на Может просматривать или Может поделиться . Чтобы увидеть кнопку «Пригласить», вы должны войти в свою учетную запись Adobe.
Настройки масштабирования: чтобы увеличить или уменьшить прототип по ссылке, воспользуйтесь настройками масштабирования. Можно выбрать одно из стандартных значений: 25 %, 50 %, 75 %, 100 %, 150 %, 200 %. Либо использовать жест масштабирования щипком на сенсорной панели или зажать клавишу Cmd / Ctrl и прокручивать колесико мыши для масштабирования с меньшим шагом. Уровень масштабирования по умолчанию при открытии ссылок прототипа остается без изменений.
Полноэкранный режим: щелкните по значку полноэкранного режима, чтобы просмотреть прототип во весь экран. Чтобы выйти из полноэкранного режима, нажмите клавишу Esc .
Поддержка и обратная связь: если вам требуется помощь или вы хотите оставить отзыв, нажмите на значок в виде вопросительного знака.
Уведомления: чтобы просмотреть все действия/уведомления относительно принадлежащих вам прототипов, нажмите на значок в виде колокольчика.
Настройки учетной записи: чтобы увидеть данные своей учетной записи, щелкните по значку профиля.

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

На что следует обратить внимание

О том, как видео работает с другими взаимодействиями, см. Взаимодействия и воспроизведение видео.

Нажмите «Включить звук» в синем баннере в нижней части экрана

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

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

Чтобы создать более контролируемую среду для пользовательского тестирования для связанных прототипов, вы можете скрыть элементы перелистывания и навигации в веб-прототипе.

Для этого выберите при создании ссылок в XD Общий доступ > Настройки просмотра > Пользовательский просмотр > Показать элемент управления для навигации. Более подробную информацию см. в разделе Совместный доступ к прототипам.

Если элементы управления для навигации:

Элементы управления для навигации включены

A. Главный экран B. Предыдущая монтажная область C. Следующая монтажная область

Элементы управления для навигации отключены

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

Представление сетки

Представление сетки в прототипах и спецификациях дизайна облегчает быстрый переход к наиболее подходящей монтажной области для участников проекта или разработчиков.

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

A. Значок сетки с названием ссылки B. Свернуть панель комментариев

В представлении сетки вы можете:

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

Представление сетки

A. Количество комментариев на монтажной области B. Нажмите на значок связанного экрана, чтобы просмотреть связанные экраны C. Связанные экраны монтажной области First Cards

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

Необходимые условия

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

Вы можете войти, используя Adobe ID, или оставить гостевой комментарий. Чтобы войти в качестве гостя, щелкните Войти в систему как гость в верхней части панели. После появления подсказки о вводе имени введите имя и код CAPTCHA.

Вы можете оставить свои комментарии в разделе Написать комментарий. Используйте клавиши Enter или Shift + Enter для создания новой строки в поле для комментариев и клавиши Ctrl/Cmd + Enter для отправки добавленного комментария.
После добавления комментариев вы можете воспользоваться соответствующей опцией рядом с веткой комментариев для обработки, редактирования или удаления своих комментариев. При этом вы не можете редактировать или удалять комментарии, добавленные другими пользователями.
Воспользуйтесь кнопкой переключения Все комментарии на экране, расположенной в нижнем левом углу панели комментариев, чтобы создать одно представление списка комментариев, оставленных во всех монтажных областях. Переключатель включен по умолчанию для общей ссылки на спецификации дизайна или прототип.
Щелкните значок , чтобы скрыть комментарии или отметки , и воспользуйтесь значком для фильтрации комментариев по именам рецензентов, времени или статусу комментариев.
Синяя подсветка слева указывает на комментарии к текущей монтажной области. Щелкнув по группе комментариев, не относящейся к текущей монтажной области, вы переходите в соответствующую монтажную область, чтобы сначала ознакомиться с контекстом.
Цифра 3 в верхней части значка уведомления в правом верхнем углу панели комментариев указывает на неразрешенные комментарии в нескольких монтажных областях.

Функции комментирования

A. Меню приглашения B. Настройки масштабирования C. Полноэкранный режим D. Поддержка и обратная связь E. Уведомления F. Профиль пользователя G. Параметры меню для комментариев H. Фильтрация комментариев I. Скрыть комментарии J. Кнопка переключения «Все комментарии на экране»

Фильтрация комментариев

A. Фильтрация комментариев по рецензентам B. Фильтрация комментариев по времени C. Фильтрация комментариев по состоянию D. Очистка добавленного фильтра E. Просмотр добавленного фильтра

Вы также можете воспроизводить анимации или записи, которые являются частью любых совместных прототипов, и добавлять свои комментарии во время их воспроизведения.
Используйте @упоминание при добавлении комментариев в прототип, чтобы просмотреть список других рецензентов. Если вы используете эту функцию, другой рецензент получает почтовое уведомление, а также уведомление от приложения Creative Cloud для настольных ПК. При щелчке по уведомлению пользователь переходит по ссылке в соответствующую монтажную область.

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

Более подробную информацию см. в разделе Просмотр прототипов.

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

Откройте совместный прототип в мобильном браузере и используйте жест «щипок», чтобы открыть режим навигации.

Значок комментария появляется вместе с количеством комментариев к этому прототипу. Этот значок появляется только тогда, когда владелец включает возможность комментирования прототипа.

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

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

Игорь Музыкин, менеджер проектов студии мобильных технологий Anvics, написал специально для Нетологии статью о том, как создать прототип мобильного приложения за два часа и не упасть лицом в грязь. Статья для конкурса блога.

Первые варфреймы, схемы переходов, для мобильного приложения из 64 экранов заняли 16 часов моей жизни, 6 подходов по 2–3 часа. Раза три хотелось бросить уже это всё. Проработка интерфейса — занятие сколь интересное, столь и утомительное.

Конечно, было бы здорово, чтобы это занимало раза в три времени меньше. Мы в Anvics также исходим из того, что нам нужно показать визуализацию, максимально приближенную к финальной, но не в ущерб тому, что важные функции продукта будут забыты и не отражены.

Попробую дать читателям такую возможность. Напишу, какие сделал выводы из того, как сам готовился к проектированию и использовал Adobe XD: какие функции программы чаще других пускались в ход и что не стоит делать для первой проработки. Советы ниже в первую очередь даются в помощь руководителям проектов, диджитал-продюсерам, проектировщикам мобильных приложений из мира заказной разработки, когда нужно показать клиенту ваше видение проекта и согласовать набор хотелок.

Стадия 0. Черновик

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

Выбрать операционную систему, в контексте которой будете рисовать.
Распределить функции по разделам.

Когда определитесь, iOs или Android (выбор не всегда очевидный), не поленитесь узнать стандарты реализации функциональности выбранной платформы. Как хорошо, что разработчики ОС собрали эту информацию за нас. Ссылки на стайлгайды Apple и Google. В примере этой статьи был выбран Android-интерфейс.

Настало время мозгового штурма для расстановки разделов. Не вымещайте идеи сразу в XD — это ошибка. Лучшее начало — набросать экраны ручкой на бумаге. Это помогает быстро составить список функций и сориентироваться какие в проекте есть вложенности экранов. Отличное упражнение — в буквальном смысле расставляет по местам 90 процентов проекта.

Черновик. Боковое меню заменила нижняя навигация.

Стадия 1. Начинаем рисовать

К этой фазе мы подходим с общим знанием о вложенности функций и примерным представлением о переходах между экранами. Можно собирать прототип.

Далее опишу скорее не строгую последовательность действий, а дам список советов, к которым пришел пока работал над проектами.

От lo-fi к hi-fi. Речь о степени детализации и стилизации экранов прототипа. В самом начале проработки, как бы вам ни хотелось, постарайтесь не застревать на одном экране, доводя его до «идеала».

Я застревал, поэтому делал прототип столько, сколько получилось. А клиент, на согласованиях уровня идей (прототип именно их и отражает), не вдается в детали, ему важно увидеть что вы уловили смысл (проверено на нескольких заказчиках).

В режиме низкой детализации проще сосредоточиться на структуре приложения и том, как пользователи должны взаимодействовать с ним. Это важный шаг разработки, который заставляет тебя как проектировщика работать с определенным набором проблем, прежде чем вникать в вопросы цвета, стиля, вместо того, чтобы решать, была ли кнопка на правильном расстоянии от текста над ней (это ведь очень важно! Некрасиво же будет).

Метод прогрессивного джипега Артемия Лебедева говорит об этом же. Идет на пользу в условии ограниченного времени, в котором менеджер находится почти всегда. Скорее просто всегда. До демонстрации два дня и за предыдущие два вы сделали по ощущениям четверть? Найдите, где можно снизить уровень шлифовки. Например, не искать идеально подходящую по смыслу и теме иконку функции, а использовать один стандартный набор.

Наборы пользовательских интерфейсов. Чтобы клиент узнал в прототипе знакомые детали, берем на вооружение наборы элементов, с любовью сделанные несколькими дизайн-командами. Внутри Adobe XD есть ссылки на стандартные наборы, но им не хватает примеров использования элементов по стайлгайдам. Поэтому познакомлю с другими ресурсами, на которых остановился сам после отсмотра десятка пакетов:

Приложение On Shore. Еще удобнее брать целые экраны, убирая ненужное и добавляя нужное. Увидел этот шаблон слишком поздно, с ним варфреймы получились бы ещё стильнее. Прототип под iOS. . С примерами расположения элементов. Выручил меня неоднократно. Создан Great Simple Studio. — русскоязычный сайт об XD, с подборкой классических разделов мобильных приложений.

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

Не бойтесь использовать скриншоты. По тем же соображениям, что клиент не вдается детали. Отсмотр похожих приложений дает необходимое вдохновение для собственных идей. И если планируется лента новостей, а нравится реализация в приложении Meduza и вы поузнавали у разработчиков насколько сложно будет сделать также. Советую вставлять скриншоты, а клиенту устно объяснить замысел.

Тексты Lorem ipsum не создают проблем, хоть и кажутся дурацкими, в условиях ограниченного времени подходят для наших задач. Конечно, «боевые» тексты проекта лучше, но оставьте их на этап тюнинга. Чтобы рыба текста была интереснее, идите к Джулсу из Криминального чтива.

Включаем Prototype. Одноименный режим Adobe XD. В нем мы присваиваем элементам экраны действия, которые мы от них хотим получить. Стрелка «назад» возвращает на предыдущий экран, кнопка «сохранить» сворачивает клавиатуру и отправляет данные на сервер. Взаимодействия в XD тестируются окном предварительного просмотра (Cmd-Enter), которое дает достаточную обратную связь, чтобы убедиться, что приложение работает так, как мы того хотим.

Стадия 2. Спускаемся в детали

Как показала практика, результаты первой стадии достаточно фапабельны, чтобы презентовать и успешно утверждать с клиентом (или внутри команды) принципиальные структурные и визуальные решения. Если остается время, прототип можно дотюнить, базовую структуру легко превратить в дизайн большей точности.

На этом этапе можно сделать:

реальные тексты;
реальные фото;
более точные по смыслу иконки;
калибровку размеров и расположения иконок.

Следуя этим стадиям, вы не потратите слишком много времени на создание значков разных цветов и форм в соответствии с вашими понятиями эстетики, но составите архитектуру приложения и сфокусируетесь на функциональности.

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

6 главных фишек Xd

Микродействия, открытию которых в процессе работы я был особенно рад.

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

Применение цвета. На языке фотошопа — пипетка. Появляется в правом боковом меню после выбора элемента. Нужно в основном для сливания выбранного элемента с фоном экрана.

Блокировка слоя. Когда нужно было выделить, например, нижнее навигационное меню, и немного опустить его вниз, а вместе с ним неизбежно выделяется и фон. Решение — нажать на фон, выбрав его, и Cmd-L. Будет теперь стоять на месте. Блокировать можно несколько элементов одновременно.

Кнопки центрирования. Ставят элемент ровно посередине ширины или высоты одним нажатием на иконку. Находятся в правом верхнем углу.

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

У нас все хорошо. Мы дизайнили в Sketch. А затем решили придумать сценарии взаимодействия с нашим приложением. Для этого нужно организовать экраны в нужной последовательности и как-то пояснить, как эта последовательность приводится в действии на стороне пользователя, поделиться этим видением в команде. Для нас это всегда был сущий ужас.

Здесь собрано примерно 20 экранов

Или же можно пойти олдскульным методом. Берешь распечатки и маркером вырисовываешь сценарий на белой доске. Все эти методы лишены одного ключевого компонента успешного дизайна – фидбека от тестеров. Чтобы заставить пользователей следовать заданной последовательности, нужно опираться на их понимание, удобство и комфорт. Если бы они смогли подержать прототип в руках и получить свой первый опыт, описать его нам, мы бы точно знали, насколько удачна структура и дизайн приложения. Так можно понять, где они застряли, что пошло не так, и как минимизировать эту возможность через улучшения в дизайне.

И вот Adobe выпускает свой Experience Design (XD).

Adobe XD – это именно то, что мы искали. XD позволял делать реальные прототипы для реальных устройств, которые можно показать и дать попользоваться реальным людям. Этот продукт значительно упростил процесс дизайна. Изменения можно делать на самых начальных стадиях разработки приложения.

Просто посмотрите, как весь артборд выглядел в XD:

Интерфейс Adobe XD

Пусть эти картинки вас не пугают. Все гораздо проще, чем выглядит. Все, что нужно сделать, – связать разные кнопки на экранах согласно сценарию приложения – просто перемещай мышкой элементы, и меньше, чем за 10 минут, вы получите нужный результат!

Соединение экранов между собой простым drag-n-drop

Снимаем шляпы перед ребятами из Adobe за то, что этот продукт вышел на рынок. Пока что он до сих пор в бета-версии, но он потрясающий!

Тем не менее, в Adobe XD нет ряда важных возможностей:

– XD не дает возможности анимировать индивидуальные элементы. Например, вы не сможете сдвинуть отдельно какую-то одну кнопку на экране. Пока что поддерживаются только переходы между экранами.

– XD не поддерживает импорт Photoshop-файлов. Да, вы все верно прочитали. Сейчас программа поддерживает только импорт векторных форматов. А это может стать серьезной проблемой, если вы уже нарисовали дизайн приложения в Photoshop.

Но поскольку ПО все еще в процессе разработки, Есть надежда, что функционал будет расширен. А, и все это весит меньше 80 МБ. Респект Adobe!

Adobe XD реально имеет все шансы стать ведущим инструментом для прототипирования. Версия под Windows совсем недавно вышла в бета-версии. В конце-концов, успех будет зависиеть от того, какие расценки решит установить Adobe для полноценной версии.

В целом, нельзя отрицать, что в войнах прототипных войнах появился новый серьезный игрок. И этот новичок, как ни странно, является самым старым и опытным из всех.

Сейчас Adobe XD доступен в бета-версии, бесплатно под Mac и Windows. Мы уже начали рассматривать его возможности (опция Repeat Grid), ожидайте больше постов.

Читайте также: