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

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

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

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

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


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

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

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

http://share.axure.com/OHB5ZQ

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

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

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


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

  • +13
  • 125k
  • 9
Поделиться публикацией

Похожие публикации

Комментарии 9
    –2
    то что получилось — довольно примитивно —
    т.е. очень мало интерактива —
    хотя и красиво
      +4
      Вот просто обожаю такие комментарии. На видео и в прототипе показан объём работы, который можно сделать за 20 минут, а вы пытаетесь дать субъективную оценку сложности самого проекта. Я говорю, что можно быстро продемонстрировать что-то клиенту уже через час, а вы пишете про интерактив. Какого интерактива вам не хватило в рамках данной демонстрации? Что туда добавить, чтобы он не считался примитивным? И, главное, как это повлияет на скорость последующих правок в то, что получится?
        0
        то что получилось не показывает возможности программы в полном объеме. К примеру, там есть виджеты делающие поиск с автодополнением. Это мелочь, но это сложно нарисовать — а иногда и объяснить клиенту. Формы, меню выпдающие, у вас только попап один — что уже хорошо.
        И именно для это, по-моему, и нужны прототипы в большой мере, чем обычный скетч.
        Если речь идет о последующей доработки данного макет, то да, согласен — результат красивый
        И уж не обижайтесь ;-)
          +2
          Так ведь автором и цели такой не ставилось — показать все возможности программы.
            0
            Axure поддерживает библиотеку ваших собственных стилей.
            Всегда можно заранее запрограммировать все часто-используемые, но технически не самые простые элементы (в том числе и автокомплит), а потом при клиенте добавить его в прототип и продемонстрировать.
        0
        Работал на 2 проектами летом для одной компании и делал прототипы — тулза достаточно удобная хотя было пару элементов которых не хватало и надо много лишних действий сделать. Но в общем был доволен. Скорость обучения была высокая, за неделю освоил практически всю.
          0
          Axure прекрасный инструмент, полностью перешел в прототипировании на него.
            0
            Axure замечательный инструмент, особенно когда поставил себе цель разобраться в нем. Жаль, что для личного использования выходит дороговато, хотя не отрицаю, что оно того стоит.

            Получилось хорошо и быстро, но все равно вы читерили, у вас есть готовые элементы в другом файле :)

            Воспользуюсь случаем и спрошу: как сделать ссылку в тексте? Например, у меня есть всплывающее окно при наведении на фамилию (не разобрался с этим сам).
              0
              Не считаю это читерством. У любого проектировщика может быть такой файл. Зачем клиенту платить проектировщику за время, которое он потратит на создание элемента, который уже много раз создавал?

              Ссылку в тексте можно сделать, выделив в тексте нужное слово или словосочетание и нажав на ctrl+shift+alt+H (либо кликните по иконке «Insert text link») в панели со стилями. Но речь пойдёт именно о ссылке. Как сделать всплывающее окно при наведении на фамилию, лучше спросить в группе, тогда ответ поможет не только вам.

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

            Самое читаемое