Прототипирование. Principle против Atomic

Прототипирование

В текущем году (с момента нашего начала работы в Mossio), мы познакомились с широким выбором удобных и полезных инструментов для прототипирования, которые появились благодаря быстро развивающейся индустрии. В данной статье мы не будем сравнивать ВСЕ инструменты для создания прототипов, речь пойдет только о двух наиболее используемых нами в Mossio. На мой взгляд, в них разобраться проще всего и они дают возможность работать с односторонним сервисом, именно прототипированием (исключая создание моделей, мокапов и т.д.). Моя цель - пролить свет на работу с обоими приложениями, основываясь на полученном опыте и, возможно, научить вас чему-нибудь новому :)

Типы прототипов

Инструменты прототипирования можно разделить на 3 основные группы: 1. “Экран к экрану” (Invision, Marvel, Flinto, Justinmind). Прекрасно, если вы создали дизайн или модель целого сайта и вам необходимо сделать протип страницы к странице. Обычно, это очень просто. inVision представляет Overlays, который дает возможность управлять определенными элементами, наложенные на экран. 2. Многоуровневые (Principle, Atomic, AfterEffects, Pixate, Proto.io). Вы можете использовать данные приложения, если вам необходимо добиться большей четкости и точности прототипа. Вы можете показать прототип более детализированным при переходе или передвижении слоев, а не только отдельных страниц. 3. Кодируемые (Framer.js, Origami, и т.д.)  - эти инструменты не очень подходят мне. Но они по сути позволяют создавать прототипы с актуальным кодом. Это будут  максимально приближенные к конечному продукту прототипы. Я изрядно повозился с Framer и Origami, но, когда дело касается кода, это начинает меня пугать, как дизайнера. Principle и Atomic относятся ко второй категории

С чего начать?

Оба приложения (Principle App и Atomic App) отлично делают свое дело. Конечно каждое решение имеет свои преимущества и недостатки, но в итоге, все зависит от ваших предпочтений. Ниже перечислены преимущества обеих программ:

• Автоматическая анимация. При создании Экрана А, вы можете продублировать его, и назвать Экран Б. Чтобы вы не изменили на Экране B, он будет автоматически анимирован. Затем вы сможете настроить синхронизацию и стили слоя (прозрачность, размеры, повороты, и т.д.)
• Начать работу просто. Разобраться в работе этих приложений совсем несложно. Для новичка, я бы советовал начать с Atomic, но Principle имеет схожий интерфейс с Sketch / приложениями для Mac. Раздел драйверов в Principle немного сложнее, поэтому можно легко пойти по неправильному пути.
• Упрощение и контроль стилей. Очень важно, что обе программы отлично с этим справляются.
• Горячие клавиши Sketch. Я - МАСТЕР горячих клавиш и люблю учить новые комбинации для ускорения своей работы. Восхитительно, что оба приложения используют те же комбинации клавиш, что и Sketch.

...

Principle

Principle - отличное десктопное приложение, которое имеет интерфейс схожий с Sketch, что упрощает процесс обучения и навигации. Более того, по ощущениям, оно быстрое, приятное в использовании и независимое (вам не обязательно иметь подключение к интернету). Официальный сайт

Сильные стороны

• Оригинальное приложение. Устанавливается на локальный диск, что делает его более надежным.
• Импорт из Sketch. Проще простого… Импортируйте и приступайте к созданию прототипа.
• Запись/Экспорт. По завершению создания прототипа, нажмите кнопку записи и начинайте кликать или проводить по экрану. Данную запись можно сохранить в .gif или .mov.
• Драйвера. Масса возможностей! Вы можете контролировать процесс анимации ВНУТРИ страницы (например при прокрутке вверх и вниз) а не только при перемещении между страницами.
• Просмотр на мобильном устройстве. Вы можете открыть ваш прототип на смартфоне и ощутить, как он выглядит на вашем устройстве. Такие изменения видны сразу.
• Цена. Цена на Principle более выгодная в случае длительного использования ($99 за Principle против $25/месяц - Atomic). Principle окупится через 4 месяца.
• Сообщество. Есть мнение, что сообщество людей, использующих Principle больше, чем Atomic. В нем люди делятся мнениями и задают вопросы (Facebook и т.д.).

Чего не хватает

• Поделиться прототипом через веб. Большинство моих проектов связаны с веб. К сожалению, пока нет возможности поделиться кликабельным прототипом при помощи прямой ссылки. Atomic делает это запросто.
• Покадровый просмотр анимации. Я бы хотел иметь возможность двигать анимацию влево/вправо при помощи курсора, чтобы понимать, как она выглядит. В данный момент, у меня есть только просмотр в реальном времени (в AfterEffects вы можете перейти к любому кадру)

Что я сделал, используя Principle:

Я создал возможность выбора продуктов для Bevs. Это был простой концепт, я потратил около часа на его построение. Ссылка на источник В процессе редизайна Mossio, у меня была возможность поиграть с различными идеями по переходу с главной страницы на целевую. Ссылка на источник Используя дизайн Питера Дельтондо, я получил возможность визуализировать процесс работы анимации. Заняло около 3-х часов (первый проект) Ссылка на источник

...

Atomic

Приложение Atomic очень близко мне. Логотип и бренд запали мне в душу. Я начал его использование со времен бета версии и с того момента, приложение быстро прогрессирует! Оно очень просто в использовании, основано на облачных сервисах, веб приложение и возможность делиться вашими прототипами при помощи ссылки! Официальный сайт

Сильные стороны

• Поделиться и увидеть комментарии. Вы можете запросто поделиться своим кликабельным прототипом с кем угодно при помощи ссылки. Пользователи имеют возможность комментировать каждый экран и вы можете получить объективную оценку.
• Облачные сервисы. Вы создаете прототип в веб приложении. Все хранится в “облаке” и вы имеете доступ из любой точки мира (необходимо подключение к интернету).
• Покадровая анимация. Создание покадровой анимации очень просто при помощи Atomic. Вы сразу видите, как выглядит анимация. Очень простой процесс работы с ней.
• Специальные шрифты. Это довольно новый функционал, который позволяет вам использовать ваши собственные шрифты при создании прототипа. Это очень хорошо в условиях использования веб приложения, но с Principle вы можете получить доступ к вашим локальным шрифтам.
• История. Я не часто пользуюсь этой опцией, но все же приятно понимать, что она есть. Я могу быстро вернуться назад и посмотреть, как изменился дизайн с момента предыдущей версии.
• Управление проектами. Очень приятно работать с проектами и под-проектами прекрасно отображенными визуально. Очень просто найти необходимое.
• Поддержка клиентов. Мне кажется, что Atomic более социально активен и поддержка отвечает быстрее на мои даже простые вопросы. Они даже дублируют мой проект, чтобы найти и разобраться в проблеме!
• Постоянные обновления. Я заметил постоянные обновления и улучшения приложения. Они постоянно на пути обновлений и инноваций. Я даже предложил несколько новых опций и они их внедрили!!!

Чего не хватает

• Оригинальное приложение. Как по мне, иметь оригинально приложение лучше. Создается ощущение большей надежности и меньшего количества возможных ошибок.
• Экспорт/Запись. Меня немного смущает, что мне необходимо делать запись экрана при помощи стороннего ПО для записи прототипа. С другой стороны мне нравится делиться идеями при помощи ссылки.
• Нет импорта из Sketch. Это бы сэкономило время… Я не вижу в этом супер необходимости с тех пор, как копировать и вставить объект не занимает много времени. АПДЕЙТ: Импорт из Sketch будет СКОРО реализован.
• Нет драйверов. Чтобы отобразить простую идею, вам нет необходимости вдаваться в детали… так что, возможно, это и не очень важно.

Что я сделал, используя Atomic:

Это был ранний концепт одного из первых версий редизайна сайта Mossio. Я исследовал меню и переход по страницам. Заняло около 2-х часов. Ссылка на источник Переход бокового меню навигации в iOS приложении. Заняло около 30 минут. Ссылка на источник Подсказка возможностей приложения при наведении на иконку. Ссылка на источник

Заключение

Делая вывод, хочется сказать, что оба приложения отлично делают свое дело. Должен сказать, что НА ДАННЫЙ МОМЕНТ, Atomic лучше для быстрого прототипирования / шаринга идеи по ссылке, но, если вам необходимо супер качество, красота и просмотр на мобильном устройстве, обратите внимание на Principle. Дайте знать, если у вас возникнут вопросы или я упустил какой-то важный момент. Спасибо за внимание. Хорошего дня!

---

Перевод статьи David Kovalev