web-dev
web-dev • Лабораторная работа

Лабораторная работа №6: Интерактивное прототипирование

Лабораторная работа №6: Интерактивное прототипирование

Курс: Веб-дизайн и проектирование интерфейсов
Модуль: UX/UI Prototyping
Трудоемкость: 4 академических часа
Оценка: Максимум 8 баллов
Тип задания: Индивидуальный сквозной проект (Этап 6 — Финал)

1. Цель работы

Связать разрозненные экраны в единый логический сценарий и настроить микро-взаимодействия (анимацию интерфейса).

Результат: Ссылка на кликабельный прототип, который можно открыть на телефоне и показать «заказчику» (преподавателю) как готовое приложение.

2. Теоретическая справка: State Machine

Для программиста прототип в Figma — это визуализация Конечного Автомата.

  • Состояния (States): Ваши экраны (Фреймы).
  • Переходы (Transitions): Связи (Стрелки).
  • События (Events): Триггеры (Click, Hover, Drag).

Ваша задача — запрограммировать граф переходов так, чтобы пользователь мог пройти путь от «Главной» до «Успешного заказа» и вернуться обратно.

3. Задание (Алгоритм выполнения)

Переключитесь в режим Prototype (Shift + E или вкладка справа).

Шаг 1: Настройка точки входа (Flow Start)

  1. Выберите фрейм «Главная страница».
  2. Нажмите плюсик Flow starting point в правой панели.
  3. Назовите поток: User Scenario 1: Purchase.

Шаг 2: Базовая навигация (Routing)

Свяжите основные страницы между собой.

  1. Выделите кнопку/ссылку (например, карточку товара в каталоге).
  2. Потяните синюю стрелку («Лапшу») к целевому фрейму (Страница товара).
  3. Настройки перехода:
    • Trigger: On Click / On Tap.
    • Action: Navigate to.
    • Animation: Push (Сдвиг) или Smart Animate (если элементы сохраняются).
    • Easing: Ease Out, 300ms.

Шаг 3: Интерактивные компоненты (Micro-interactions)

Настройте поведение кнопок и полей ввода глобально (через UI Kit), чтобы не делать это для каждого экрана.

  1. Перейдите на страницу UI Kit.
  2. Выделите Component Set вашей кнопки.
  3. Протяните стрелку от варианта Default к варианту Hover.
    • Trigger: While Hovering.
    • Property: Change to -> Hover.
    • Animation: Smart Animate (Ease Out, 200ms).

Результат

Все кнопки во всем проекте теперь меняют цвет при наведении автоматически!

Шаг 4: Модальные окна и Меню (Overlays)

Реализуйте Гамбургер-меню (для мобильной версии) или Попап (для десктопа).

  1. Нарисуйте меню в отдельном небольшом фрейме (не внутри макета!).
  2. В основном макете выделите иконку «Меню».
  3. Потяните стрелку к фрейму меню.
  4. Настройки:
    • Action: Open Overlay.
    • Position: Manual (поставьте там, где оно должно появиться) или Top Left.
    • Background: Add background behind (Black 50%) — затемнение фона.
    • Close when clicking outside: Галочка включена.

Шаг 5: Фишки Smart Animate (Advanced)

Сделайте один «вау-переход». Например, при клике на маленькое фото товара оно плавно увеличивается и становится большим фото на странице товара.

  • Условие: Слой с фото на Экране А и слой с фото на Экране Б должны иметь одинаковое название (например, Product_Image_Hero).
  • Animation: Smart Animate.

4. Технические требования (QA Checklist)

  1. Замкнутый контур: Из любого экрана должна быть возможность вернуться назад (Кнопка «Назад», Логотип, Крестик).
  2. Отсутствие «битых ссылок»: Все кнопки, которые выглядят активными, должны работать. Если раздел «Блог» не готов — кнопка должна быть визуально заблокирована (Disabled) или вести на заглушку «In Progress».
  3. Scroll Overflow: Длинные страницы должны скроллиться.
    • Проверьте настройки фрейма: Overflow: Vertical.
    • Убедитесь, что Хедер зафиксирован (Position: Fixed / Sticky).
  4. Device Frame: В настройках прототипа (Prototype Settings) выберите корректное устройство (например, iPhone 14), чтобы макет красиво смотрелся в рамке телефона.

5. Definition of Done (Критерии оценки)

8 баллов ставится, если:

  1. Сценарий работает: Можно пройти путь от Главной до финального действия без подсказок преподавателя.
  2. UI Kit «живой»: Кнопки реагируют на наведение (Hover), чекбоксы переключаются. Это реализовано через Interactive Components.
  3. Оверлеи: Работает мобильное меню или модальное окно.
  4. Back Navigation: Кнопка «Назад» работает корректно (используйте Action: Back, а не просто переход на предыдущий экран, чтобы сохранить историю).
  5. Demo: Студент демонстрирует работу прототипа либо с телефона (Figma Mirror), либо в режиме презентации.

6. Типичные ошибки

7. Практический совет (Lifehack)

Как сдать на отлично?

Скачайте приложение Figma на свой смартфон. Залогиньтесь. Откройте вкладку “Mirror”. Выберите фрейм в компьютере. Покажите преподавателю работающий сайт прямо у себя на телефоне. Эффект: Преподаватель видит, что вы понимаете контекст использования устройства (Touch interface). +100 к карме.

8. Финал: Подготовка к РГР

Поздравляю, лабораторный практикум завершен! Теперь у вас есть все артефакты для итогового проекта (РГР):

  1. Исследование (Лаб 1, 2).
  2. Дизайн-система (Лаб 4).
  3. Финальные макеты (Лаб 5).
  4. Прототип (Лаб 6).

Ваша задача на остаток семестра: Собрать это в красивую Презентацию и написать Пояснительную записку. Удачи на защите!

Проверь себя!

Какой Action в Figma нужно использовать, чтобы кнопка «Назад» корректно возвращала пользователя на предыдущий экран, сохраняя историю навигации?