Интерактивный прототип в Axure за 20 минут

Пока я писал о проектировщиках и прототипах, внезапно выяснилось, что многие читатели не представляют, о чём идёт речь. Поэтому сегодня я решил рассказать о том, что такое интерактивный прототип, сделанный в Axure (произносится как «Экшер», а я привык говорить «Акшура»). И не только рассказать, но и показать.

Если совсем грубо, то интерактивный прототип — это набор связанных друг с другом html-макетов. Только работали над этими макетами не дизайнер с верстальщиком, а проектировщик в специализированной программе, позволяющей сделать эту работу в разы быстрее. В чём будет различие в результате? Прототип, подготовленный проектировщиком, в отличие от макетов, подготовленных верстальщиком, не предназначен для разработки. Он призван очень быстро и наглядно продемонстрировать то, что исполнитель будет воплощать в жизнь на следующих этапах. Это всё равно, что трёхмерная модель готовящегося к строительству здания. На её создание уйдёт гораздо меньше времени, чем на постройку, и она позволит виртуально побродить по будущему проекту.

Выгоды от прототипов сложно переоценить.

• Простота и скорость создания. Первую версию прототипа хороший проектировщик может продемонстрировать через несколько часов после формализации задачи;
• Хорошо сделанный прототип специально предназначен для последующих правок. Взглянув на получившийся результат, и клиент, и исполнитель, с помощью быстрых итераций верно пойдут к желаемой цели;
• Это позволяет ещё до написания функциональной спецификации или технического задания очень точно договориться о том, что должно получиться на выходе. А документы только закрепят эту договорённость;
• Благодаря наглядности прототипа, вероятность правок на следующих этапах создания сайта сводится к нулю. А с учётом того, в какие суммы могут обойтись правки на этапе программирования, этап проектирования ежедневно экономит огромное количество средств людям во всём мире.

Специально для Хабра я записал процесс создания простого типового прототипа. Я его взял из головы, целью было продемонстрировать, с какой скоростью проделывается подобная работа. Из видео можно понять, что за 20 минут опытный проектировщик может сделать уже что-то, что можно обсудить и дать обратную связь. Плюс видно, что все сквозные и списковые элементы сделаны с помощью мастеров, что позволит, редактируя один мастер, вносить изменения в весь прототип. Не нравится название пункта меню в шапке? Исправляем одно слово, и это исправление применяется ко всем страницам. Хочется изменить внешний вид отдельной работы в списке портфолио — то же самое. Редактируем отдельный мастер, а затем выравниваем результат на странице со списком работ.

Вы также заметите, что в ролике я пользуюсь вторым прототипом, в котором собраны основные типовые элементы интерфейса. Об этом я постоянно твержу участникам своей группы ^[1] по Axure — заводите себе подобные «мега-прототипы» и сохраняйте в них все те вещи, которые явно повторяются от прототипа к прототипу. Это увеличит вашу скорость работы. И это удобнее, чем открывать разные свои старые прототипы в поисках нужного куска интерфейса.

Как я уже говорил, сгенерированный прототип представляет собой набор html-файлов, которые можно выложить либо на специальном сервисе, предоставляемом самой Axure, либо на любом своём хостинге ^[2]. Клиенту лишь нужно будет дать ссылку. Вот ссылка на прототип, который я сделал в ролике:

http://share.axure.com/OHB5ZQ ^[3]

Не знаю, готов ли тот хостинг ^[2] к Хабраэффекту, но готов рискнуть.

Попробую предвосхитить некоторые ваши вопросы.

• Axure предназначена не только для проектирования сайтов, но и подходит для мобильных приложений, десктопных приложений и других интерфейсов;
• Позволяет делать адаптивные прототипы;
• Не ограничивает проектировщика в создании интерактива и динамики на страницах;
• Может генерировать прототипы не только в виде html-файлов, но и в виде набора картинок;
• Может придать прототипу вид скетча одним нажатием кнопки.

Ну вот и видео. Использовалась бета-версия Axure RP Pro 7. Музычка ещё обрабатывается, скоро заработает.

Автор: Ekamelev

Источник ^[4]