Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

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

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

3 Рабочий прототип (шапка, меню, объемная контентная область).Когда будет готов прототип, скопируйте блок меню из шапки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19 Результат:

20 <ul><li><a>Вторая часть руководства</a>. Эффект параллакса и модальное окно.</li>

21 <li><a>Третья часть руководства</a>. Кнопка "Наверх" и раскрывающийся блок вопросов и ответов.</li>

22 </ul>Если вы всерьез интересуетесь проектированием интерфейсов, советуем обратить внимание на курс<a>"UX-дизайн 2.0"</a>от AIC. Курс позволит увидеть процесс проектирования глазами дизайнера пользовательского опыта, научиться эффективно проводить тесты и выстраивать профессиональную коммуникацию с клиентами.