Nik Blinkov
1 334
Блоги

Главный претендент на революцию в мобильном дизайне. Первые впечатления от бета-версии InVision Studio

@DH.company

Поделиться

В избранное

В избранном

В настоящее время основной инструмент в работе дизайнеров из команды DH.company - это Sketch. В этом мы не отличаемся от большинства современных студий, ведь программа давно доказала, что является наиболее удобной и эффективной для прототипирования всего что угодно: от обычных баннеров до сложных пользовательских интерфейсов.

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

Вот такой прототип для наших партнеров мы сделали в Principle

Этих двух программ, плюс Adobe After Effects для особенно изощренных анимаций и видео со звуком, вполне достаточно, чтобы сегодня отвечать требованиям рынка. Есть еще Zeplin - популярный инструмент для передачи прототипов разработчикам. Это удобный софт, но у нас он как-то не прижился. Многие также вспомнят Figma, браузерный аналог Sketch для командной работы. Но и он нам не подошел.

Естественно, что в в работе с этими программами, как и с любыми другими, есть свои проблемы. Главная из них выглядит примерно так: дизайнер создает прототип в Sketch, анимирует его в Principle, отдает макеты разработчикам в Zeplin, расшаривает прототипы менеджерам и заказчикам, у которых может не быть Mac, экспортируя для этого файлы из Sketch в Figma. Выходит, вместо того, чтобы творить, дизайнер тратит огромное количество времени на подготовку файлов для дальнейшей с ними работы коллег и партнеров.

Поэтому сейчас рынок однозначно нуждается в продукте, объединяющем в себе все инструменты в один. И такое приложение, похоже, появилось - ребята из Invision выкатили Studio. Пока только ранний доступ, но Studio уже удивляет стабильностью и своими возможностями.

Рассмотрим продукт поподробнее, ведь есть все основания полагать, что именно он станет настоящим дизраптором и заметно подвинет всех конкурентов.

Лаунчер Studio сразу дает понять, что легко откроет любой Sketch-файл

Studio сразу радует хорошей интеграцией с программой Sketch. В DH.company мы грузили в приложение файлы разных величины и сложности. В случае импорта особенно крупных объектов работает несколько задумчиво, но главную функцию выполняет - импортирует без ошибок. Пожалуй, уже за это программу можно полюбить - не нужно перерисовывать все текущие проекты - просто импортируй их в новую среду и готово. Причем, переносит даже объектные символы (!).

Тестируем наш самый тяжелый Sketch-файл в Studio. Приятный темный интерфейс понравится любителям работать по ночам.

С самого начала может напугать зум кнопкой "Control", а не обычной для яблочников "Command", но это дело привычки. В остальном InVision Studio управлять так же легко, как и Sketch. Единственное, что раздражает в первое время, - отсутствие знакомых линеек. Но у каждого артборда есть масштабируемые гриды, которые достаточно удобны, и к ним быстро привыкаешь. Впрочем, линейки все же стоило бы добавить. В остальном вопросов нет - все круто и стабильно работает.

Отдельное спасибо разработчикам InVision Studio надо сказать за возможность анимировать прототипы. Это именно то, что должен был сделать Sketch в 49-й версии, но так и не сделал. Motion-дизайн в последнем Sketch - это нелепое и абсолютно убогое занятие, приходится продолжать работать в Principle. Зато ребята из InVision показали, как должна выглядеть среда Principle внутри векторного редактора.

Привычные глазу таймлайны расположены слева. И правильно

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

В целом, уже с тем, что есть сейчас, можно работать. Более того, у InVision есть приложение в AppStore - оно подтягивает из облака все прототипы с вашего аккаунта и позволяет взаимодействовать с ними на iPhone и iPad. Подобные приложения есть и у Sketch, и у Principle, но оба не очень удобны, а вот all-in one решение Studio подходит больше. Стоит заметить, что пока приложение еще не научилось съедать файлы .studio напрямую, надеемся что в ближайшее время эту опцию добавят. Тогда можно будет в привычном режиме получать файл в Telegram и открывать его в InVision Studio на смартфоне или планшете.

Встроенный мессенджер в InVision- можно обсуждать макеты с командой или клиентами

Киллер-фича. В настоящее время на рынке нет ни одного инструмента, позволяющего корректно отображать дизайн в коде для разработчиков. То, как это реализуется в Zeplin, для нас выглядит крайне неудобным решением. Команда InVision, в свою очередь, обещает, что приложение Studio будет корректно отгружать информацию о макете в Swift. Хочется надеяться на то, что это будет действительно так. Сейчас такой функционал только анонсирован - мы его очень ждем, чтобы потестить.

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

Пишите ваши вопросы по работе с InVision, а также по дизайну и проектированию интерфейсов на info@dh.company или в наш Telegram @DigitalHeroes. Будем рады на них ответить.

PS

У InVision очень крутой канал на YouTube - рекомендуем всем посмотреть их видео. Там масса полезного контента для дизайнеров, включая туториалы.

#дизайн [_ #_]инструменты

{ "author_name": "Nik Blinkov", "author_type": "self", "tags": [], "comments": 38, "likes": 18, "favorites": 16, "is_advertisement": false, "section_name": "blog", "id": "36162", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]