Axure или Sketch: сравнение инструментов проектирования

29 августа 2018
29 Август

Спойлер для ленивых: лендинги и сайты-визитки удобно и быстро проектировать в 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
Удобство интерфейса (экспертно) Хорошо Отлично
Несколько страниц на холсте, быстрый переход между страницами Нет Есть
Возможности работы с графикой Удовлетворительно Отлично
Интерактивность прототипа Отлично Удовлетворительно
Разработка адаптивных прототипов Хорошо Удовлетворительно
Возможности демонстрации и тестирования прототипов Отлично Удовлетворительно
Спецификация прототипов Отлично Удовлетворительно
Передача графических материалов верстальщикам и разработчикам Удовлетворительно Отлично
Сохранение версий (история) Автоматически (в коллективных проектах) Вручную
Коллективная работа Возможна Нет

 

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Россия
129085, г.Москва, ул. Годовикова д.
9, стр. 2, подъезд 2.1, офис 2.22