Axure RP

О программе

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

Интерфейс

На скриншоте выше номера панелей соответствуют следующим назначениям:

1. Меню и панель инструментов. Тут всё стандартно и понятно по десяткам программ, с которыми вы работали.
2. Pages. Это страницы вашего макета/сайта. Здесь их можно создавать, переименовывать, организовывать в папки.
3. Libraries. Это виджеты: элементы интерфейса страницы, элементы форм, иконки... Они перетаскиваются на рабочую область мышкой.
4. Masters. Это элементы для многоразового использования на разных страницах.
5. Рабочая область. Холст для ваших творческих работ. Каждая открытая на холсте страница открывается в виде закладки.
6. Inspector. Панель имеет закладки:
   • PROPERTIES. Это свойства выделенного элемента. На ней расположены события javascript и css, на которые можно навесить действия с помощью мощного мастера. Элемент, имеющий событие, помечается в рабочей области значком типа .
   • NOTES. Это заметки. Их можно писать как к странице в целом, так и к отдельному элементу. Их можно читать при просмотре итоговой работы. Элемент, имеющий заметку, помечается в рабочей области значком типа . А при просмотре и публикации значок заметки будет другой, типа ≡, и эту заметку можно прочитать по клику.
   • STYLES. Эти стили выделенного элемента. Тут его можно сделать красивым и привлекательным. Нижняя полоса верхней панели инструментов – это тоже стили, но на панеле Styles атрибутов больше.
7. Outline. На этой панели собраны только те элементы, которые используются на текущей странице. При выделении элемента в этой панели он также выделяется на рабочей области – удобно для поиска и выделения.

Идеология работы

Идеология работы такова. Из панели Libraries пользователь перетаскивает на рабочую область виджеты (элементы интерфейса такие как кнопки, текст, изображения...). Распределяет виджеты согласно сетке разметки или по своим соображениям, на некоторые виджеты навешивает ссылки, или ожидание события и реакцию на это событие, которое может происходить как с самим этим виджетом, так и с другим. Проектировать можно не только отдельные страницы, но много страниц, т.е., сайт. Между страницами настраиваются переходы посредством гиперссылок, например, с помощью виджета Menu.
В программе есть понятие Мастера – это области интерфейса, которые используются многократно на разных страницах прототипа. Т.е., если мастер размножен по пяти страницам, то после изменения его в одном месте, изменения вступят в силу сразу на всех страницах.
По большому счету, в Axure RP можно создать реальный сайт без базы данных, используя программу в качестве конструктора. Но вы должны понимать, код сайта будет избыточным.

Очень интересный и полезный элемент Dynamic Panel (Динамическая панель). С помощью него можно огранизовать слайд-шоу, например, или спрайтовую анимацию. Дело в том, что этому элементу можно добавить набор состояний State и в каждое состояние добавить изображение. А потом навесить на какое-либо событие изменение состояния. Кроме того, это единственный элемент, с которым организуется Drag&Drop взаимодействие.

Просмотр и публикация

В любой момент времени пользователь может просмотреть промежуточный результат и сохранить его в HTML. Для просмотра используется браузер по умолчанию. Кнопка просмотра расположена на панели инструментов.

Публикация проекта осуществляется на ваш компьютер в виде набора html, css, js файлов и изображений. Публиковать сайт можно не только на свой компьютер, но и на сервер Axure, чтобы он был доступен для всех, кому вы вышлите адрес-ссылку. Кнопка публикации расположена на панели инструментов.
При публикации генерится также метаинформация по сайту с выводом списка событий и заметок.
Есть публикация спецификации проекта в формат MS Word с подробным описанием событий и действий, с видеоформами и изображениями, что будет полезно при дальнейшей верстке и разработки сайта или приложения.

Замечание по экспорту. В связи с политикой безопасности Javascript и браузеров на локальном компьютере ваш проект по умолчанию полноценно работать не будет. Это можно исправить, если вы все-таки желаете смотреть проект локально без Axure RP:

• FireFox: внесите изменения в настройках – зайдите через поле адреса about:config, найдите параметр security.fileuri.strict_origin_policy, измените значение на false.
• Google Chrome: надо выполнить команду в консоли ОС: chrome --allow-file-access-from-files для запуска Хрома (если у вас портабельная версия, то вместо chrome напишите путь к исполняемому файлу).

Пример проекта

Ниже в iframe загружен результат публикации тестового проекта в HTML. На разных страницах проекта вы можете познакомиться с несколькими виджетами (элементами), используемых в Axure RP. Слева можно отображать одну из трёх панелей: 1) стандартная панель навигации по страницам и панель, 2) комментарии к странице, 3) листинг интерактивности пользователя на проекте в текущей сессии.
Кроме того, по верхним левым кнопочкам можно получить гипессылку на отдельную страницу или подсветить (скорее оттенить) интерактивные элементы на странице.

Лайфхаки с JavaScript

Добавить аудио. Напишу инструкцию, как это сделать в Axure RP 8, а то стандартного виджета для этого нет, и пришлось повозиться. Итак:

1. Добавить Box, дать ему имя в инспекторе AudioHere. Сделать его Hidden. В него будем добавлять тэг audio через JS.
2. У страницы навесить: OnPageOnload > OpenLink > URL > Hyperlink > вставить формулу: javascript:void($("[data-label='AudioHere']").append("<audio controls id='player'><source src='my_audio_file.mp3' type='audio/mpeg'>Without sound</audio>"));
3. Добавит кнопку для проигрывания и ей навесить: OnClick > OpenLink > URL > Hyperlink > вставить формулу: javascript:$("#player")[0].play();
4. А это пауза на другую кнопку если нужно: javascript:$("#player")[0].pause();

Добавить CSS элементу по событию:

1. Дать название (в DOM это data-label) элементу, нуждающемуся в CSS, например, NeedElement.
2. OnMouseEnter > OpenLink > URL > Hyperlink > вставить формулу: javascript:void($("[data-label='NeedElement']").css("cursor","pointer"));
3. Если надо задать много свойств, то: .css({"propertyName":"value", "propertyName":"value", ...});

Скачать, почитать, посмотреть

📥 Скачать Axure RP Enterprise Edition 8.0.0.3323 (портабельная сборка). Проверял на Windows 10 64bit. Пароль для разархивирования: newart.ru Не требует инсталляции.
📥 Скачать Axure RP Enterprise Edition 8.1.0.3372 (портабельная сборка). Проверял на Windows 7 32bit. Пароль для разархивирования: newart.ru Первый запуск проходит чуть медленнее последующих. Рядом с экзешником создается папка Data.

Если через некоторое время слетит лицензия, то вот лечение:
Имя: generate
Ключ: GjOgK7pZWg+lsqo83rHHz591hplt+tyLM16ztObWFeyOB04Z4Y2R4BGk94BF7XhB

📗 Руководство пользователя Axure RP в PDF. На английском. 362 страницы.
📘 Руководство пользователя Axure RP в онлайне. На английском. 8-й версии программы.
📘 Руководство пользователя Axure RP в онлайне. На русском. Это автоматический перевод на лету английского текста первой ссылки.
📘 Руководство пользователя Axure RP. На английском. С официального сайта. Руководство самой последней версии программа.