InVision

Invision

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

С чего начать

Прежде чем приступить к изучению функционала, можно оформить демонстрационный режим. Он позволит ознакомиться с интерфейсом и инструментами платформы без регистрации аккаунта. Чтобы его оформить, заходим на сайт и кликаем «Запросить демонстрацию».

Далее заполняем анкету со следующими данными:

имя, фамилия;
электронная почта;
название компании;
должность;
номер телефона.

Жмем на кнопку отправки и ждем приглашение, которое придут на электронную почту.

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

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

Для выбора направления используем специальную строку, по нажатию на которую откроется список со следующими вариантами:

дизайн;
управление проектами;
маркетинг;
рекрутинг;
IT-разработка;
финансы;
продажи.

Заполняем форму и жмем «Регистрация».

Далее на электронную почту придет письмо с 6-значным кодом, который нужно будет вставить в специальное поле.

Когда пользователь введет код, откроется окно, куда потребуется вписать электронные адреса тех пользователей, которые будут работать над проектом в совместном режиме. Указываем адреса списком и жмем «Пригласить».

Регистрация завершена, теперь можно приступать к работе.

Особенности интерфейса

Интерфейс в сервисе

Invision

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

В панели управления можно найти следующие разделы:

Главная . Здесь находятся шаблоны, на базе которых создаются проекты. Кнопка для создания проекта находится в правом верхнем углу.
Документы . В этом разделе хранятся все созданные, обрабатываемые и сохраненные проекты.
Пространство . С помощью этого блока создаются сеть, позволяющая получать доступ к проектам всем пользователям в рамках одной учетной записи.
Люди . Здесь можно добавлять сторонних пользователей, подключая их по электронной почте.
Приложения . Новый блок с ассортиментом приложений, которые можно интегрировать в Invision.
Еще . Здесь пользователь может получить доступ к системе проектирования. Однако для этого понадобится платная подписка.

Если нужно попасть в настройки личного аккаунта, поднимаемся в правый верхний угол, кликаем на иконку и в контекстном меню выбираем «Управление учетной записью». Рядом находится кнопка для обновления тарифного плана, окно для выбора приложений и центр уведомлений.

Если же нужно попасть в настройки общего аккаунта (командные настройки), то кликаем на значок в нижнем левом углу и выбираем блок «Настройки».

Разберем каждый раздел более детально.

Главная

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

Далее откроется форма, в которой все шаблоны распределены по категориям:

Категория	Шаблоны
Строительные блоки	сетка обратной связи; матрица приоритетов; временная шкала; набор смайлов; диаграмма Венна; таблицы; набор стикеров; RACI Матрица; статус проекта; приоритизация проектов; ретроспектива .
Исследования и дизайн	спецификация; прототип; доска; передача дизайна; UX холст; творческое резюме; эскиз приложения; конкурентный анализ; персональная доска пользователя; сортировка карточек.
Системы проектирования	UX аудит; планирование дизайна токенов; форма компонента системы.
Шаблоны досок и карточек	начало работы с досками; канбан; ежедневный стендап; мозговой штурм; назначение задач.
Шаблоны страниц	начало работы со страницами; заметки о собраниях; краткое описание проекта; совещание о состоянии проекта; ретроспектива проекта; еженедельное собрание; ежедневный стендап; интервью пользователя.
Наброска эскизов	каркас; блоки анализа; блок-схема веб-сайта; поток экрана; каркас веб-сайта; каркас приложения; эскиз приложения.
Agile для проектных	приоритизация задач проекта; дизайн-спринт; матрица приоритизации работы.
Дизайн-мышление	исследование пользователей; карта точек соприкосновения; диаграмма сходства; сортировка карточек; карта эмпатии.

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

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

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

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

В правой части панели есть значок с тремя точками, вызывающий контекстное меню со следующими разделами:

Масштабирование с помощью мышки . Если активировать эту функцию, пользователь сможет увеличивать/уменьшать содержимое в рабочей зоне с помощью колесика мышки.
История версий . Отображается список обновлений.
Экспорт в изображение . С помощью этого инструмента можно сохранить созданный проект на устройство в виде картинки.
Сохранить как шаблон . Инструмент для сохранения проекта в виде шаблона.
Создать новое . Используем в том случае, если нужно начать новый проект.

Рядом расположена кнопка приветствия, с помощью которой можно запустить проект в качестве презентации. Далее идет кнопка «Поделиться», позволяющая выдавать доступ к текущему проекту членам команды.

Что касается панели инструментов, она расположена в нижней части экрана. Сначала у нас идет «Указатель», с помощью которого можно двигать объекты по рабочей зоне. Для этого просто кликаем на значок, после чего с помощью мышки перетаскиваем содержимое в удобное место.

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

Далее идет инструмент для ввода текста. При нажатии на него открывается форма, в котором можно выбрать шрифт, вставить гиперссылку, воспользоваться нумерованным списком или выровнять текст по центру.

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

Рядом находиться раздел «Липкая заметка», который позволяет прикреплять к пустому полю разноцветные наклейки. В них пользователь может менять цвет, добавлять текст и вставлять ссылки.

С помощью следующего инструмента выбирается размер кадра. Сервис поддерживает форматы 16:9 и 4:5.

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

Потом идет инструмент для активации и использования смайлов. Рядом расположена кнопка для запуска окна с комментариями.

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

Invision

. Например:

Adobe XD;
Azure DevOps;
Asana;
Charts;
Color Swatches;
Figma;
Giphy;
Google Docs;
Inspect;
Jira;
Lomm;
Microsoft 365;
Spinner;
Trello;
Vimeo;
YouTube.

Для подключения просто выбираем ресурс и указываем ссылку на нужный веб-элемент.

Документы

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

Если кликнуть на троеточие напротив название проекта, откроется контекстное меню с некоторыми командами. Например, с помощью команды «Поделиться» владелец проекта можно предоставить доступ к файлу приглашенным пользователям. Для этого в командных настройках нужно установить соответствующие права.

Если же выбрать команду «Добавить в пространство», то проект можно будет переместить в специальную группу.

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

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

Люди

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

Члены команды . Добавленные пользователи будут иметь доступ ко всем открытым проектам и документам команды.
Внешние гости . В этом случае пользователи получат доступ только к тем участкам аккаунта, в которые они будут приглашены.

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

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

Приложения

В этом разделе находится ассортимент приложений и сервисов, которые можно интегрировать в

Invision

. Чтобы провести интеграцию, необходимо выбрать подходящий продукт и кликнуть на кнопку «Узнать больше».

После этого откроется страница, где будет прописана инструкция по подключению.

Как создать систему проектирования

Для этого открываем раздел «Еще» и в контекстном меню выбираем «Системы проектирования». На новой странице жмем на «Создайте новую систему проектирования». Для ее создания потребуется всего лишь указать название и при необходимости добавить описание и обложку.

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

Настройки

Настройки личного аккаунта состоят из 4 разделов. В первом пользователь может поменять имя и добавить фотографию.

В разделе безопасности осуществляется смена пароля и подключается многофакторная аутентификация. В «Уведомления» пользователь может выбрать частоту отправки писем на электронную почту. В последнем разделе добавляются новые команды.

В командных настройках, которые расположены в левом нижнем углу, немного больше разделов:

Основные настройки . Тут меняется название и домен команды.
Значок команды . В этом разделе подключается логотип.
Настройки конфиденциальности . Осуществляется настройка предупреждающих сообщений.
Настройки совместного использования . В этом блоке выдаются разрешения на те или иные инструменты в сервисе.
Доступ нового участника . Здесь можно добавлять новых пользователей.
Единый вход . Настройка единого входа, для которой понадобится название, общий адрес электронной почты и пароль.

В нижней части экрана есть раздел, с помощью которого можно удалить команду.

Как купить подписку

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

Какие тарифы доступные на момент написания статьи:

Название	Стоимость	Особенности
Бесплатно	$0	30 активных пользователей; 3 администратора;
Профессиональный	$4,95 в месяц	50 активных пользователей; неограниченное количество администраторов.
Предприятие	Индивидуально	Без ограничений

Учтите, что на данный момент сервис принимает платежи только с зарубежных банковских карт. Для оплаты нужно ввести реквизиты, название компании, страну, город и почтовый индекс. Также можно ввести промокод, если таковой имеется.

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

Вывод

Invision

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

Еще одна особенность — огромный выбор бесплатных шаблонов как от самого сервиса, так и авторов. Каждый шаблон можно редактировать по своему усмотрению и добавлять сторонние элементы.

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

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