Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <ul><li><a>Первая часть руководства.</a>Скролл-эффекты: фиксированное меню и появление всплывающего окна.</li>

2 </ul>Эффект параллакса ("смена, чередование") - это изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.

3 С помощью этого приема можно сделать прототип более наглядным - на ранней стадии разработки сайта продемонстрировать анимацию и удивить клиента красивым эффектом.

4 Создайте фон. Откройте вкладкуStyle,Back image, нажмите на кнопкуImport, загрузите изображение фона. Из выпадающего списка, который находится ниже, выберитеImage Repeatдля того, чтобы замостить изображением всю видимую часть проекта.

5 Я выбрал вот такой фон для большей наглядности, вы можете использовать свой.Для демонстрации параллакс-эффекта я буду использовать примитивыbox(далее по тексту виджет).

6 Расположите созданные вами виджеты по вертикали с разными промежутками. У меня получилось вот так:

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

8 В самом низу после виджетов я поместил надписьEnd Parallax, символизирующую окончание скроллинга.

9 После того, как вы определились с расстановкой виджетов, перейдите во вкладкуPropertiesи выберите событиеOnWindowScroll - во время этого события мы будем двигать виджеты к необходимым нам координатам. В левой части выберитеMove, а в правой части - необходимый виджет, в моем случае это виджетparallax. Из выпадающего списка выберите значение to, а в поле координат введите значение координаты Xвашего верхнего виджета, в моем случае это 145px.

10 Посмотреть координаты виджета вы можете, выделив его и посмотрев на блок координат в верхней части Axure.

11 А в поле координаты Yничего не вписывайте, нажмите на иконку функцииfx справа от поля ввода. И выберите[[Window.scrollY]]в стекеWindow.

12 Посмотрите координату Yвашего виджета и впишите ее перед значением[[Window.scrollY]], должно получится вот так:[[55-Window.scrollY]].

13 Если прибавить 55 к значению[[Window.scrollY]], [[Window.scrollY+55]], то при скроллинге виджет всегда будет оставаться на одном месте, так как каждый раз к нему будет прибавляться проскролленное расстояние.

14 [[Window.scrollY+55]].И, наоборот, если ввести значение[[55-Window.scrollY]], то координата Yбудет уменьшаться на проскролленное расстояние. И виджет относительно фона будет двигаться в два раза быстрее. Если вы хотите, чтобы виджет двигался медленнее относительно фона, то можно разделить значение[[55-Window.scrollY]], к примеру, на 15 - [[55-Window.scrollY/15]]

15 После экспериментов верните значение[[Window.scrollY]]в нужное нам[[55-Window.scrollY]].

16 И по аналогии сделайте то же самое с остальными виджетами. Покажу все действия еще раз на примере первого виджета.

17 Меняя значения элементов и экспериментируя с параметрами и координатами, можно добиться отличных результатов. Итоговый вариант:

18 Я немного доработал фон, сделав его более контрастным, и настроил виджеты. Те виджеты, которые больше, движутся быстрее, а которые меньше по размерам - медленней.Еще один важный интерактивный элемент, который часто используется в интерфейсах - это модальное окно, и порой возникает необходимость его отображения в прототипах.

19 Модальное окно - окно, которое блокирует работу пользователя с приложением до тех пор, пока тот это окно не закроет. Сделать это можно несколькими способами: кликнуть на иконке в правом верхнем углу окна либо на пустом месте рядом с окном, или же нажать клавишуEscна клавиатуре. Рассмотрим на примере окна авторизации.

20 Нарисуйте кнопкуВойти, по нажатию на которую появляется модальное окно.

21 Нарисуйте блок авторизации, то самое модальное окно которое будет появляться при нажатии на кнопкуВойти. Затем конвертируйте его в динамическую панель. Назовите этот виджет, к примеру,modal. Отметьте чек-боксHidden.

22 Когда скрываете динамическую панель, помните, что в скрытом состоянии она остается на переднем плане, так что может помешать взаимодействию с элементами под ней. Не забудьте переместить панель на задний план, нажав на иконкуBack либо воспользовавшись горячими клавишами(Ctrl+Shift+[).

23 На кнопку повесьте событиеOnclick, перейдите на вкладкуPropertiesи выберите событиеOnClick. С него в Axure начинается любой сценарий, запускаемый кликом мыши. В открывшемся окне выберите слеваShow, а справа нашу динамическую панельmodal.

24 Далее по желанию вы можете настроить анимацию, я указалFadeи время анимации 250ms. Не забудьте отметить чек-боксBring to Frontдля того, чтобы модальное окно открылось на самом верхнем слое поверх контента.

25 Смотрим результат:

26 Помимо этого, можно сделать эмуляцию лайтбокса (затемнение фона при появлении окна), для этого в выпадающем спискеMore Optionsвыберитеtreat as lightbox, там же можно выбрать цвет фона и настроить прозрачность.

27 Тreat as lightbox - эмуляция лайтбокса. Модальное окно скрывается при клике в любом месте вне блока.В том же выпадающем списке есть интересная опцияtreat as layout, эмуляция выпадающего меню. Особенность опции в том, что независимо от того, отмечен чек-боксBring to frontили нет, окно будет всегда располагаться верхним слоем, и после того, как вы уберете курсор мыши с модального окна, блок скроется. В случае с treat as lightboxмодальное окно исчезает при клике в любом месте вне блока.

28 Тreat as layout- эмуляция выпадающего меню. Модальное окно скрывается тогда, когда вы убираете с него курсор.Теперь разберемся с закрытием нашего модального окна. Добавьте элемент, по клику на который окно будет закрываться. Это может быть иконка с "крестиком", текст, что угодно. В моем случае это текстЗакрыть X. Добавьте на элемент закрытия событиеOnClick. В открывшемся окне слева выберитеHide, а справа - динамическую панельmodal.

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

30 ВыберитеState 1, и ваша динамическая панель откроется отдельной вкладкой.

31 Посмотрим на результат:

32 Все получилось.

33 В этом руководстве мы разобрали малую часть интерактивных возможностей прототипирования. Больше интересных и полезных приемов для качественных и презентабельных прототипов - в курсе<a>"UX-дизайн 2.0"</a>от Skillbox.

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

35 </ul>