Создание прототипа сайта в Axure: пошаговое руководство от Skillbox

Содержание:

• Определение прототипа веб-сайта
• Создание прототипа веб-сайта: пошаговое руководство
• Запуск нового проекта в Axure RP
• Сеточная структура и размеры экрана
• Ключевые компоненты, необходимые для создания прототипа
• Создание шапки сайта
• Ключевые компоненты структуры веб-сайта
• Формирование взаимодействий
• Анализ и экспорт созданного прототипа
• Заключение:

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

В этой связи Skillbox предлагает обучение по программе «UX-дизайн», которая включает не только фундаментальные знания, но и возможность прохождения стажировки в организациях-партнерах. Давайте сейчас рассмотрим основы этого направления.

Определение прототипа веб-сайта

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

Прототипы, как правило, разрабатываются в черно-белом варианте, что позволяет сосредоточиться на организации и размещении элементов содержимого, а не на эстетической привлекательности.

На встрече с клиентом разрабатывается предварительный план сайта на бумаге. Затем создаётся интерактивный прототип, который обсуждается с командой. В процессе возникают вопросы, выявляются ошибки и неточности, которые подлежат исправлению. Этот метод способствует эффективному использованию времени и ресурсов.

Создание прототипа веб-сайта: пошаговое руководство

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

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

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

Запуск нового проекта в Axure RP

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

Начинаем новый проект, выбрав в меню File → New. Как правило, Axure автоматически создаёт новый проект с тремя пустыми страницами. Давайте изменим их названия в соответствии со структурой нашего будущего сайта.

Для изменения имени страницы достаточно нажать правой кнопкой мыши на её название в окне Pages и выбрать опцию Переименовать.

Сеточная структура и размеры экрана

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

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

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

Для оптимизации времени и избежания необходимости вручную устанавливать все направляющие для макета, воспользуемся автоматическим созданием: перейдите в меню Arrange, затем выберите Grid and Guides и нажмите на Create Guides. В открывшемся диалоговом окне укажите необходимые размеры.

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

Ключевые компоненты, необходимые для создания прототипа

Когда сетка была установлена, можно приступить к разработке прототипа. В этом процессе применяются компоненты из библиотеки, доступной в окне под названием «Libraries».

Для того чтобы задействовать элемент, необходимо перетащить его из окна с библиотеками на основное рабочее пространство.

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

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

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

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

При помощи текстового элемента Paragraph мы формируем и наполняем меню.

В прототипах, содержащих множество страниц, использование традиционной шапки может вызывать неудобства. Каждую новую страницу придётся либо создавать с нуля, либо дублировать шапку с предыдущей. В случае необходимости внести изменения, придется редактировать шапку на каждой странице по отдельности. Чтобы облегчить этот процесс, дизайнеры прибегают к панели Masters, расположенной в правом нижнем углу.

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

Выделяем верхнюю часть сайта, затем кликаем правой кнопкой мыши и в открывшемся меню выбираем опцию «Преобразовать в мастер».

Для того чтобы установить заголовок на новую страницу, просто перетащите соответствующий виджет на неё.

Ключевые компоненты структуры веб-сайта

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

На следующем экране будет представлен раздел, посвящённый преимуществам продукта. Мы продемонстрируем изображение и объясним, чем он выделяется среди аналогичных товаров. Для наглядности используем элемент Placeholder для фотографии, а иконки будут представлены в виде Ellipse.

Для демонстрации проектов компании мы применяем слайдер. Элементы управления можно просто создать, используя горизонтальные линии. Для этого переносим Horizontal Line на рабочую область, затем нажимаем на серый круг рядом с линией и выбираем желаемый стиль отображения.

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

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

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

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

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

Для начала мы выбираем опцию «Открыть ссылку», затем указываем «В текущем окне» и выбираем нужный раздел блога, который хотим открыть. Вот пошаговая инструкция по настройке:

Анализ и экспорт созданного прототипа

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

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

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

Созданный прототип можно без труда разместить на сервере Axure, после чего достаточно предоставить ссылку клиенту. Кроме того, есть возможность сгенерировать HTML-файлы, которые можно использовать как на локальном компьютере, так и на собственном сайте.

Чтобы опубликовать прототип, необходимо нажать на кнопку «Publish», расположенную в верхнем правом углу, и выбрать опцию «Publish to Axure Share». Если же требуется скачать прототип на компьютер, следует выбрать вариант «Generate HTML Files».

Заключение:

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

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

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

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