Прототипирование. Практическое руководство.

Шаг 6: настройка эффектов перекрытия с помощью элементов динамических панелей.

1. Выберите вкладку страницы Video Player.

2. Перетащите два элемента динамических панелей с панели Widgets на страницу и измените их размер, чтобы они соответствовали размерам элементов управления видеоплеером (рис. 10.10).

Прототипирование. Практическое руководство

РИС. 10.10. Пример динамических панелей на экране

3. Дважды нажмите на правый элемент динамической панели. Откроется диалоговое окно Dynamic Panel State (рис. 10.11).

Прототипирование. Практическое руководство

РИС. 10.11. Окно Dynamic Panel State Manager

4. Введите осмысленное название в поле Dynamic Panel Label (например, Social Media Controls).

5. Выберите состояние первой панели, затем нажмите Rename. Введите в поле Name название On_hover и нажмите OK.

6. Введите название в поле Add new state, введите On_click и нажмите OK.

7. В диалоговом окне Dynamic Panel State Manager выберите первое состояние (On_hover) и дважды кликните на нем. Откроется одноименная вкладка. На экране также появится панель Dynamic Panel Manager с выделенным жирным шрифтом элементом On_hover (рис. 10.12).

Прототипирование. Практическое руководство

РИС. 10.12. Элемент On_hover панели Dynamic Panel State Manager

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

Прототипирование. Практическое руководство

РИС. 10.13. Динамическая панель Social Media Controls

9. На панели Dynamic Panel Manager выберите состояние On_click и дважды кликните на нем. Появится новая вкладка, помеченная On_click (Video Player).

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

Прототипирование. Практическое руководство

Рис. 10.14. Состояние On_click динамической панели Social Media Controls

11. В Dynamic Panel Manager выберите состояние On_click и дважды кликните на нем. Появится новая вкладка, помеченная как On_click.

12. Выберите прямоугольник Share.

13. На панели Annotations & Interactions дважды нажмите на вариант On_click. Появится диалоговое окно Interaction Case Properties. На шаге 1: Description field введите осмысленное название (например, Share (поделиться)). На шаге 2: Select Actions установите галочку в поле Set Panel state(s) to State(s). На шаге 3: Edit Actions description выберите связь Panel state to State. Появится диалоговое окно Set Panel state to State (рис. 10.15).

14. На шаге 1: Select Panels выберите флажок Set Social Media state to State. На шаге 2: Edit Actions description выберите связь On hover link. Появится диалоговое окно Select Panel State (рис. 10.16).

15. Выберите вариант On_click и нажмите OK. Диалоговое окно закроется, станет видимым окно Set Panel state to State (рис. 10.17).

16. В обновленном окне Set Panel state to State нажмите OK. Диалоговое окно закроется, станет видимым обновленное окно Interaction Case Properties (рис. 10.18).

17. В обновленном диалоговом окне Interaction Case Properties нажмите OK.

18. Теперь можно сгенерировать прототип, чтобы протестировать взаимодействие On_click. В строке меню выберите пункт Generate. В появившемся меню выберите пункт Prototype (F5), как показано на рис. 10.19.

Прототипирование. Практическое руководство

РИС. 10.15. Диалоговое окно Set Panel state to State

Прототипирование. Практическое руководство

РИС. 10.16. Диалоговое окно Select Panel State

Прототипирование. Практическое руководство

РИС. 10.17. Обновленное диалоговое окно Set Panel state to State

Прототипирование. Практическое руководство

РИС. 10.18. Диалоговое окно Interaction Case Properties

Прототипирование. Практическое руководство

РИС. 10.19. Генерация прототипа из меню приложения

Вы сможете наблюдать появление динамических панелей, которые отображаются при загрузке экрана Video Player. Мы исправим эту недоработку буквально за секунду. Но сначала нажмите находящийся справа элемент Share, чтобы убедиться, что взаимодействие On_click работает правильно.