Как в Uplab создают прототипы сайтов: принцип работы и обзор инструментов
~20 минут на чтение

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

Для разработки прототипов мы в Uplab используем программу Axure RP — мощный инструмент по созданию динамических страниц без использования кода. Несмотря на бум развития рынка инструментов прототипирования, аналогов ему по удобству и функционалу, на наш взгляд, пока что нет.

Не так давно версия Axure 9 вышла из беты. Мы уже успели реализовать в ней часть проектов и хотим поделиться, какие особенности и приятные новшества инструмента для себя отметили.

Поскольку Axure в основном используют проектировщики интерфейсов, сначала посмотрим, как изменился интерфейс программы в новой версии.

Вот каким был интерфейс в Axure 8:

В Axure 9 он выглядит иначе:

Какие изменения сразу бросаются в глаза:

Чтобы настроить верхнюю панель инструментов под себя, перейдите в меню View Toolbars — Customize Main Toolbar, после чего откроется окно с настройками:

Теперь при создании страницы можно быстро выбрать одно из популярных устройств для прототипирования мобильных экранов:

Для добавления адаптивной версии кликните на ссылку Add Adaptive Views, добавьте страницу и задайте ей размеры в появившемся окне:

Edit Adaptive Views

В восьмой версии библиотека состояла из png-иконок. Axure 9 радует большой библиотекой svg-иконок с сайта fontawesome.com. Svg-иконки, в отличие от png, не теряют качества при масштабировании. В новой версии появилась возможность добавить папку с изображениями — Add image folder.

Add image folder

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

Перемещение панелей

Вы можете стилизовать виджеты на свой вкус. Например, задать цвет обводки у полей ввода, изменить отступы у радиокнопок или добавить им тень. Заданные стили будут применяться ко всем настроенным компонентам. Это поможет визуально улучшить прототип: все однородные элементы будут в одном стиле. Перейдите в меню программы: в раздел Project > Widget Style Manager.

Появилась возможность скопировать и вставить стиль виджета горячими клавишами Alt + Command + C / Alt + Command + V (Ctrl — на Windows).

Копирование и вставка стиля кнопки

Эти инструменты, привычные для графических редакторов, позволяют рисовать произвольные векторные фигуры. При помощи «Пера» вы создадите новые фигуры, задавая точки и кривые. «Точка» дает возможность произвольного изменения готовых фигур. Все созданные фигуры имеют векторный формат и расширение .svg:

Взгляните на пример создания фигуры с использованием пера:

Использование пера

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

В Axure 9 по умолчанию следующие настройки: если часть элемента попадает в область выделения, то выделяется весь элемент. Если хотите выделить только те элементы, которые полностью находятся в области, переключите режим выделения.

Настройка выделения элементов

Расширенные настройки на панели Style теперь предоставляют нам больше контроля над оформлением прототипов. С помощью новых параметров стилей мы можем вставить в фигуру картинку.

Вставка изображения

Другой способ — скопировать изображение в браузере и вставить на страницу прототипа: Command (Ctrl) + V.

Позволяет быстро создать блок со скриншотом выбранной страницы.

Создание скриншота страницы

Используйте Snapshot вместе с Connector tool (горячая клавиша E) для создания карт переходов по страницам / экранам проекта:

Плавное масштабирование рабочей области — Command (Ctrl) + колесико мыши:

Масштабирование рабочей области

Для быстрой работы с основными виджетами появились горячие клавиши:

Они действительно ускоряют процесс. Посмотрите, как это работает на практике:

Использование горячих клавиш

Инструменты Align помогают быстро создать равные отступы между объектами. Используйте горячие клавиши для ускорения работы:

Обратите внимание, как это удобно и просто:

Выравнивание объектов (Align)

Умные привязки есть во многих редакторах — теперь и в Axure. Они помогают видеть расстояния объектов и делать их равными. Посмотрите, как это работает:

Умные привязки

Чтобы задать одинаковую ширину и высоту, закрепите размеры, кликнув на символ замка. Изменить размер фигуры можно с помощью зажатой клавиши Shift.

Пропорциональное масштабирование фигуры

Настройка авто–ширины и высоты

Автоширину и автовысоту текста можно задать прямо в рабочей области:

Авто–настройка ширины и высоты на рабочей области

«Мастера» в Axure — компонент из группы элементов, который можно перенести на другую страницу. Его используют для создания повторяющихся элементов на страницах. Изменения, внесенные в «мастеров», автоматически применяются ко всем копиям компонента в прототипе. Все созданные «мастера» хранятся в панели Masters.

Мы часто применяем «мастера» для создания:

Кликните правой клавишей мыши и выберите в меню действие Create Master — настройте виджет на свой вкус.

Создание мастеров

Динамическая панель

Чтобы показать взаимодействие, создайте из элементов динамическую панель и задайте ей действие через Interactions, нажав на кнопку New Interaction. Посмотрите, как это делается, на примере создания разворачивающегося вопроса-ответа:

Создание аккордеона вопрос–ответ

Виджеты

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

Так создается выпадающий список:

Создание выпадающего списка

Стили виджетов при разных состояниях

Чтобы показать состояние кнопки, используйте расширенные стилевые настройки на панели Interactions:

Настройка разных состояний

Скрытие виджетов в рабочей области

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

Переменные и функции

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

Переменные и функции позволяют:

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

Блок на всю ширину экрана

Заметки

Используйте инструмент Notes, если нужно добавить заметку к странице или описать работу элемента.

Закладка в презентации прототипа

Важно отметить другие достоинства 9-ой версии Axure:

Figma — онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. Отлично подходит дизайнерам для перелинковки макетов и презентации их заказчику. Однако создавать что-то более сложное в Figma долго и неудобно: возникают трудности, когда требуется показать разные состояния кнопок или ссылок. Чтобы продемонстрировать каждое взаимодействие, приходится создавать отдельный фрейм и связывать его с основным.

Посмотрите на прототип, созданный нами в Figma:

Прототип в Figma

Principle — инструмент для создания анимации. В нем можно показать плавные переходы и различные эффекты. Он интегрирован со Sketch и Figma. При внесении изменений в дизайн, они автоматически переносятся в Principle.

Пример анимации в Principal

Для Sketch появился специальный плагин, который позволяет импортировать элементы и целые артборды в Axure. Это может быть полезно, когда нужно показать заказчикам динамику на готовых макетах. На наш взгляд, перелинковать все страницы в Axure проще и быстрее, чем в том же Invision или других инструментах. Кроме того, здесь можно показать сложные взаимодействия — актуально для проектирования различных сервисов.

Импорт из Sketch в Axure

Invision — инструмент для дизайнеров, который позволяет настраивать простые переходы между экранами, загружать макеты из Photoshop или Sketch. Из фишек — можно оставлять комментарии прямо в макетах, создавать с командой совместные мудборды.

У Invision есть дополнительные инструменты: