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.
Теперь чтобы добавить шапку на новую страницу, достаточно перетащить виджет на страницу.
Прототип: основные блоки сайта
Основные экраны создаются с помощью базовых элементов, с которыми мы уже знакомы. На первом экране разместим заголовок, призыв к действию, кнопку и изображение.
Следующий экран — это блок с преимуществами товара. Покажем фотографию и расскажем, в чем отличие от конкурентов. Изображение условно обозначим с помощью элемента 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-дизайн»
Создавайте эффективные и полезные решения при помощи нового уникального подхода в дизайне. В течение курса вы узнаете, как сделать не просто визуально привлекательные проекты, но и кардинально изменить мышление бизнеса в диджитал, оцифровать любой продукт и сделать его максимально конкурентоспособным.
Программа курса
