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 — самые востребованные приемы. Часть I

Мы подготовили руководство в трех частях, которое поможет добавить интерактива в ваш Axure-прототип.

В этой части мы рассмотрим такие скролл-эффекты, как фиксированное меню и появление всплывающего окна.

Фиксированное меню при скролле

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

Рабочий прототип (шапка, меню, объемная контентная область).

Когда будет готов прототип, скопируйте блок меню из шапки.

Конвертируйте это меню в динамическую панель (правой кнопкой мыши, выбираем в самом низу Convert to Dynamic Panel) то же самое сделайте и с шапкой.

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

Можете назвать меню. Например, fixed menu, как в моем случае.

Перейдите во вкладку Properties, нажмите на ссылку Pin to browser и в открывшемся окне отметьте чек-бокс Pin to browser window. Ниже отметьте флажки left и top соответственно (но в моем случае я выставил center top, потому что сделал выравнивание страницы по центру, по умолчанию стоит выравнивание по левому краю). Теперь ваша динамическая панель всегда будет сверху при скролле.

Чтобы копия меню не мешала взаимодействию с прототипом, скройте ее (чек-бокс Hidden, который расположен рядом с блоком координат) и переместите на задний план.

Скрытый блок меню.

Снимите выделение со всех элементов, кликнув на пустом поле. Теперь создайте событие OnWindowScroll. Это необходимо для того, чтобы скрытая копия меню появлялась и выводилась на передний план при скроллинге. Перейдите на вкладку Properties, нажмите OnWindowScroll. Выберите условие, при котором будет срабатывать событие. Это условие выводит копию меню в тот момент, когда нижняя граница шапки поравняется с верхней границей экрана.

Событие OnWindowScroll.

Выставьте значения, как показано на скриншоте ниже.

Если значение, на которое проскроллено окно браузера [[Window.scrollY]], больше, чем170 (это значение высоты шапки, у вас может быть свое), тогда панель меню показывается. Во всех других случаях панель скрыта.

После того, как добавили условие, выберите Show в левой части, а в правой части fixed menu. Настройте, как показано на скриншоте.

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

Отметьте чек-бокс Bring to front для того, чтобы меню переместилось поверх всех слоев.

После этого опять нажмите на OnWindowScroll, выберите Hide в левой части, а в правой выберите fixed menu для того, чтобы спрятать наше меню, когда нет необходимости его показывать.

Смотрим, что получилось (чтобы воспользоваться функцией просмотра, нажмите F5).

Все работает. Меню фиксируется в верхней части экрана.

Появление блока новостной рассылки при скролле

Один из часто используемых на сайтах приемов — появление блока подписки на новостную рассылку при скроллинге. Реализуем его в Axure.

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

Далее сделайте все то же самое, что и в уроке по фиксированному меню, за исключением нескольких деталей.

Во-первых, выставьте в Pin to browser следующие параметры: left, bottom, чтобы прижать блок к низу.

Во-вторых, когда будете задавать условие, при котором срабатывает событие OnWindowScroll, поменяйте значение170 на 1700, это будет означать, что наш блок будет появляться не через 170px, а через 1700px.

Результат:

Читайте также:

Если вы всерьез интересуетесь проектированием интерфейсов, советуем обратить внимание на курс «UX-дизайн 2.0» от AIC. Курс позволит увидеть процесс проектирования глазами дизайнера пользовательского опыта, научиться эффективно проводить тесты и выстраивать профессиональную коммуникацию с клиентами.

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