Статті
InVision Studio:
От прототипа до графического редактора
12 березня, 2018
avatar
Дмитрий Петренко
Product Designer
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Продуктовому дизайнеру Дмитрию Петренко посчастливилось получить ранний доступ к InVision Studio. Свои впечатления от использования одного из самых ожидаемых инструментов на рынке дизайна он описал в своей колонке для Telegraf.


Clark from Invision

Invision читает мысли своих пользователей: не прошло и недели со дня релиза новой версии Sketch с новой функцией прототипирования (которая, мягко говоря, ничем примечательным не запомнилась), как тут же мне на почту упал ранний доступ к новому, весьма ожидаемому в дизайнерском мире продукту – InVision Studio. Имея огромную почву исследования в потребностях дизайнеров и просто колоссальные инвестиции для своей ниши, InVision смогли построить достаточно весомого конкурента на рынке графических редакторов.

Я кратко, без глубоких исследований и туториалов, расскажу о первых часах работы в InVision Studio. Поделюсь личным впечатлением от фич, которыми она пытается нас покорить, и расскажу, почему все-таки не стану использовать этот продукт в работе, по крайней мере на данный момент.


Prototyping with Animations

 

Вот это фича, которую я лично ждал. Несмотря на обилие инструментов, в моем топчике остается After Effects. Да, это громоздко и сложно, временами долго, но как по мне, это она может выполнить все ваши желания в интерактивном дизайне.

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

Теперь, когда вам нужно показать дашборд с кучей графиков и данных, достаточно создать два артборда с разным набором контента, изменить позиции точек на графике и за две секунды сложить это в прототип. Все объекты в слоях будут автоматически залинкованы между собой и — вуаля! Если раньше мы клацали статичные картинки прототипа и рассказывали о том, какие данные будут изменяться, то теперь мы увидим замечательные интеракции в действии.

И здесь явно победа. Наши проекты в InVision перестанут быть скучным набором картинок, в котором единственной сделанной нами фишечкой является hover на кнопку либо поле 😉

The layout awakens

Мы живем с огромным количеством устройств, каждое из которых имеет свои размеры. Ни один из разработчиков графического софта не реализовал удобный инструмент для работы с адаптивностью на разных разрешениях(хорошая попытка на данный момент — плагин Auto Layout для Sketch).

В Studio же вы сможете в реальном времени смотреть, как будут выглядеть ваши прототипы на разных устройствах. Достаточно лишь изменить значения для размеров артборда и построить правильную сетку. В этом плане InVision просто мотивирует работать с собой. Долгая рутина отрисовки адаптивных версий — не самая захватывающая часть работы дизайнера.

There is dark and light

Помните кучу визуальных недовольств на тему «А где же темная тема?», когда появился Sketch и вы попрощались со своим любимым и великим Photoshop (или не попрощались). А помните кучу плагинов, даже платных, которые делали для Sketch весьма корявое подобие dark интерфейса?

Если кратко

Импорт. В то время как Framer сделал фичу для импорта из Sketch простым copy-past (при этом конвертируя объекты в обычные .png), InVision просто научился импортировать полноценные .sketch файлы.

Темная сторона силы. А именно интерфейс. Довольно классная штука, конечно же. Я всегда недолюбливал светлые темы Adobe, когда пользовался их продуктами. Но после перехода на Sketch, как ни странно, темный интерфейс для меня весьма неподходящее решение. Хорошо, что есть свитчер на светлую тему, хотя тогда студия и превращается в минималистичного клона Adobe XD.

Мультиплатформеность. Теперь не нужно искать на OLX самый недорогой и безнадежный Макбук или бежать в магазин за новеньким, чтобы стать дизайнером (смех автора). InVision будет работать даже на ПК.

Цена. Точнее ее отсутствие, учитывая что все продукты изначально были бесплатными или условными (например Adobe XD, Sketch … ). Есть маленькая вероятность, что это временное явление. Хотя учитывая то, что InVision Studio является частью экосистемы, в которой основной упор сделан на платформу для прототипирования, продукт может остаться бесплатным навсегда. Ну и немаловажно, что Sketch все-таки $100 стоит.

Анимация интерфейсов. Безусловно, топовая фича Studio, которая позволит кому угодно сделать крутейшие анимации. Встроенные паттерны для переходов, настройки кривых и duration/delay позволит даже новичку быстро адаптироваться и сделать классный интерактив в прототипе.

Взаимодействие. Мир еще не придумал самой удобной штуки для взаимодействия клиент + дизайнер + разработчик. Поэтому, обладая потрясающим взаимодействием с командой проекта, работой с прототипами, новорожденной студией и инспектором, который превратит все это в реально работающий продукт, InVision явно идет к победе.

Libraries. То же самое, что и Symbols в Sketch, но в плане интерфейса намного доступнее и удобнее для использования.

The world’s most powerful screen design tool

Во многом Studio — это тот же Sketch, но в обертке другой компании. Все с тем же интерфейсом, все с теми же Symbols, которые здесь именуются Component. Естественно, она обладает множеством мелких, но приятных улучшений, начиная от работы с пером и заканчивая неймингом артбордов при дублировании. Я очень хотел записать скринкаст по типу jams, которые делают чуваки из InVision на YouTube. Но, к сожалению не смог, потому что это все тот же добрый и неустойчивый InVision.

Как это часто бывает, привычка все решает, и я все равно продолжу использовать InVision лишь в качестве тулзы для создания прототипов, и Sketch — как основной инструмент для проектирования интерфейсов. Буду глубоко изучать и использовать в работе Framer, который настолько сложный, что весь интерекшн делается по итогу в After Effects 😉

Я, конечно же, верю в то, что в самый неподходящий момент прототипы начнут нормально загружаться и строиться, а Studio не будет жутко тормозить на максимальной комплектации моего компьютера. Ребята делают воистину потрясающие и великие вещи, которые позволяют нам – десигнерам — работать быстрее и продуктивнее. И в связке со своим основным продуктом я действительно верю, что через совсем скоро мы увидим полноценную экосистему Studio + Prototype + Inspector + Craft, которая включит все то, чего нам не хватает в повседневных инструментах.

Достаточно лишь наблюдать, как это делают другие и прислушиваться к комьюнити 🙂

Это моя первая статья (не уголовная), и она не стремится быть глубоким ревью продукта, который неожиданно попал в early access мне на почту. Но все же прошу судить строго и прокомментировать, что я мог упустить.

avatar
Дмитрий Петренко
Product Designer
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: