Как сделать ссылку в акшуре
Интерактивный прототип в Axure за 20 минут
Пока я писал о проектировщиках и прототипах, внезапно выяснилось, что многие читатели не представляют, о чём идёт речь. Поэтому сегодня я решил рассказать о том, что такое интерактивный прототип, сделанный в Axure (произносится как «Экшер», а я привык говорить «Акшура»). И не только рассказать, но и показать.
Если совсем грубо, то интерактивный прототип — это набор связанных друг с другом html-макетов. Только работали над этими макетами не дизайнер с верстальщиком, а проектировщик в специализированной программе, позволяющей сделать эту работу в разы быстрее. В чём будет различие в результате? Прототип, подготовленный проектировщиком, в отличие от макетов, подготовленных верстальщиком, не предназначен для разработки. Он призван очень быстро и наглядно продемонстрировать то, что исполнитель будет воплощать в жизнь на следующих этапах. Это всё равно, что трёхмерная модель готовящегося к строительству здания. На её создание уйдёт гораздо меньше времени, чем на постройку, и она позволит виртуально побродить по будущему проекту.
Выгоды от прототипов сложно переоценить.
Специально для Хабра я записал процесс создания простого типового прототипа. Я его взял из головы, целью было продемонстрировать, с какой скоростью проделывается подобная работа. Из видео можно понять, что за 20 минут опытный проектировщик может сделать уже что-то, что можно обсудить и дать обратную связь. Плюс видно, что все сквозные и списковые элементы сделаны с помощью мастеров, что позволит, редактируя один мастер, вносить изменения в весь прототип. Не нравится название пункта меню в шапке? Исправляем одно слово, и это исправление применяется ко всем страницам. Хочется изменить внешний вид отдельной работы в списке портфолио — то же самое. Редактируем отдельный мастер, а затем выравниваем результат на странице со списком работ.
Вы также заметите, что в ролике я пользуюсь вторым прототипом, в котором собраны основные типовые элементы интерфейса. Об этом я постоянно твержу участникам своей группы по Axure — заводите себе подобные «мега-прототипы» и сохраняйте в них все те вещи, которые явно повторяются от прототипа к прототипу. Это увеличит вашу скорость работы. И это удобнее, чем открывать разные свои старые прототипы в поисках нужного куска интерфейса.
Как я уже говорил, сгенерированный прототип представляет собой набор html-файлов, которые можно выложить либо на специальном сервисе, предоставляемом самой Axure, либо на любом своём хостинге. Клиенту лишь нужно будет дать ссылку. Вот ссылка на прототип, который я сделал в ролике:
Не знаю, готов ли тот хостинг к Хабраэффекту, но готов рискнуть.
Попробую предвосхитить некоторые ваши вопросы.
Ну вот и видео. Использовалась бета-версия Axure RP Pro 7. Музычка ещё обрабатывается, скоро заработает.
Интерактив в Axure — самые востребованные приемы. Часть III
В этой части руководства вы научитесь создавать два интерактивных элемента: кнопку «Наверх» и раскрывающийся блок вопросов и ответов (FAQ).
Также читайте:
Кнопка «Наверх»
Крайне полезный интерактивный элемент. Порой его так не хватает на многих сайтах с бесконечной прокруткой. В этом мини-уроке мы разберем, как сделать этот элемент в Axure.
Кнопку «Наверх» можно реализовать с помощью anchor link (якорная ссылка). Для этого откройте файл, в котором вы делали фиксированное меню. Нарисуйте подвал, добавьте иконку стрелки вверх, конвертируйте подвал в master (правой кнопкой мыши Convert to Master). Вот что получилось у меня:
Перейдите в master (двойной клик). Добавьте любой элемент в левый верхний угол, что это будет за элемент — не важно ( text, box и так далее). Он и будет якорной ссылкой. Задайте название, я назвал anchor. Скройте якорную ссылку с помощью
чек-бокса Hidden.
На стрелку вверх добавьте событие OnClick. Для этого перейдите на вкладку Properties, нажмите OnClick, в открывшемся окне выберите слева Scroll to, а справа якорную ссылку anchor.
Находясь в master footer, снимите выделение со всех элементов, кликнув в пустой области. Перейдите на вкладку Properties, нажмите OnPageLoad. В открывшемся окне выберите слева Move, а справа — нашу якорную ссылку anchor, ниже выберите из выпадающего списка to и выставьте координаты X Y0 0. Это необходимо для того, чтобы при загрузке мастера на странице якорная ссылка переместилась в координаты 0 0.
Мы рассмотрели один из вариантов создания кнопки «Наверх». Комбинируя полученные знания из руководства (этот урок и урок создания всплывающего окна), можно сделать решение, как у Habr или « Вконтакте» (кнопка появляется при скроллинге вниз на определенное расстояние, по клику на нее возвращает в начало страницы и исчезает).
Раскрывающийся блок FAQ
Популярная механика работы блока FAQ — контейнер с ответом разворачивается по клику на соответствующий вопрос. Вы наверняка такое не раз видели.
Для начала создайте две динамические панели: первая — это вопрос, вторая — блок ответа. Скройте блок ответа чек-боксом Hidden. У меня получилось так:
Выделите динамическую панель вопроса (у меня она называется questions) и дважды кликните на ней левой кнопкой мыши, чтобы открылось окно менеджера динамических панелей.
Нажмите на строке State 1, чтобы вызвать вкладку динамической панели и отредактировать содержимое.
Следующая задача: сделать так, чтобы по нажатию на вопрос раскрывался и показывался блок ответа. Для этого выделите вопрос в открытой вкладке динамической панели, перейдите во вкладку Properties, выберите событие OnClick и в открывшемся окне выберите в колонке слева Toggle Visibility, а в правой колонке — блок ответа. У меня он называется Answer.
Выставьте настройки, как на скриншоте. Обязательно поставьте чек-бокс Pull/Push Widgets — это необходимо для того, чтобы открывающийся блок вопроса не наезжал на следующий за ним вопрос, а сдвигал его вниз.
Проверяем, что получилось в итоге.
Как видим, при появлении блока ответа следующий за ним вопрос сдвигается ниже.
С задачей справились.
P. S. Хочу показать, как я сделал замену «+» на «—» при открытии и закрытии блока.
Зайдите в динамическую панель вопроса. Продублируйте эту панель, как показано на скриншоте.
Правой кнопкой мыши нажмите на State 1, Dublicate State, таким образом вы сформируете панель State 2. Теперь вы можете переходить между этими панелями. Вернитесь к панели State 1 и добавьте «+». Перейдите в панель State 2 и добавьте «—».
Перейдите в режим просмотра.
Вернитесь к вашему прототипу и отредактируйте состояние динамической панели, как показано в ролике.
Еще раз посмотрим, что получилось.
Блок ответа появляется, плюс меняется на минус и наоборот. Все отлично.
Вы давно и хорошо проектируете интерфейсы, но хотите углубить свои знания и начать делать прототипы на качественно новом уровне? Обратите внимание на курс «UX-дизайн 2.0» от Skillbox. Из этого курса вы узнаете, как проводить исследования аудитории, воркшопы для клиента, а также научитесь составлять Customer Journey Maps и многое другое.
Как сделать прототип сайта в 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 — самые востребованные приемы. Часть I
Мы подготовили руководство в трех частях, которое поможет добавить интерактива в ваш Axure-прототип.
В этой части мы рассмотрим такие скролл-эффекты, как фиксированное меню и появление всплывающего окна.
Фиксированное меню при скролле
Порой для презентации прототипа нужна эмуляция фиксированного меню, чтобы можно было в любой момент им воспользоваться. На примере я покажу, как можно реализовать фиксированное меню в Axure.
Когда будет готов прототип, скопируйте блок меню из шапки.
Конвертируйте это меню в динамическую панель (правой кнопкой мыши, выбираем в самом низу Convert to Dynamic Panel) то же самое сделайте и с шапкой.
Переместите скопированное меню в самый верх страницы на законное место, где оно в итоге будет отображаться. Должно получиться так:
Перейдите во вкладку Properties, нажмите на ссылку Pin to browser и в открывшемся окне отметьте чек-бокс Pin to browser window. Ниже отметьте флажки left и top соответственно (но в моем случае я выставил center top, потому что сделал выравнивание страницы по центру, по умолчанию стоит выравнивание по левому краю). Теперь ваша динамическая панель всегда будет сверху при скролле.
Чтобы копия меню не мешала взаимодействию с прототипом, скройте ее (чек-бокс Hidden, который расположен рядом с блоком координат) и переместите на задний план.
Снимите выделение со всех элементов, кликнув на пустом поле. Теперь создайте событие OnWindowScroll. Это необходимо для того, чтобы скрытая копия меню появлялась и выводилась на передний план при скроллинге. Перейдите на вкладку Properties, нажмите OnWindowScroll. Выберите условие, при котором будет срабатывать событие. Это условие выводит копию меню в тот момент, когда нижняя граница шапки поравняется с верхней границей экрана.
Выставьте значения, как показано на скриншоте ниже.
После того, как добавили условие, выберите Show в левой части, а в правой части fixed menu. Настройте, как показано на скриншоте.
Отметьте чек-бокс Bring to front для того, чтобы меню переместилось поверх всех слоев.
После этого опять нажмите на OnWindowScroll, выберите Hide в левой части, а в правой выберите fixed menu для того, чтобы спрятать наше меню, когда нет необходимости его показывать.
Смотрим, что получилось (чтобы воспользоваться функцией просмотра, нажмите F5).
Появление блока новостной рассылки при скролле
Один из часто используемых на сайтах приемов — появление блока подписки на новостную рассылку при скроллинге. Реализуем его в Axure.
Откройте файл из предыдущего урока по созданию фиксированного меню, пересохраните с другим названием и удалите динамическую панель фиксированного меню. Затем создайте блок новостной рассылки и конвертируйте в динамическую панель. Можно отредактировать уже имеющуюся динамическую панель фиксированного меню, но для чистоты эксперимента и закрепления материала советую удалить и создать с нуля.
Далее сделайте все то же самое, что и в уроке по фиксированному меню, за исключением нескольких деталей.
Во-первых, выставьте в Pin to browser следующие параметры: left, bottom, чтобы прижать блок к низу.
Во-вторых, когда будете задавать условие, при котором срабатывает событие OnWindowScroll, поменяйте значение170 на 1700, это будет означать, что наш блок будет появляться не через 170px, а через 1700px.
Читайте также:
Если вы всерьез интересуетесь проектированием интерфейсов, советуем обратить внимание на курс «UX-дизайн 2.0» от AIC. Курс позволит увидеть процесс проектирования глазами дизайнера пользовательского опыта, научиться эффективно проводить тесты и выстраивать профессиональную коммуникацию с клиентами.