Axure: гибкий UX-инструмент

Axure — это сервис для разработки функциональных и интерактивных UX-прототипов. Одно из главных достоинств – совместная разработка проектов. Для этого нужно приобрести подписку, добавить пользователей и выдать им доступ к документу. Еще важный плюс заключается в огромной библиотеке с различными схемами, иконками и прочими веб-элементами, которые упростят разработку прототипов. Регистрация в сервисе проводится быстро. Также радует пробный период для тестирования функционала на бесплатной основе. Ниже разберем интерфейс и функциональные возможности программы.

Начало работы

Для работы с Axure пользователю придется установить программу на ПК. То есть управление будет осуществляться не через веб-интерфейс.

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

В первую очередь производим установку. Для этого открываем стартовую страницу сервиса и кликаем на кнопку загрузки. На следующем этапе выбираем операционную систему:

• Windows;
• MacOS (Intel чип или Apple чип).

 Загружаем файл и приступаем к установке, которая займет 2-3 минуты. По завершении инсталлятор предложит сразу запустить программу, на что даем свое согласие.

Когда откроется интерфейс, в центре появится окно регистрации. Кликаем на «Create an account» и в новой форме указываем электронную почту с паролем.

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

• Subscribe Now — для приобретения подписки;
• Continue to Trial — для бесплатного периода.

Кликаем на второй вариант и приступаем к работе с программой.

Особенности интерфейса

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

Панель управления состоит из следующих уровней:

1. Командный центр. С его помощью пользователь может создавать/экспортировать проекты, пользоваться инструментами для редактирования, использовать различные фильтры, корректировать настройки аккаунта и т.д.
2. Инструменты. Здесь находятся инструменты для создания различных объектов в рабочей зоне. Это различные фигуры, текстовые вставки, динамические панели, списки и прочее.
3. Настройка страницы. Часть панели управления, в которой пользователь может корректировать параметры рабочей области. Это, например, выбора размера страницы, добавление изображений и медиафайлов, центрирование текста, добавление эффектов.

В левой части экрана находится блок, в котором содержится библиотека шаблонов и компонентов. Компоненты при необходимости можно добавлять самостоятельно. Шаблоны тоже редактируются по своему усмотрению.

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

Ниже разберем основные разделы и инструменты, которые нужны для создания 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.

В представленных категориях можно найти следующие шаблоны:

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

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

Интерактивные блоки

Чтобы привязать к созданным прототипам определенные действия, необходимо воспользоваться интерактивными блоками. Для этого выделяем мышкой нужный объект, переходим в правую часть экрана и жмем на «New Interaction».

Кликнув на одну из этих команд, пользователь увидит список следующих действий:

• 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». Тут же откроется меню, где можно выбрать разрешение. Какие варианты доступные на момент написания статьи:

Выбираем, например, вариант «Desktop Small (1200)» и ждем, когда система автоматически подгонит размер рабочего поля под выбранные параметры.

Далее нам нужно добавить в рабочую зону овал. Для этого переходим к панели с инструментами, кликаем на стрелочку возле буквы «Т» и выбираем в контекстном меню соответствующую фигуру. Чтобы образовался овал, необходимо перенести мышку в рабочую зону, потом зажать левую кнопку и протянуть до тех пор, пока на экране не появится нужная форма.

Добавленный овал можно залить цветом. Для этого кликаем в центре фигуры левой кнопкой мыши, поднимаемся к панели инструментов и жмем на белый квадрат возле надписи «Fill». Далее откроется меню, где можно выбрать цвет, указать его насыщенность, прозрачность и прочие параметры. Выбираем, допустим, красный цвет и регулируем ползунок таким образом, чтобы он оказался в центре полосы. Это позволит установить баланс между прозрачностью и насыщенностью.

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

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

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

Под овалом с изображением можно разместить текст. Для этого есть 2 способа:

1. Использовать заранее подготовленный текст в узкой строке, который в любой момент можно отредактировать. Для этого жмем на «Т» в панели инструментов, переносим курсор в нужную область и жмем на левую кнопку мышки.
2. Использовать одну из форм, размер которой регулируется пользователем. Для этого кликаем на инструмент рядом с буквой «Т», выбираем форму и перетаскиваем ее под овал. Чтобы отрегулировать размер формы, зажимаем левую кнопку мышки и тянем до тех пор, пока не образуется нужная фигура.

Когда объект будет готов, его можно сохранить на компьютер в виде недоработанного проекта или готового изображения. В первом случае нам нужно открыть «File» и выбрать «Save As». Далее пользователь указывает папку, а система сохраняет проект в формате «Axure RP File».

Если же нужно сохранить объект как готовый файл, открывает «File» и выбираем команду «Export Page 1 to Image». Далее указываем один из форматов (PNG, JPG, GIF и Bit) и завершаем экспорт.

Как дать доступ другим пользователям

Чтобы выдать доступ, необходимо добавить аккаунты сторонних пользователей к текущей учетной записи. Сделать это можно следующим образом:

1. Кликаем на аватарку в правом верхнем углу.
2. В контекстном меню выбираем «Manage Accounts».

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

В форме нам нужно указать домен облака Axure, а также логин и пароль страницы добавляемого пользователя. По завершении жмем «Ок».

Теперь можно создать совместный проект, над которым будут работать все участники команды.

Как создать общий проект

Создает общий проект всего в несколько кликов. Поднимаемся в панель управления и кликаем на раздел «Team». Далее появится контекстное меню, где нужно выбрать «Create Team Project From Current File». В новой форме указываем имя проекта, название рабочего места и нажимаем на кнопку подтверждения.

Если в процессе возникнут проблемы, можно обратиться в службу поддержки. Для этого открываем раздел «Help» и в меню выбираем «Contact Support». В процессе обращения нужно указать электронную почту, расписать вопрос и при желании прикрепить файл, который может более подробно отобразить суть проблемы.

Как приобрести подписку

Чтобы оформить подписку, возвращаемся на сайт Axure и кликаем на кнопку «Buy» в верхней части экрана. Далее откроется страница, где можно будет выбрать один из тарифов:

Выбрав подходящий тариф, кликаем на соответствующую кнопку и заполняем форму с личными данными и реквизитами. Обязательно нужно указать электронную почту и название компании. Для оплаты услуг используются банковские карты Visa, Mastercard, JCB, Discover, American Express, UnionPay. Карты РФ не поддерживаются.

Учтите, что тарифные планы можно приобретать на месяц, год и 3 года. Например, если оформить Axure RP Pro на 36 месяцев, то со скидкой пакет обойдется в $850.

Вывод

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

Преимуществ же в сервисе гораздо больше, чем недостатков. Это широкий набор функций, гибкая панель управления, богатая библиотека шаблонов и компонентов, которые можно менять и добавлять. Также стоит отметить возможность совместного проектирования. Правда, для этого придется приобрести специальный тариф за $49 в месяц.