Axure RP — удобный инструмент для создания интерактивных прототипов. Чтобы прототипировать простые сайты, которые можно открыть в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и ее базовые возможности.
Что такое прототип сайта
Прототип — это детальная схема сайта. Он помогает продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать сайт с заказчиком.
Обычно прототип создают черно-белым. Такой прием используют, чтобы сфокусироваться на структуре сайта и расположении информации, а не на красивом оформлении.
На встрече с заказчиком можно нарисовать примерный план сайта на бумаге. После этого — сделать интерактивный прототип и обсудить возникшие вопросы, исправить ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.
Как сделать прототип сайта
В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продает строительные блоки.
Как сделать прототип сайта бесплатно / Быстрый обзор Axure RP: Часть 1/2
Скетч — это примерный план информации на странице. На его основе можно создать кликабельный прототип. Для этого нужно точно продумать структуру сайта, информационные блоки на страницах и расположение элементов.
Прототип удобно делать в программе 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 , перетягиваем его на рабочую область и задаем нужный размер.
С чего начать изучение Axure RP
Для изучения Axure достаточно пройти 8 уроков на сайте UX Fox
Автор уроков, Ярослав Бирзул, перевёл официальный How To с разрешения компании Axure. Чтобы просмотреть материалы и начать делать первый прототип потребуется 1 день. Разработка прототипа в программе Axure RP
1. Интерфейс программы Axure RP
Axure RP используют для создания интерактивных прототипов. В макетах совмещаются внешний вид и функциональность.
- назначение Axure RP;
- 10 %;
- что собой представляет Axure RP;
- обзор инструментов и возможностей.
2. Страницы проекта, макеты страниц, виджеты
В Axure можно создавать многостраничные проекты. Все элементы интерфейса создаются с помощью виджетов.
- создание, систематизация и редактирование страниц проекта;
- добавление виджетов в макет страницы и настройка их внешнего вида;
- добавление примечаний к виджетам.
Источник: www.it-agency.ru
Axure 7 для начинающих за 100 минут
Axure — инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Навыков работы с ним часто требуют работодатели, ищущие проектировщика интерфейсов или UX
Урок 1. Вводная информация об Axure, создание структуры проекта
Урок 2. Обычные виджеты и их оформление
Урок 3. Виджеты форм
Урок 4. Сетки, направляющие и выравнивание виджетов
Урок 5. Мастера
Урок 6. Динамические панели и интерактив
Урок 7. Интерактив, последовательность действий, кейсы, условия
Урок 8. Ещё пример с условиями, организация прототипа, в котором есть интерактив, скроллирование к определённому виджету, открытие страницы в текущей вкладке
Урок 9. Генерация и демонстрация прототипа, свойства страницы, стили
Погружение в детали
Я рассказал об основных возможностях Axure, не погружаясь в детали, если эти знания не особо востребованы в моей работе. Далее — примеры уроков, которые помогут начать движение уже к продвинутому пользователю.
Запуск события при нажатии на Enter
Как выполнить любое действие по нажатию на кнопку ввода при заполнении формы (например, формы поиска). Посмотрев ролик, можно узнать про ивент «Нажатие на кнопку», про условие «Нажата определённая кнопка» и ещё про свойства виджетов форм.
Перемещение с 1-й страницы в определённое место 2-й
Как сделать так, чтобы пользователь нажал на ссылку на одной странице и при этом перешёл к определённому месту на второй странице. Посмотрев ролик, можно узнать про глобальные переменные.
Работа с условиями в Axure 8: If и Else If
Ролик записан в восьмой версии Axure, но эти приёмы верны и для текущей версии.
Прикрепляем к верхней части страницы укороченную версию шапки и фильтр для одного из блоков контента. Посмотрев ролик, можно узнать про нюансы в работе кейсов и условий, в частности, как переключить условия с Else If на If и зачем это может понадобиться.
Дополнительные материалы
- Раздел обучения на официальном сайте Axure: видео про основные возможности, текстовое описание всего остального. На английском.
- Официальный форум с ответами на вопросы типа «как сделать так, чтобы…». На английском.
- Неофициальная группа ВКонтакте с ответами на вопросы участников группы и видео-материалами. На русском.
- Канал проектировщика Егора Камелева на YouTube с обучающими видео. На русском.
- Веб-дизайн
- Usability
- Дизайн мобильных приложений
Источник: habr.com