Как в Uplab создают прототипы сайтов: принцип работы и обзор инструментов
Article title
5 июня 2019

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

В прошлом материале мы подробно рассказали, что представляет собой этап аналитики и проектирования сайтов в нашем агентстве. Сегодня хотим расширить тему: поделиться своими принципами работы и рассмотреть инструменты, с помощью которых создаем прототипы разных digital-продуктов.
Наталия
Аникина
UX-специалист
Алексей
Андреев
UX-специалист

Принцип работы UX-специалистов агентства

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

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

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

Axure 9 — главный инструмент прототипирования в Uplab

Рабочая область в Axure 9

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

Вот каким был интерфейс в Axure 8:
Пример структуры сайта
Интерфейс Axure 8
В Axure 9 он выглядит иначе:
Какие изменения сразу бросаются в глаза:
  • Добавлена темная тема интерфейса — дань трендам веб-дизайна последних лет. В настройках Preferences > General > Appearance можно выбрать светлый или темный режим по умолчанию или — отображение темы в зависимости от настроек темы ОС. Считаем, что темный режим реализован не совсем удачно (резкие контрасты). Например, в Sketch — выглядит аккуратнее.
  • Изменился цвет фона и стиль иконок. Иконки стали контурными, теперь они более точно передают смысл действий.
  • Более современно оформлены интерфейсные элементы.
  • Исчезли лишние рамки — стало больше свободного пространства.
  • Объединили панели с библиотеками и мастерами, страницы и контуры (слои). Панели можно перетаскивать, привязывая их ко вкладкам с другими панелями.
Настройка панели инструментов
Чтобы настроить верхнюю панель инструментов под себя, перейдите в меню View Toolbars — Customize Main Toolbar, после чего откроется окно с настройками:
Пример структуры сайта
Панель инструментов в Axure 9
Пример структуры сайта
Окно настройки панели инструментов
Размеры страниц
Теперь при создании страницы можно быстро выбрать одно из популярных устройств для прототипирования мобильных экранов:
Выбор размера страницы в Axure 9
Адаптивные прототипы
Для добавления адаптивной версии кликните на ссылку Add Adaptive Views, добавьте страницу и задайте ей размеры в появившемся окне:
Edit Adaptive Views
Библиотеки
В восьмой версии библиотека состояла из png-иконок. Axure 9 радует большой библиотекой svg-иконок с сайта fontawesome.com. Svg-иконки, в отличие от png, не теряют качества при масштабировании. В новой версии появилась возможность добавить папку с изображениями — Add image folder.
Панели с библиотеками
Add image folder
Перемещение панелей
Любую панель можно переместить в другое, более удобное место, перетаскивая имя и привязывая панель ко вкладкам:
Перемещение панелей
Стили виджетов
Вы можете стилизовать виджеты на свой вкус. Например, задать цвет обводки у полей ввода, изменить отступы у радиокнопок или добавить им тень. Заданные стили будут применяться ко всем настроенным компонентам. Это поможет визуально улучшить прототип: все однородные элементы будут в одном стиле. Перейдите в меню программы: в раздел Project > Widget Style Manager.
Widget Style Manager
Появилась возможность скопировать и вставить стиль виджета горячими клавишами Alt + Command + C / Alt + Command + V (Ctrl — на Windows).
Копирование и вставка стиля кнопки
Pen & Point
Эти инструменты, привычные для графических редакторов, позволяют рисовать произвольные векторные фигуры. При помощи «Пера» вы создадите новые фигуры, задавая точки и кривые. «Точка» дает возможность произвольного изменения готовых фигур. Все созданные фигуры имеют векторный формат и расширение .svg:
Pen & Point на панели инструментов
Взгляните на пример создания фигуры с использованием пера:
Использование пера
Управление виджетами
Панель Outline отображает все элементы, созданные на странице. Они содержат графические обозначения, которые упрощают поиск нужного элемента. Кроме того, их можно отсортировать в удобном порядке.
Сортировка элементов на панели Outline
Настройка области выделения
В Axure 9 по умолчанию следующие настройки: если часть элемента попадает в область выделения, то выделяется весь элемент. Если хотите выделить только те элементы, которые полностью находятся в области, переключите режим выделения.
Инструменты настройки выделения элементов
Настройка выделения элементов
Вставка изображений
Расширенные настройки на панели Style теперь предоставляют нам больше контроля над оформлением прототипов. С помощью новых параметров стилей мы можем вставить в фигуру картинку.
Вставка изображения
Другой способ — скопировать изображение в браузере и вставить на страницу прототипа: Command (Ctrl) + V.
Snapshot
Позволяет быстро создать блок со скриншотом выбранной страницы.
Создание скриншота страницы
Используйте Snapshot вместе с Connector tool (горячая клавиша E) для создания карт переходов по страницам / экранам проекта:
Инструмент Connect (Соединитель)
Масштабирование рабочей области
Плавное масштабирование рабочей области — Command (Ctrl) + колесико мыши:
Масштабирование рабочей области

Приемы для упрощения работы в Axure 9

Горячие клавиши
Для быстрой работы с основными виджетами появились горячие клавиши:
  • R — Rectangle (Прямоугольник)
  • O — Elipse (Овал)
  • T — Text (Текст)
  • L — Line (Линия)
Они действительно ускоряют процесс. Посмотрите, как это работает на практике:
Использование горячих клавиш
Выравнивание объектов
Инструменты Align помогают быстро создать равные отступы между объектами. Используйте горячие клавиши для ускорения работы:
  • Shift + Command + L — выравнивание по левому краю.
  • Shift + Command + С — выравнивание по центру.
  • Shift + Command + R — выравнивание по правому краю.
  • Shift +Command + T — выравнивание по верхнему краю.
  • Shift + Command + M — выравнивание по середине.
  • Shift + Command + B — выравнивание по нижнему краю.
Обратите внимание, как это удобно и просто:
Выравнивание объектов (Align)
Умные привязки и направляющие расстояния
Умные привязки есть во многих редакторах — теперь и в Axure. Они помогают видеть расстояния объектов и делать их равными. Посмотрите, как это работает:
Умные привязки
Пропорциональное масштабирование
Чтобы задать одинаковую ширину и высоту, закрепите размеры, кликнув на символ замка. Изменить размер фигуры можно с помощью зажатой клавиши Shift.
Пропорциональное масштабирование фигуры
Автоширина и автовысота текста
Настройка авто–ширины и высоты
Автоширину и автовысоту текста можно задать прямо в рабочей области:
  • Клик по левой или правой стороне включает автоширину.
  • Клик по верхней или нижней стороне включает автовысоту.
  • Клик по углам элемента включает сразу оба параметра.
Авто–настройка ширины и высоты на рабочей области
Использование «мастеров»
«Мастера» в Axure — компонент из группы элементов, который можно перенести на другую страницу. Его используют для создания повторяющихся элементов на страницах. Изменения, внесенные в «мастеров», автоматически применяются ко всем копиям компонента в прототипе. Все созданные «мастера» хранятся в панели Masters.

Мы часто применяем «мастера» для создания:
  • Хедера и футера
  • Навигации и сайдбара
  • Карточек с контентом и связанных ссылок
Кликните правой клавишей мыши и выберите в меню действие Create Master — настройте виджет на свой вкус.
Создание мастеров
Создание взаимодействий
Динамическая панель

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

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

Так создается выпадающий список:
Создание выпадающего списка
Стили виджетов при разных состояниях

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

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

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

Переменные и функции позволяют:
  • Сообщать действия с одной страницы, чтобы что-то менять на другой.
  • Задавать и менять значения в виджетах или их свойства и положение на странице.
  • Делать интерактивные формы.
  • Многое другое.
Изучите простой пример использования функций: при загрузке страницы мы задаем изображению ширину, равную ширине экрана пользователя:
Блок на всю ширину экрана
Заметки

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

Еще несколько слов об обновлениях Axure 9

Важно отметить другие достоинства 9-ой версии Axure:
  • В программе увеличилась скорость при работе над прототипами с большим количеством страниц.
  • Появилась возможность командной работы — отличная новость для отделов аналитики и проектирования.
  • Обновилось мобильное приложение Axure Share — позволяет презентовать и хранить прототипы на мобильном устройстве.

Другие инструменты прототипирования

Figma

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

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

Principle

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

Axure + Sketch

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

Invision

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

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

Поделитесь материалом с друзьями и коллегами:

Алексей Андреев
11376
Оцените статью
(3.44)

Комментарии к статье

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Мобильный UX: как разработать удобный сайт финансовой компании

8
25 июня 2019
Статьи ~ 30 минут на чтение

Микроразметка для «Яндекс» и Google: как настроить и проверить

181
07 июня 2019
Статьи ~ 10 минут на чтение

Как автоматизировать создание документов в «Битрикс24»

164
31 мая 2019
Статьи ~ 10 минут на чтение

Как в Uplab разрабатывают сайты. Этап дизайна

219
23 мая 2019
Статьи ~ 10 минут на чтение

Как интегрировать «Битрикс24» и «1С»

436
17 мая 2019
Статьи ~ 25 минут на чтение

Образцовые лендинги. Наш топ-50

50799
16 мая 2019
Статьи ~ 10 минут на чтение

Как мы автоматизировали согласование заявок сотрудников для российского банка

206
30 апреля 2019
Статьи ~ 20 минут на чтение

Как в Uplab разрабатывают сайты. Этап аналитики и проектирования

352
29 апреля 2019
Статьи ~ 20 минут на чтение

Как провести бесплатный SEO-аудит сайта. Чек-лист

149
19 апреля 2019
Статьи ~ 15 минут на чтение

«Битрикс24.Дубай» — обзор обновления

363
11 апреля 2019
+7 499 653 78 83