Прототип сайта в Axure: пошаговая инструкция

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

Что такое прототип сайта

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

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

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

Как сделать прототип сайта

В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продает строительные блоки.

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

Прототип удобно делать в программе Axure RP. Это полноценный инструмент для создания сложных прототипов сайтов и приложений. Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure и разобраться в интерфейсе и его базовых функциях.

Создаем новый проект в Axure RP

Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта — главная, блог и запись в блоге.

Чтобы начать работать, создаем новый проект: File –> New. По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.

Для того, чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне Pages и выбрать пункт Rename.

Сетка и ширина экрана

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

Для простоты мы будем создавать прототип для экрана шириной 1140px и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании будем использовать сетку из CSS-фреймворка Bootstrap 4.

Зададим вручную нужную ширину экрана с помощью направляющей: ее можно вытащить из линейки справа от рабочей области. Работает это так же, как и в Photoshop.

Чтобы сэкономить время и не задавать вручную все направляющие для макета, создадим их автоматически: выбираем пункт меню Arrange –> Grid and Guides –> Create guides. В появившемся окне задаем нужные размеры.

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

Основные элементы для прототипа

После того, как мы задали сетку, переходим к созданию прототипа. Для этого используют элементы из библиотеки (окно Libraries).

Как использовать элементы

ЭЛЕМЕНТ

НАЗНАЧЕНИЕ

Box

Для структурных блоков сайта

Ellipse

Иконки, изображения

 Image и Placeholder

Изображения

Button

Кнопки

Heading, Label и Paragraph

Заголовки, основной текст, надписи

Horizontal и Vertical Line

 Линии, стрелки, указатели и другие элементы

Forms

Создание форм

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

Создание шапки сайта

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

Мы задали размеры шапки, теперь разместим логотип, телефонный номер и меню. Логотип условно обозначим более темным прямоугольником Box 2.

Телефон компании пишем с помощью элемента Header 3, а кнопку с вызовом формы обратной связи указываем с помощью уже готового Button.

С помощью текстового элемента Paragraph создаем и заполняем область меню.

Но в прототипах с большим количеством страниц пользоваться такой шапкой неудобно. Для каждой новой страницы ее нужно будет или рисовать с нуля, или копировать с предыдущей. А если необходимо внести какие-то изменения, то придется редактировать шапку на каждой странице отдельно. Чтобы избежать подобных проблем, проектировщики используют мастер (панель Masters в правом нижнем углу).

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

Выделяем шапку сайта, нажимаем правую кнопку мыши в появившемся окне выбираем Convert to Master.

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

Теперь чтобы добавить шапку на новую страницу, достаточно перетащить виджет на страницу.

Прототип: основные блоки сайта

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

Следующий экран — это блок с преимуществами товара. Покажем фотографию и расскажем, в чем отличие от конкурентов. Изображение условно обозначим с помощью элемента Placeholder, а для иконок используем Ellipse.

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

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

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

В Axure любой элемент прототипа можно делать триггером для действий, то есть привязать к объекту определенную логику поведения. Она будет срабатывать по клику, при наведении и открывать другие страницы, показывать и закрывать всплывающие окна. Это помогает смоделировать работу сайта.

Рассмотрим, как сделать в прототипе кликабельное меню, чтобы перемещаться по сайту с помощью ссылок в шапке сайта. Для этого кликаем на раздел «Блог» и в свойствах элемента (Properties) выбираем действие OnClick.

Триггер OnClick срабатывает при клике мыши по элементу, поэтому прекрасно подходит для создания ссылок. Сделаем так, чтобы при клике в этом же окне открывался раздел с блогом.

Для этого выбираем Open Link («Открывать ссылку») –>Current Window («В текущем окне») –>Блог (какую страницу открывать). Весь процесс настройки:

Просмотр и экспорт прототипа

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

Просмотр

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

Вот так выглядит страница из Axure в Google Chrome. Панель навигации справа помогает сразу посмотреть структуру сайта и при необходимости оставить комментарии.

Публикация и экспорт

Готовый прототип можно опубликовать на сервере Axure, а затем просто дать ссылку на него заказчику. А также — сгенерировать HTML файлы и использовать их локально или опубликовать на своем сайте. Для этого нажимаем кнопку Publish в правом верхнем углу. И выбираем Publish to Axure Share, если нужно опубликовать прототип, или Generate HTML files, если нужно скачать его на компьютер.

Заключение: кто делает прототип сайта и зачем это нужно

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

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

Стать UX-дизайнером и научиться работать с прототипами, создавать понятную структуру сайта, понимать пользователей, придумывать доступные и понятные решения можно на курсе «UX-дизайн» от онлайн-университета Skillbox.

Курс «UX-дизайн»
Создавайте эффективные и полезные решения при помощи нового уникального подхода в дизайне. В течение курса вы узнаете, как сделать не просто визуально привлекательные проекты, но и кардинально изменить мышление бизнеса в диджитал, оцифровать любой продукт и сделать его максимально конкурентоспособным.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox