Axure — это сервис для разработки функциональных и интерактивных UX-прототипов. Одно из главных достоинств – совместная разработка проектов. Для этого нужно приобрести подписку, добавить пользователей и выдать им доступ к документу. Еще важный плюс заключается в огромной библиотеке с различными схемами, иконками и прочими веб-элементами, которые упростят разработку прототипов. Регистрация в сервисе проводится быстро. Также радует пробный период для тестирования функционала на бесплатной основе. Ниже разберем интерфейс и функциональные возможности программы.
Начало работы
Для работы с Axure пользователю придется установить программу на ПК. То есть управление будет осуществляться не через веб-интерфейс.
Функционал сервиса платный, но протестировать UX-инструмент все же можно на бесплатной основе. Для этого каждому новому пользователю предоставляется 30-дневная пробная версия.
В первую очередь производим установку. Для этого открываем стартовую страницу сервиса и кликаем на кнопку загрузки. На следующем этапе выбираем операционную систему:
- Windows;
- MacOS (Intel чип или Apple чип).
Загружаем файл и приступаем к установке, которая займет 2-3 минуты. По завершении инсталлятор предложит сразу запустить программу, на что даем свое согласие.
Когда откроется интерфейс, в центре появится окно регистрации. Кликаем на «Create an account» и в новой форме указываем электронную почту с паролем.
После ввода данных система должна автоматически перебросить пользователя на стартовую страницу программы, где будет окно с двумя командами:
- Subscribe Now — для приобретения подписки;
- Continue to Trial — для бесплатного периода.
Кликаем на второй вариант и приступаем к работе с программой.
Особенности интерфейса
Интерфейс программы Axure довольно сложный. Во-первых, в глаза бросается явный перегруз различными блоками, включая трехступенчатую панель управления. Во-вторых, интерфейс не переведен на русский язык, поэтому у малоопытных дизайнеров будут часто возникать проблемы при использовании многих инструментов.
Панель управления состоит из следующих уровней:
- Командный центр. С его помощью пользователь может создавать/экспортировать проекты, пользоваться инструментами для редактирования, использовать различные фильтры, корректировать настройки аккаунта и т.д.
- Инструменты. Здесь находятся инструменты для создания различных объектов в рабочей зоне. Это различные фигуры, текстовые вставки, динамические панели, списки и прочее.
- Настройка страницы. Часть панели управления, в которой пользователь может корректировать параметры рабочей области. Это, например, выбора размера страницы, добавление изображений и медиафайлов, центрирование текста, добавление эффектов.
В левой части экрана находится блок, в котором содержится библиотека шаблонов и компонентов. Компоненты при необходимости можно добавлять самостоятельно. Шаблоны тоже редактируются по своему усмотрению.
В правой части экрана содержится блок с библиотекой интерактивных действий, которые можно прикреплять к созданным прототипам.
Ниже разберем основные разделы и инструменты, которые нужны для создания UX-прототипов.
Панель управления
Для работы крайне важны следующие разделы:
- File;
- Edit;
- View;
- Project.
С помощью раздела «File» пользователь может создавать новые проекты и библиотеки, загружать, импортировать файлы, экспортировать готовые прототипы, распечатывать конкретные компоненты и многое другое.
Раздел «Edit» предоставляет доступ к инструментам, с помощью с объектами в рабочей области можно проводить следующие операции:
- вырезать;
- выделять;
- копировать;
- вставлять;
- удалять;
- переносить;
- дублировать;
- форматировать;
- искать;
- перемещать.
Для каждой команды в настройках установлена своя комбинация горячих клавиш, поэтому не придется каждый раз переходить в раздел. С помощью раздела «View» пользователь может скрывать или развертывать определенные панели или инструменты. Также стоит обратить внимание раздел «Project», в котором есть вкладка «Widget Style Manager», позволяющая корректировать отображение виджетов.
Следующий уровень панели управления предоставляет доступ к основным инструментам. Первым является курсор, с помощью которого пользователь может выбирать, выделять и перемещать объекты в рамках рабочей зоны. Активировать инструмент можно с помощью комбинации «Ctrl+Alt+1».
Далее идет инструмент, предоставляющий доступ к различным фигурам:
- квадрат;
- прямоугольник;
- овал;
- линия;
- различные формы;
- стики.
Также здесь есть кнопка для добавления медиафайлов.
Рядом находится инструмент для рандомного ввода текста. Для этого просто клацаем на букву Т, наводим курсор в любой область и жмем на левую кнопку мышки. Система по умолчанию добавит выбранный в настройках текст.
Следующий инструмент позволяет использовать различные панели, в которые будет вставлять текст. Здесь можно выбрать обычный прямоугольник, где будет содержаться текстовая информация, или указать лист-бокс. Также в наборе есть окна для текста, которые можно прокручивать с помощью колесика мышки.
Далее идет инструмент для использования динамический панелей, табличек, дополнительных страниц, скриншотов. По соседству находится инструмент «Перо», с помощью которого можно вырезать объекты и удалять задний фон.
Если нужно приблизить или отдалить проект, используем селектор в правой части экрана.
Последний уровень панели управления позволяет проводить различные манипуляции с текстом и медиафайлами. Здесь есть инструменты для выбора стиля шрифта, его размера и цвета. Также в этом блоке устанавливаются границы, прикрепляются ссылки, выбираются списки и указываются места, в которых будет отображаться текст.
Библиотека шаблонов
Чтобы упростить себе работу, пользователь может воспользоваться заранее подготовленными шаблонами. Для этого переходим в левую часть экрана, выбираем раздел «Pages» и указываем вкладку «Libraries».
Сразу же в этой панели развернется список всех имеющихся шаблонов. Чтобы не искать их вручную, можно воспользоваться поисковой строкой. Просто вписываем нужное название и жмем на значок с лупой.
Также можно воспользоваться селектором категорий, в котором шаблоны разбиты по следующим группам:
- All libraries;
- Default;
- Flow;
- Icons;
- Sample UI Patterns;
- Sample Form Patterns.
В представленных категориях можно найти следующие шаблоны:
|
Категория
|
Шаблоны
|
|
Default
|
- кнопки;
- фигуры;
- форма для загружаемых изображений;
- динамические элементы;
- таблицы;
- диаграммы;
- формы для текста;
- меню;
- инфографика;
- маркеры.
|
|
Flow
|
Геометрические фигуры
|
|
Icons
|
- иконки для веб-приложений;
- иконки, указывающие на физические ограничения;
- иконки рук;
- транспортные средства;
- иконки с типами файлов;
- формы контроля;
- иконки для текстового обозначения;
- значки в видеоплеерах;
- иконки брендов;
- медицинские обозначения.
|
|
Sample UI Patterns
|
- кнопки;
- формы;
- блоки ввода.
|
|
Sample Form Patterns
|
|
Чтобы воспользоваться шаблонов, просто выбираем подходящий вариант и с помощью мышки перемещаем его в свободную область. После добавления иконку можно редактировать, меняя размер, цвет и прочие элементы.
Одна из особенностей в том, что в библиотеку можно добавлять собственные шаблоны и даже изображения. Для этого поднимаемся к поисковой строке, кликаем на троеточие и в контекстном меню выбираем подходящую команду.
Интерактивные блоки
Чтобы привязать к созданным прототипам определенные действия, необходимо воспользоваться интерактивными блоками. Для этого выделяем мышкой нужный объект, переходим в правую часть экрана и жмем на «New Interaction».
|
Для мышки
|
- page click or tap;
- page double click or double tap;
- page context menu;
- page mouse move.
|
|
Для клавиатуры
|
- page key down;
- page key up.
|
|
Для страниц
|
- window resized;
- page reloaded;
- adaptive view changed;
- window scrolled up;
- window scrolled down;
- window scrolled.
|
Кликнув на одну из этих команд, пользователь увидит список следующих действий:
- open link;
- close window;
- open link in frame;
- scroll to widget;
- show/hide;
- set panel state;
- set text;
- set image;
- set selected;
- set error state;
- enable/disable;
- move;
- rotate;
- set size;
- bring to front;
- set opacity;
- focus;
- add sort;
- remove sort;
- add filter;
- remove filter;
- set current page;
- set items page;
- add rows
- mark rows.
Выбираем, например, «click or tap» и указываем действие «open link». По завершении указываем страницу или вставляем URL-адрес, куда будет переходить пользователь на ранее выбранный объект.
Как создавать объекты
Рассмотрим функциональные возможности Axure на примере создания простых объектов. Для начала открываем раздел «File» и выбираем вкладку «New». Далее спускаемся в нижнюю часть панели управления и нажимаем на «Page Dimensions». Тут же откроется меню, где можно выбрать разрешение. Какие варианты доступные на момент написания статьи:
|
Платформа
|
Разрешение
|
|
Web
|
- Desktop Large (1920);
- Desktop Medium (1336);
- Desktop Small (1200).
|
|
Apple
|
- iPhone 8 (375x675);
- iPhone 8 Plus (414x736);
- iPhone 11 Pro/X/XS (375x812);
- iPhone 11/XR/XS Max (414x896);
- iPhone 13/ 13 Pro/12/12 Pro (390x844);
- iPhone 13 Pro Max/12 Pro Max (428x925);
- iPad mini 7,9 (768x1024);
- iPad mini 8,3 (744x1133);
- iPad 10,2 (810x1080);
- iPad Pro 11 (834x1194);
- iPad Pro 12,9 (1024x1366).
|
|
Android
|
- Galaxy S9/S8 (360x740);
- Galaxy S10E (360x760);
- Galaxy S10/S10 Plus (412x869);
- Pixel 2 (411x731);
- Pixel 3 (412x824);
- Pixel 3 XL (412x847);
- Pixel 4 (393x830);
- Pixel 5 (393x851);
- Android Tablet (800x1280).
|
Выбираем, например, вариант «Desktop Small (1200)» и ждем, когда система автоматически подгонит размер рабочего поля под выбранные параметры.
Далее нам нужно добавить в рабочую зону овал. Для этого переходим к панели с инструментами, кликаем на стрелочку возле буквы «Т» и выбираем в контекстном меню соответствующую фигуру. Чтобы образовался овал, необходимо перенести мышку в рабочую зону, потом зажать левую кнопку и протянуть до тех пор, пока на экране не появится нужная форма.
Добавленный овал можно залить цветом. Для этого кликаем в центре фигуры левой кнопкой мыши, поднимаемся к панели инструментов и жмем на белый квадрат возле надписи «Fill». Далее откроется меню, где можно выбрать цвет, указать его насыщенность, прозрачность и прочие параметры. Выбираем, допустим, красный цвет и регулируем ползунок таким образом, чтобы он оказался в центре полосы. Это позволит установить баланс между прозрачностью и насыщенностью.
Добавленный овал теперь будет бледно-красным цветом. Далее можно вставить в него какой-нибудь текст. Для этого перемещаем курсор в середину фигуры, дважды кликаем на левую кнопку мышки и вписываем текст. В панели редактирования страницы выбираем шрифт, размер, устанавливаем расположение текста (центр или по краям).
При необходимости в добавленный овал можно вставить любое изображение. Однако изображение следует подбирать таким образом, чтобы оно совпадало по границам с текущей фигурой.
Чтобы вставить картинку, выделяем овал и поднимаемся к тому месту, где выбирался цвет. Рядом будет кнопка, по нажатию на которую откроется окно для выбора изображения.
Под овалом с изображением можно разместить текст. Для этого есть 2 способа:
- Использовать заранее подготовленный текст в узкой строке, который в любой момент можно отредактировать. Для этого жмем на «Т» в панели инструментов, переносим курсор в нужную область и жмем на левую кнопку мышки.
- Использовать одну из форм, размер которой регулируется пользователем. Для этого кликаем на инструмент рядом с буквой «Т», выбираем форму и перетаскиваем ее под овал. Чтобы отрегулировать размер формы, зажимаем левую кнопку мышки и тянем до тех пор, пока не образуется нужная фигура.
Когда объект будет готов, его можно сохранить на компьютер в виде недоработанного проекта или готового изображения. В первом случае нам нужно открыть «File» и выбрать «Save As». Далее пользователь указывает папку, а система сохраняет проект в формате «Axure RP File».
Если же нужно сохранить объект как готовый файл, открывает «File» и выбираем команду «Export Page 1 to Image». Далее указываем один из форматов (PNG, JPG, GIF и Bit) и завершаем экспорт.
Как дать доступ другим пользователям
Чтобы выдать доступ, необходимо добавить аккаунты сторонних пользователей к текущей учетной записи. Сделать это можно следующим образом:
- Кликаем на аватарку в правом верхнем углу.
- В контекстном меню выбираем «Manage Accounts».
Далее откроется форма, где будут храниться добавленные пользователи (включая владельца учетной записи). Для добавления нового участника команды жмем на «Add».
В форме нам нужно указать домен облака Axure, а также логин и пароль страницы добавляемого пользователя. По завершении жмем «Ок».
Теперь можно создать совместный проект, над которым будут работать все участники команды.
Как создать общий проект
Создает общий проект всего в несколько кликов. Поднимаемся в панель управления и кликаем на раздел «Team». Далее появится контекстное меню, где нужно выбрать «Create Team Project From Current File». В новой форме указываем имя проекта, название рабочего места и нажимаем на кнопку подтверждения.
Если в процессе возникнут проблемы, можно обратиться в службу поддержки. Для этого открываем раздел «Help» и в меню выбираем «Contact Support». В процессе обращения нужно указать электронную почту, расписать вопрос и при желании прикрепить файл, который может более подробно отобразить суть проблемы.
Как приобрести подписку
Чтобы оформить подписку, возвращаемся на сайт Axure и кликаем на кнопку «Buy» в верхней части экрана. Далее откроется страница, где можно будет выбрать один из тарифов:
|
Тариф
|
Цена
|
Особенности
|
|
Axure RP Pro
|
29$ в месяц
|
- Неограниченное количество прототипов;
- 1 000 проектов в облаке Axure;
- возможность изменения шаблонов;
- широкий выбор шаблонов, схем и документов.
|
|
Axure RP для команды
|
49$ в месяц
|
- детальная история изменений;
- возможность совместной работы над проектом;
- хостинг командных проектов.
|
|
Axure RP для предприятия
|
Индивидуально
|
- домен компании для внутреннего использования;
- неограниченное количество проектов;
- управление пользователями;
- единый вход.
|
Выбрав подходящий тариф, кликаем на соответствующую кнопку и заполняем форму с личными данными и реквизитами. Обязательно нужно указать электронную почту и название компании. Для оплаты услуг используются банковские карты Visa, Mastercard, JCB, Discover, American Express, UnionPay. Карты РФ не поддерживаются.
Учтите, что тарифные планы можно приобретать на месяц, год и 3 года. Например, если оформить Axure RP Pro на 36 месяцев, то со скидкой пакет обойдется в $850.
Вывод
Axure — многофункциональный, но сложный в управлении инструмент для создания UX-прототипов. Безусловно, программа будет крайне полезна для продвинутых пользователей, которые имеют огромный опыт в работе с UX и в совершенстве владеют английским языком.
Преимуществ же в сервисе гораздо больше, чем недостатков. Это широкий набор функций, гибкая панель управления, богатая библиотека шаблонов и компонентов, которые можно менять и добавлять. Также стоит отметить возможность совместного проектирования. Правда, для этого придется приобрести специальный тариф за $49 в месяц.
0