Исторически в Adobe Creative Cloud отсутствовал инструмент для дизайнеров, который позволял бы быстро и качественно создавать макеты прототипов или получать фидбек от команды перед созданием финальной версии UI-дизайна. Этот пробел недавно был восполнен выходом Adobe Experience Design CC (Adobe XD). Приложение сначала было представлено как «Project Comet» во время Adobe MAX 2015, и теперь доступно для скачивания в бета-версии из Adobe Creative Cloud. Это десктопное приложение, которое позволяет дизайнерам прототипировать интерфейсы для веба, мобильных устройств и планшетов. Рассмотрим его возможности!
Знакомство с Adobe XD
У Adobe XD поразительно простой, но удобный интерфейс; стиль не отличается других приложений в пакете Creative Cloud. В нем собраны инструменты для прототипирования под разные платформы, включая веб, мобильные устройства, планшеты и др.
При запуске приложения на приветственном экране вы увидите массу шаблонов со стандартными размерами экрана и возможностью добавить свой кастомный размер документа. Вдобавок здесь есть доступ к ряду исходников, которые можно использовать на старте для изучения возможностей инструмента, а также элементы UI-дизайна для разных мобильных устройств, таких как iOS и Android, доступ к онлайн-урокам и прочему.
Рабочая область Adobe XD поделена на две части — Design и Prototype, к ним можно получить доступ с правой стороны окна. В разделе Design дизайнеры могут использовать набор инструментов и опций для дизайна элементов макета, добавления артбордов для представления страниц макетов, импорта ресурсов из других приложений, включая Adobe Illustrator и Adobe Photoshop.
Совет: Дизайнеры могут копировать элементы дизайна прямо из этих приложений, вставлять их в выделенный артборд как векторную графику. Это позволяет редактировать импортированную графику, меняя цвет или даже редактируя опорные точки кривых.
Второй раздел Adobe XD называется Prototype, и здесь вы можете линковать между собой артборды (страницы) и определять связи между ними посредством взаимодействий. Как только проект завершен, дизайнеры могут просмотреть прототип, кликнув на иконку preview в верхнем правом углу, или поделиться им с командой через веб-ссылку. Дизайнеры могут также сохранять разные экраны в растровых и векторных форматах.
Урок по работе в Adobe XD
После знакомства с базовой анатомией интерфейса Adobe XD, следующий пример демонстрирует пошаговый процесс создания первого UI-прототипа в Adobe XD. Мы создаем прототип для экрана iPhone 6. Вы можете скачать исходники из Github-репозитория. Или же скачайте изображения прямо из Pixapay:
- Лотос
- Цветок
- Воробей
- Бабуин
Первая часть этого урока посвящена созданию макета в разделе Design.
1. Создайте проект прототипа
Откройте Adobe XD, в приветственном окне выберите размер iPhone 6 (375×667px). Затем кликните на иконку iPhone и создайте проект. Из Apple iOS вы можете взять элементы iPhone UI для использования в прототипе. Как только создан артборд, дважды кликните на его название, измените на «Home».
2. Создайте фон прототипа
Кликните на артборд, чтобы отобразить его свойства в панели Properties с правой стороны окна приложения, и кликните на цвет Fill, чтобы открыть селектор цвета. Выберите темно-серый оттенок и закройте диалоговое окно.
3. Настройка шапки экрана
Перейдите в меню File > Import. В браузере файлов перейдите к изображению шапки и нажмите Import. Задайте нужный размер, чтобы он подходил размеру экрана. Можете дважды кликнуть на изображении, чтобы активировать crop (кадрирование).
Выберите инструмент Text в панели Tools, кликните на области шапки и введите «Nature». Дважды кликните на тексте и из панели Properties справа выберите «Helvetica», жирность «bold» и размер «32». Дважды кликните на цвете заливки Fill и выберите темно-серый.
4. Фон области контента
Выберите инструмент Rectangle из панели Tools справа и нарисуйте прямоугольник под шапкой. В панели Properties справа выберите темно-серый цвет для заливки (Fill) и снимите галочку с опции Border, чтобы убрать контур.
5. Добавление контента
Импортируйте изображение и добавьте текст, как мы это делали в шаге 3. Настройте картинку так, чтобы она по размеру вмещалась в фоновую область контента, и справа добавьте текст, как показано на рисунке 5 ниже. Чтобы кадрировать картинку по определенной области, дважды кликните на ней и используйте четыре угловых индикатора для получения нужного кадра.
6. Создание контентной сетки
Одним из наиболее полезных инструментов в Adobe XD является создание сетки существующего контента без ручного дублирования. Нажмите Shift на клавиатуре и выберите картинку, фон контента и текст. Затем кликните на кнопку Repeat Grid в панели Properties. Это преобразует созданный контент в сетку.
Потяните нижнюю зеленую иконку, чтобы создать вертикальную сетку контента. Далее вы можете дважды кликнуть повторяющийся контент, если захотите его изменить. И, наконец, выделите контент и выберите опцию Ungroup Grid, чтобы разбить связь между повторяющимися фрагментами.
7. Создание новой страницы (Артборд)
Чтобы создать новую страницу макета, нажмите на инструмент Artboard в панели инструментов слева. Затем выберите шаблон iPhone 6 справа, чтобы создать новую страницу.
8. Создание дополнительных страниц
Повторите вышеописанные шаги, чтобы создать новые страницы и добавить на них контент, как показано выше. Финальный вид макета должен быть примерно как на скриншоте ниже:
Когда макет дизайна готов, переходим в раздел Prototype, чтобы перелинковать созданные страницы между собой.
9. Настройка домашней страницы проекта
Перед тем, как настроить перелинковку страниц, нужно назначить домашнюю страницу проекта. Домашней страницей может быть любая из созданных страниц. В этом примере домашней страницей назначим первый созданный макет, кликнув на иконку Home, которая появляется в верхнем левом углу артборда.
10. Построение связей между страницами
Чтобы перелинковать страницы, выделите домашнюю страницу, нажмите на стрелку с правой стороны. Появится плавающее меню Target; выделите следующую страницу, задайте тип анимации перехода (например, «Dissolve»). Повторите этот шаг, чтобы перелинковать другие страницы.
11. Создание взаимодействий
В этом прототипе первый блок контента на домашней странице должен вести к первому артборду контента, а второй блок контента — ко второму артборду…
После создания прототипа есть два метода его предпросмотра. Можете воспользоваться опцией Preview в самом Adobe XD, а также прототип можно сделать доступным по веб-ссылке, чтобы можно было показать его своей команде.
12. Превью прототипа
Нажмите на иконку Preview в правом верхнем углу приложения. Отобразится экран превью, который позволяет просматривать и передвигаться по разным страницам. Вдобавок, есть иконка Record, которая позволяет записывать сценарий по мере передвижения по страницам и сохранять их в формат Quicktime (MOV).
13. Как поделиться прототипом с другими
Мы подошли к завершению! Теперь нужно только показать документ членам команды и клиентам, без необходимости доступа к XD. Кликните на кнопку Share в верхнем правом углу приложения; появится плавающее меню, которое покажет URL — ее можно скопировать и отослать членам команды:
В заключение
Текущая бета-версия Adobe XD представляет собой простой, но эффективный инструмент для UX-профессионалов для визуализации их идей под веб, мобильные устройства и планшеты. Он позволяет интегрировать графику из других приложений Adobe, включая Adobe Illustrator, в редактируемом векторном формате.
В будущих версиях Adobe XD нам обещают больше возможностей; улучшенные цвета, возможность работы со слоями, больше возможностей для расшаривания прототипов, поддержка скролла и добавление большего количества интерактивных элементов в разделе Prototype. Если вы уже поработали в Adobe XD, хотелось бы услышать ваше первое впечатление!
Нет комментариев