Средства и методы прототипирования и дизайна интерфейсов.

В первую очередь хочется сказать о моей полной предвзятости в этом вопросе. Я трудился дизайнером с 2003 года, а потому, само собой, я предпочитаю инструменты к которым привык и изучил за это время. Иными словами,  нет ни каких объективных причин доверять моему мнению, так как я сам свято уверен, что средства прототипирования каждый выбирает сам, сообразно своему вкусу, привычкам и необходимости. Я никогда не стану утверждать, что Indesigne объективно заруливает Axure или наоборот, я видел хорошие работы в веб приложениях, названия которых даже не стал запоминать, так, что неважно в чем вы работаете, важен только результат.


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




Как я это делаю.

Естественно, что инструментарий, зачастую, зависит от непосредственной задачи, и непосредственных требований к макету/прототипу которые выдвигает заказчик.



Задача 1:

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
































и делаю черновой макет, создаю некоторое количество мастер-страниц с прописанными 
ссылками и начинаю набрасывать первичную логику. Это самый объемный процесс работы, потому, что количество итераций в день стремиться к бесконечности и, на начальном этапе, любая итерация может полностью поменять логику вашего прототипа. В этом нет ничего страшного, но к этому надо быть готовым, а в последвии просто привыкнуть. За несколько начальных итераций полностью переделать интерфейс, это нормально, чем больше значительных переделок будет вначале, тем меньше их будет в конце (мое личное мнемоническое правило). И тут Indesign с такими инструментами, как мастер страницы, стили и стилевые наборы дает мне наибольшую скорость работы. Необходимо поменять один и тот же элемент сразу на 30 экранах? Пожалуйста. Поменять все стили в прототипе одним махом, тоже дело нескольких кликов, поменять местами экраны, нет ничего проще. Но опять же повторюсь, я сверстал свою первую книгу в indesign еще в 2006 году, я знаю эту программу и умею ей пользоваться, человек который хочет взять и сразу начать прототипировать в ней, столкнется с определенными трудностями.  


Во время работы я всегда делаю пометки, которые потом ложатся в основу описания прототипа. Иными словами, я стараюсь не отделять работу над прототипом от работы над описанием, это единый процесс, который многие ошибочно разделяют на два почти независимых. Объясню свою позицию. Вам наверняка приходилось писать сочинения в школе и перед написанием вас заставляли писать план, знакомо не правда ли? Вспомните в чем была большая трудность, написать план или потом скрупулезно следовать ему невзирая на новые факты которые могли бы полностью его поменять? У меня было именно так, любые заранее составленные планы статей, постов и описаний переписывались почти каждый раз когда в работе всплывало, нечто непредвиденное и не учтенное. А порой можно было и просто выбросить все, что было сделано и начать все сначала. Я поначалу думал о своем неумении составлять планы, пока не попробовал писать план по ходу работы. И получилось. Теперь по окончании разработки прототипа я имею уже почти готовое описание, которое остается только довести до ума, дополнить скринами и оформить для заказчика. И для этого я использую таблицы Excel (теперь Google Docs). Надеюсь не нужно объяснять, чем именно удобны таблицы для составления описаний?

Итак, для прототипирования я использовал Indesigne для описания Google Docs, затратил чуть больше времени на разработку непосредственного прототипа но на выходе предоставил и прототип и готовое описание, с описанием интерэкшена и фидбека которые в последствии будет необходимы программисту.




Задача 2:

Спроектировать интерфейс, сделать дизайн, написать описание.
Все точно так же, как и в предыдущем варианте, только теперь к двум параллельным задачам проектированию и описанию, добавиться еще одна, которая их немного опередит - Дизайн приложения. Дизайн идет немного впереди по одной простой причине, нам нужна точка отправки: цвета которые мы будем использовать, эффекты которые мы будем применять, стилистика в которой мы будем работать и так далее. На этом этапе я поступаю следующим образом рисую черновой набросок одного экрана в Indesigne потом открываю его в Illustrator и рисую оформление, порой я начинаю сразу с Illustrator и когда гайдлайны становяться примерно ясны переношу их в Indesigne используя его в качестве секвенсора для элементов нарисованных в Illustrator или Photoshop.


































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


На выходе мы получаем описание прототип приложения выполненный в сделанном нами дизайне.




Минусы моего подхода:


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


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


Выгрузка дизайна (если он нарисован в Indesigne, а не вставлен отдельными файлами) довольно замысловатый процесс, который требует определенных навыков и ощутимого количества времени.


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


Отсутствует моментальная выгрузка в сеть для просмотра клиентом или другими членами команды.


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


О новинках.


Недавно, в мои цепкие рученки попалась интересная программка Muse, от все той же компании Adobe, где почти полностью отсутствуют минусы описанные мной выше.


Проведя выходные в изучении установил следующее:


Блок схема - то, что требуется.






















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


Интерактивность в простейшем виде обширна и удобна в использовании.


Выгрузка в сеть есть, посылаешь клиенту не файлы, а ссылку.


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





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





Ну вот вроде и все. Буду рад комментариям с вашими мыслями по поводу инструментов и методов разработки прототипов. Ну и как водиться - Прозит!

Комментариев нет:

Отправить комментарий