VIPAdmin / Графика/Дизайн / Axure

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 в месяц.