Axure

Визуальные редакторы

Содержание сайта

Визуальные редакторы

Обзор программ л.3

Axure

На рисунке - Axure RP Pro v.6.0 (2002 - 2011 гг.).  Интерфейс и справка - на англ. языке. Вес 39,2 Мб.
Операц. системы: Windows, Mac.
Автор: Axure
Цены: Axure RP Pro 6 - 589 долл., Axure RP Standard Edition - 289 долл.
Испытательный срок до покупки - 30 дней.

Последние версии: 


Краткое описание Axure RP (для версии Axure RP 7)

Основное назначение Axure RP - создание прототипов (Prototype). Прототип - опытный образец чего - либо.
В Axure RP Pro возможно создание прототипов самого широкого диапазона - прототипов сайтов, схем технологических процессов (и вообще различных схем и диаграмм), прототипов интерфейсов программ и пр.

Хотя в последние 20 лет в нашей стране возобладало мнение, что плановость - это пережиток советской эпохи и капиталистическая анархия производства намного эффективней плана, но создатели Axure (и все почитатели этой программы) с таким мнением не согласны. Они считают, что любая работа, в том числе и создание интернет-проектов, должна вестись по плану.
Axure - инструмент такого планирования и воплощения плана в жизнь.
Любой замысел перед тем, как будет воплощен в жизнь, нуждается в проекте (к примеру, строительству здания предшествует создание проекта здания). Этот проект первоначально появляется в чьей-то голове и затем проходит несколько стадий - от первых черновых набросков до все более осмысленных вариантов и заканчивается окончательным и детализированным проектом, с указанием, что делать, как делать, в какие сроки должны быть выполнены определенные этапы работ и сколько все это будет стоить.
О целесообразности создания прототипов

По сравнению с теми программами, которые также применяются при создании прототипов (например, Microsoft Visio, Adobe Fireworks,  Adobe Dreamweaver и др.), Axure RP  быстро развивается и постепенно выходит в лидеры в своей области деятельности, т.е. в создании прототипов.  В настоящий момент  официально продано около 30 тыс. Axure RP.
Еще о некоторых программах по созданию прототипов

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

Axure RP - визуальный редактор, но довольно специфический. Эта специфика проявляется даже в терминологии.

Интерфейс
Только один файл может быть открыт в программе (в Axure для  Windows).
Центральное место окна программы занимает окно редактирования.
Выше окна редактирования находится  строка меню и панели инструментов. Слева - панели Карты сайта, Виджетов и Мастеров, справа - панели "Свойства виджета и стили" и Менеджер виджетов (Widget Manager). Ниже окна редактирования - панель "Свойства страницы".
При создании нового документа Axure заранее создает Первую (главную) страницу и три вложенные страницы. Это - значение по умолчанию для каждого нового файла Axure.

В Axure создается  два типа страниц:
Страницы Wireframe  (окна) - те страницы, которые будут преобразованы в html-страницы при генерации прототипа. Страницы Wireframe перечислены на левой панели (панели Карты сайта).
Страница  WireFrames -  схема документа (без деталей)
Каждая страница WireFrames снабжается описанием (спецификацией) с описанием ее свойств и разъяснением функций отдельных элементов страницы.
В окне редактирования может быть открыто несколько wireframes в отдельных рамках.
Некоторые страницы могут являться просто идеями или черновыми набросками и не войдут в окончательный проект. Такие страницы также можно сохранить, создавая так называемые "пустые папки" для сохранения неиспользованных страниц.

Страницы потока (Flow) - второй тип страниц, входящих в окончательный проект - блок-схемы, диаграммы, карты сайта, поток задач и др.
Страницы Wireframe и страницы потока отмечены разными значками.
Вы можете легко создать страницы потока. Например, щелкните на панели Карты сайта по первой странице (Home) правой кнопкой, выберите Generate Flow Diagram (Создать Блок-схему) - будет создана схема (карта сайта). Вы можете вставить эту схему на новую страницу и назвать страницу, например,  Sitemap.
Могут быть созданы и другие блок-схемы, которые полезны непосредственно при работе над проектом. Блок-схема задач определяет последовательность и назначение стоящих задач, определены этапы создания прототипа, определены уровни детальной проработки на каждом этапе и пр. В редакторе можно создать блок-схемы пути поиска файлов, блок-схему обзора и др.

Страницы wireframes и страницы потока связываются ссылками.

Эскиз
Эскиз - рисунок на листе бумаги от руки или используя программы для рисования. Эскиз можно создать в PowerPoint, в графическом редакторе (например в  Adobe Photoshop).  Axure также имеет функцию создания эскизов, начиная с самых первых (черновых) набросков.  Эскиз не содержит деталей, может быть черно-белым. В Axure есть даже эффект, когда созданный эскиз имитирует рисунок неумелого рисовальщика (чтобы показать, что это просто черновой набросок).

В процессе работы черновой набросок (первоначальный эскиз) постепенно разрастается, уточняется, оформляется внешний вид страниц проекта, придается интерактивность элементам.
Конечная цель прототипирования -  полностью представить структуру, содержание и функциональные возможности вебсайта (если создается прототип сайта).

Библиотеки виджетов - это коллекция объектов, которые можно вставить на страницу. В Axure виджетами называют все, что можно вставить на страницу - заголовки, текст, рисунки и пр.
См. Панель виджетов
Виджеты Axure не только простые геометрические формы. Виджеты области Flow (потока), которые широко применяются при создании схем,  можно наделить интерактивностью. Вы можете создать свою библиотеку виджетов.

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


Мастера
В веб-редакторах мастером обычно называется просто окно, в котором производятся настройки свойств вставляемых объектов или выполняется какая-то операция. В Axure Мастер - это нечто другое. Здесь мастер - это своеобразный шаблон, который объединяет несколько элементов. Несколько мастеров составляют библиотеку шаблонов. Каждый шаблон может быть вставлен на несколько страниц (окон).
Есть мастера-заголовки, мастера-верхние и нижние колонтитулы, мастера-панели навигации и пр.
При изменении Мастера меняется все его вхождения в проекте. При необходимости мастер может быть "подмастерьем" - входить в состав другого, главного мастера.
Применение мастеров позволяет значительно ускорить работу над проектом - макеты собираются из заранее созданных блоков. Набор мастеров также помогает при необходимости быстро изменить или скорректировать проект.
Мастера могут применяться с самыми различными целями. Например, чтобы упростить работу с аннотациями, напишите свою аннотацию один раз в мастере и используйте эту аннотацию  многократно.
К мастеру можно применить случай.
При изменении или удалении мастера нужно соблюдать осторожность, если проект создается группой.

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

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

При совместной работе над проектом важно своевременно (часто) доводить созданные спецификации до всех участников группы.
Вы управляете всеми свойствами вывода документа спецификации в окне Generate Specifications. Окно разделено на восемь разделов. После  нажимаете кнопку Generate Axure откроет Microsoft Word, который откроет документ спецификации. Спецификацию можно рассмотреть и, при необходимости, отредактировать.

Axure уделяет много внимания созданию спецификаций, что приводит к экономии времени и усилий. Однако создании спецификации все еще остается трудоемким делом. Спецификация представлена в виде файла Word.
На шаблон Word стоит обратить внимание при создании спецификации. Когда Вы нажимаете на кнопку Generate, Axure открывает шаблон Word со всем содержанием, организованным и основанным на Вашем выборе в предыдущих разделах. Эта панель позволяет Вам редактировать шаблон Word, импортировать шаблон или создать собственный шаблон (например, включить в шаблон эмблему Вашей компании, разместить содержание в два столбца и другое).

Создавая спецификации, Вы можете создать фильтр на значениях аннотации. Если Вы отслеживаете версии или запросы изменения в аннотациях, Вы можете произвести документы версией или изменений.

Примечания страницы содержат краткий обзор страницы, указывается, какие задачи пользователь может выполнить на данной странице, описание клавиш и кнопок интерфейса и др. Можно добавить дополнительные области примечаний в дополнение к тем, что есть в редакторе по умолчанию. Вы можете сделать описание страницы (Description) в нижней панели.
Аналогичные примечания создаются и для мастеров.

Свойства страницы
В разделе Страниц  Вы можете выбрать, какие страницы от карты сайта будут произведены в спецификациях. Имеется 14 опций, чтобы конфигурировать информацию страницы. Эти опции будут относиться ко всем страницам в карте сайта.
Форматирование страницы включает выравнивание страницы (слева или по центру), цвет фона или фоновое изображение, применение эффекта эскиза. Созданные настройки можно сохранить как новый стиль.
Вы можете использовать единственную страницу с динамическими панелями (при применении случая OnPageLoad).

Интерактивность
Большое внимание в редакторе Axure уделено наделению вставляемых объектов так называемыми динамическими функциями, когда вставленный элемент реагирует на заданные события.
Применение взаимодействия в Axure - следующий шаг при переходе от статических страниц к динамическим. Взаимодействие может проявляться как при загрузке страниц в браузер (например, динамическая панель устанавливается в определенное место на странице или курсор устанавливается в определенной строке веб-формы), так и при щелчке пользователя по определенному виджету.  Взаимодействие может быть применено к странице или к определенному виджету (прямоугольнику, радио-кнопке и др.).  Вы можете создать взаимодействия виджета в Свойствах виджета.
Раздел взаимодействия (Interactions) - применение к виджетам случаев (например, OnClick) и поведения. Некоторые случаи и поведения можно создать без написания кода, используя возможности Axure. Нажмите на виджет в половине Wireframes, и доступные события будут перечислены в разделе Interactions. Также можно применять собственное кодирование для создания динамических интерфейсов (например, при наведении курсора на текст его цвет изменяется от черного до оранжевого, или изменяется цвет фона текста).
Действие Axure -  определенная команда (например - открыть ссылку во всплывающем окне). Одно или более действий организованы в модуле, названном случаем, и случай связан со специфическим событием, таким как OnClick.
Axure обеспечивает 24 действия, организованные в четырех категориях: ссылки, динамические панели (7 действий), виджеты и переменные (8 действий), разное (2 действия). Axure имеет Редактора случая.
Варианты проекта создаются без какой-либо работы с кодом.
Выберите случай (щелчок мыши, наведение курсора на объект, отведение курсора от объекта и др.).  Выберите действие (открыть окно, показать панель и др.).
При создании опытного образца в формате  HTML Axure преобразует взаимодействия в реальный код JavaScript (файлы JavaScript будут автоматически включены в состав папки проекта).

Блок-схема внешне выглядит как сочетание геометрических фигур (виджетов потока - Flow), соединенных линиями со стралками. Вы можете  использовать несколько типов блок-схем, таких как последовательность, карта сайта, модель взаимодействия, иерархия и так далее.

Визуальные эффекты проявляются в ответ на действия пользователя. Например - при наведении курсора на объект его стиль оформления меняется (изменяется цвет фона, стиль шрифта и т.п.).
Визуальные эффекты можно применить даже на начальных стадиях работы над проектом - при создании чернового эскиза, когда виджеты, вставленные на страницу, выглядят как рисунки карандашом.

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

Мобильные приложения
С общедоступными библиотеками Axure's Вы можете легко создать опытные образцы, которые моделируют появление большинства популярных мобильных устройств, от iPhones и iPads до Android.

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

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

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

В Axure проект общедоступен для всех членов группы (в виде общедоступного архива на сервере), но работать над конкретным файлом может только один из членов группы.
Каждый участник группы может проверить любой элемент опытного образца, включая элементы, которые проверены другими участниками группы. Также можно просмотреть проектную историю
О некоторых проблемах при совместной работе с Axure (англ. язык).



Публикация (Генерация) и просмотр

Прототип (опытный образец) при нажатии кнопки Prototype создается в виде файлов HTML. Вы можете в настройках генерации определить разделение большого проекта на отдельные разделы. Создается карта сайта (применительно к сайту). Генерируется спецификация (файл Microsoft Office Word).
Все сгенерированные файлы по умолчанию сохраняются в папке Prototype, это могут быть файлы html, javascript, CSS.
Проект сохраняется в нескольких форматах:
- файл с расширением .rp. - при создании файла, если Вы - один автор (формат по умолчанию);
- файл RPPRJ - при работе над проектом в группе, когда проект имеет встроенные особенности (например, страницы регистрации). При создании файла индивидуально также можно сохранять проект в формате RPPRJ;
- файл RPLIB - применяется при сохранении собственной библиотеки виджетов.
Firefox - рекомендуемый браузер для просмотра.
Ваши заказчики не нуждаются в  Axure RP, если они не будут редактировать файл. Они могут рассмотреть опытные образцы в популярных браузерах. Если заказчик намерен делать изменения в проекте, он должен установить Axure RP.
Предусмотрено несколько вариантов генерации проекта, которые установливаются в настройках генерации. Возможно создание спецгенераторов.

В октябре 2017 г. появилось сообщение, что в начале 2018 г. будет происходить переход от протокола http к протоколу https. Это изменение будет происходить в два этапа: первый, 1 ноября, протокол https станет вариантом по умолчанию (вместо http), а во-вторых, в первом квартале 2018 года, протокол http исчезнет как вариант.
Это сделано для большей безопасности и скорости работы, маленький значок “безопасное” появится в адресной строке вашего браузера, когда вы просматриваете страницы. Однако, такое переключение на HTTPS может потребовать внимательности и некоторых изменений, чтобы убедиться, что ваши прототипы продолжают быть видимыми.


Простой веб-сайт

Все сказанное ранее - это знакомство с назначением и функциями Axure RP.

Подавляющее большинство сайтов можно создать, не используя спец. программы по созданию прототипов.
Когда Вы самостоятельно создаете сайт для себя, нет необходимости в таких функциях Axure RP, как организация совместной работы, необходимость знакомить заказчика с результатами и пр. Вы сами в одном лице и заказчик, и исполнитель.
Кроме того, сегодня трудно говорить об индивидуальной работе над сайтом. Используете ли Вы специальный веб-редактор, CMS (например - WordPress), шаблон страницы или шаблон целого сайта - всегда при этом часть работы уже кто-то выполнил.

При создании своего сайта Вы можете забыть о всех этих малопонятных  WireFrames (кстати, некоторые считают, что использование WireFrames при создании прототипов - излишние трудности, которых можно избежать). Да и сами программы по прототипированию (Axure, например) все еще ищут свое место под солнцем и стараются убедить всех в своей нужности. Возможно, что с появлением новых технологий и средств в веб-строительстве, когда создание сайта будет очень сложным делом, такие программы действительно станут необходимыми всем.

Axure RP можно использовать непосредственно для создания сайта, т.к. при генерации проекта создается комплект файлов html, javascript, CSS (обычно файлы html содержат излишний код).
Axure RP как веб-редактор сделан очень качественно, просто и удобно. Если при создании сайта вам достаточно тех объектов (виджетов), которые идут с редактором (см. Панель виджетов), то Axure RP можно использовать непосредственно для создания веб-страниц.
Axure RP хорошо работает с текстом, изображениями, слоями, поможет вставить на страницы панели навигации, веб-формы, можно применить динамические панели, интерактивность и пр. Удобно сделано выравнивание вставляемых объектов на странице.
Очень хорош редактор при создании схем - в этом деле он самый лучший из веб-редакторов.

Но: по функциональности и числу вставляемых на страницу объектов (без написания кода) Axure RP в целом уступает хорошим веб-редакторам. Кроме того, используя Axure RP непосредственно для создания html-страниц, Вы будете использовать редактор не по назначению (назначение редактора описано выше).

В последней версии программы Axure RP есть возможность создавать одностраничные сайты с прокруткой (используя эффект прокрутки - Scroll Effects). Подробнее (англ. язык)


Axure Cloud

Axure Cloud -  место, где вы можете объединить все свои любимые инструменты для создания прототипа, совместно работатать, обмениваться комментариями. С Axure Cloud вы можете превратить любой экран в рабочий интерактивный прототип. Импортируйте объекты Sketch или изображения, добавьте триггеры с эффектами анимации.
Предварительный просмотр и возможность поделиться своими прототипами мгновенно.
Имеется бесплатный и платный план (30 долл. в месяц) использования Axure Cloud.

В июле 2019 г. акторы Axure сообщили о больших изменениях в Axure Cloud. Сейчас этот облачный сервис превращен, помимо предоставления хостинга, в полноценный инструмент для совместной работы в облаке, предназначенный для нужд профессионалов UX и групп, с которыми они работают.
Интерфейс Axure Cloud 2019 г полностью изменен.
    Используйте вкладку «Проверка» Axure Cloud для извлечения CSS, текстового содержимого и информации о макете из файлов RP и монтажных областей Sketch.   
    Создание прототипов из файлов эскизов и изображений в Axure Cloud
    Благодаря новой функции сборки Axure Cloud каждый может создавать интерактивные прототипы из Sketch и графических файлов прямо в веб-браузере.

При использовании Axure Cloud Вы можете опубликовать файл RP для нескольких ссылок Axure Cloud. Это может быть полезно, если вы хотите поддерживать разные версии прототипа для разных аудиторий, таких как ваша команда разработчиков, ваши разработчики и ваши заинтересованные стороны.

Страница Axure Cloud.

---

Обучающие материалы:

О прототипировании (видео) Зачем нам прототипирование ? Основы работы в Axure v 6 Основы работы в Axure v 7 Основы проектирования веб-интерфейсов в Axure RP Pro Прототип сайта - азы (видео) Прототип сайта (азы) Работа со страницами, виджетами и мастерами Навигационное меню, слайдер и табы Пример создания простой поисковой формы

Лайтбоксы Поисковая форма Дополнительные виджеты для axure Axure RP 6: свойства страниц Axure PR 7:  “Repeater” Создание спецификации Axure PR 6: Новые взаимодействия Взаимодействия типа «drag and drop»

Русские обучающие материалы по Axure RP могут пояснить только основы работы в программе, кроме того очень разрозненны. Поэтому для тех, кто хочет изучить работу Axure RP более детально, необходимо обратиться к первоисточникам, т.е. к зарубежным справочным материалам.
Авторские справочные материалы - на странице http://www.axure.com/tutorials
Прототипирование для мобильных телефонов (англ. язык)
Примеры применения Axure RP
Советы по прототипированию с Axure RP (2017 г, июль, англ. язык)


Форум Axure RP (англ. язык)

Имеется несколько  книг  по  Axure RP (в основном платных). Одна из таких книг - Axure RP 6 Prototyping Essentials (англ. язык).
Автор: Ezra Schwartz (автор имеет большой опыт создания прототипов и работы в разных программах по созданию прототипов). Цена: 18.99 - 30 £   (Форматы: PDF, PacktLib, ePub и форматы Mobi - 16.14 £).
В формате PDF - 41,3 Мб, 446 стр. Дата выпуска: январь 2012.  Почта: service@packtpub.com, questions@packtpub.com
Книга содержит подробное описание работы в Axure RP 6, много иллюстраций (скриншотов), заметки пользователей, опыт работы.
Купить книгу: http://www.packtpub.com/axure-rp-6-prototyping-essentials-for-compelling-interactive/book

Страница HOST, SHARE, DISCUSS (HOST, ПОДЕЛИТЬСЯ, ОБСУДИТЬ - англ. язык)

---

Скачать Axure RP

Скачать  Axure RP v 9  Beta

Купить
Axure RP Pro (495 долл. или 29 долларов в месяц)
Axure RP Team  (895 долл. или 49 долларов в месяц)
Axure RP Enterprise (99 долларов в месяц)




Вернуться к обзору