Обзор интерфейса Invision Studio
InVision выпустил в «ранний доступ» редактор InVision Studio, который по замыслу разработчиков должен стать конкурентом для Sketch и служить в качестве основного инструмента для интерактивного дизайна и создания прототипов. Специально для Awdee я написал обзор этого инструмента и рассказал о своих впечатлениях.
Саша Окунев
Автор «/designer» — сайта и телеграм-канала о дизайне интерфейсов.
Я давно слежу за этой компанией и много пользовался её продуктами. В своём обзоре я постараюсь быть объективен и избегать своего личного мнения о InVision.
Ощущения от работы в InVision Studio интересные. С одной стороны, это старый добрый Sketch в урезанном виде. С другой, в нём есть что-то новое и переосмысленное, чего не хватает в Sketch.
Импорт скетч-файлов
Представим реальную ситуацию, когда дизайнер по какой-то причине недоволен Sketch и хочет поменять его на InVision Studio.
Первое, что бросается в глаза — в приветственном окне InVision видны все скетч-файлы, которые вы недавно открывали в Sketch. Таким образом, InVision обещает полноценно открывать скетч-файлы.
Естественно, обратно в Sketch их сохранить нельзя. Война редакторов бъёт исключительно по пользователям.
InVision Studio работает на Windows
То, что InVision Studio кроссплатформенный — огромное стратегическое преимущество перед Sketch. Это может значительно расширить аудиторию до всех тех дизайнеров, кто не жаелает покупать потёртый Macbook Pro на Avito. Однако, опыт Adobe Experience Design показывает, что мало иметь версию на обе платформы, чтобы конкурировать со Sketch. Нужно ещё давать необходимый минимум полезных функций.
Работаем со скетч-макетом
Специально для этого обзора я создал простой скетч-макет, на котором пофантазировал на тему редизайна Awdee для мобильной ширины. Его можно скачать по ссылке на Sketch Cloud.
Макет для импорта
В нём я сделал всё то, что обычно делаю в макетах: прописал общие стили текста и использовал вложенные символы. Посмотрим, как проект откроет InVision на Windows.
Сам экспорт простого макета занимает значительное время, хотя компьютер мощный. Накрутив лоадер всласть, InVision открывает файл и предупреждает нас, что символы и настройки внешнего вида, которые не поддерживаются, могут выглядеть иначе, чем в Sketch.
Дизайн InVision Studio совершенно беспардонно слизан со Sketch, и это работает на пользователя: если вы работали со Sketch, вы уже знаете InVision Studio. Ничего не надо учить заново. Даже знакомые горячие клавиши вроде Ctrl + 1 и Ctrl + G работают. Всё на своих местах до мельчайших деталей: слои слева, настройки слоя справа, экспорт в нижнем правом углу. Единственное нововведение — переключатель Layers / Library, в котором поиск слоёв уехал вверх.
Слева: InVision Studio, справа: Sketch
В Sketch инспектор получился погуще, потому что через него нужно настраивать оверрайды, в то время как в InVision Studio компонент можно менять.
Слева: InVision Studio , справа: Sketch
Слева: InVision Studio , справа: Sketch
Создание хотспота:
Сверху: InVision Studio, снизу: Sketch
Сетка и лэйаут
В InVision неплохо реализовано, как настраивается базовая и модульная сетка: в панели настроек артборда можно задать нужное значение в блоках Layout и Grid. Когда артборд выделен в Sketch, никакой полезной информации в инспекторе не отображается.
Однако, в InVision настроить значение сетки по умолчанию не удалось. Артборд всегда создаётся с шагом 15 px. Шаг свдига объектов тоже не настроить. Зато модульная сетка настраивается не только по вертикали, но и по горизонтали. Классная функция.
Library: список всех компонентов проекта
Cимволы тут называются компонентами. Когда я открыл скетч-проект в InVision Studio, обратил внимание на вкладку Library в левой части интерфейса. В ней списком доступны все компоненты, которые в скетч-проекте были символами. Место для этой панели выбрано удачное. Из панели Library компоненты можно перетаскивать на рабочую область, быстро собирая макет из готовых компонентов.
Это гораздо удобнее, чем вставлять их через меню Insert в Sketch. Однако, пока неясно, как сортировать компоненты в библиотеке. Перетаскивать их вверх-вниз нельзя, после нумерации они тоже в желаемом порядке не выстраиваются.
В Sketch до сих пор очень не хватает подобного списка символов. Частично эту проблему решает плагин Runner, но в нём нужно печатать название каждого вставляемого символа, а в InVision только выбирать и тащить.
Компоненты из библиотеки в InVision Studio можно вставлять только внутри файла-проекта. В этом вопросе Sketch пока впереди.
Оверрайды в InVision Studio реализованы лучше
Проясню пару терминов для начинающих: мастером символа я называю артборд, на котором находится содержимое символа. Экземпляр символа — объект, в котором показывается содержимое мастера. Оверрайд — перезаписывание данных экземпляра.
В Sketch экземпляр символа видоизменять можно только через панель в правой части интерфейса, и это не слишком удобно. Нужно вбивать новый текст в специальное поле ввода и переключать вложенные символы.
В InVision Studio можно как угодно видоизменять экземпляры, не делая детач (Detach from symbol), то есть не разрывая связи с мастером. Это даёт больше гибкости при работе с символами. Всегда можно одним кликом вернуть экземпляр в состояние мастера.
Два экземпляра компонента. Один красим в зелёный, перезаписав его внешний вид. Sketch так не умеет. Затем, редактируем мастер, сужая бургер. Изменение затронет оба экземпляра.
Редактировать мастер-компонент можно по нажатию на Edit Component, аналог Cmd + Enter в Sketch.
Когда находишься в режиме редактирования компонента, он показывается в виде единственного артборда, изолированого от всех остальных компонентов и этим напоминает смарт-объект в Photoshop. Редактируя компонент, я попытался дублировать артборд, на что InVision ругнулся: несколько видов состояний пока не поддерживаются. Очевидно, в будущем можно будет в виде нескольких артбордов рисовать состояния одного компонента. Хорошая логика.
Компоненты могут быть вложенными
В Sketch внутри символа logo-block я использовал символ с кнопкой subscribe. В InVision Studio внутри logo-block она осталась в виде компонента, хотя я опасался, что связь будет разорвана. Это ключевая функция, которая ставит InVision Studio на один уровень со Sketch и Figma. Вложенные компоненты — хорошая почва для создания дизайн-систем и сложных интерфейсов.
Общих стилей нет в принципе
Такого понятия как Shared Styles в InVision Studio нет. Каждый текстовый объект нужно настраивать индивидуально. Это большое упущение.
Анимация и прототипы: сильная сторона InVision Studio
В InVision встроен хороший инструментарий для создания анимации прототипов, который напоминает очень упрощённый After Effects.
Здесь InVision Studio далеко обыгрывает Sketch. В нём удобно делать сложные бесшовные переходы между экранами. Как и в Sketch, можно выбирать нужный объект и делать его ссылкой на другой артборд.
Если слой имеет одно и то же название на начальном и конечном артбордах, обе копии этого слоя можно связать функцией Auto Link Layers. InVision сам просчитает смещение или изменение других свойств.
В специальном режиме редактирования анимации Timeline можно индивидуально задавать скорость анимации и конечное положение каждого свойства для любого слоя на артборде. Пример прототипа с анимацией.
Редактор ключей анимации в InVision Studio даёт хорошие возможности для дизайна переходов между экранами.
Глюки
Текущая ранняя версия полна глюков. Studio сперва вообще отказался корректно работать на моём Mac Book Air mid 2011. Вместо рабочей области я увидел пустое чёрное окно, которое починилось после перезагрузки.
Интерфейс утверждает, что прямоугольник залит красным и полностью видим. InVision, ты пьян, иди домой.
Совершенно неожиданно может отвалиться инспектор или другие элементы интерфейса. Вместо него остаётся серая пустота. Попытка загрузить прототип в веб-сервис InVision тоже привела к самым неожиданным последствиям: InVision сбросил авторизацию.
Сравниваем функции
Итоги
Очень вероятно, что InVision Studio в ближайшие пару лет станет грозным конкурентом Sketch наряду с Figma. Потенциал виден, и он очень неплохой. Если очень захотеть, в нём уже можно делать то же, что и в Sketch. Учитывая, что InVision привлекли 100 млн $ инвестиций на развитие, со временем он должен стать лучше.
Сейчас юный проект переживает переходный возраст и лечит баги. Для комфортной промышленной работы над интерфейсами пока не годится.
InVision Studio
InVision Studio («Инвижен Студио») — это приложение для дизайнеров из сферы UI/UX. Оно представляет собой редактор для создания интерактивных прототипов и дизайн-макетов. Ранее что-то похожее можно было создавать и в Sketch, но теперь разработчики предлагают чуть меньший набор функций, приятный интерфейс, кроссплатформенность и множество инструментов для настройки анимации.
Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам
Содержание
- Возможности InVision Studio
- Кроссплатформенность как преимущество InVision Studio
- Sketch и InVision Studio — чей интерфейс лучше?
- Анимация и прототипы в InVision Studio
- Преимущества и недостатки InVision Studio
- Где и за сколько можно скачать InVision Studio?
Возможности InVision Studio
ИСКРА —
неделя знакомства с дизайн-профессиями
Выберите дизайн-профессию, которая нужна в IT.
разжечь искру
Приложение InVision Studio можно использовать как одному дизайнеру, так и целой команде: благодаря облачной технологии InVision Cloud вносить правки в проект, проводить тестирования и оставлять свои комментарии смогут одновременно несколько пользователей. Это намного удобнее, чем пересылать архивированный файл по электронной почте или перевозить на USB-накопителе. Доски Boards дают возможность фиксировать первоначальные идеи, а затем отслеживать изменения, внесенные в проект, благодаря системе уведомлений. Если у дизайнера есть собственные наработки, созданные в других программах, их можно экспортировать в InVision Studio, чтобы продолжить работу, например, над анимированием объектов или персонажей.
ИСКРА —
неделя знакомства с дизайн-профессиями
Выберите дизайн-профессию, которая нужна в IT.
разжечь искру
Большая часть функций «Инвижен Студио» аналогична функциям стандартных графических редакторов. Гибкие слои и векторное рисование помогают быстро воплотить любой замысел в современный дизайн. Среди пользователей наиболее востребованы:
- вставка и редактирование графических форм (эллипсы, треугольники, прямоугольники и т.д.);
- применение размерных сеток и линеек (для правильного расположения объекта как в рабочем поле, так и на части уже отрисованного объекта);
- использование слоев и изменение их свойств и наименований;
- добавление анимации в переходы, в том числе с применением временной шкалы;
- создание «отзывчивого» дизайна, способного адаптироваться к любым экранам (компьютерным, телевизионным, дисплеям планшетов и смартфонов с различной диагональю);
- применение менеджера системы проектирования и др.
Помимо этого, следует отметить и постоянное расширение библиотеки проектных ресурсов, благодаря которой работающие с InVision Studio UX/UI-дизайнеры могут создавать массу вариаций одного и того же проекта. Шрифты, значки, текстуры и иные компоненты, которые, на первый взгляд, не очень важны, способны кардинально изменить всю концепцию дизайна. Для этого пользователям «Инвижен» достаточно всего лишь найти подходящие элементы в библиотеке приложения.
Кроссплатформенность как преимущество InVision Studio
В отличие от Sketch, InVision Studio способен функционировать сразу на нескольких платформах. Это позволяет использовать его максимально широкому кругу дизайнеров — ведь далеко не у каждого начинающего специалиста есть возможность приобрести для работы Macbook Pro. Да, более опытные коллеги часто советуют новичкам поискать компьютеры и ноутбуки на сайтах бесплатных объявлений, где можно приобрести б/у технику. Но покупка устаревшего ПК может отбить все желание заниматься дизайном: процессоры и видеокарты, проработавшие несколько лет, начинают сбоить, оттенки на мониторе искажаются, а само приложение «зависает» из-за перегрузки процессора. InVision Studio можно инсталлировать на широко распространенную Windows OS, и при этом не придется покупать новый ПК или комплектующие к нему.
ИСКРА —
неделя знакомства
с дизайн-профессиями
Какие они — востребованные в IT дизайн-профессии? Знакомьтесь с ними в течение недели, выбирайте подходящую и получайте полезные подарки каждый день.
разжечь искру
Sketch и InVision Studio — чей интерфейс лучше?
Обе программы используются для одних и тех же целей в сфере дизайна сайтов и мобильных приложений. Поэтому неудивительно, что их часто сравнивают. Попробуем разобраться в сходстве и различиях. Одна из ключевых особенностей InVision Studio — возможность экспортировать сюда макет из Sketch или Adobe Photoshop, сохранив основные параметры и настройки.
Проект может долго экспортироваться и не прогружаться до конца, такова особенность редактора «Инвижен». Сразу после загрузки файла ПО предупреждает пользователя, что некоторые элементы интерфейса могут выглядеть не так, как это было в Sketch.
Чтобы работать над макетами, созданными в Sketch или Adobe Photoshop, нужно скачать и установить специальное расширение для InVision под названием Craft Manager. Оно позволит редактировать макеты в интерфейсе, очень близком к аналогам из отрасли.
Интерфейсы Sketch и InVision похожи, и это большой плюс: пользователям не нужно привыкать к необычному расположению кнопок, названию функций и цветовой схеме. Все уже знакомо тем, кто работал в Sketch. Примечательно, что в новом редакторе функционируют те же сочетания горячих клавиш, что и в старом. Настройки слоев находятся справа, а сами слои размещаются слева. Кнопки экспорта, предпросмотра и выгрузки в облако расположены справа сверху, а сверху по центру находятся визуализированные кнопки основных операций с элементами, слоями и фигурами (сгруппировать, разгруппировать, повернуть, объединить, вырезать и др.). В верхнем меню Sketch чуть меньше элементов, однако в целом они отвечают за те же функции.
Многие дизайнеры отмечают, что меню в InVision Studio попроще и более «лайтовое» визуально, чем в Sketch. И это при том, что все нужные функции на месте. На примере колорпикера (функционала настройки цвета) можно увидеть, что окошко в «Инвижен» чуть более эргономичное и визуально легкое. Это снова говорит в пользу InVision Studio: дружелюбный интерфейс не просто приятен взгляду. Новичков он не оттолкнет своей сложностью, а профессионалов не будет отвлекать большим количеством ненужных данных и контрастными рамками.
Слева — пикер из Sketch, справа — пикер из InVision Studio
Что касается настроек сетки и лэйаута, у InVision есть своя фишка, которой нет у Sketch: сетку можно настраивать как по вертикали, так и по горизонтали. При этом в инспекторе отображаются сведения о размере ячеек, количестве строк и столбцов. Sketch такую информацию пользователю не предоставляет.
Трудности перевода не обошли стороной новый графический редактор. Нет, дело не в локализации — разработчики на оригинальном языке решили сменить название одного из пунктов меню. То, что в Sketch называлось символами, в «Инвижен» зовется компонентами. Найти их можно в разделе Library, а для добавления в рабочую область достаточно просто перетащить мышкой. С одной стороны, пользователю все-таки придется привыкать к чему-то новому, с другой — такое перемещение было логично и вполне оправдано. В Sketch приходилось вставлять новые символы через Insert.
Анимация и прототипы в InVision Studio
InVision Studio оптимален для создания анимированных объектов, в отличие от того же Sketch. В нем легко сделать незаметные переходы между экранами, что особенно актуально для разработки адаптивных версий сайтов. Разработчики предусмотрели режим Timeline, который позволяет настроить скорость анимации на временной шкале, а также конечное местоположение всех объектов для всех слоев артборда.
Особенно хочется выделить способность нового редактора самостоятельно распознавать изменения объекта и адаптировать анимацию с учетом конечных настроек. Например, на первом артборде кнопка обратного звонка небольшая, квадратная и красная, а на втором — крупная, круглая и зеленая. InVision самостоятельно выстроит изменение оттенка, формы и размера кнопки. Но при этом важно соблюсти два условия: прописать одинаковые названия для объектов и использовать функцию Auto Link Layers.
Преимущества и недостатки InVision Studio
К плюсам этого графического редактора можно отнести простое удобное для новичков анимирование прототипов, кроссплатформенность, возможность импорта файлов из Sketch и Photoshop. Приятный бонус от разработчика — наличие темной темы в оформлении интерфейса. Многие дизайнеры работают в темное время суток, и белый цвет экрана неудобен для них. Еще одно преимущество — возможность обсуждать и корректировать проект сразу несколькими пользователями благодаря использованию облачных технологий. Это здорово экономит время и нервы, которые могут быть потрачены на сбор обратной связи, внесение корректировок и комментирование.
Минусов у программы мало. Иногда она может ненадолго зависать или медленно прогружать проект. Возможно, это связано с техническими сложностями, которые так или иначе должны быть устранены с новыми обновлениями. Некоторые пользователи старых версий отмечали нестабильную работу приложения, однако по поводу обновленных вариантов сервиса таких отзывов все меньше.
Где и за сколько можно скачать InVision Studio?
Инструмент можно скачать с официального сайта разработчика. У него существует бесплатная версия, которая отличается от платной отсутствием возможности взаимодействия с другими членами команды по сети и ограничениями по безопасности. Тариф Pro предусматривает оплату в размере 4$ за одного пользователя в месяц, а Enterprise предлагает решение для крупных организаций, цена зависит от конкретной компании и рассчитывается индивидуально в зависимости от количества проектов, числа сотрудников и необходимого функционала.
ИСКРА —
неделя знакомства
с дизайн-профессиями
7 дней, которые разожгут в вас искру интереса
к дизайну. Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.
InVision
Инструмент для создания прототипов дизайна интерфейсов приложений.
Похожие на InVision
Описание InVision
InVision — облачный сервис для создания прототипов дизайна веб-приложений и приложений для мобильных устройств. При помощи InVision команды могут совместно работать над созданием функционального прототипа программы или приложения с интерактивными элементами. Такой подход помогает компаниям видеть внешний вид будущего продукта и вносить корректировки в его дизайн.
InVision состоит из нескольких инструментов — доски для проведения брейнстормов, инструмента для создания интерактивных прототипов и дизайн платформы для совместной работы. Доска помогает командам сгенерировать новые идеи для продукта. Она представляет из себя чистый лист, где пользователи могут совместно рисовать, делать заметки, комментировать идеи друг друга, вставлять изображения. Для создания прототипа продукта необходимо загрузить готовые изображения в формате PNG или JPEG, или синхронизировать InVision при помощи плагина с Photoshop или Sketch. В загруженных изображениях пользователи могут добавлять функциональные кнопки и переключатели, добавлять анимации и переходы между страницами, добавлять наложение элементов и другие функциональные компоненты.
В дизайн платформе для совместной работы над прототипами продукта могут работать вместе дизайнеры, разработчики и другие члены команды. Они могут совместно комментировать элементы прототипа, разработчики могут просматривать код и параметры элементов, дизайнеры могут вносить правки и контролировать версии. При помощи интеграции с JIRA разработчики могут на ходу создавать задачи и загружать в них элементы для добавления в рабочий интерфейс.
Особенности InVision
- Создание прототипов дизайна приложений под разные устройства
- Белая доска для генерирования идей
- Дизайн-платформа для совместной работы дизайнеров и программистов
- Создание резервных копий
- Комментирование
- Просмотр программного кода элементов
- Презентация прототипов
- Создание анимаций
- Интеграция с облачными сервисами: Slack, Confluence, Basecamp и другими
Интересные факты
- InVision был основан в 2011 году Кларком Валбергом и Беном Наделем.
- Несмотря на то что компания начиналась как маленький стартап, к 2020 году у неё было более 5 миллионов пользователей.
- Среди клиентов InVision множество известных брендов, таких как Airbnb, Adobe, HBO, Netflix и многие другие.
- В 2017 году InVision запустил свой собственный инструмент для дизайна интерфейсов — InVision Studio, который конкурирует с такими продуктами, как Adobe XD и Sketch.
- Платформа предлагает интеграцию с другими популярными инструментами, такими как Slack, Jira и Trello.
Контакты InVision
Сайт: https://www.invisionapp.com/
Email: support@invisionapp.com
Основан в 2002 г.
Находится в США
Сервисы, с которыми у InVision есть интеграция
Dropbox Jira Slack Confluence
inVision Studio для Windows
Мощный инструмент для раскрытия новых размеров экрана
InVision Studio — настольное приложение для UX и цифрового дизайна, которое позволяет создавать веб-сайты, приложения и несколько других цифровых продуктов.
Возможности и возможности
Доступный как для Windows, так и для Mac, InVision Studio включает в себя как прототипирование, так и дизайн. Вы можете проектировать макеты и элементы, а также разбрызгивать анимацию и интерактивность с помощью простых и быстрых инструментов приложения. Вы можете работать с различными макетами для определенного типа экрана или размера и видеть, что дизайн автоматически адаптируется для других ориентаций и устройств. Библиотеки активов можно разделить между командами, при этом обновленные элементы будут развернуты по разным проектам. Проекты могут быть быстро загружены на платформу InVision для беспрепятственного обмена с клиентами или людьми внутри организации.
Легкий и бесшовный
InVision Studio работает без проблем с остальной частью InVision. В отличие от других аналогичных приложений, InVision Studio не просто фокусируется на эстетике и графике, но большое внимание уделяется анимации и интерактивности. Эти атрибуты составляют ткань, необходимую для совместного использования дизайна. Эта интеграция с более широкой платформой отличает это настольное приложение от других инструментов проектирования. Более того, InVision также пытается победить на ценовом фронте. Инструмент был специально разработан для использования в качестве приложения, а не для браузера, что упростило работу дизайнеров, так как им трудно оставаться ориентированным при работе в браузере с вкладками.
- Полная интеграция с платформой InVision
- Предназначен для работы в качестве специального приложения