Invision программа что это

Инструмент: InVision как альтернатива Adobe XD, Sketch и Figma

Обзор новой платформы для дизайнеров и сравнение с конкурентами.

28 129 просмотров

Когда веб-дизайн зарождался, инструментов для создания сайтов почти не было. Был Photoshop, который редактирует и ретуширует фотографии. Использовали его. Со временем пришло понимание, что Photoshop не так удобен для создания интерфейсов.

Рынок развивается, и сейчас есть четыре крупных игрока. Это — Adobe XD, Sketch, Figma и недавно анонсированный InVision Studio.

Photoshop вечен

Судя по комментариям в сети, от Photoshop отказался каждый, однако число пользователей растет.

Пользуемся им в студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.

Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.

Invision studio обзор программы

Встречайте, Studio

Новый продукт для проектирования графических интерфейсов. Изначально позиционировался как дополнение к Photoshop для совместной работы. Однако компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом.

При запуске встречает знакомое окно. Здесь выбирается пресет устройств, открываются последние файлы, есть обучения и обратная связь. Возможность импорта Sketch-файлов.

Панель слоёв организована следующим образом: создаются страницы, в них создаются артборды, в них — слои.

Понятный интерфейс. Создать заливку и добавить обводку просто. Изменение цвета, градиента, прозрачности — в пределах одного курсора.

Поговорим о функциональности и сравним с другими инструментами.

Studio против Adobe XD и Sketch

Пока Studio не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждём.

Sketch стоит $99 за одного пользователя в год. Работает только под OS X.

Adobe XD, который до недавнего времени стоил 750 рублей за месяц использования, теперь бесплатный.

Функциональность или инструменты

Бесплатный продукт от компании Adobe — весомый плюс в его пользу. Но и минусов хватает. Создается ощущение, что XD делали не для людей.

В Studio хочешь увеличить длину объекта на 100 — пишешь в поле длины «+100». Размер меняется. Adobe XD не рассчитает это сам, не умеет.

При работе с текстом все буквы в один клик можно сделать маленькими или большими, чего тоже не хватает в XD.

Ты не сделаешь интерфейс, который растягивается под мобильные и планшетные версии — в XD отсутствует «резиновый» дизайн. В Sketch эта функция достигалась за счёт установки расширения. В последних версиях стала встроенной.

Подход к компонентам в Studio такой же, как у Adobe XD и Figma. Текст редактируется прямо в артборде. Не нужно лезть в какие-то блоки, искать поля ввода, как в Sketch. Выбираешь компонент и меняешь сразу в нём.

Обзор программы InVision Studio | 1 из 2

Создаёшь кнопку с текстом. Выделяешь два объекта, кликаешь «Создать новый компонент» — готово.

Хочешь поменять фон у одного компонента, не затронув его на другом артборде, — кликай по фону на панели инструментов и меняй цвет только у того компонента, который выбрал.

В Studio и XD взаимодействие между элементами настраивается внутри программы. В Sketch ты ставишь плагин для Marvel, экспортируешь в него артборды и возишься уже там.

У Sketch много сторонних расширений, и часть из них давно не обновлялась. Ещё большая часть несовместимы друг с другом. Последний гвоздь в крышку — использование одних и тех же горячих клавиш одновременно влияют на несколько расширений и создают конфликт. Стоит ли говорить, что один из популярных плагинов для Sketch — «Craft» создали Studio.

У Studio и Adobe XD внутренняя экосистема, которая позволяет прототипировать и отдавать разработчикам готовые файлы. Сторонних расширений нет.

Быстродействие

В Sketch медленное перемещение между версиями. Разработчики часто отключают функцию — слишком загружает дисковое пространство. Внутренняя система управления версиями Applе создаёт копию файла при сохранении. Каждое нажатие ⌘ + S на клавиатуре добавляет в папку файл в 30 мегабайт. Со временем папка вырастает до размера в сотни гигабайт.

Удаление папки не решает проблемы — пользователи жалуются на низкую производительность системы. Рабочее решение — отключить контроль версий.

Команда следующая: defaults write -app ‘sketch’ ApplePersistence -bool no .

Продукты Adobe требовательны к железу — XD не исключение. Быстродействие напрямую зависит от мощности вашего компьютера.

Скорость работы Studio под стать цене — пока не ясна. На стадии тестирования сложно оценить, «подлагивает» продукт или требует мощности. В целом показывает себя довольно шустрым.

Востребованность

Открой сайт вакансий. Востребованность дизайнеров, работающих в Adobe XD и Sketch, в среднем один к десяти. Даже Studio в бета-версии превосходит количество вакансий на XD в два с половиной раза.

Studio против Figma

Сейчас у Figma есть два командных пакета: бесплатный стартовый и профессиональный — $12 в месяц.

Бесплатная версия — истории версий ограничены в 30 дней.

Профессиональная версия — неограниченная история версий и количество проектов.

Функциональность или инструменты

Основное отличие Figma от Studio — автономность. Пользователи ругаются, говорят, что браузерный инструмент — это хрень. Или отличная возможность освободить место на устройстве. Если сильно нужно, можно сохранить копию файла в формате .fig. Это позволяет открыть проект без интернет-соединения. Как только связь появится — проект обновляется в облаке.

Кроссплатформенность строит рабочий процесс на Mac, PC или Linux.

У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать email или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.

В Figma видно, когда редактировали проект, кто это сделал, есть возможность вернуться в ранние версии. Файл можно скопировать с конкретного изменения. Это встроенная функция. Не понадобится ни Studio, ни Dropbox. Каждый проект и его версии хранятся на отдельном сервере.

Это облегчает задачу итераций.

Есть зеркало дизайна. С его помощью проецируешь прототип с десктопа на мобилку и смотришь адаптированность. У Studio и Figma проекция на устройство доступна по Wi-Fi, у XD — только по кабелю. Figma проецирует только скриншот, Studio — проект в реальном времени.

Figma перевернула командную игру. Одновременное проектирование с дизайнерами и программистами ускоряет разработку. Помимо действующих лиц, за проектом могут наблюдать менеджер и арт-директор. Отличный способ для командной работы — показывай, а не рассказывай.

Studio в этом не отстаёт. Организуй команду целостной дизайн системы продукта, которая хранит и использует все компоненты — шрифты, иконки, логотипы, Hex-коды.

А ещё Figma «зарелизила» API для разработчиков. Теперь она может преобразовать дизайн в код для React. Также появилась интеграция с Zeplin, Avocode и Slack.

Создаёшь в Figma компонент, добавляешь его в командную библиотеку, и если обновить корневой компонент, изменения затронут каждый экземпляр.

Тексты в артбордах, взаимодействие между элементами — как в Studio.

Figma — инструмент, который обновляется сам. При запуске системы ты не увидишь уведомление «доступно обновление».

Figma — браузерный инструмент. Соответственно, имеет внутреннюю экосистему прототипирования. Сторонних расширений не установить.

Быстродействие

Входной порог в Figma низкий. Мощности вам понадобятся, но не такие значительные, как для продуктов Adobe. Инструмент быстр и без проблем обрабатывает 15-20 артбордов в одном документе.

Не смотря на то, что инструмент браузерный, слабое железо навряд ли справится. Например, на встроенной видеокарте Figma может не работать.

Востребованность

В этом показателе инструменты друг другу не уступают. На hh.ru равное количество вакансий для обеих программ.

Киллер-фича в создании интерфейсов

Preset-анимация

Примитивная есть в XD, Sketch — ей никого не удивить.

Studio — первый редактор интерфейсов, в который встроены инструменты для работы с анимацией.

В настройках анимации есть два вида триггеров:

• Тач-взаимодействия (свайпы в разные стороны, «тапы», «двойные тапы»);
• Взаимодействие с курсором (при наведении, если курсор «ушёл» с объекта, клики или двойные клики).

Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.

Motion-анимация

В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять её подпрыгивать, переворачиваться, исчезать.

Пользуясь Studio, получаешь встроенный After Effect.

Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придётся заплатить за Principle ещё сотню баксов.

Стоит ли надеяться на Studio

Определённо. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.

В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнёров Studio, среди которых Google, Slack, Trella, Dribbble.

В дальнейшем магазин позволит дизайнерам продавать свои наработки и пользоваться готовыми шаблонами и библиотеками.

Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые особенности.

Революция цифрового дизайна. Скоро

Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.

Компания ведёт себя самоуверенно и говорит, что это новый продукт для цифровой эпохи. В нём создаются прототипы, которых раньше не видели.

Тестирование инструмента начнётся летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.

Источник: vc.ru

InVision

Инструмент для создания прототипов дизайна интерфейсов приложений.

Похожие на InVision

Описание InVision

InVision — облачный сервис для создания прототипов дизайна веб-приложений и приложений для мобильных устройств. При помощи InVision команды могут совместно работать над созданием функционального прототипа программы или приложения с интерактивными элементами. Такой подход помогает компаниям видеть внешний вид будущего продукта и вносить корректировки в его дизайн.

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

Она представляет из себя чистый лист, где пользователи могут совместно рисовать, делать заметки, комментировать идеи друг друга, вставлять изображения. Для создания прототипа продукта необходимо загрузить готовые изображения в формате PNG или JPEG, или синхронизировать InVision при помощи плагина с Photoshop или Sketch. Этo да нные сайта startpack.ru. В загруженных изображениях пользователи могут добавлять функциональные кнопки и переключатели, добавлять анимации и переходы между страницами, добавлять наложение элементов и другие функциональные компоненты.

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

Особенности InVision

• Создание прототипов дизайна приложений под разные устройства
• Белая доска для генерирования идей
• Дизайн-платформа для совместной работы дизайнеров и программистов
• Создание резервных копий
• Комментирование
• Просмотр программного кода элементов
• Презентация прототипов
• Создание анимаций
• Интеграция с облачными сервисами: Slack, Confluence, Basecamp и другими

Источник: startpack.ru

Обзор интерфейса 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 млн $ инвестиций на развитие, со временем он должен стать лучше.

Сейчас юный проект переживает переходный возраст и лечит баги. Для комфортной промышленной работы над интерфейсами пока не годится.

Источник: awdee.ru

14 советов по использованию Sketch и InVision в работе дизайнера

Инвижн позволяет дизайнеру продемонстрировать заказчику прототип дизайна приложения, сделав его интерактивным. Кроме того, благодаря Инвижн, можно организовать слаженную работу внутри команды, между дизайнером, менеджером проекта, верстальщиком и программистами, независимо от платформы (macOs, Windows, Linux). Предлагаю вашему вниманию удобные сценарии использования связки Sketch + InVision.

Советы по подготовке прототипов в Sketch

1. Установите набор плагинов «Craft»

Craft — это великолепный набор плагинов, созданный компанией InVison LABS. Нас интересует плагин Sync, который позволяет прямо из редактора Скетч загружать артборды в Инвижн. Для этого, вначале нужно создать проект на сайте Инвижн, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).

После этого возвращаемся в Скетч, выбираем созданный проект из списка, и можно выгружать дизайн. Артборды выгружаются или все сразу, или только выбранные, что бывает весьма кстати, когда их много.

2. Один раздел — одна страница

Если проект крупный и предполагает большое количество артбордов, то лучше, для каждого большого раздела создавать отдельную страницу в Скетче. Тогда удобно выгружать сразу все экраны одного раздела, не загружая артборды других разделов.

3. Модальные окна на отдельных артбордах

Инвижн позволяет показывать модальные окна «перекрывая» контент. Раньше, для того чтобы показать модальное окно, копировался артборд с контентом, сверху рисовался полупрозрачный оверлей, сверху которого создавалось само модальное окно. Теперь, лишних телодвижений можно не делать. Создайте модальное окно на отдельном артборде. Положение окна, степень прозрачности и цвет оверлея можно будет указать в Инвижн.

Обратите внимание, что если у окна есть тень, то она должна быть внутри артборда, иначе она «обрежется» и не будет видна.

Важно в Скетче сразу правильно называть артборды, т. к. в Инвижн экраны получат такое же имя. А если арборд переименовать после синхронизации, то в Инвижн создадутся 2 одинаковых экрана с разными именами, один из которых придётся удалять вручную.

На мой взгляд, это бага. Надеюсь, в скором времени её исправят, но пока этот момент надо иметь в виду.

4. Состояния элементов

Если вы разрабатываете интерфейс для десктопа, то для выпадающих списков, и других элементов интерфейса нужно изобразить состояние «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде и загрузите в Инвижн. У вас создастся отдельный экран с этим списком.

Далее, создаём область над заголовком списка, при наведение на который будет отображаться развёрнутое меню, выбираем «Screen as overlay» и экран со списком в раскрытом состоянии. Для того чтобы всё размещалась ровно, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.

5. Статусбар рисовать не нужно

В дизайне приложений для мобильных и планшетов не изображайте Статусбар, но оставьте для него место. Дело в том, что Инвижн покажет свой статусбар при просмотре через браузер. Вы сможете выбрать оформление статусбара из 2 вариантов: тёмный и светлый.

6. Подготавливайте иконки и графику для экспорта

Благодаря недавним нововведениям в Инвижн появился Inspect Mode, через который верстальщики и программисты могут смотреть описание любых элементов, а так же экспортировать их. Какие элементы будут доступны для экспорта из Инвижн, и их размеры, определяет дизайнер в редакторе Скетч. Просто выберите элемент, укажите форматы и размеры для экспорта. Теперь этот элемент можно скачать в указанных форматах прямо из Инвижн.

Забыли настроить экспорт для какого-либо объекта? Не беда. Идём в Скетч, настраиваем экспорт элемента и синхронизируем артборд через плагин «Craft Sync». Готово, объект можно экспортировать из Инвижн.

Советы по работе в InVision

Инвижн весьма демократичны в ценовой политике. Для того, чтобы ознакомиться с функционалом, платить ничего не нужно, создание одного прототипа — бесплатно. Если вы фрилансер, который одновременно ведёт не больше трёх проектов, то вам подойдёт «Стартовый» тариф, за 15 долларов в месяц. На этом тарифе можно создавать до 3 активных прототипов.

Причем, сколько прототипов у вас в архиве — не важно, главное, чтобы активных было не больше трёх. Я использую тариф «Professional» за 25 долларов в месяц. Он позволяет создавать неограниченное количество проектов. Более дорогие планы нужны для компаний, в которых над прототипами работает больше одного дизайнера.

Как я писал выше, Инвижн позволяет разработчикам из под Windows верстать макеты или приложения, созданные в Скетче. Согласитесь, $25 в месяц сильно дешевле, чем купить всей команде Маки 🙂

7. Создавайте иконку приложения

Для прототипов мобильных приложений в Инвижн можно добавить иконку. Для этого нажмите на «Плюс» около названия проекта и выберите вашу иконку. Она будет отображаться при просмотре в браузере, а так же если «установить» приложение на мобильный (об этом в следующем совете).

8. «Устанавливайте» приложения на iOs

Если скопировать ссылку на проект в «Public share link» и вставить в браузере Сафари на мобильном, то в нём откроется ваше приложение. Нажмите на иконку «Поделиться» в браузере и выберите «На экран „Домой“». Теперь у вас на рабочем столе мобильного появилась иконка приложения, а само приложение можно посмотреть без адресной строки браузера. Трудозатрат — минимум, заказчик — в восторге, он может перемещаться между экранами на своей мобилке.

9. Создавайте хедер и футер в приложениях

Зачастую контент занимает больше одного экрана, и при его прокрутке необходимо закрепить хедер и футер. Для этого в режиме «Build Mode» перемещайте ползунки «Fixed Header» и «Fixed Footer». Теперь контент проматывается между ними.

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

10. Используйте шаблоны (templates) для навигации

Долгое время я не обращал внимания на эту мега-полезную возможность и для каждого экрана по новой создавал «кликабельные» области. На самом деле, для сквозных меню (тех, что есть на всех страницах сайта) нужно «кликабельные» области добавлять в «Шаблоны». Создаём область, выбираем куда ведёт клик по ней и добавляем в шаблон, например, «Sidebar».

В одном шаблоне может быть любое количество «кликабельных» областей. Теперь для того чтобы установить области из шаблона на новом экране, просто выбираем нужный шаблон.

11. Inspect Mode

Ранее я упоминал об этом нововведении Инвижн, но оно достойно отдельного пункта. Невозможность открыть файл в Виндоус до недавнего времени было большой проблемой для дизайнеров, вынуждающей использовать Фотошоп вместо Скетча. Для передачи файлов использовались различные сервисы, например Avocode или плагин Marketch. Также, недавно появилось бесплатное решение от ребят из Icons8, позволяющее открывать Скетч-файлы из-под Виндоус, за что им отдельное спасибо!

Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.

Для того чтобы он правильно работал — используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.

Причём, разработчику достаточно иметь бесплатный аккаунт, чтобы получить доступ в режиме Inspect Mode к любому количество ваших прототипов.

12. Создавайте комментарии и туры

Когда проектов и экранов много, масса времени уходит на выяснение в каком именно экране интерфейса нужно внести правки. Эта проблема легко решается если предоставить заказчику доступ к комментариям. Он кликает в нужном месте, и создает текстовый комментарий. Уведомление о нём упадёт вам на почту и будет доступно в Инвижн во вкладке «Comments». На комментарий можно написать ответ или уточняющий вопрос, а можно выполнить задачу и отметить комментарий как выполненный (Mark as resolved).

Бывает, нужно сделать не полноценный интерфейс, а обзорный тур по нему. Для этого в Инвижн есть функционал создания туров. Он работает по принципу комментариев. Вы создаёте одну или несколько точек на экране с текстовым описанием. Точки последовательно «проведут» пользователя по экранам, при помощи кнопок «Prev» и «Next».

Пример маленькой презентации.

13. Храните историю версий

Если у вашей комнады нет необходимости в Inspect Mode и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. Для этого загружайте макеты при помощи программы «Desktop Sync App», а не плагина «Craft Sync». Вся история изменений вашего макета с возможностью скачать предыдущие версии будет доступна в разделе «Assets». Вот короткое видео об этом функционале.

Очень жаль, что история версий не создаётся при выгрузке данных плагином «Craft Sync». Надеюсь, и эта фича когда-нибудь заработает.

14. Презентуйте дизайн онлайн (LiveShare)

Хороший дизайнер должен уметь не только создавать качественный интерфейс будущего продукта, но и грамотно презентовать его. Очень важно обосновать и донести до заказчика свои идеи и решения. Конечно, лучше это делать при встрече в уютном конференц-зале, но такая возможность есть не всегда. В таких случаях весьма полезен интерфейс «LiveShare», позволяющий в режиме реального времени показывать экраны, перемещаться между ними, обсуждая увиденное. Вот как это работает:

Скетч и Инвижн позволяют создавать, обсуждать и улучшать пользовательские интерфейсы. Бесспорно, в Инвижн есть что доработать, но уже сегодня это отличный продукт для презентации ваших дизайн-решений. А если учесть, что над Инвижн постоянно ведётся осмысленная работа и регулярно внедряются отличные решения, то стоит попробовать его в своей работе!

• Веб-дизайн
• Интерфейсы
• Usability
• Дизайн мобильных приложений
• Прототипирование

Источник: habr.com

InVision против всех

Когда web-дизайн зарождался, инструментов для создания сайтов почти не было. Был Photoshop, который редактирует и ретуширует фотографии. Использовали его. Со временем пришло понимание, что Photoshop не так удобен для создания интерфейсов.Рынок развивается и на данный момент есть четыре крупных игрока. Это — Adobe XD, Sketch, Figma, и недавно анонсированный, InVision Studio.

Photoshop вечен

Судя по комментариям в сети, от Photoshop отказался каждый, однако, число пользователей растет. Пользуемся им в Студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.

Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.

Встречайте, Studio

Новый продукт для проектирования графических интерфейсов. Изначально, позиционировался как дополнение к Photoshop для совместной работы. Однако, компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом. При запуске встречает знакомое окно. Здесь выбирается пресет устройств, открываются последние файлы, есть обучения и обратная связь.

Возможность импорта Sketch-файлов. Панель слоев организована следующим образом: создаются страницы, в них создаются артборды, в них — слои. Понятный интерфейс. Создать заливку и добавить обводку просто. Изменение цвета, градиента, прозрачности — в пределах одного курсора.

Поговорим о функционале и сравним с другими инструментами.

Studio VS Adobe XD и Sketch

Цена Пока Studio не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждем. Sketch стоит $99 за одного пользователя в год. Работает только под OS X. Adobe XD, который до недавнего времени стоил 750 рублей за месяц использования, теперь бесплатный.

Функционал или инструменты Бесплатный продукт от компании Adobe — весомый плюс в его пользу. Но и минусов хватает. Создается ощущение, что XD делали не для людей. В Studio хочешь увеличить длину объекта на 100 — пишешь в поле длины +100. Размер меняется.

Adobe XD не рассчитает это сам, не умеет. При работе с текстом все буквы в один клик можно сделать маленькими или большими, чего тоже не хватает в XD. Ты не сделаешь интерфейс, который растягивается под мобильные и планшетные версии — в XD отсутствует «резиновый» дизайн. В Sketch эта функция достигалась за счет установки расширения. В последних версиях стала встроенной.

Компоненты Подход к компонентам в Studio такой же, как у Adobe XD и Figma. Текст редактируется прямо в артборде. Не нужно как в Sketch, лезть в какие-то блоки, искать поля ввода. Выбираешь компонент и меняешь сразу в нем. Создаешь кнопку с текстом. Выделяешь два объекта, кликаешь «создать новый компонент» — готово.

Хочешь поменять фон у одного компонента, не затронув его на другом артборде — кликай по фону на панели инструментов и меняй цвет только у того компонента, который выбрал. В Studio и XD взаимодействие между элементами настраивается внутри программы. В Sketch ты ставишь плагин для Marvel, экспортируешь в него артборды и возишься уже там.

Расширения У Sketch много сторонних расширений и часть из них давно не обновлялась. Еще большая часть несовместимы друг с другом. Последний гвоздь в крышку — использование одних и тех же горячих клавиш одновременно влияют на несколько расширений и создают конфликт. Стоит ли говорить, что один из популярных плагинов для Sketch — «Craft» создали Studio.

У Studio и Adobe XD внутренняя экосистема, которая позволяет прототипировать и отдавать разработчикам готовые файлы. Сторонних расширений нет. Быстродействие В Sketch медленное перемещение между версиями. Разработчики часто отключают функцию — слишком загружает дисковое пространство. Внутренняя система управления версиями Applе создает копию файла при сохранении.

Каждое нажатие ⌘ + S на клавиатуре добавляет в папку файл в 30 мегабайт. Со временем папка вырастает до размера в сотни гигабайт. Удаление папки не решает проблемы — пользователи жалуются на низкую производительность системы. Рабочее решение — отключить контроль версий. Команда следующая: defaults write -app ‘sketch’ ApplePersistence -bool no Продукты Adobe требовательны к железу — XD не исключение.

Быстродействие напрямую зависит от мощности вашего компьютера. Скорость работы Studio под стать цене — пока не ясна. На стадии тестирования сложно оценить «подлагивает» продукт или требует мощности. В целом — показывает себя довольно шустрым. Востребованность Открой сайт вакансий.

Востребованность дизайнеров, работающих в Adobe XD и Sketch, в среднем, один к десяти. Даже Studio в бета-версии превосходит количество вакансий на XD в два с половиной раза.

Studio VS Figma

Цена На данный момент у Figma есть два командных пакета: бесплатный стартовый и профессиональный — $12 в месяц. Бесплатная версия — истории версий ограничены в 30 дней. Профессиональная версия — неограниченная история версий и количество проектов. Функционал или инструменты Основное отличие Figma от Studio — автономность.

Пользователи ругаются, говорят, что браузерный инструмент это хрень. Или отличная возможность освободить место на устройстве. Если сильно нужно, можно сохранить копию файла в формате .fig. Это позволяет открыть проект без интернет-соединения. Как только связь появится — проект обновляется в облаке.

Кроссплатформенность строит рабочий процесс на Mac, PC или Linux. У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать e-mail или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.

В Figma видно, когда редактировали проект, кто это сделал и есть возможность вернуться в ранние версии. Файл можно скопировать с конкретного изменения. Это встроенная функция. Не понадобится ни Studio, ни Dropbox. Каждый проект и его версии хранятся на отдельном сервере. Это облегчает задачу итераций.

Есть зеркало дизайна. С его помощью проецируешь прототип с десктопа на мобилку и смотришь адаптированность. У Studio и Figma проекция на устройство доступна по wi-fi сети, у XD — только по кабелю. Figma проецирует только скриншот, Studio — проект в реальном времени. Figma перевернула командную игру.

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

Организуй команду целостной дизайн системы продукта, которая хранит и использует все компоненты — шрифты, иконки, логотипы, HEX-коды. А еще Figma «зарелизила» API для разработчиков. Теперь она может преобразовать дизайн в код для React. Также, появилась интеграция с Zeplin, Avocode и Slack.

Компоненты Создаешь в Figma компонент, добавляешь его в командную библиотеку и если обновить корневой компонент, изменения затронут каждый экземпляр. Тексты в артбордах, взаимодействие между элементами — как в Studio. Figma — инструмент, который обновляется сам. При запуске системы ты не увидишь уведомление «доступно обновление».

Расширения Figma — браузерный инструмент. Соответственно, имеет внутреннюю экосистему прототипирования. Сторонних расширений не установить. Быстродействие Входной порог в Figma низкий. Мощности вам понадобятся, но не такие значительные, как для продуктов Adobe.

Инструмент быстр и без проблем обрабатывает 15-20 артбордов в одном документе. Не смотря на то, что инструмент браузерный, слабое железо навряд ли справится. Например, на встроенной видеокарте Figma может не работать. Востребованность В этом показателе инструменты друг другу не уступают. На хедхантере равное количество вакансий для обеих программ.

Киллер фича в создании интерфейсов

• Тач-взаимодействия (свайпы в разные стороны, «тапы», «двойные тапы»);
• Взаимодействие с курсором (при наведении, если курсор «ушел» с объекта, клики/даблклики).

Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.

Motion-анимация

В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять ее подпрыгивать, переворачиваться, исчезать.

По сути, пользуясь Studio, получаешь встроенный After Effect.

Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придется заплатить за Principle еще сотню баксов.

Стоит ли надеяться на Studio?

Определенно. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.

В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнеров Studio, среди который Google, Slack, Trella, Dribbble.

В дальнейшем, магазин позволит дизайнерам продавать свои наработки и пользоваться готовыми шаблонами и библиотеками.

Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые фишки.

Революция цифрового дизайна. Скоро

Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.

Компания ведет себя самоуверенно и говорит, что это новый продукт для цифровой эпохи. В нем создаются прототипы, которых раньше не видели.

Тестирование инструмента начнется летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.

Источник: spark.ru