Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Интерактив в 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.

OnPageLoad.

Можно проверять:

Да, все работает.

Мы рассмотрели один из вариантов создания кнопки «Наверх». Комбинируя полученные знания из руководства (этот урок и урок создания всплывающего окна), можно сделать решение, как у 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 и многое другое.

Курс «UX-дизайн 2.0»
Создавайте эффективные и полезные решения при помощи нового уникального подхода в дизайне. В течение курса вы узнаете, как сделать не просто визуально привлекательные проекты, но и кардинально изменить мышление бизнеса в диджитал, оцифровать любой продукт и сделать его максимально конкурентоспособным.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

1
Чтобы оставить комментарий,  авторизуйтесь
Isaykin Slava
13 дней назад
Такое впечатление, что Axure становится всё менее и менее востребованным у дизайнеров и проектировщиков.
Isaykin Slava
Stepan
7 дней назад
И да и нет. Вообще Axure — мощный интерактивный инструмент прототипирования. Но много факторов влияющих на выбор конкретного инструмента: поставленная задача, скилы, тарифы и т.д. У дизайнеров надо сказать Axure популярностью практически не пользовалась. У проектировщиков думаю в ходу и сейчас.  Например я пользуюсь для прототипирования и акшурой и фигмой.
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox
Новогодняя распродажа курсов