Как сделать прототип сайта в Axure: пошаговая инструкция
Axure RP — инструмент для создания интерактивных прототипов сайтов. Рассказываем на примерах, как работать с этой программой.
Чтобы создать прототип простого сайта, открыть его в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и её базовые возможности. И, конечно же, владеть знаниями о прототипах и UX-дизайне.
Для этого Skillbox проводит курс «UX-дизайн», который даёт не только теоретическую базу, но и предоставляет стажировку в компаниях-партнёрах. А сейчас поговорим об азах.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Что такое прототип сайта
Прототип — это детальная схема сайта. С его помощью легко продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать всё это с заказчиком.
Обычно прототип создают чёрно-белым, чтобы сфокусироваться на структуре и расположении контента, а не на красивой обложке.
На встрече с заказчиком делают примерный план сайта на бумаге. После этого — конструируют интерактивный прототип и обсуждают возникшие вопросы, исправляют ошибки и неточности. Такой подход позволяет сэкономить время и ресурсы.
Как сделать прототип сайта
В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продаёт строительные блоки.
Скетч — это план организации информации на странице. На его основе создают уже кликабельный прототип. Прототип удобно делать в программе Axure RP. Это полноценный инструмент для сложных макетов сайтов и приложений.
Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure, разобраться в интерфейсе и его базовых функциях.
Создаём новый проект в Axure RP
Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта — главная, блог и запись в блоге.
Создаём новый проект: File → New. По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.
Чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне Pages и выбрать пункт Rename.
Сетка и ширина экрана
Современные сайты проектируют для разных устройств: смартфонов, планшетов, компьютеров и ноутбуков. У каждого из устройств разное разрешение экрана, поэтому дизайнер обычно рисует несколько макетов одного и того же сайта в разных размерах.
Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из 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 в правом нижнем углу.
Мастер — это специальный виджет, который применяют к нескольким страницам, но содержание редактируется один раз. Подходит для создания шапки сайта, подвала, формы заказа, меню и других повторяющихся элементов. Шапку, которую мы создали, можно конвертировать в мастер. Так её легче добавлять на другие страницы и редактировать содержимое с помощью одного клика.
Чтобы добавить шапку на новую страницу, перетащите на неё виджет.
Основы проектирования веб-интерфейсов в Axure RP Pro
В последнее время разработчики все чаще начинают задумываться о том, что до начала разработки продукта было бы неплохо узнать, что это будет за продукт и как он будет выглядеть.
Эта тенденция не может не радовать как заказчиков, так и самих разработчиков — ведь процесс проектирования позволяет уничтожить все наиболее проблемные моменты еще до начала превращения абстрактного технического задания в конечный продукт.
Средств для визуального проектирования становится все больше. Одни пользуются Adobe InDesign, другим нравится Visio, третьи довольствуются OpenOffice Draw. Но все больше поклонников появляется у довольно тяжелой и функциональной программы Axure RP Pro.
1. Карта сайта (Sitemap)
В этой области можно создавать структурную схему сайта, используя многоуровневую иерархию. Например, структура небольшого проекта может выглядеть так:
Кнопки в панели предназначены для быстрого доступа к основным функциям:
| Создает вложенную страницу (Child page) |
| Перемещают выбранную страницу вверх или вниз. Работают только со страницами одного уровня и не вытаскивают их за пределы родительского элемента. Если надо выделить и переместить вверх или вниз сразу несколько страниц — можно использовать Shift. |
| Изменяют уровень вложенности страниц. Стрелка влево выносит выбранные страницы на уровень выше, стрелка вправо подчиняет страницу родительскому элементу, расположенному над ней. |
| Удаляет страницу. В том случае, если родительский элемент содержит вложенные элементы, они будут удалены вместе с ним. |
| Позволяет перейти к редактированию страницы, делает то же самое, что и двойной клик по странице. |
Эти же действия можно выполнять с использованием контекстного меню, которое выпадает по клику правой клавишей мыши на элементе (если кликнуть правой кнопкой мыши в свободной области, будет доступна только функция добавления новой страницы).
2. Панель виджетов
Панель содержит набор интерфейсных элементов, которые постоянно используются при работе над проектом. Стандартные библиотеки содержат только самое необходимое — прямоугольники, текстовые панели, плейсхолдеры, кнопки, элементы форм
В область можно подгружать либо все элементы из всех библиотек одновременно (для этого нужно выбрать All libraries), либо только ту библиотеку элементов, которая нужна в настоящий момент. Кстати, библиотеки элементов можно создавать самостоятельно, но об этом речь пойдет чуть ниже.
Чтобы поместить элемент на страницу, используется метод Drag and Drop (элемент необходимо выделить и, не отпуская кнопку мыши, перетащить в рабочую область).
Основная библиотека, которую стоит использовать на стадии освоения программы, называется Wireframe. Ее элементы мы и будем использовать.
В таблице размещены описания элементов. О том, что можно делать с элементами, речь пойдет чуть ниже.
| Заглушка для изображения. Стандартный размер — 50×50px. |
| Текстовое поле (100×16px). По умолчанию используется Arial, 10, черный цвет. |
| Гиперссылка (100×16px). По умолчанию используется Arial, 10, синий цвет + подчеркивание. |
| Прямоугольник 180×80px с белой заливкой и черной рамкой в 1px. |
| Плэйсхолдер, предназначенный, например, для забивки баннерного места. 180×80px, рамка и диагонали — черные, 1px. |
| Кнопка (100×25px). |
| Таблица. По умолчанию создается таблица 3×3. Пользоваться элементом не очень удобно, ширина задается только всей таблице и не может задаваться определенным столбцам. Если же начинать руками смещать границы столбцов внутри таблицы — ширина увеличивается и уменьшается за счет общей ширины таблицы, а не других столбцов. |
| Поле для ввода текста (одна строка). |
| Область для ввода текста (любое количество строк и столбцов). |
| Выпадающий список. |
| Многострочный список. |
| Чекбокс. |
| Радиокнопка. |
| Горизонтальная линия. |
| Вертикальная линия. |
| Кнопка со скругленными углами. Может из кнопки легко превратиться в прямоугольник или квадрат. Радиус скругления можно задавать вручную, но только «на глазок». Поле для ввода точного радиуса разработчики поленились сделать. |
| Область наложения для изображений. |
| Фрейм, в который может подружаться информация с других страниц прототипа. |
| Динамическая панель. Может использоваться, к примеру, для проставления активности пунктов меню на определенных страницах. В этой статье вопросы интерактивности прототипа рассматриваться будут очень поверхностно, поэтому в логику работы этого элемента мы не полезем. |
| Вертикальное многоуровневое выпадающее меню. |
| Горизонтальное многоуровневое выпадающее меню. |
| Раскрывающийся список. |
3. Панель мастеров (Masters)
тоже могут быть многоуровневые (к примеру, футер может содержать дочерние элементы «контакты» и «счетчики»).
По умолчанию нет. Чтобы завести ее и добавить на все страницы, надо выполнить последовательность:
Если стала не нужна и ее хочется удалить — сначала надо отменить ее размещение на страницах прототипа, а только потом удалять. Иначе она будет сопротивляться и ругаться.
4. Рабочая область
Собственно, в этой области и происходит все самое интересное — редактируются элементы и их оформление, оформляются функциональные блоки и так далее.
Скажу сразу, что до конца прототип разработан не будет — зато тем, кто заинтересовался Axure, будет предоставлена возможность скачать недоработанный проект и доделать его самостоятельно.
использоваться не будут, мы заведомо уверены в том, что разрабатывается только одна страница.
Итак, приступаем.
Для начала делаем скриншот исходника:
Здесь можно посмотреть на исходник в нормальном разрешении.
Отмеряем по верхней линейке 1000px.
Размещаем прямоугольник, который будет служить фоном верхней навигационной панели и изменяем его размеры:
Убираем рамку у прямоугольника.
Используя интерфейсный элемент Hyperlink, вытаскиваем и располагаем в навигационной панели 4 ссылки, задаем им размер 8 вместо стандартной десятки. Цвет ссылкам можно задать сразу, но я оставлю это на совести тех, кто скачает и будет ковырять проект.
Накидываем и оформляем блок новостей, используя элементы Text Panel для текста/ссылок и Rectangle для подложки «новость часа». Здесь сразу получаем несколько тонкостей.
, чтобы подложки располагались под текстом, а не над ним, каждому прямоугольнику надо задать расположение под другими элементами:
, чтобы текстовые блоки имели равномерные вертикальные отступы, надо их выделить и выровнять по вертикали:
, чтобы сделать прерывистое подчеркивание у города, надо под надписью разместить горизонтальную линию (элемент Horizontal Line) и выбрать для нее тип подчеркивания.
, раз уж мы закончили работать с элементами этого блока, лучше их сгруппировать, чтобы в дальнейшем нечаянно не оторвать оттуда лишний кусок.
Новости в общем виде готовы — можно переходить к строке поиска и к рекламному месту «Яндекс в вашем телефоне».
Накидываем ссылки над строкой поиска (Hyperlink) и размещаем саму строку поиска с кнопкой (Text Field + Button).
Ссылки сразу переводим в размер 12 и стараемся подогнать ширину элемента по ширине гиперссылки, чтобы команда Distribute Horizontally, выравнивающая горизонтальные отступы группы элементов, сработала корректно. Конечно, идеально не получится и придется немного подгонять их руками, но альтернативы нет (по крайней мере, я не нашел).
Не забываем про «например» (элемент Text) и «расширенный поиск» (Hyperlink).
Чтобы соблюсти размеры полей и кнопок сразу же, я вытащил прямоугольную подложку и залил ее соответствующим цветом.
Справа подложка под формой у Яндекса заканчивается нестандартно — на то он и дизайн. Фанаты могут вырезать из скриншота окончание подложки, разместить в рабочем поле элемент Image и подменить ее на нужную. Мы сделаем это в самом конце, потому что сейчас просто лень и есть более важные задачи. Например, поставить логотип.
Как раз сейчас мы и разберем подмену картинок. Это достаточно просто — надо вытащить в рабочую область элемент Image и, не изменяя его размеры, два раза кликнуть по нему. Откроется диалоговое окно, в котором мы должны выбрать файл изображения. После того, как мы нашли нужную картинку и нажали «OK», Axure задаст вопрос:
Если отказаться — выбранная картинка будет подогнана под размер элемента Image. Если согласиться — картинка будет вставлена в том размере, в котором она существует. Как правило, приходится соглашаться.
Чтобы прототип смотрелся более живо, изображение с баннером я своровал со скриншота. Но, в принципе, можно для этих целей использовать элемент Placeholder — ничего в этом страшного нет.
Подавляющая часть оставшегося интерфейса — текстовая. И операции по ее реализации ничем не отличаются от уже проделанной работы. Так что тем, кто заинтересовался проектированием в Axure и хочет попробовать свои силы, я могу предложить скачать недоделанный проект главной страницы Яндекса и проработать оставшиеся элементы самостоятельно.
Саму программу можно скачать с официального сайта. Триальная версия будет работать со всеми функциями в течение 30 дней.
Да, кстати, я не имею никакого отношения к этой программе и к компании, разработавшей ее. Этот инструмент был выбран исключительно из-за того, что из всего набора софта, который я перепробовал для проектирования, Axure понравилась больше всего. Я не исключаю того, что вы будете пользоваться другим софтом. Например:
Если статья понравится, я с удовольствием напишу еще одну-две, в которых более подробно расскажу об оформлении и функциональных возможностях каждого из элементов, а также о том, как работать с интерактивностью и динамическими панелями.
Как сделать прототип в Axure RP, если ничего в этом не понимаешь
Axure RP – самая известная и популярная программа по созданию прототипов веб-сайтов и приложений. В достаточной степени глубокая, чтобы делать сложные элементы, при этом достаточно легкая, чтобы уже через десять минут ковыряния в интерфейсе подготовить макет. Разумеется, она далеко не единственная – есть множество других способов сделать прототип.
Одной из основных особенностей Axure (по сравнению с конкурентами) является возможность запрограммировать поведение кнопок, контейнеров, виджетов. Исходя из этого, получившийся прототип можно сделать так, что он будет функционировать как полноценный сайт/приложение.
Дисклеймер: это моя первая статья. Писать не умею, зато есть накопленный опыт. Поэтому взял за основу эту статью. Надеюсь, материал будет полезен. Гайд не претендует на истину в последней инстанции – некоторые решения и мысли субъективны, хоть и обкатаны на многих проектах.
С точки зрения структуры гайда, она будет следующая:
Рассматриваемый прототип будет располагаться по ссылке http://fys0bf.axshare.com.
Для каждого рассмотренного примера прилагается видеоинструкция. Так что у вас не должно быть проблем, как в некоторых учебниках по дизайну.
Немного про UX/UI
Если коротко, UX (User Experience) – это опыт, как пользователь воспринимает интерфейс, какие эмоции испытывает при взаимодействии с ним. UI (User interface) – это то, что конкретно он видит, с чем взаимодействует.
Интерфейсом может быть что угодно: молоток, пассатижи, холодильник, приборная панель самолета, мультиварка и т. д. Первые три не вызывают вопросов – ими можно пользоваться даже не задумываясь, с мультиваркой придется поковыряться, а вот с самолетом не управиться, если вы не профессиональный пилот.
Если проводить параллель с молотком, то UI молотка – это ручка, боек и носок. UX молотка – это то, что человек ощущает, когда забивает молотком гвоздь.
При проектировании интерфейса надо стремиться, чтобы он был настолько же простым, как интерфейс молотка или палки-копалки. Любое усложнение заставит пользователей напрягать голову, а это они не любят.
Как сказал Стив Джобс: «Дизайн – это не то, как устройство выглядит, а то, как оно работает». Соответственно, основная цель – заставить его работать так, чтобы пользователи не раздумывали в процессе. Про наличие интерфейса обычно вспоминают в двух случаях:
— Он неудобный. Маленькие кнопки, надо «прицеливаться» чтобы кликнуть. Межстрочный интервал слишком короткий, приходится вглядываться. На посадочной странице множество бесполезной информации, а конверсионный элемент надо еще найти. Ну, вы поняли.
— Профессиональное. Кто работает с интерфейсами или интересуется темой, обратят внимание, как хорошо он сделан.
Для тех, кто в танке: причем тут прототип интернет-магазина и такие высокие понятия «что чувствует пользователь»? А притом. Удобство будущего интерфейса должно быть продумано на уровне скелета, путей прохода человека по сайту (Customer journey mapping). Естественно, на уровне дизайна будет много чего скорректировано, добавлены цвета, изображения. Но база сохраняется, и она закладывается как раз на этапе создания прототипа.
В целом, можно сформулировать следующие «благодетели»:
— Простота. Не надо пытаться сделать вычурнее, сложнее. Упрощайте, сокращайте.
— Шаблоны. Не пытайтесь придумать велосипед, новый элемент интерфейса, особенную фишку, которой нигде нет. Чем больше на сайте будет типовых элементов на своих местах, тем больше шансов, что пользователь поймет, для чего они нужны. Данное правило подходит, конечно, при создании чего-то типового. Если вы разрабатываете какой-то новый сервис, или интерфейс на новой платформе (допустим, для очков виртуальной реальности), нужно экспериментировать.
— Целевая аудитория. Как бы банально это ни звучало, надо понимать, для какой ЦА предназначен интерфейс. Возраст, пол, образование, сфера деятельности, уровень достатка. Все это должно учитываться при формировании прототипа. Например, если ваш лендинг ориентирован на продажу очень дорогих часов, то можно не использовать кричащие слоганы о скидках, огромную CTA кнопку на каждом экране или мигающего счетчика, что осталось 10 минут сделать заказ по выгодной цене. В случае, если LP представляет собой заработок в интернете по системе сетевого маркетинга (волшебные БАДы, которые позволяют поговорить с умершей бабушкой), то такие элементы будут более чем уместны. Скажу даже больше: их использование поможет отсеять целевые обращения на уровне интерфейса.
— Конкуренты. Кто-то из известных людей сказал: «Хорошие художники копируют, великие художники воруют». Собственно воруйте идеи при проектировании интерфейсов у конкурентов. Конкуренты могут быть как прямые, так и косвенные. Также рекомендую подглядывать за хорошими решениями на зарубежных сайтах.
Цель этого материала показать, как сделать прототип в Axure RP. Поэтому далее больше не будет подниматься вопросов почему этот элемент располагаем так иначе.
Принципы и особенности прототипирования в Axure
Прежде чем приступать к проектированию интерфейса, важно понимать для какой цели вы планируете его использовать. От этого будет зависеть, насколько данный гайд следует использовать как прямую инструкцию:
— Если вы делаете прототип сайта, чтобы в дальнейшем отдать на дизайн и потом приложить к техническому заданию – именно для такой схемы и рассчитан гайд.
— Если вы дизайнер, заказчик (и у вас есть видение продукта и надо это донести) или вам нужно подготовить рабочую схему для демонстрации – можно добавлять больше изображений, заморачиваться с глубоким программированием элементов, играться с цветом. Также рекомендуется сделать адаптивную версию в рамках одной страницы.
В целом, требования к оформления прототипов были сформулированы уже давно, в этом материале. Перенесу самые важные и актуальные, плюс добавлю из практики:
У Axure есть свои «фишки», которые выгодно отличают его от конкурентов, вот их неполный набор:
Размерная сетка
Размерная сетка предназначена для того, чтобы внести некоторую организованность. Это как если сравнивать альбомный лист А4 и миллиметровую бумагу: чертеж можно сделать и на чистом листе, но куда удобнее его реализовывать с использованием разметки.
Для прототипа будет использована сетка в 16 колонок для ширины экрана 1280 пикселей.
При расчете размеров сетки рекомендуется использовать сервис gridcalculator.dk.
В документе по умолчанию отсутствует разлиновка и направляющие. Поэтому перед началом работы над прототипом нужно ее создать. Для этого нужно:
Рекомендуется закрепить направляющие, чтобы случайно их не подвинуть в процессе работы. Для этого нужно кликнуть правой кнопкой по пустому месту и выбрать Grid and Guides à Lock guides. Так же можно создать точечную сетку: Grid and Guides à Show Grid.
Тема сеток для адаптивного дизайна хорошо раскрыта в этой статье на Хабре.
Обзор интерфейса
Интерфейс Axure достаточно простой для восприятия и имеет низкий порог входа. В то же время он достаточно сложен, чтобы задействовать все его функции. Рабочий экран можно разделить на следующие элементы:
Далее о каждом подробнее.
Main Toolbar, Style Toolbar и основное меню
Main Toolbar – это панель инструментов, которые, так или иначе, затрагивают перемещение виджета или группы виджетов по экрану. Перемещение имеется в виду по рабочей области при работе с объектом, а не его интерактивность для пользователя. В этом тулбаре можно:
Поменять способ выделения виджета (либо полностью выделить, либо частично). Тут же Connect Tool – для соединения виджетов, можно использовать при составлении интеллект-карт (Mind map).
Pen – инструмент «перо» как в Photoshop. Можно вырезать неугодный элемент из виджета.
More – набор элементов, из которых вы будете использовать разве что обрезку (Crop). Но его будет гораздо удобнее использовать через контекстное меню (правый клик по элементу).
Zoom. Изменение масштаба. Удобен, чтобы видеть, какой текущий масштаб у рабочей области. Для изменения масштаба рекомендую использовать классический функционал: Ctrl + прокрутка колесиком мыши.
Front/Back. Для регулировки слоев виджетов. Зачастую виджеты наслаиваются друг на друга, с помощью этих кнопок можно настраивать их уровень.
Group/Ungroup. Для группировки виджетов и ее снятия. Зачастую применяется, если надо одну группу элементов выровнять относительно другой группы элементов. Горячие клавиши расположены достаточно удобно, чтобы можно было использовать одной левой – Ctrl + G для группировки объектов, Ctrl + Shift + G для снятия группировки.
Align/Distribute. Для выравнивания объектов: по центру, по краям, равномерно расположить объекты в ряд. Наглядно это можно посмотреть по ссылке. По этой ссылке можно посмотреть, как работает группировка и выравнивание групп элементов.
Lock/Unlock. Блокировка элемента. Нужны для фиксации элемента, чтобы случайно не подвинуть.
Left/Right. Можно убрать левую и правую область с инструментами, чтобы выделить больше места под рабочую область.
Preview/Share/Publish. Посмотреть, как выглядит прототип в браузере. Preview позволяет сгенерировать проект в браузере локально. Но быстрее нажать F5. Publish – можно отправить на сервер Axure, где будет доступен любому желающему (если не будет защищен паролем).
Style Toolbar – это панель инструментов, которые ответственны за внешний вид, размер, форматирование.
Взаимодействие со Style Toolbar можно посмотреть в видео по ссылке.
Pages
В данном блоке формируется иерархия прототипа, сами страницы. Также можно создавать папки для удобного разбиения страниц. Для быстрого создания страницы можно с помощью нажатия клавиш Ctrl + Enter. Для коррекции иерархии либо стрелочки в интерфейсе, либо Ctrl + стрелочки на клавиатуре.
Libraries
Сами виджеты с возможностью выбрать библиотеку. Библиотеки виджетов есть стандартные, которые поставляются вместе с программой. В интернете полно пользовательских библиотек (гуглите с запросом «Axure libraries download»). Библиотеку можно сделать даже самому для удобства – например, библиотека специализированных иконок, тулбары, табы и т. д. Вместе с готовым прототипом, как уже говорилось в начале, будет приложена обширная библиотека, пользуйтесь на здоровье.
Сам тулбар достаточно простой в использовании – просто перетаскиваете нужный виджет на рабочую область.
Masters
Блок с мастерами, о которых говорилось выше. Мастера на страницы можно добавлять как вручную, перетаскивая на рабочую область как виджет, либо через Add Pages (правая кнопка мыши на мастере). Создание, добавление и работу с мастерами можно посмотреть на видео. Мастер можно создать двух видов: заблокированным на одном месте и с возможностью передвигать. Шапку сайта можно создавать закрепленной на том месте (Lock to Master Location), где создавалось, а остальные делать лучше без (Place Anywhere).
Рабочая область
Рабочая область – место, на котором конструируется прототип. Используемые страницы, мастера, динамические панели располагаются вкладками над рабочей областью.
Interactor
Если коротко – с помощью этого тулбара программируется весь «экшн». Состоит из трех вкладок: Properties, Notes, Style.
Properties
Набор событий, которые можно задействовать для определенного взаимодействия элемента или группы элементов. Их всего около 30, но обычно используются в штук 5 из них:
Помимо программирования элементов при взаимодействии с ними можно также задавать поведение элементов просто при загрузке страницы или скролле. Для этого не должно быть выделено ни одного элемента, тогда в этом блоке появятся следующие свойства:
Примеры использования этих событий будут рассмотрены дальше в прототипе.
Shape
Позволяет изменить форму виджета используя готовые пресеты, а также с возможностью сделать свою форму.
Interaction styles
Notes
Дает возможность оставлять комментарии к каждому элементу. Это может пригодиться, когда нужно описать работу виджета, а возможности запрограммировать нет, или это не настолько наглядно и надо пояснить текстом.
Style
Частично дублирует функционал Style Toolbar, только с несколькими особенностями. При выбранном элементе позволяет редактировать межстрочный интервал, а также внутренние отступы для текста в контейнере. Если элемент не выбран, то появляется следующие возможности:
Outline
В этом тулбаре расположены все виджеты, которые используются на странице. При клике по элементу в списке, он будет выделен в рабочей области. Чаще всего эта область будет использоваться для поиска динамических панелей и их состояний (State).
Горячие клавиши и лайфхаки
На многие действия в Axure присутствуют горячие клавиши. Но далеко не на все из них удобно нажимать, т. к. нужно задействовать две руки, что иногда не оправданно и проще кликнуть мышкой. Поэтому список будет хоть и небольшим, зато опробованным и рекомендуемым к использованию. Сюда же отнесу некоторые методики, которые помогают ускорить рабочий процесс.
Прототип главной интернет-магазина (десктоп).
Вступление закончилось, и началось обсуждение самого прототипа. Был выбран интернет-магазин, т. к. у него больше всего различных функциональных фишек, которые можно показать, а также лендинг, элементы которого будут отображены на главной странице. Важно учесть, что данный прототип в первую очередь важен, чтобы показать функционал, как это работает, а не как готовый продукт. Поэтому, чтобы максимально дистанцироваться от итогового применения, я выбрал тему по продаже бонсай, добавив немного треша. Соответственно, воспринимайте главную как некий набор элементов для применения, а не как итоговую инструкцию на своих проектах.
Цель прототипа – показать функционал, поэтому в нем будут отсутствовать страницы вида «Контакты», «Новости», «Статьи», т. к. эти страницы по части функционала не могут продемонстрировать ничего нового.
Шапка
Шапку реализовываем с помощью мастера. Как создать мастер было рассказано ранее. В шапке несколько элементов, на которых стоит остановиться поподробнее.
Логотип
В этом нет сложности, но с ним связан один лайфхак. Если элемент, который должен быть активным (ссылка на страницу или определенное действие при наведении, клике), но при этом он сам состоит из нескольких элементов, можно поверх него вставить прозрачный контейнер. Таким образом, в прототипе реализован логотип, карточка с актуальными статьями.
Всплывающее меню можно реализовать разными способами. Если оно простое (без дополнительных всплывающих окон), можно воспользоваться готовым виджетом.
В случае с интернет магазином по продаже бонсай, оно сложное. Механика следующая:
Заказ обратного звонка
Заказ обратно звонка состоит из триггера, в нашем случае – кнопки и самого модельного окна заказа обратного звонка.
Кнопка делается через обычный контейнер, к которому применяем Interaction Styles MouseOver. Эффект при наведении можно показать каким угодно образом, в зависимости от вашего дизайнерского скилла. Если его не хватает, можно просто изменить оттенки серого на кнопке. На примере меняется заливка, цвет шрифта и цвет границы контейнера.
Модальное окно делаем с помощью динамической панели с одним состоянием и сразу же скрываем (Hidden). Прежде чем приступить к контенту, надо предусмотреть размещение модального окна ровно посередине экрана. Можно конечно выровнять вручную, но из-за того, что у разных пользователей высота и ширина экрана разные, они могут появиться не посередине. Поэтому делаем следующее:
Что приятно, после этого динамическую панель можно убрать куда угодно, и она все равно будет появляться ровно посередине.
Появление модального окна делается следующим образом:
Модальное окно состоит из двух виджетов Input Field (называется Input Field (selected)), кнопки «Заказать», крестика закрытия окна, а также двух надписей, которые будут появляться при корректной и некорректной отправке формы.
Крестик – это обычная иконка из набора Icons. Действие – скрыть модальное окно при клике на крестик. Делается аналогично, как и появление модального окна, только в параметре Visibility радиокнопку переводим в положение Hide.
В форме заказа обратного звонка запрограммирована простая валидация на заполнение. Если в поле «телефон» не введено ни одного символа, будет появляться сообщение: «Не забудьте указать номер телефона!». Если введен любой символ, появится сообщение «Заявка успешно отправлена! Наши специалисты свяжутся с вами в ближайшее время!».
Валидация программируется следующим образом:
Таким образом, если в поле ввода с номером телефона будет пусто, при клике на кнопку «Заказать» появится предупреждение, что его надо заполнить. Исчезнет через 2 секунды.
Сообщение об успешной отправке настраивается через второе условие (Case):
Получается так, что если не выполняется первое условие (т. е. какое-то значение в поле ввода с номером телефона есть), то выполняется второе условие. Появляется сообщение, что специалисты скоро свяжутся, и через 3 секунды модальное окно исчезнет.
Кнопка «наверх»
Кнопка «наверх» применяется для того, чтобы проскроллить до первого экрана. Напомню, что мы до сих пор находимся в пределах мастера «Шапка». Реализуем ее следующим образом:
Опционально, можно сделать эффект при наведении на кнопку наверх, с использованием двух состояний(State), OnMouseEnter и OnMouseOver.
Бэкграунд на всю ширину экрана
Многие элементы на сайте растягиваются на всю ширину экрана, в том числе и шапка. Сделать это можно двумя способами: через обычный контейнер и OnPageLoad и с помощью динамических панелей. Для шапки выберем второй вариант.
Теперь панель будет автоматически растягиваться под любое разрешение.
Фиксированное меню
Фиксированное меню – это когда при скролле вниз, часть навигационных элементов из шапки остаются в самом верху экрана.
Делается это следующим образом:
Первый экран или как сделать параллакс и растянуть изображение по ширине.
Помимо основного изображения, к которому мы хотим применить эффект параллакса и растянуть его, находится стрелка, при клике по которой происходит скролл до второго экрана. Делает это по аналогии с кнопкой наверх.
Растягиваем изображение по ширине
Ранее мы уже растягивали динамические панели по всей ширине экрана, только с использованием заливки. Сейчас покажу, как можно растягивать изображение. Для этого:
На примере показано что сама динамическая панель имеет ширину в 300 px, при этом растягивается до всей ширины экрана.
Как сделать эффект параллакс
Эффект параллакса (на примере вертикальный) создается с помощью замедления скролла одних элементов на фоне других. Задается это следующим образом:
Второй экран или подкат преимуществ
Далее реализуем еще один эффект при скролле, а именно – красивое появление преимуществ. На этот элемент креативности не хватило, поэтому назвал их согласно занимаемому положению. Из себя представляет просто два текстовых виджета с заголовком и рыбным текстом, а также иконкой. Если при создании прототипа необходимо предусмотреть этот контент, то делаем более обдуманно, нежели на примере.
Алгоритм появления примерно такой же, как и у кнопки наверх. Тут главное подгадать, по достижении какого расстояния они будут выплывать. Само появление можно реализовать через Move, но на примере сделано проще. Сами элементы никуда не двигаются, они появляются (Show) с анимацией (Animate) скольжение налево (slide left), вверх (slide up) и направо (slide right).
Третий полу-экран или типы товаров
Цель данного блока показать, какую можно сделать анимацию при наведении на карточку товара или категорию, как на примере. Для этого, как ранее говорилось достаточно создать один элемент, заранее подогнанным по размеру. На примере, его ширина составляет 300 px, т. е. на экране уместиться ровно 4 элемента.
Итак, цель анимации сделать так, чтобы при наведении на элемент выдвигалась полупрозрачная плашка с информацией, а при снятии выделения она отъезжала. Для этого:
Когда один элемент готов, его можно размножить на четыре. А там уже при необходимости в каждом поменять изображение и описание.
Четвертый экран или криповатая акция
В данном блоке немного хулиганства и бессмысленных украшательств.
Обратный отчет
С данными элементами, обычно не стоит заморачиваться, достаточно порой обозначить картинкой или блоком. Но если есть желание можно реализовать смену минут и секунд. Единственный минус, что это не настолько технологично как может показаться (если эту статью прочитают еще мастера Axure, и которые знают, как это можно сделать короткой формулой – напишите, ибо в буржуйнете этих знаний не нашлось).
Повторяем столько раз, пока не будете удовлетворены результатом. После того как посчитали до 10, меняем десятки секунд, и досчитав до 60 минуты. При этом, не обязательно каждый раз ручками выбирать в Widgets элементы. В поле Organize actions можно их копировать и вставлять.
Наклонные элементы
Чтобы повернуть элемент, достаточно подвести курсор к его углу и зажать Ctrl. Далее движением мышки поворачиваем. Разработчики не стали придумывать велосипед и реализовали это как во всех графических редакторах.
Сразу после счетчика присутствует элемент, который постоянно меняет свое положение. Его реализация похожа на предыдущий пример с таймером, с той лишь разницей, что реализация проще:
Таким образом можно реализовать любые анимации. В качестве примера я сделал анимацию кролика, и, что более применительно для работы, анимацию загрузки.
Эффект вырезанного изображения
Пятый экран или как залить в прототип видео из Youtube
Можно достаточно просто сделать так, чтобы в прототипе было видео. В библиотеке по умолчанию надо найти виджет Inline Frame. Разместить его на рабочей области так как вы хотели бы, чтобы располагалось видео. Далее кликнуть на этот элемент. В появившемся выбрать link to an external url or file и в поле ввода ввести url вида https://www.youtube.com/embed/b5dexpeO-l4. Его можно получить на YouTube кликнув под видео на кнопку «поделится» и выбрав html-код. Сам код игнорируем, копируем только URL из примера выше.
Шестой экран или как сделать слайдер в Axure
Дошли до типового элемента, который вы наверно уже знаете, как сделать. Но если вы доскроллили сюда только за этим повторю с самого начала:
Седьмой и восьмой экран или информация о компании и последние статьи
Типовые объекты, которые можно разместить, как вам захочется (естественно следуя логике и размерной сетке). Блок «Новые материалы в нашем блоге» реализуем через прозрачный контейнер, который выведен вперед (Front). Окантовка при наведении задается через MouseOver.
Девятый экран или как пройти
Карту можно обозначит несколькими способами:
Как сделать первые в первых двух случаях Вы и сами сможете разобраться, а вот как реализовать третий вариант, надо рассмотреть поподробнее.
Для начала нужно использовать тот же самый виджет по умолчанию, что мы использовали для вставки видео с YouTube – Inline Frame. Разместить его по рабочей области, как будет удобно. Далее надо взять с «Яндекс.Карт» код, который уже разместить ссылкой в самом виджете:
Теперь рассмотрим как достать код из «Яндекс.Карт»:
Теперь мы должны растянуть карту на всю ширину экрана. Через динамическую панель реализовать не получится, нужно использовать второй способ:
Подвал
Элементы в подвале можно условно поделить на два блока – форму подписки и собственно дополнительную информацию типовую информацию. Последнее отдельно описывать не имеет смысла, а вот на форме подписки стоит остановится поподробнее, т. к. она представляет собой немного усложненный вариант заказа обратного звонка.
В форме обратного звонка мы указывали, что если поле пустое, значит оно заполнено неверно. С формой подписки можно указать наличие символа @.
Заключение
Как уже говорилось в начале, это только первая часть. В дальнейших статьях будет каталог, карточка товара, личный кабинет и другие разрешения. Также можете оставлять в комментариях вопросы по реализации элементов – возможно, я о них расскажу в следующих статьях.
Как обещал, предоставляю бесплатные библиотеки элементов, а также готовый прототип, который мы и рассматривали в данной статье. Для этого мы используем сервис, который предоставит ссылку за расшаривание в соцсети.
