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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Кроме того, дизайн можно выгружать в разрешениях @1x или @2x. Благодаря этому, ваш прототип будет великолепно смотреться на устройствах с ретина-дисплеями.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

11. Inspect Mode

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

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

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

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

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

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

Источник

Три инструмента прототипирования: Invision, Marvel и Justinmind

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Посмотрите на этот интересный рисунок. Здесь показано, как Уилбур Райт летит на планере, который он сконструировал со своим братом в 1902 году. Вставленное изображение показывает одно из неудачных испытаний планера. Это было опасно и рискованно.

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

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

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

Приложения

Итак, 3 приложения для прототипирования, которые мы будем рассматривать:

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

Justinmind

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Итак, начнем наш обзор с Justinmind. Этот инструмент может похвастаться тем, что делает процесс создания прототипа и обсуждение идей более быстрым.

Justimind завлекает сразу — анимированное слайд-шоу, которое занимает большую часть экрана, дает вам представление об интерфейсе и о том, как он работает, и мне стало интересно, действительно ли это будет так легко. Единственный способ проверить — это создать аккаунт.

Регистрация

Вы нажимаете на черный прямоугольник с надписью «Get Started Free» и попадаете на страницу с простой формой регистрации. Вам сразу же сообщают, что кредитная карта вам не понадобится. Это сразу дало мне понять, что передо мной не пробная версия на 14-30 дней, как часто бывает. И не забудьте, что есть еще и pro-версия для тех, кому действительно нужны дополнительно оплачиваемые опции.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Некоторые люди останавливаются, если им предлагают установить программу, я же — наоборот. Установка программы гарантирует мне, что я смогу работать, не задумываясь о качестве интернет-связи.

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

На заметку: После установки приложения вы получите возможность в течение 30 дней бесплатно пользоваться pro-версией.

Начало работы

Мне понадобилось около 2 минут, чтобы установить программу после скачивания. Как в большинстве программ такого рода вам для начала предлагают 3 варианта: создать новый проект, открыть существующий или узнать больше о программе. После нажатия на кнопку «new», позволяющую создать новый прототип, вам будет предложено одно из 10 доступных устройств, включая Google glasses. Сколько известных вам инструментов прототипирования предлагают такую опцию?

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Интерфейс

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Но не думайте, что Justinmind — это клон Adobe, так что освоить его за 5 минут у вас вряд ли получится. Если вам нужна небольшая помощь, то Justinmind может предложить вам тридцатисекундное знакомство с программой.

Инструменты

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

Основы

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Параллакс

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

На заметку: набор виджет-инструментов будет меняться в зависимости от того, каким устройством вы пользуетесь для создания прототипа. Единственное, что останется неизменным — это основное меню. На изображении, приведенном ниже, вы можете видеть набор виджет-опций для создания прототипа для Android.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Особенности

Безусловно, Justinmind предлагает много различных опций и инструментов. Но если перед вами trial-версия, то вам больше всего будет интересно узнать, в чем разница между free и pro версиями.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Выводы

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Marvel

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Следующий в нашем списке — это Marvel. Большинство дизайнеров наверняка раньше уже слышали об этом приложении.

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

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

Регистрация

На домашней странице вам предлагают выбрать один из наиболее удобных для вас вариантов: — создать аккаунт — посмотреть демо-версию, чтобы понять, действительно ли вы захотите использовать Marvel Создание аккаунта занимает не более 10 секунд.

Начало работы

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Интерфейс

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

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

Легко понять, как работать с Marvel. Загрузить изображение так же легко, как и просто нажать на кнопку. Вы можете загрузить разные типы файлов: JPG, PSD и GIF. Также вы можете добавить изображения через Dropbox или Sketch. В Marvel также есть приложения для тех, кто работает с Android или iOS.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

На заметку:для того, чтобы использовать Sketch через Marvel, вам необходимо будет установить специальный плагин. А если вы захотите использовать программу на iOS или Android, то вам нужно будет пройти по специальным ссылкам в AppStore или GooglePlay. Только Dropbox открывается прямо из Marvel.

Инструменты

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

Создать рабочую группу

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Настройки

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Загрузки

В Marvel вы можете загружать прототипы в разных форматах: PDF, ZIP, APK или IPA. Однако, к сожалению, чтобы это сделать, нужно будет обновиться до pro или enterprise версий.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Предварительный просмотр

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Поделиться

Вне зависимости от того, платная у вас версия или pro, вы можете поделиться результатами своей работы. Эта опция вам пригодится, если есть необходимость в обратной связи от партнеров или коллег. Для этого вы можете воспользоваться URL-ссылками, текстовыми сообщениями или вставкой на сайте.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Характеристики

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

Так же, как и в Justinmind, предлагаю вам посмотреть на отличия между бесплатной и pro-версиями:

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Выводы

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

Invision

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Итак, последнее приложение, которое мы рассмотрим в этой статье, это Invision. Как и 2 предыдущие программы, Invision гордится тем, что делает прототипирование доступным для каждого желающего. И их слоган гласит «Делаем дизайн лучше. Быстрее. Вместе». Но скажу честно, попробовать эту программу меня больше заставил другой слоган — «лидер в области прототипирования и совместной работы». На первый взгляд, Invision выглядит, как очень профессиональная программа, ориентированная на бизнес. Это подтверждается приведенным списком известных компаний, использующих данную программу.

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

Регистрация

Чтобы начать работать с Invision вам необходимо нажать на розовую CTA-кнопку, призывающую начать работу. Вам сразу сообщают, что редактор прототипов всегда будет бесплатным.

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Начало работы

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

Когда вы впервые окажетесь на информационной панели, то справа появится сообщение, предлагающее начать с просмотра демо-ролика.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Интерфейс

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Кроме вкладки Screen, есть еще Activity, Comments и Asset. Они особенно пригодятся, если вы работаете над прототипом совместно с кем-то или у вас есть необходимость поделиться с клиентом.

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Инструменты

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

Предварительный просмотр

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Режим построения

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Режим комментариев

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Режим истории

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Конфигурация

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

На заметку: Также присутствует кнопка LiveShare, которая позволяет презентовать проект в режиме реального времени, и кнопка «Поделиться» позволяет вам делиться через URL-адрес, электронную почту или SMS. Если вы хотите показать кому-то проект, скачав его, то вам потребуется приобрести платный аккаунт.

Характеристики

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

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

Invision программа что это. Смотреть фото Invision программа что это. Смотреть картинку Invision программа что это. Картинка про Invision программа что это. Фото Invision программа что это

Выводы

Invision и правда представляет отличное видение того, как должно работать прототипирование. Для освоения может потребоваться немного времени, но редактор предлагает с легкостью обучиться основам, если у вас есть пара минут.

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *