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 специалистов.
Еще одна особенность — огромный выбор бесплатных шаблонов как от самого сервиса, так и авторов. Каждый шаблон можно редактировать по своему усмотрению и добавлять сторонние элементы.
Также внимания заслуживает интеграция с большим количеством сервисов и приложений. Для этого в отдельном блоке есть целая библиотека инструкций по подключению программных продуктов.
Минус сервиса в том, что его интерфейс не поддерживает русский язык, поэтому для работы придется использовать плагин-переводчик. Также на данный момент оплачивать подписки можно только с зарубежных банковских карт.
0