Спойлер для ленивых: лендинги и сайты-визитки удобно и быстро проектировать в Sketch, более сложные цифровые продукты — в Axure.
Концептуальное проектирование
Проектирование сложного цифрового продукта начинается с концептуального прототипа. В таком прототипе структура страниц с основными связями и расположение смысловых блоков на страницах изображаются серыми прямоугольниками и другими графическими примитивами с минимальным описанием.
* Примерный вид концептуального прототипа в Sketch*
Концептуальный прототип легко делается и в Axure и в Sketch. Sketch со своей концепций артбордов на этом этапе кажется даже удобней: на одной странице можно нарисовать общую схему продукта, а затем детализировать артборды как отдельные экраны.
Детализация и базовая интерактивность
На следующем этапе проектирования концептуальный прототип должен быть детализирован, до уровня, достаточного для демонстрации предлагаемых решений заказчику или для проведения юзабилити-тестирований.
* Концепт и детализация страницы мобильного приложения в Sketch*
Серые прямоугольники превращаются в текст, изображения, значки, элементы интерфейса. В прототип добавляется интерактивность. В простейшем варианте — кнопки и ссылки становятся кликабельными. Для сложных продуктов может потребоваться бо́льшая функциональность: возможность заполнения форм, изменение контента страницы при определенных действиях пользователя, «плавающие» элементы интерфейса и т.п.
Как раз на этом этапе начинают проявляться различия. Sketch предоставляет несколько больше инструментов для управления внешним видом элементов и, с моей точки зрения, более удобный интерфейс для работы с прототипом. Зато Axure позволяет эффективно моделировать практически любое взаимодействие пользователя с продуктом: всплывающие окна, баннерные карусели, выпадающие меню, динамический контент на странице и т.п.
Разберемся на примере типичного сайта банка. Нарисовать такую главную страницу можно и в Axure и в Sketch. В версии Axure она будет выглядеть немного грубее. Например в текстовой части хуже будет работать сглаживание и потребуется несколько больше времени для отрисовки деталей.
Давайте рассмотрим реальную главную страницу на сайте Сбербанка и попробуем понять, какие интерактивные элементы на ней можно воспроизвести при помощи инструментов для прототипирования.
* Поведение интерактивных элементов на сайте Сбербанка*
* Точки интерактивности на главной странице сайта Сбербанка*
Я сделал таблицу с описанием того, какая интерактивность есть на этой странице и как она реализуется в разном ПО.
| Интерактивность | Реализация в Axure | Реализация в Sketch |
|---|---|---|
| Кликабельный элемент (ссылка, кнопка), переход на другую страницу | Да | Да |
| Выпадающее главное меню | Да | Возможно с ограничениями (несколько статичных страниц) |
| Всплывающее окно поиска с динамической подсказкой | Да | Возможно с ограничениями (несколько статичных страниц) |
| Баннерная карусель: через определенное время открывается новый баннер | Да | Нет |
| При наведении курсора кнопка и текст изменяют цвет | Да | Нет |
| Кнопка вызова чата «плавающая», имеет постоянную позицию на странице | Да | Нет |
Видно, что даже на относительно статичном сайте Sketch справляется только с базовой интерактивностью. Цифровые продукты с более сложным взаимодействием, например интернет-магазин или сайт продажи билетов, в Sketch можно нарисовать только статичными экранами. Принципы взаимодействия пользователя с интерфейсом и поведение элементов придется описывать словами в отдельной спецификации.
Кстати о спецификации
В Axure к любому элементу интерфейса можно добавить описание. И составить из этих описаний вордовский документ.
Пояснение к элементу интерфейса в прототипе Axure
В Sketch можно оставить комментарий только к странице в целом. Учитывая отсутствие интерактивности, это усложняет передачу информации разработчикам.
* Пояснение к экрану в Sketch*
Проектирование адаптивных сайтов
Чтобы спроектировать адаптивный сайт нужно продумать структуру страниц для разных размеров экрана и принципы перехода между ними.
* Десктопный и мобильный вид главной страницы интернет-банка*
Axure позволяет спроектировать одну страницу прототипа сразу для нескольких размеров экранов, с помощью «адаптивных видов». Кнопка или поле ввода, нарисованные в одном адаптивном виде, появятся во всех других. Изменения элементов и интерактивность также наследуются. Таким образом, Axure дает возможность относительно быстро создавать адаптивные прототипы, а еще она проверяет сохранение единства между разными видами страниц сайта.
* Переключение между адаптивными версиями одной страницы в Axure*
* Переключатель адаптивных видов в Axure*
В Sketch для каждого размера экрана придется сделать отдельный экземпляр страницы и они не будут связаны друг с другом, т.е. задача отслеживания единства версий целиком ложится на проектировщика. Из плюсов: в Sketch есть механизм «растягивания» сразу всех элементов при изменении размеров страницы. В Axure каждый элемент придется подогнать к адаптивному виду по отдельности.
* Десктопная и мобильная версия на двух артбордах в Sketch*
Демонстрация и тестирование прототипов
И вот прототип готов. Нужно показать его заказчику, получить согласование, а затем провести тестирование на пользователях.
Как было сказано выше, Sketch позволяет делать более визуально привлекательные прототипы. Это может быть очень важно при согласовании прототипов с некоторыми руководителями. Бывает так, что они не вникают во все детали взаимодействия и полноту функционала, оценивая прототип по принципу «нравится»-«не нравится».
И Sketch и Axure позволяют демонстрировать прототипы сайтов в браузере. У Sketch иногда возникают проблемы масштабирования страниц, особенно в мобильных браузерах. Приложение Sketch Mirror позволяет просматривать на смартфоне только прототипы, открытые в Sketch на компьютере. Т.е. показать заказчику прототип удаленно не получится.
Демонстрация прототипа приложения из Sketch Cloud. Панели инструментов браузера и уменьшение масштаба искажают восприятие прототипа.
У Axure для демонстрации прототипов на смартфонах есть приложение для iOS и Андроид. Так можно тестировать прототипы приложений без лишних панелей браузера.
* Скриншоты приложения Axure Share*
Учитывая возможности для создания интерактивности и для демонстрации, прототипы Axure значительно лучше для тестирования на реальных пользователях и предпочтительней для показа прототипов заказчикам.
Передача дизайна верстальщикам и разработчикам
Обычно работа проектировщика заканчивается после тестирования прототипа и подготовки итогового отчета. Далее дизайнеры доводят детализацию до релизного уровня и передают графические материалы верстальщикам и разработчикам.
Здесь безусловное преимущество у Sketch: он содержит все необходимые инструменты для экспорта графики в разработку.
* Панель инструментов экспорта в Sketch*
В Axure есть возможность экспортировать страницу в картинку только целиком. В таком виде для верстки элементы интерфейса придется вырезать из общей картинки или перерисовывать.
Также Axure позволяет выгрузить весь прототип в формате html, вместе со всей графикой и комментариями. В таком виде прототип сохраняет интерактивность и описание поведения интерфейса для разработчиков. При этом отсутствует возможность настроить формат выгрузки изображений или выгрузить только часть из них.
* Окно Axure для публикации прототипа в формате HTML*
Изменения и коллективная работа
Проектирование взаимодействия — это постоянные изменения, поиск решений. Прототип постоянно меняется, первоначальные варианты уходят в историю.
Обычно опытный пользователь сохраняет предыдущие версии файла, чтобы можно было вернуться к ним при необходимости. Разумеется, так можно делать и в Axure, и в Sketch.
Однако в Axure историю проекта можно ещё сохранять, используя «групповые проекты». Правки фиксируются при каждом изменении страницы и в результате можно вернуться практически к любому предыдущему состоянию прототипа. В больших длительных проектах такая функция очень полезна.
Список точек сохранения проекта в Axure. Можно вернуться к любой точке и восстановить состояние прототипа.
Конечно, «групповые проекты» прекрасно работают и по прямому назначению, позволяя нескольким проектировщикам работать одновременно над одним прототипом и легко передавать проект другому специалисту.
В Sketch, к сожалению, нет возможности коллективной работы, а создавать архивные версии прототипа приходится вручную.
Резюме
Если выбирать между Axure и Sketch один инструмент для прототипирования, то это Axure. Широчайшие возможности создания сложных интерактивных прототипов, удобные инструменты для демонстрации и тестирования, хороший уровень визуализации и удобства интерфейса программы.
Sketch в чистом виде имеет смысл использовать для небольших и простых цифровых продуктов, а также на поздних стадиях проектирования перед передачей в разработку.
Пока, насколько я знаю, в компаниях, где необходим полный цикл разработки, используют различные комбинации продуктов для проектирования. Например, в одном крупном банке прототипы первоначально делают в Axure. После тестирований прототип передается дизайнерам, которые отрисовывают состояния прототипа в Sketch (или Photoshop). Разработчикам передается прототип в Axure и дизайн в виде статичных картинок. Еще в одной компании, занимающейся системами документооборота, первые этапы проектирования происходят в Figma, а затем прототип перерисовывается в Axure для тестирования на пользователях. Также встречается способ выгрузки прототипов Sketch в Invision для добавления интерактивности и тестирований.
Сочетание инструментов позволяет охватить весь цикл проектирования цифровых продуктов, но влечет за собой дополнительный трудности. Например, могут возникать проблемы при конвертации одного формата в другой. Для крупных проектов необходимо создать и поддерживать несколько библиотек графических элементов, для каждой программы прототипирования. Идеальным же инструментом проектирования стал бы единый продукт, условный «Sketchure», включающий все необходимые функции.
Сейчас Axure ближе к этому идеалу, пскольку уже имеет мощнейший арсенал для создания интерактива и движется в направлении улучшения визуализации. Возможно, подобными свойствами обладают Figma или Framer. Попробуем дать ответ в следующих статьях.
Приложение
Сравнительная таблица
| Функция | Axure | Sketch |
|---|---|---|
| Удобство интерфейса (экспертно) | Хорошо | Отлично |
| Несколько страниц на холсте, быстрый переход между страницами | Нет | Есть |
| Возможности работы с графикой | Удовлетворительно | Отлично |
| Интерактивность прототипа | Отлично | Удовлетворительно |
| Разработка адаптивных прототипов | Хорошо | Удовлетворительно |
| Возможности демонстрации и тестирования прототипов | Отлично | Удовлетворительно |
| Спецификация прототипов | Отлично | Удовлетворительно |
| Передача графических материалов верстальщикам и разработчикам | Удовлетворительно | Отлично |
| Сохранение версий (история) | Автоматически (в коллективных проектах) | Вручную |
| Коллективная работа | Возможна | Нет |
Если вы хотите, чтобы мы спроектировали для вас интерфейс, оставьте заявку на сайте.