Интерактивные прототипы

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

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

Интерактивные прототипы в Axure RP создаются с использованием HTML, JavaScript, CSS и файлов изображений, а потому их можно просматривать во всех популярных браузерах: Firefox, Internet Explorer, Safari и Chrome. Для просмотра сгенерированного прототипа в браузере нет необходимости устанавливать специальный ридер, плеер и даже Axure RP, что значительно упрощает его демонстрацию пользователям. Вашим клиентам потребуется установить Axure RP только если они захотят внести изменения в прототип. (Прим.пер.: все-таки прототипы, сгенерированные в Axure RP версии 6.0, открытые в Google Chrome, просят установить плагин для просмотра.)

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

Настройка и генерация прототипов

Программа содержит большое количество опций генерации прототипа, среди которых есть выбор страниц, а также создание логотипа или сопроводительной подписи. После настройки прототипа, генерация HTML и JavaScript кода осуществляется нажатием кнопки Generate.

Настройки прототипа

Чтобы вызвать диалоговое окно генерации прототипа, выберите в строке меню Generate > Prototype или нажмите на кнопку Prototype в панели инструментов.

Основные настройки (вкладка General). Здесь можно указать папку, в которую будет сохранен прототип, и выбрать браузер, с помощью которого он будет открываться после генерации. Прототип состоит из нескольких файлов, поэтому для него стоит выделить отдельную папку. По умолчанию на PC прототипы сохраняются в папке ~/My Documents/My Axure RP Prototypes, а на Маке — в папке ~/Documents/Axure/Prototype. Чтобы вернуть папку по умолчанию, кликните на «Использовать папку по умолчанию» (Use Default).

Страницы (Pages) — укажите, какие страницы должны быть включены в прототип. По умолчанию установлена генерация всех страниц.

Примечания (Annotations). Выберите и установите порядок примечаний, которые должны войти в прототип. Здесь же вы найдете опцию замены иконок примечаний метками виджетов.

Взаимодействия (Interactions) — укажите, должны ли описания сценариев показываться всегда, или только в том случае, когда у события есть несколько сценариев.

Логотип (Logo) — загрузите логотип, который будет представлять ваш прототип.

Мобильные устройства (Mobile/Device) — с помощью этой опции вы можете вставить в прототип тэг окна просмотра. Он указывает прототипу размер и возможности масштабирования окна в устройстве, через которое открыт прототип.

Распространение (Distribution, только для РС) — опция, которая позволяет создавать СНМ-версию прототипа для его передачи одним файлом.

Расширенные параметры (Advanced) — опции, позволяющие сохранить текст в качестве изображения, выбрать единицы измерения для размеров шрифтов и отменить эффект эскиза.

Обсуждение (Discuss, Beta) — опция, включающая возможность обсуждения прототипа при помощи AxShare (share.axure.com). Эта возможность пока находится на стадии Бета-версии.

Генерация прототипа

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

Также запустить прототип в любое время можно открыв файл start.html (или index.html) в папке с прототипом.

Совет: После создания прототипа вы можете пересоздать отдельные страницы с помощью опции меню Generate > Regenerate Current Page to Prototype (Пересоздать текущую страницу прототипа). После этого нужно обновить страницу в браузере. Это отлично экономит время, особенно когда вы работаете над отдельной страницей большого проекта.

Использование прототипа

Прототип состоит из двух частей.

Слева: Карта сайта (Sitemap), Заметки (Page Notes), Обсуждение (Discuss). Эти опции расположены в трех вкладках этого окна. Карта сайта позволяет открыть страницу в основном фрейме — достаточно кликнуть по ее названию. Во вкладке Заметки показаны заметки на текущей странице. Вкладка Обсуждение позволяет добавлять комментарии к прототипу.

Этот фрейм можно свернуть, нажав на серый прямоугольник в правом верхнем углу. Чтобы развернуть фрейм обратно, нажмите на серый прямоугольник в верхнем левом углу страницы. Вместо того чтобы запускать файл start.html, вы можете сразу открыть html-файл одной из страниц прототипа, и тогда левый фрейм не будет отображаться.

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

Совет: Если вы пользуетесь Internet Explorer, он может запросить разрешение на отображение компонентов ActiveX. Чтобы выключить это предупреждение, откройте главное меню, выберите Опции > Настройки IE > Расширенные настройки. В списке Безопасность поставьте галочку в пункте «Разрешать просмотр компонентов ActiveX».

Открытый доступ к прототипу

Есть несколько способов открыть доступ к прототипу, причем для этого пользователям прототипа не обязательно устанавливать Axure RP или какой-нибудь ридер.

ZIP-файл

Чтобы создать ZIP-файл с прототипом, в контекстном меню его папки выберите опцию Отправить > Сжатая ZIP-папка (для PC) или Сжать (для Mac). У вас появится архив с прототипом, который можно отправить по почте.

После того как пользователь получит архив, ему достаточно будет распаковать файл. Чтобы просмотреть прототип, необходимо запустить файл start.html — это откроет прототип в браузере. Заметьте: запустить файл сразу из архива нельзя, сперва его необходимо распаковать.

Загрузка в файловое хранилище

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

После загрузки прототипа достаточно дать на него ссылку— все, у кого есть доступ к серверу, смогут просмотреть прототип в браузере.

Публикация в AxShare (beta)

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

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

Пересылка CHM-файла (только для РС)

СHМ — это формат HTML-файла помощи, разработанный Microsoft. На большинстве компьютеров с Windows есть предустановленный ридер таких файлов. Как и в случае с zip-файлом, этот способ позволяет пересылать прототип одним файлом, и, как правило, не требует от получателя установки каких-либо программ для просмотра. Этот способ немного лучше тем, что получателю не нужно распаковывать архив.

Чтобы создать прототип в формате .chm, откройте вкладку Distribute в диалоговом окне генерации прототипа (F5), а затем выберите опцию создания CHM-файла. При генерации, в папке прототипа создастся .chm-файл.

Если у вас не установлен HTML Help Workshop, установите его, чтобы создавать CHM-файлы. После установки найдите файл hhc.exe, а затем во вкладе Distribution диалогового окна генерации прототипа нажмите на Locate hhc.exe и укажите путь к этому файлу, чтобы указать Axure расположение программы на вашем компьютере.

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