Май, 2017
#Исследования
Инструменты для построения диаграмм переходов между экранами
Собираю ссылки на инструменты для построения диаграмм переходов в интерфейсах мобильных приложений и сайтов. Если у вас есть что добавить, пишите в комменты к статье, буду добавлять.
Everyone is asking: "Which prototyping tool is the best?" That's the wrong question. The correct question is: "Which prototyping tool is the best for my current objective?"
Justinmind
Кажется после долгих поисков обрел хороший инструмент для проектирования так, как я себе это вижу. А вижу я это так, что мне важно видеть продукт (в части UX) в разных измерениях — прототипов отдельных экранов, кликабельного прототипа, чтобы посмотреть вживую на устройстве и! в виде набора разных пользовательских сценариев, которые можно оформить графически.
Я пересмотрел массу продуктов. В большинстве случаев выглядит так, что мы закачиваем макеты из Скетча (это тот же Invision + Craft), дальше собираем из них прототип. В других продуктах (например, Proto.io) можно сделать собственными средствами прототипы экранов и также из них собираем прототип. Но нигде блин нету визуализации схемы переходов.
Есть конечно плагин для Скетча (User Flows), в котором можно просто нарисовать такие переходы между расставленными артбордами. Но из этого не получается кликабельного прототипа.
Но даже если бы в одном инструменте можно было бы и экраны прототипировать и связывать их между собой в прототип, то все равно не хватало бы отдельной истории под названием пользовательские сценарии, когда ты понимаешь как раскладывается на интерфейс каждый из возможных вариантов действий пользователя. Графически в виде миниатюр экранов, а не просто кубиками на диаграмме.
И вот нашел. Штука называется Justinmind. Помимо возможностей подготовки прототипов экранов собственными средствами, можно импортировать то, что сделано в Скетче. Из экранов собирается прототип. И из экранов можно собрать бесконечное количество пользовательских сценариев. Причем, что особенно доставляет, сначала ты можешь составлять сценарии просто из плейсхолдеров экранов, а потом переходить к созданию детальных прототипов каждого из них.
Я пересмотрел массу продуктов. В большинстве случаев выглядит так, что мы закачиваем макеты из Скетча (это тот же Invision + Craft), дальше собираем из них прототип. В других продуктах (например, Proto.io) можно сделать собственными средствами прототипы экранов и также из них собираем прототип. Но нигде блин нету визуализации схемы переходов.
Есть конечно плагин для Скетча (User Flows), в котором можно просто нарисовать такие переходы между расставленными артбордами. Но из этого не получается кликабельного прототипа.
Но даже если бы в одном инструменте можно было бы и экраны прототипировать и связывать их между собой в прототип, то все равно не хватало бы отдельной истории под названием пользовательские сценарии, когда ты понимаешь как раскладывается на интерфейс каждый из возможных вариантов действий пользователя. Графически в виде миниатюр экранов, а не просто кубиками на диаграмме.
И вот нашел. Штука называется Justinmind. Помимо возможностей подготовки прототипов экранов собственными средствами, можно импортировать то, что сделано в Скетче. Из экранов собирается прототип. И из экранов можно собрать бесконечное количество пользовательских сценариев. Причем, что особенно доставляет, сначала ты можешь составлять сценарии просто из плейсхолдеров экранов, а потом переходить к созданию детальных прототипов каждого из них.
Сделаю на инструменте один проект и попробую расписать рабочий workfow использования на команду с продактом, дизайнеров и разработчиками.
Design web experiences down to the last detail with advanced interactions, animations and transitions. You can add dynamic content, show and hide elements, link to other screens, and much more.
Craft by Invision
So you've got your beautiful screens designed in Sketch and you're ready to throw together an initial prototype. In the past, we would sync to InVision, open our browser, and head to Build Mode—but the future is now.
Плагин к Скетчу