Friday, June 15, 2012

Инструменты прототипирования и создания wireframes http://habrahabr.ru/post/132403/

http://habrahabr.ru/post/132403/

Инструменты прототипирования и создания wireframes

Интерфейсы*
Навеяно долгими поисками различных систем прототипирования и желанием поделиться этим опытом. В данном посте отсутсвуют сложные системы типа iRise или IBM Rational Rose, ввиду того что они являются не столько и далеко не только системами простого прототипирования, да и стоимость этих решений подходит предприятиям немалого маштаба. Этот пост о чем-то более земном.



Немного теории. Данные проверенные опытным путем:

Каждый проект имеет своего заказчика. Это может быть директор крупной кампании, разработчик, менеджер digital агенства, дизайнер… да много кто. В каждом конкретном случае это накладывает определенные ограничения на то, насколько должен быть проработан протип. 
Я имею ввиду следующие вещи: 
  • Количество прототипов и очевидность ( по клику, визуально-схематично ) переходов между ними
  • Наличие состояний одного протипа ( пример: блок контактов, который выглядит по разному в зависимости от того, владелец этого списка на него смотрит или гость )
  • Наличие комментариев к элементам
  • Банальные «красивости» в прототипе — красивые формы, иконочки, картинки и прочее. По опыту — одна из самых полезных вещей, чтобы убедить заказчика, что идея будет работать


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

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

Online-инструменты

Cacoo

image
Тип: Online
Цена: есть бесплатный аккаунт
Link: http://www.cacoo.com/

iPlotz

image
Тип: Online
Цена: есть бесплатная версия
Link: http://iplotz.com

MockFlow

image
Тип: Online
Цена: есть бесплатные аккаунты
Link: http://www.mockflow.com/

Mockup Builder (beta)

image
Тип: Online / Silverlight
Цена: на текущий момент — бесплатная
Link: http://mockupbuilder.com

Creately

image
Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Lucidchart

image
Тип: Online
Цена: 5$
Link: http://www.lucidchart.com/

Mockingbird

image
Тип: Online
Цена: 9$/месяц
Link: https://gomockingbird.com

Pidoco

image
Тип: Online
Цена: от 9$/месяц
Link: https://pidoco.com

HotGloo

image
Тип: Online
Цена: 14$/месяц
Link: http://www.hotgloo.com

ProtoShare

image
Тип: Online
Цена: от 49$/месяц
Link: http://www.protoshare.com

Desktop-инструменты

Pencil

image
Тип: Firefox Addon
Цена: Free
Link: http://pencil.evolus.vn

Serena Prototype Composer

image
Тип: Desktop
Цена: Free
Link: http://www.serena.com

Creately

image
Тип: Desktop/Online
Цена: 5$
Link: http://www.creately.com/

Balsamiq Mockups

image
Тип: Desktop, Adobe AIR
Цена: 79$
Link: http://www.balsamiq.com

FlairBuilder

image
Тип: Desktop, Adobe AIR
Цена: 99$
Link: http://www.flairbuilder.com

Omnigraffle

image
Тип: Mac OSX App
Цена: 99$
Link: http://www.omnigroup.com

Antetype

image
Тип: Desktop
Цена: 289$
Link: http://www.antetype.com/

Adobe Fireworks

image
Тип: Desktop
Цена: 299$
Link: http://www.adobe.com/products/fireworks.html

Axure

image
Тип: Desktop
Цена: 589$
Link: http://www.axure.com/

Список не претендует на 100% полноту и с вашей помощью будет пополняться. Ну и в конечном итоге — чем пользоваться каждый из нас должен решить сам.
+39
11 ноября 2011, 17:54
363
Another_rus5,0

комментарии (38)

+5
kaladhara11 ноября 2011, 18:05#
Тут список поболе будет, разве что без картинок.
0
Another_rus11 ноября 2011, 18:12#↑
Да, согласен. Хотя есть элементы которые не пересекаются. Обязательно изучу тот список и обновлю этот. Есть ощущение, что в результате мы получил более полный up-to-date список.
+2
1nd1go12 ноября 2011, 17:17#↑
Картинки вещь хорошая, чтобы сразу составить впечатления. Спасибо, что вставляете.
+1
insanex11 ноября 2011, 18:10#
как раз вчера искал где бы нарисовать интерфейс для нового сайта, больше всего понравился Mockflow. 
Кстати, многие из этих сервисов есть в гугл хром веб стор, так удобнее попробовать и решить что больше подходит.

PS: еще Cacoo.com понравился
+7
jend0s11 ноября 2011, 18:10#
К сожалению, большинству этих инструментов тоже бы пригодился проектировщик интерфейсов(
0
InVooDoo14 ноября 2011, 13:09#↑
Иногда складывается впечатление, что эти тулзы делают программисты для интерфейс дизайнеров :) Что выходит, сами понимаете, программа для программирования :)
+2
BearMef11 ноября 2011, 18:31#
Здоровский инструмент для прототипирования интерфейсов — «Serena Prototype Composer». Есть бесплатная версия. Кроме, собственно, интерфейса, позволяет простенько его «оживить» плюс встроенные средства по работе с требованиями.
0
AlexFadeev11 ноября 2011, 19:54#
Перепробовав множество инструментов, пришел к выводу, что все они бесполезны и все зависит абсолютно от того, кто их делает.

Для себя остановился на Adobe Illustrator. Да, он не делает динамических прототипов, но лично я не вижу в них смысла. зато он обладает рядом функций, которые являются в прототипировании основными:
— Векторный
— Артбоарды — позволяют в одном документе делать весь сайт без напряга для машины.
— Слои
— Полный инструментарий для работы с текстом
— Свобода оперирования объектами

Да, в нем нет заготовок кнопочек и других объектов. Но поскольку он векторный, всегда можно иметь набор шаблонов, которыми можно оперировать как угодно.
+2
r3verser11 ноября 2011, 21:24#↑
Динамические прототипы можно тестировать, так как с их помощью максимально удобно проектировать взаимодействие (interaction design). Пользователи воспринимают их как сайт или программу, чего не скажешь про статичную картинку. А для блочной разметки(wireframe), которая предшествует прототипу, можно пользовать онлайн тулзы, или векторные редакторы. Все зависит от потребностей, но онлайн сервисы мне не нравятся, предпочитаю InDesign и Axure :)
0
Chesheer12 ноября 2011, 16:58#↑
Можете поделиться опытом прототипирования под inDesign или хотя бы в какую сторону копать стоит?
0
r3verser12 ноября 2011, 23:31#↑
Рекомендую к изучению набор шаблонов и снипетов от EightShapes для InDesign, на все случаи жизни UX дизайнера — unify.eightshapes.com/.
0
zokotuhaFly11 ноября 2011, 23:02#↑
если уж здесь Fireworks и Illustrator, то почему нет Inkskape?
–1
AlexFadeev11 ноября 2011, 23:04#↑
Я за СПО, но к сожалению Inkskape не дает нужного удобства. В продакшене его применять сложно, увы.

А Fireworks хоть и затачивается под сайты, но тоже довольно геморный.
0
Chesheer12 ноября 2011, 16:57#↑
Из чистого интереса: а с inDesign не пробовали делать то же самое?
0
AlexFadeev12 ноября 2011, 18:14#↑
InDesign все же под другое заточен. И в нем нет свободного пространства.
0
Chesheer12 ноября 2011, 18:25#↑
Не совсем вас понимаю.
+2
clamaw11 ноября 2011, 20:48#
Вчера искал инструмент для прототипирования, нашел вот такой: www.antetype.com/
+1
MuRADiN11 ноября 2011, 21:48#
А как же creately.com, cacoo.com и lucidchart.com?
0
shaelf12 ноября 2011, 00:24#
Сам программист, но иногда приходится накидывать UI. Пользуюсь keynote + keynotekungfu.com/. В итоге дешево, сердито и неплохо )
0
yucom12 ноября 2011, 06:51#
Я пользуюсь google документами и шаблоном Morten Just's Blue wireframe. Обычно wireframe расшариваю для клиента, для совместной работы. Ничего удобнее еще не видел.
0
Adam_Ether12 ноября 2011, 07:33#
Юзаю Balsamiq Mockups online-demo версию. Мне хватает. Работу можно эксрорт, импорт в xml.
0
Another_rus12 ноября 2011, 15:44#
Проапдейтил. Добавил несколько указанных выше инструментов, разделил на online-не'online, отсортировал по цене.
0
Pilat12 ноября 2011, 18:00#
wireframesketcher.com/ — It's a standalone software and a plug-in for any Eclipse IDE. Как дополнение к Eclipse неплох, но это не Axure. 75$ лицензия. 

0
ido13 ноября 2011, 08:03#
Увы, у каждого из этих сервисов/программ есть подводные камни с которыми сталкиваешься при более плотном использовании.

— Creatly частенько лежал, либо отказывался сохранять результаты работы. 
— Axure хорош, но его скорость работы очень низкая. Еще раздражало количество ненужных действий которое приходится совершать в нем — им бы свой интерфейс допилить. Совместная работа не слишком удобна.
— Cacoo печалит тем, что имеет серьезные проблемы с экспортом. Работа команды более чем из трех человек тоже не слишком удобна.
— и т.д.

В свое время перепробовали почти все из того, что есть в статье, но подходящего на 100% не нашли. Пока пользуемся Cacoo и Axure
0
bormotov13 ноября 2011, 13:15#
несколько лет используем Evolus Pencil для набросков интерфейсов. Путь «идея->обсуждение->первая версия» покрывает.
0
antonsnowy14 ноября 2011, 04:56#
А киньте кто-нибудь ссылку на инструмент для прототипирования Windows Phone 7 приложений. Помнится, они хотели отказаться от SketchFlow в пользу какой-то специальной надстройки PowerPoint, где можно было бы и создавать интерфейсы и их показывать.
0
feligz14 ноября 2011, 23:42#
Вы в начале выделили несколько критериев, вот взяли бы и оценили приведенные системы по этим критериям и вывод в конце, а пока это просто список инструментов, большая часть из которого всем известна.
0
Another_rus15 ноября 2011, 11:22#↑
Цель этого списка обозначена в самой статье — показать какое есть разнообразие и этим помочь тем, кому «большая часть» этого списка известна посмотреть, какие еще есть предложения на рынке и самим попробовать подобрать себе новый инструмент. Эта задача мне показалась быстрой и полезной. Та задача о которой вы говорите несомненно является очень важной и более полезной нежели приведенный список. Но и значительно более затратной по времени. Поэтому она была отложена в светлое будующее. Всему свое время.
+3
RGaifutdinov15 ноября 2011, 18:05#
На мой взгляд, список слишком неоднороден. Трудно, например, рассматривать Pencil и Axure в одном ряду, поскольку первый предназначен для создания статичных «карандашных» скетчей, а второй — интерактивных hi-fi прототипов. Их нельзя сравнивать и рассматривать как альтернативные решения. Эти инструменты созданы для решения совершенно разных задач.
Поэтому обязательно нужно выделить критерии и сгруппировать инструменты. Если этого не сделать — то список, честно говоря, будет малополезным. Он не поможет мне найти тулзу для решения конкретной задачи.

Вообще я бы начал статью с определения признаков инструментов прототипирования. Не понятно, какими свойствами должна обладать программа, чтобы считаться инструментом прототипирования. По каким соображениям, например, в списке нет популярнейшего Visio, но есть его маковый аналог Omnigraffle? Почему в списке нет Excel, Power Point и Photoshop, ведь в них тоже прототипируют? Все подобные вопросы отпадут, если вы чётко сформулируете признаки инструментов прототипирования и будете их придерживаться при пополнении списка.

Если говорить о самих инструментах прототипирования, то помимо разделения на online/offline и представления цены я бы, как минимум, выделил следующие критерии:
1. Визуальная достоверность создаваемых прототипов:
— low-fidelity (скетчи, наброски, вайрфреймы)
— hi-fidelity (внешний вид прототипа приближён к реальной системе)
2. Интерактивность создаваемых прототипов:
— статичные
— интерактивные
3. Для десктоп-тулзов нужно явно указать ОС, на которых они будут работать (например, указанный тип для Axure «Десктоп» совсем не говорит о том, что он идёт на Win и на Mac OS, но не работает на Linux)
4. Тип прототипируемых приложений:
— веб-приложения, сайты
— дестоп (настольные) приложения
— приложения для мобильных ОС
5. Наличие перевода (локализации)

Я являюсь продакт-менеджером инструмента прототипирования GUI Machine, «варюсь» на этом рынке уже достаточно давно и понимаю, что поверхностного обзора для выбора подходящей тулзы не достаточно.

Предлагаю добавить наш инструмент в список. В соответствии с выделенными критериями, GUI Machine является десктоп-инструментом (идёт на Windows, Mac OS, Linux) для создания интерактивных hi-fi прототипов десктоп и веб-приложений, имеет русскую и английскую локализацию.
+2
mgarin15 ноября 2011, 19:18#
Статья называется «Инструменты прототипирования и создания wireframes», а в списке приведённых Вами инструментов львиную долю занимают средства для создания исключительно мокапов (iPlotz, MockFlow, MockupBuilder, Mockingbird, Balsamiq Mockups), что далеко не прототипы или вайрфреймы.

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

Для более серьёзных проектов использование подобных инструментов себя не оправдывает — не хватает функционала, конкретики в интерфейсе и возможности создавать какие-либо (даже самые базовые) интерактивные элементы.
0
Another_rus15 ноября 2011, 19:20#↑
Полностью с вами согласен. Для этого и писал предисловие. Каждый инструмент соответствует своей задаче. Не всегда те кто ими пользуются создают серьёзные проекты.
+1
mgarin15 ноября 2011, 19:29#↑
Просто мне кажется было бы куда интереснее почитать (хотя бы минимальный) обзор средств создания прототипов/вайрфреймов (мокап средства сюда не входят), так как они находятся на достаточно интересном уровне как по цене, так и по предоставляемым возможностям.

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

Да и появление многих из этих инструментов зачастую сопровождалось большим шумом и искуственным ажиатажем, поэтому пропустить их мимо было взгляда весьма сложно.
0
mgarin15 ноября 2011, 19:30#↑
Некоторые из них даже «рекламировались» на хабре в своё время.
0
cyberpsy21 ноября 2011, 14:39#
Какой инструмент порекомендуете для ведения одновременно нескольких проектов. Т.е. нужно рассчитывать на обширную документацию.

Динамика не нужна. Прототипирование 90% для веба. Иногда для мобильных и десктопа.

платный/бесплатный не имеет значения. просто нужно понимать, за что переплачиваются деньги.
0
Another_rus21 ноября 2011, 14:59#↑
На текущий момент веду свои проекты в fireworks. Причины следующие:

1. Гибкий уровень использование проработки — от базовых чернобелых протипов, до прототипов отрисованных «поверх» существующего дизайна при отрисовке дополнительных страниц
2. Вектор + Растр
3. Возможность использования встроенной архитектуры проекта проект(файл)-страницы-состояние
4. Упрощенное ( по тому что часто возникают глюки, и их приходится обходить ) взаимодействие между Fireworks-Illustrator-Photoshop. ( по факту скорее проще использовать импорт отдельных элементов, чем полностью файл ). 

Ключевыми для меня являются пункты 1-3.
0
kycher8 февраля 2012, 17:15#
1. Как поставить навигационную крошку? Чтобы путешествую по прототипу, менялась автоматом в зависимости от текущего пункта в меню. Оч важный для меня)) 
2. Как-нибуть можно контролировать выпадающее меню? Править виджеты или создавать? 

Заранее огромное спасибо
0
Another_rus8 февраля 2012, 17:28#↑
Из вышеперечисленных инструментов обе задачи можно решать с помощью Axure (из собственного опыта ).
0
kycher8 февраля 2012, 20:41#↑
Как реализовать? Нашел в виджетах bread, но он походу позволяет прописывать только вручную, а как заставить прописывать автоматически согласно карте сайта? У меня в проекте более 300 страниц, что мне каждой вручную прописывать. А без навигационной цепочки не выжить :) Как быть? Кто даст рецепт)

Еще подскажите можно ли создавать открывающиеся меню автоматически по карте сайта или добавлять в раскрывающийся список подразделы уже с ссылками? А то получается, чтобы создать раскрывающееся меню, приходиться вручную прописывать названия и присваивать ссылки. Как нибудь из карты сайта возможно генерировать раскрывающееся меню?
at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)