Invision программа


мощная система командной разработки макетов сайтов и приложений

О проекте

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

В основу положена философия Agile-разработки и разбиения всех задач на итерации и версии. За развитие и функционирование платформы отвечает команда из всего 7 человек, при этом в числе постоянных клиентов платформы такие монстры, как Adobe, Evernote, AirBnB, Box, SAP, eBay.

Основные характеристики InVision

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

Работа с проектами и задачами в InVision

Прототипирование осуществляется на основе браузерного drag-n-drop-интерфейса и пакета инструментов для быстрой обработки. Они позволяют загружать через учетную запись пользователя новые прототипы, скетчи и графические материалы, а также работать с ними прямо в браузере. 

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

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

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

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

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

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

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

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

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

Стоимость InVision

Если вы будете работать всего над одним проектом, то учетная запись предоставляется бесплатно. В остальных случаях стоимость услуг рассчитывается в зависимости от числа разработчиков и дизайнеров, а также количества проектов в InVision. Обойдется использование сервиса в $15 в месяц и выше:

Выводы

InVision — современный и динамичный сервис для командного прототипирования и создания приложений и веб-проектов. Возможность работы из любого браузера и гибкого доступа к материалам менеджеров и заказчиков наряду с дизайнерами и программистами позволяет использовать эту платформу как мощный онлайн-инструмент для UX-тестирования и разработки.

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

Плюсы InVision:- Гибкость и облачная синхронизация- Наличие настольного клиента и возможность работы в браузере- Ориентированность на удаленную работу специалистов- Возможность показать демо или эскизы заказчику прямо из системы- Использование drag-n-drop в работе с инструментами и эскизами- Защищенность данных

Минусы InVision:- Только английская версия интерфейса- Нет настольных клиентов для Windows и других ОС- Скудные возможности бесплатного аккаунта

InVision

internetno.net

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

habrahabr.ru

11 советов по прототипированию в Sketch и InVision

Sketch и InVision два родственных приложения для разработки, прототипирования и анимации интерфейсов. Разработчики Bohemian Coding создали Sketch специально для дизайнеров, которые рисуют непосредственно мобильные приложения, так что он отлично подходит для прототипирования приложений.

Я приведу несколько полезных советов по использованию Sketch для прототипирования. Они помогут вам ускорить и облегчить этот процесс.

1. Задавайте правильный размер для артбордов

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

2. Используйте сетку

Sketch имеет все необходимое, чтобы настроить рабочую область максимально удачно. Перейдите в меню View > Layout Settings…, чтобы настроить свой макет, или нажмите Ctrl+L, чтобы увидеть макет по умолчанию.

3. Дублируйте все в считанные секунды

Я использовал этот трюк в Illustrator многие годы, и он также работает в Sketch. Если вы удерживаете Option, просто кликните на элемент и перетяните его, и вы получите копию. Как только вы разместили копию, нажмите Cmd+D, чтобы снова и снова проделать это.

Примечание: Если опция не работает так, как показано на анимации выше, перейдите в меню Preferences > Layers и снимите галочку с опции Offset pasted & duplicated objects

4. Измеряйте расстояния

Если вы хотите создавать красивые дизайны, нужно быть внимательным к деталям. Чтобы измерить расстояние от элемента до других объектов на странице, выделите его на экране и удерживайте Option и наводите курсор на объекты, расстояние до которых нужно измерить.

5. Используйте общие стили

У вас есть сотня скринов, и это уже третий круг переделок по дизайну. Вот уже замаячила финишная полоса для проекта. И вдруг клиент говорит: «А давайте сделаем все кнопки синими?».

И вы просто говорите ему «Окей», потому что вы использовали общие стили на всех этих кнопках. Когда создаете элементы интерфейса, которые потом приходится повторно использовать много раз, настройте для них общий стиль, кликнув No Shared Style, затем Create New Shared, и задайте стилю запоминающееся имя.

6. Нещадно эксплуатируйте символы

Символы — очень полезная часть функционала Sketch. Они совершенно бесценны в UI-дизайне.

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

7. Передвигайте фигуры, пока рисуете их

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

8. Изменяйте прозрачность на лету

Это работает точно так же, как в Photoshop, но множество людей до сих пор об этом не догадываются. Используйте числовые клавиши (1−0) на клавиатуре для задания уровня прозрачности с интервалом в 10%.

9. Экономьте нервы с помощью «Scale»

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

10. Максимизируйте свое рабочее пространство

Если вы работаете на маленьком экране, любое приложение может начать раздражать, и Sketch — не исключение. Чтобы спрятать левые и правые панели, нажмите Ctrl+Option+Cmd+3. Или используйте горячие клавиши Ctrl+Option+Cmd+1 или Ctrl+Option+Cmd+2 для того, чтобы показать/спрятать левую и правую панели по отдельности.

11. Используйте для прототипирования Sketch и InVision

Вы можете просто перебросить файлы Sketch в InVision, чтобы автоматически превратить артборды в скрины. Если хотите исключить определенный артборд или страницу, просто добавьте значок минус в начало имени слоя или странички, например: «-modal exploration»

Звучит довольно просто? Вот доказательство:

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

Перевод статьи blog.invisionapp.com автора Andy Orsow.

sketchapp.me

8 инструментов для создания UX/UI прототипов, на которые стоит обратить внимание

Программы для прототипирования – это связующее звено между творческой идеей и конечным продуктом. Совсем недавно в области UX/UI дизайна царил Photoshop, однако, проведенный опрос показал, что этот самый известный графический редактор стал терять популярность среди разработчиков. В опросе приняли участие более четырех тысяч респондентов из почти двухсот стран, и по его результатам можно сделать однозначный вывод: разработчики всегда открыты для новых инструментов, призванных облегчить процесс концептуализации, прототипирования и проектирования цифровых продуктов.

Инструменты для UX/UI проектирования

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

Axure RP Pro – это программное обеспечение для создания прототипов, макетов, спецификаций веб-сайтов и приложений. Программа позволяет вставлять виджеты простым перетаскиванием мышью, а также изменять их размер и формат. Axure RP Pro является полноценным UX-инструментом, позволяющим разработчикам проектировать сложные интерактивные прототипы, но для ее освоения потребуется время. Если вы профессиональный разработчик, с помощью Axure RP Pro вы сможете создавать более сложные интерактивные прототипы.

Mockplus – это простой инструмент для создания прототипов, созданный быстрорастущей инновационной компанией Jongde Software LLC. Программа рассчитана на автономное использование и поддерживает работу по прототипированию программного обеспечения для всех основных платформ: ПК, мобильные приложения и веб-приложения. Это хороший выбор для пользователей любого уровня подготовки, так как программа отличается простотой в освоении и интуитивно понятным интерфейсом. Если вашей целью является быстрое создание интерактивных прототипов в сжатые сроки, и вы хотите полностью сфокусироваться на работе, вместо того, чтобы тратить время на изучение инструментов проектирования, не проходите мимо Mockplus. Программа имеет необходимый набор UI-виджетов и иконок – все, что нужно для работы с вашими виджетами. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.

Рекомендуем к прочтению: https://primeliber.com/mockplus/mockplus-sozdanie-prototipov-bystree-kachestvennee-i-proshche

Balsamiq Mockups – это экспресс-инструмент для прототипирования, который поможет вам работать быстрее и эффективнее. В программе реализован метод работы, максимально приближенный к рисованию на простой доске. Программа отличается простым интерфейсом и имеет большой набор UI-элементов. Стандартные виджеты упорядочиваются на экране простым перетаскиванием мышью. Существует две версии программы: для автономного использования и в виде расширения для Google Drive, Confluence и JIRA.

Justinmind представляет собой UX-инструмент для создания прототипов мобильных и веб-приложений, а также высококачественных макетов сайтов. Программа снабжена стандартными функциями: перетаскивание объектов мышью, изменение их размера и формата, а также экспорт и импорт виджетов. В дополнение имеется возможность добавлять к виджетам примечания и снабжать их интерактивными функциями, такими как ссылки, в том числе условные, анимация, вычисления, набор вкладок, скрываемые элементы, а также моделирование баз данных с реальными данными. Justinmind подойдет для тех, кто ищет возможность создавать сложные прототипы. Если вы не профессиональный разработчик, вам будет сложно освоить этот инструмент – вот такой недостаток.

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

UX Pin – это онлайн-инструмент для прототипирования, который позволяет построить требуемую модель интерфейса простым перетаскиванием мышью, без необходимости обращаться к программированию. Данная программа представляет собой экранный редактор, позволяющий выбирать необходимые элементы и составлять из них требуемые сочетания. С помощью UX Pin можно создавать реалистичные модели и импортировать слои из таких программ, как Sketch и Photoshop.

OmniGraffle – это приложение, разработанное компанией The Omni Group, для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch. Программа может использоваться как автономно, так и как веб-приложение; в ее состав входит несколько инструментов для разработчиков. OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.

C помощью Flinto разработчик может быстро создавать интерактивные прототипы и макеты для мобильных, автономных и веб-приложений. Программа снабжена всем необходимыми инструментами для создания анимации переходов, а также системой управления экраном для работы с большим количеством экранов приложений. Если вам необходим прототип для приложения под управлением iOS, Flinto – ваш выбор.

Заключение

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

Рекомендуем к прочтению:https://primeliber.com/Osmanov%20Emil/chto-nuyono-znat-ui-ux-dizajneram-ob-instrumentah-dlya-sozdaniya-prototipov

Источник: https://medium.com/@Mockplus/8-ux-and-ui-wireframe-tools-you-must-try-in-2016-f8fbcccf7f6e#.w17ngo3ie

spark.ru

Создаем быстрый прототип мобильного приложения / Хабрахабр

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.

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

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

В ритме сегодняшней жизни при достаточно высокой цене человеко-часов, очень важно работать быстро и, желательно, без потери качества. Для этого было введено понятие “быстрое прототипирование”. Что поможет нам перейти от простого прототипа к быстрому? Это развивающиеся технологии, наличие огромного количества сервисов и, конечно, собственные мозги.

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

Можно рисовать на доске, стене, бумаге. Однако этот способ имеет и ряд недостатков:

  • почерк должен быть разборчивым, чтобы его понимала вся рабочая группа, и чтобы самому потом не расшифровывать собственные записи
  • при удаленной работе неудобно демонстрировать такой прототип
Конечно, можно сфотографировать все бумажки и отправить их, например, по почте или скайпу, но без пояснений все равно вряд ли удастся обойтись.
Как ускорить и упростить «бумажное» прототипирование
Скетчпад (SketchPad, Скетчбук, sketchbook)
это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране». Вы можете распечатать аналог скетчпада самостоятельно по шаблонам: habrahabr.ru/post/152075

UI – блокнот
это тот же самый скетчпад, только без привязки к платформе. На нем можно рисовать абсолютно любые приложения

Лекала.
Удобная, должно быть, вещь, но в России в продаже их найти не удалось.www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Штампы
В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:

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

POPpopapp.in Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.

RATCHETmaker.github.io/ratchethabrahabr.ru/post/157819 Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.

Proto.ioproto.io SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.

Codiqacodiqa.com Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.

Mockingbirdgomockingbird.com Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.

Lumzywww.lumzy.com Прошлый век. Под смартфоны тоже не удастся ничего создать.

iPhone Mockup Web Appiphonemockup.lkmc.ch Отличительной особенностью является имитация рисунка приложения и самого телефона от руки, но это не оправдывает отсутствия возможности создавать связи между макетами.

Axure RPwww.axure.comhabrahabr.ru/post/101938 Программа достаточно функциональная, считается одним из лидеров на рынке. Подходит для прототипирования сайтов и приложений под iPhone и iPad.

AppGyverwww.appgyver.com На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.

Fluid Uiwww.fluidui.com Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!

MockFlowwww.mockflow.com Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.

Mockingbotwww.mockingbot.com Еще один очень неплохой инструмент, содержащий все необходимые функции, но, к сожалению, поддерживает только iPhone.

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

Balsamiq Mockups for Desktopwww.balsamiq.com Можно создать как простой схематичный прототип, так и очень детальный с точностью до пикселя. Рисованая стилистика делает серьезный инструмент веселой игрушкой.

iMockups for iPadwww.endloop.ca/imockups Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.

Interface 2interface2.lesscode.co.nz Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое. Демонстрация дизайна на устройстве без программирования

Justinmind Prototyperwww.justinmind.com Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockkowww.mockko.com Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

Microsoft Expression Blendmsdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx Используя Blend + SketchFlow, вы можете создавать интерактивные прототипы приложений под любые платформы. Подробнее:Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного историиПрототипирование в Expression Blend + SketchFlow. Часть 2. Основы

За подсказку спасибо Ivnika

App Cookerwww.appcooker.com Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент помощи при ценообразовании.

За подсказку спасибо Glebcha

Отдельного небольшого обзора заслуживают инструменты, которые вообще не позволяют сделать прототип, зато дают возможность продемонстрировать нарисованный дизайн на реальном устройстве.
Mockabilly www.mockabilly.com Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invisionwww.invisionapp.com Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.

LiveViewzambetti.com/projects/liveview Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод
Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо

habrahabr.ru

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

*Whoision — официальное название сервиса, с налетом еле заметной иронии.

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

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

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

Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.

Часть 1. Внешняя сторона хакатона. Веб-сервис за 24 часа

Думаем!
Мысленно выкидываем из Invision всё, что раздражает или просто кажется лишним. Придумываем концепцию будущего сервиса.
Бэклог!
Пишем его быстро, в Google-доках. Делаем экспресс-оценку фич, расставляем приоритеты.
Дизайн!
Наш арт-директор делает дизайн всех экранов, беря элементы из Bootstrap — чтобы облегчить верстку. Нарезочка из кусков интерфейса, вкуснота:

Макеты!
Верстаем рабочие экраны в Bootstrap, вот уж где ванильный хардкор! Готово!
Синхронизация!
Где есть много свободного серверного места? На Google! Кто раздает аккаунты, пригодные для авторизации на нашем сервисе? Снова Google! C чем мы будем делать синхронизацию? C Google!
Проекты!
Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!
Загружаем!
Делаем удобнейший загрузчик макетов: обвел, перетащил, загрузил!

Подготовка!
Закачик хочет красивую картинку, так сделай ее в Хуижине! Выровняй слайды, подбери цвет фона, скопируй ссылку!

Демонстрация!
Сколько угодно народу с Google-аккаунтами могут смотреть ваш макет и комментировать! Достаточно ткнуть в нужное место, написать коммент и вуаля — его увидят коллеги.
Тестирование!
На хакатоне тестить некогда, поэтому вдумчиво тестим на следующий день, потягивая какавушку!
Деплой!
Покупаем домен, выкладываемся на хостинг, получаем рабочий сервис!

Чем радует Whoision:

  • Быстрая авторизация — один клик и вы полноценный пользователь.
  • Удобное хранение файлов на Google Drive — всегда можно поредактировать свои проекты, даже не заходя на сайт сервиса.
  • Синхронизация — всегда актуальное состояние проектов: и в драйве, и в личном кабинете.
  • Настройка показа, можно выровнять слайды и подобрать фоновый цвет — чтобы подавать дизайн в подобающем виде.
  • Совместное комментирование — помогает собрать качественную и визуальную обратную связь.
И для самых любопытствующих. Команде волонтеров посвящается.

Часть 2. Обратная сторона хакатона. Репортаж пост-фактум

Исправно интервьюирует копирайтер Рома.

Рома: Ребят, всё, что я знаю, так это что у вас был хакатон и что проект назывался Whoision (далее употребляется транскрипция «хуижин» — прим. авт.).

Алексей: И до сих пор называется!

Рома: Ок, до сих пор :) Поэтому рассказывайте буквально всё: как пришли к проекту, как проходил сам хакатон. Я так понимаю, что началось с того, что «мы решили сделать свой Invision».

Владимир: Да, нам обломно платить буржуям, поэтому поступили сурово: действительно решили сделать свой инвижин.

Марат: У ребят было желание покодить в свободное время. И, в общем-то, мы пришли и покодили. Тебе надо было вчера прийти на ретроспективу.

Владимир: Кстати, это второй хакатон. Первый проводили два года назад, в итоге сделали онлайн-сервис для игры в Planning Poker. И тоже за сутки.

Рома: Мощно! Ну ок, давайте по порядку. Вы все пришли к девяти утра и...

Алексей: Ненене, каждый приходил, когда хотел. Марат пришел к 11-ти, я к 12-ти.

Иван: Я пришел по традиции первым, в 9:20, настроил окружение… Потом Леха пришел.

Алексей Второй: Я предупредил всех домашних, что выпадаю на день из реальности. Они не без раздражения смирились.

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

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

Рома: А что вообще было готово к началу? Вы работали уже с начатым проектом, или...? Ну и кто что делал — тоже рассказывайте.

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

Марат: Я вообще сам кодить не собирался, думал, потестирую, за пиццей сбегаю, кофе заварю… ;) Пришел, не обнаружил второго Лёху, понял, что у нас два разработчика и один тестер, пришлось вспоминать азы. Кстати, очень быстро все вспомнилось.

Алексей Второй: Я натягивал верстку, клиентскую часть почти не трогал, в основном делал серверную часть: комментарии, синхронизацию.

Рома: Вот, насколько я помню, Инвижин — довольно навороченный сервис, где можно загружать макеты, оставлять комментарии по клику, со множественной авторизацией. А что умеет Хуижин?

Марат: Пытались научить его пиццу заказывать — так и не научили :) А вообще на сервис можно загружать свои макеты и показывать результат работы заказчику. Авторизация на сервисе происходит автоматически, используется Google-аккаунт. На Google-драйве же хранятся все изображения, то есть если вы создаете в Хуижине новый проект и загружаете в него картинки — у вас на драйве создается папка whoision, в которой появляется папка по названию проекта. И в нее заливаются макеты. Бесхитростно и очень удобно.

Иван: Если загружать картинки в гуглодрайв, то в Хуижине тоже создаются проекты. То есть работает обратная синхронизация. На проекте пробовали впервые писать на node.js — крутая штука. Также работали с Mongo DB, тоже понравилась эта база данных.

Рома: Конфликты на проекте были?

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

Владимир: Есть такая болезнь, называется «этот код говно, потому что его писал не я» :)

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

Алексей: Я думал, не продержусь до конца. В итоге таки просидел до часу ночи.

Марат: Да, просто мы с Лехой из клуба в восемь утра ушли. Потом каждый проснулся и осознал, что сегодня хакатон. Спали часа по два-три каждый.

Рома: Как вообще выживали-то?

Иван: В обед прервались на пинг-понг, после него голова заработала значительно лучше.

Рома: А заправлялись чем?

Алексей: Мы часов в пять с Маратом начали бухать.

Марат: Ложь и клевета :D

Алексей Второй: Я пробовал работать на энергетиках. Так вот, Адреналин Раш с бананом — говно!

Рома: На сколько по времени задач было? И вообще почему хакатон? Можно ведь было спокойно выделить время, зарезервировать команду, распланировать спринты...

Владимир: Тут же прикол в том, что это драйвово. И что за день можно собрать довольно большой проект на чистом адреналине. И еще на таких проектах можно оттачивать технологии, не боясь факапа. Профакапились — ну и ладно. А вообще по итогам оценки задач было на 80 часов, что вчетвером за день сделать нереально. Поэтому предварительная работа всё-таки была — спасибо Ивану. И я считаю, это правильно — в хакатоне должен быть только драйв ;)

Алексей Второй: Я впервые на хакатоне, понравилось, время проходило очень быстро. Пришел — хоп! — пора в теннис играть, — хоп! — сделали проект.

Вот такая история.

Лично буду очень благодарен, если вы захотите потестировать сервис и написать замечания и предложения. Можно прямо в комментах, а можно мне на почту [email protected]

Кнопка-ссылка:

habrahabr.ru

Аналоги сервиса InVision

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

Zeplin Есть бесплатный тариф

Приложение для совместной работы дизайнеров и разработчиков.

Sympli Есть бесплатный тариф

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

Moqups Есть бесплатный тариф

Веб-сервис для создания прототипов и мокапов.

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

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

NinjaMock Есть бесплатный тариф

Приложение для прототипирования интерфейсов.

MockFlow Есть бесплатный тариф

Создание интерактивных прототипов сайтов и мобильных приложений.

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

Сервис для проектирования интерфейса сайтов.

Веб-инструмент для прототипирования и создания макетов.

InVision Есть бесплатный тариф

от InVision

Сервис для превращения веб и мобильных дизайнерских идей в кликабельные и интерактивные прототипы и мокапы.

startpack.ru


Смотрите также