Как сделать прототип сайта в Axure: пошаговая инструкция
Axure RP — инструмент для создания интерактивных прототипов сайтов. Рассказываем на примерах, как работать с этой программой.
![](https://248006.selcdn.ru/main/iblock/a1b/a1b13261b8c9f4256944deb7280c5549/45ac70e3b241b7775de9b60257b6b3f6.png)
![](https://248006.selcdn.ru/main/iblock/a1b/a1b13261b8c9f4256944deb7280c5549/45ac70e3b241b7775de9b60257b6b3f6.png)
vlada_maestro / shutterstock
Чтобы создать прототип простого сайта, открыть его в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и её базовые возможности. И, конечно же, владеть знаниями о прототипах и UX-дизайне.
Для этого Skillbox проводит курс «UX-дизайн», который даёт не только теоретическую базу, но и предоставляет стажировку в компаниях-партнёрах. А сейчас поговорим об азах.
Что такое прототип сайта
Прототип — это детальная схема сайта. С его помощью легко продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать всё это с заказчиком.
Обычно прототип создают чёрно-белым, чтобы сфокусироваться на структуре и расположении контента, а не на красивой обложке.
На встрече с заказчиком делают примерный план сайта на бумаге. После этого — конструируют интерактивный прототип и обсуждают возникшие вопросы, исправляют ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.
Как сделать прототип сайта
В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продаёт строительные блоки.
Скетч — это план организации информации на странице. На его основе создают уже кликабельный прототип. Прототип удобно делать в программе Axure RP. Это полноценный инструмент для сложных макетов сайтов и приложений.
![](https://248006.selcdn.ru/main/upload/setka_images/013a8c91f06c1208fcecd21ccfac82606ade89a1.png)
Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure, разобраться в интерфейсе и его базовых функциях.
Создаём новый проект в Axure RP
Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта — главная, блог и запись в блоге.
Создаём новый проект: File → New. По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.
![](/upload/setka_images/d4decdd733a9d92a530f9864753ba9bb4a180c06.gif)
Чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне Pages и выбрать пункт Rename.
Сетка и ширина экрана
Современные сайты проектируют для разных устройств: смартфонов, планшетов, компьютеров и ноутбуков. У каждого из устройств разное разрешение экрана, поэтому дизайнер обычно рисует несколько макетов одного и того же сайта в разных размерах.
Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из CSS-фреймворка Bootstrap 4.
![](https://248006.selcdn.ru/main/upload/setka_images/284c52b860fa5d9d962d21f1f9746679d888f596.png)
Зададим вручную нужную ширину экрана с помощью направляющей: её можно вытащить из линейки справа от рабочей области. Работает это так же, как и в Photoshop.
![](/upload/setka_images/5c7452a023b976e3366fbde82f3c6e6082959b54.gif)
Чтобы сэкономить время и не задавать вручную все направляющие для макета, создадим их автоматически: выбираем пункт меню Arrange → Grid and Guides → Create Guides. В появившемся окне задаём размеры.
![](https://248006.selcdn.ru/main/upload/setka_images/ca61d8f338377a69cc84990eb9371fb371acc9c8.png)
В результате получаем сетку для нужной ширины экрана, по которой удобно выравнивать контент.
![](https://248006.selcdn.ru/main/upload/setka_images/e7226d9e49d368040456477f26185c16e883a1d9.png)
Основные элементы для прототипа
После того как мы задали сетку, переходим к созданию прототипа. Для этого используют элементы из библиотеки (окно Libraries).
![](https://248006.selcdn.ru/main/upload/setka_images/f6805bbc89373558610619294f51ace8ee7c9b5c.png)
Как использовать элементы
ЭЛЕМЕНТ | НАЗНАЧЕНИЕ |
---|---|
Box | Для структурных блоков сайта |
Ellipse | Иконки, изображения |
Image и Placeholder | Изображения |
Button | Кнопки |
Heading, Label и Paragraph | Заголовки, основной текст, надписи |
Horizontal и Vertical Line | Линии, стрелки, указатели и другие элементы |
Forms | Создание форм |
Чтобы использовать элемент, перетащите его из окна библиотек на рабочую область.
Создание шапки сайта
Шапка — это самый верхний блок сайта, где обычно размещают логотип компании, телефоны и меню сайта. В списке элементов выбираем Box 1, перетягиваем его на рабочую область и задаём нужный размер.
![](/upload/setka_images/6996be07fa8ecb7021b6292f47f1c574ee4c8403.gif)
Мы задали размеры шапки, теперь разместим логотип, телефонный номер и меню. Логотип условно обозначим более тёмным прямоугольником Box 2.
![](https://248006.selcdn.ru/main/upload/setka_images/935a1142a22c4ed32b86470cabe2eedc31d2fd6b.png)
Телефон компании пишем, используя элемент Header 3, а кнопку с вызовом формы обратной связи указываем с помощью уже готового Button.
![](https://248006.selcdn.ru/main/upload/setka_images/322b2616a3ce31cd2c9e68071188ebd36c4ec877.png)
С помощью текстового элемента Paragraph создаём и заполняем область меню.
![](https://248006.selcdn.ru/main/upload/setka_images/d5b3b6bcfba9f9a881e369b4fb10eb29376800b7.png)
В прототипах с большим количеством страниц пользоваться такой шапкой неудобно. Для каждой новой страницы её нужно будет или рисовать с нуля, или копировать с предыдущей. А если потребуется внести изменения, то придётся редактировать шапку на каждой странице отдельно. Чтобы избежать этого, проектировщики используют панель Masters в правом нижнем углу.
Мастер — это специальный виджет, который применяют к нескольким страницам, но содержание редактируется один раз. Подходит для создания шапки сайта, подвала, формы заказа, меню и других повторяющихся элементов. Шапку, которую мы создали, можно конвертировать в мастер. Так её легче добавлять на другие страницы и редактировать содержимое с помощью одного клика.
Выделяем шапку сайта, нажимаем правую кнопку мыши, в появившемся окне выбираем Convert to Master.
![](https://248006.selcdn.ru/main/upload/setka_images/57cf77142747ecd37c8e894c6ee763f242291a07.png)
Чтобы добавить шапку на новую страницу, перетащите на неё виджет.
![](/upload/setka_images/2a0475ee0140f7724bc699ba45337cc59a3edba1.gif)
Прототип: основные блоки сайта
Основные блоки создаются с помощью базовых элементов. На первом экране разместим заголовок, призыв к действию, кнопку и изображение.
![](https://248006.selcdn.ru/main/upload/setka_images/adfffaf887a4ad30c0e38ea9f5d74d6e6f64d2d6.png)
Следующий экран — это блок с преимуществами товара. Покажем фотографию и расскажем, в чём отличие от конкурентов. Изображение условно обозначим с помощью элемента Placeholder, а для иконок используем Ellipse.
![](https://248006.selcdn.ru/main/upload/setka_images/129ddafb6a8f1240aeb1843909cec7e5ea9c89b3.png)
Чтобы показать работы компании, используем слайдер. Элементы управления легко создать с помощью горизонтальных линий. Перетягиваем Horizontal Line на макет, кликаем на серый круг около линии и выбираем внешний вид.
![](/upload/setka_images/fcc8ad32363468857491973109836954124167e9.gif)
Отзывы о компании удобно разместить в виде карточек.
![](https://248006.selcdn.ru/main/upload/setka_images/547aaa8e5c9472c7b272da80f8a70c6f275b0066.png)
Создание взаимодействий
В Axure любой элемент прототипа может быть триггером для действий, так мы присвоим объекту определённую логику поведения. Это помогает смоделировать работу сайта.
Рассмотрим, как сделать в прототипе кликабельное меню, чтобы перемещаться по сайту с помощью ссылок в шапке сайта. Для этого кликаем на раздел «Блог» и в свойствах элемента (Properties) выбираем действие OnClick.
![](https://248006.selcdn.ru/main/upload/setka_images/950b605ef54e984a61bad2e43a4fecb1c98fdcd4.png)
Триггер OnClick срабатывает при клике мыши по элементу, что прекрасно подходит для создания ссылок. Сделаем так, чтобы при клике в этом же окне открывался раздел с блогом.
![](https://248006.selcdn.ru/main/upload/setka_images/9c221503ce8df0e4377d9a8f75012f9d21b2629c.png)
Для этого выбираем Open Link («Открывать ссылку») → Current Window («В текущем окне») → Блог (какую страницу открывать). Весь процесс настройки:
![](/upload/setka_images/d82026b9fe390fbde00d2490c4c7a234cd7d3ab7.gif)
Просмотр и экспорт прототипа
Готовый прототип можно сразу открыть в браузере, поделиться через серверы Axure или экспортировать как HTML.
Просмотр
Посмотрите, как выглядит и работает прототип в браузере с помощью Preview.
![](https://248006.selcdn.ru/main/upload/setka_images/6305967b45e121acb2b53247755f0ff1e30e88a2.png)
Вот пример из Axure в Google Chrome. Панель навигации справа показывает структуру сайта и при необходимости позволяет оставить комментарии.
![](https://248006.selcdn.ru/main/upload/setka_images/7cc88bd00aaa385a1e45afe0998326eb303463ba.png)
Публикация и экспорт
Готовый прототип легко опубликовать на сервере Axure, а затем просто дать ссылку заказчику. Также можно сгенерировать HTML-файлы и использовать их локально или на своём сайте.
Нажимаем кнопку Publish в правом верхнем углу и выбираем Publish to Axure Share, если нужно опубликовать прототип, или Generate HTML Files, если нужно скачать его на компьютер.
![](https://248006.selcdn.ru/main/upload/setka_images/c0cef7f850372db61670d7732313339ea4e6ad92.png)
Заключение:
кто делает прототип сайта и зачем это нужно
Освоить базовые функции Axure довольно просто. Поэтому программой пользуются не только UX-дизайнеры, но и менеджеры проектов, маркетологи, копирайтеры. Это экономит время и ресурсы.
Например, менеджер рисует прототип при общении с заказчиком и передаёт дизайнеру уже чёткое руководство, как и что необходимо делать, сокращая количество итераций правок.
Кроме базовых функций в Axure реализуют сложные взаимодействия, всплывающие окна, адаптивные прототипы. Обычно этими функциями пользуются UX-дизайнеры на сложных и объёмных проектах.
Стать UX-дизайнером и научиться работать с прототипами, создавать понятную структуру сайта, понимать пользователей, придумывать доступные и понятные решения можно на курсе «UX-дизайн» от онлайн-университета Skillbox.