Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

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

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку

Skillbox