Прототип — проверяемая версия интерфейса, которая отвечает на конкретный вопрос до того, как написан код: поймёт ли человек, как записаться, найдёт ли нужную кнопку, не застрянет ли на шаге выбора времени. Детализацию выбирают под вопрос: для проверки логики сценария хватает скетча или wireframe, для проверки восприятия и микровзаимодействий нужен кликабельный high-fidelity прототип. Начинают не с экранов, а с user flow, а заканчивают проверкой на пяти пользователях из целевой аудитории.
После материала вы сможете
- сформулировать, какой вопрос должен проверить прототип, и выбрать под него уровень детализации
- описать user flow сценария с основным путём и ветками ошибок до рисования экранов
- собрать в Figma кликабельный прототип из 4–6 экранов со связями, переходами и оверлеем
- провести короткую проверку прототипа с пятью участниками и понять, когда пора переходить в код
Что знать заранее
Проверено на
Figma Design (help.figma.com, 2026-10-11)
Сверено с документацией: 11 октября 2026 г.
Содержание
Зачем прототип и что он должен проверить
Nielsen Norman Group формулирует коротко: прототип интерфейса — это гипотеза, а самый прямой способ её проверить — посмотреть, как с ней работают пользователи. Исправить прототип несравнимо дешевле, чем переписать уже выпущенный код. Поэтому прототип — не «красивая картинка для заказчика», а инструмент, который отвечает на вопрос до разработки.
Главная ошибка — делать прототип «всего приложения» без вопроса. Тогда непонятно, сколько экранов рисовать, насколько подробно и что считать успехом. Хороший вопрос конкретен и проверяем:
Размытый вопрос
- «Удобно ли пользоваться сайтом?»
- «Нравится ли дизайн?»
- «Всё ли понятно?»
Проверяемый вопрос
- Может ли клиент без подсказки записаться к выбранному мастеру на ближайшее свободное время?
- Замечает ли человек, что запись можно перенести, а не только отменить?
- Понятно ли, что делать, если на выбранный день нет окон?
В этом руководстве мы разберём один сценарий целиком — запись на услугу в салоне или клинике: от user flow до кликабельного прототипа в Figma и проверки с людьми.
Уровни детализации: скетч, wireframe, кликабельный, high-fidelity
Nielsen Norman Group описывает детализацию (fidelity) прототипа по трём независимым осям: интерактивность (ссылки и меню работают сами или реакцию изображает человек), визуальная часть (насколько раскладка, отступы и иерархия похожи на продукт) и содержимое (реальные тексты и навигация или заглушки). Прототип может быть детальным по одной оси и грубым по другой — например, кликабельный серый каркас.
Скетч
- Как выглядит
- От руки на бумаге или доске
- Что проверяет
- Набор шагов, что на каком экране
- Чего не проверит
- Восприятие, длину текстов, удобство касаний
Wireframe
- Как выглядит
- Серые блоки, реальная структура, минимум стиля
- Что проверяет
- Иерархию и порядок блоков, полноту экранов
- Чего не проверит
- Эмоции от визуала, читаемость в реальных цветах
Кликабельный (low/mid-fi)
- Как выглядит
- Каркасы, связанные переходами
- Что проверяет
- Сценарий целиком: находит ли человек путь, где теряется
- Чего не проверит
- Реакцию на финальный визуал и микроанимации
High-fidelity
- Как выглядит
- Почти как готовый продукт: цвета, шрифты, реальные тексты, состояния
- Что проверяет
- Восприятие, понятность компонентов, читаемость, доверие
- Чего не проверит
- Реальные данные, скорость, ошибки сервера
Low-fidelity — по Nielsen Norman Group
- Быстро готовится — больше времени на сам дизайн
- Можно перерисовать прямо во время теста
- Участники охотнее критикуют явно незаконченную работу
- Но реакцию изображает человек — он может ошибиться и замедлить сценарий
High-fidelity — по Nielsen Norman Group
- Отклик реалистичный, человек не выпадает из сценария
- Можно проверить конкретные компоненты и визуал
- Модератор не управляет прототипом и сосредоточен на наблюдении
- Но собирается дольше, а к отполированному макету сложнее относиться критично
Сценарий и user flow перед экранами
Nielsen Norman Group разделяет два понятия. User journey — путь к большой цели через разные каналы, иногда растянутый на недели: увидел рекламу, спросил в мессенджере, пришёл на приём. User flow — набор шагов внутри одного продукта для конкретной задачи, обычно на минуты: выбрал услугу, мастера, время, подтвердил. Для прототипа нужен именно flow: он фиксирует действия пользователя и ответы системы.
- 01Услуга
- 02Мастер
- 03Дата и время
- 04Контакты
- 05Запись подтверждена
Основной путь — только половина flow. Прототип, в котором всё всегда получается, проверяет лишь то, что и так очевидно. До рисования экранов допишите ветки:
Цель и вход
Кто пользователь и откуда он пришёл: с главной страницы, из поиска по карте, по ссылке из мессенджера. От точки входа зависит первый экран.
Основной путь
Шаги в порядке выполнения, у каждого — действие пользователя и ответ системы: «выбрал мастера → показали его свободные даты».
Развилки
Где пользователь принимает решение: «любой мастер» или конкретный, ближайшее время или выбор по календарю.
Ошибки и пустые состояния
Нет свободных окон на день, неверный номер телефона, время успели занять, пока человек заполнял контакты.
Выход и возврат
Как вернуться на шаг назад без потери выбранного, как отменить или перенести запись после подтверждения.
Прототип в Figma: связи, переходы, оверлеи
Прототипирование в Figma доступно на любом тарифе: создавать прототип может любой с правом редактирования, смотреть — любой с правом просмотра. Работа идёт на вкладке Prototype правой панели; переключаться между Design и Prototype удобно сочетанием Shift+E. Пять понятий из справки Figma, которые нужно знать:
Hotspot
- Что это
- Объект, с которым взаимодействуют: кнопка, карточка, иконка
Connection
- Что это
- Синяя стрелка от hotspot к цели; на ней настраиваются взаимодействие и анимация
Trigger
- Что это
- Что запускает переход: On click / On tap, While hovering, While pressing, On drag, After delay, Keyboard/Gamepad и другие
Action
- Что это
- Что происходит: Navigate to, Back, Open overlay, Swap overlay, Close overlay, Scroll to, Open link, Change to
Flow и starting point
- Что это
- Сеть связанных фреймов одной страницы и её первый экран; у прототипа может быть несколько flow
Экраны
Создайте пять фреймов верхнего уровня с пресетом Phone по шагам flow. Целью перехода может быть только фрейм верхнего уровня, не вложенный объект. Кнопки и карточки берите экземплярами компонентов из урока по основам Figma.
Первая связь
На вкладке Prototype выделите карточку услуги, потяните за маркер связи (prototype node) на её рамке и отпустите на экране «Мастер». Figma сама сделает первый фрейм стартовой точкой flow.
Взаимодействие
В настройках связи: триггер On click, действие Navigate to, анимация Push или Slide In справа — так переход вперёд читается как движение по шагам. Для кнопки «назад» — действие Back.
Оверлей
Календарь с выбором времени удобно показать поверх экрана: нарисуйте его отдельным фреймом и задайте связи действие Open overlay. В настройках оверлея выберите позицию, включите Close when clicking outside и Add background behind overlay.
Состояния без лишних экранов
Если кнопка-компонент уже собрана из вариантов, добавьте связь между вариантами с действием Change to (например, Default → Hover на While hovering). Такой интерактивный компонент работает в каждом экземпляре без дублирования экранов.
Ветка ошибки
Добавьте экран «На этот день окон нет» и состояние поля с неверным номером. Если для них нужен отдельный старт, добавьте ещё одну стартовую точку: правый клик по фрейму → Add starting point.
Запуск
Preview в toolbar или Shift+Space — просмотр прямо в редакторе; Present (Ctrl+Alt+Enter на Windows, Command+Option+Return на Mac) — показ в отдельной вкладке с выбранным устройством.
Про анимации переходов подробно — в материале о переходах между экранами. Для проверки сценария важнее не красота перехода, а его смысл: вперёд по шагам — сдвиг влево, назад — вправо, временный слой — появление поверх.
Проверка прототипа с пользователями
Юзабилити-тестирование, по определению Nielsen Norman Group, держится на трёх элементах: модератор, который ведёт сессию и не подсказывает; задачи — реалистичные действия, которые человек мог бы выполнять в жизни; участник — реальный или максимально похожий пользователь. Для качественного исследования одной группы пользователей NN/g рекомендует пять участников: этого хватает, чтобы найти большинство самых частых проблем.
Задача без подсказок
Не «нажмите “Записаться” и выберите мастера», а «Вы хотите подстричься у Анны в эту субботу после обеда. Запишитесь». В формулировке не должно быть названий кнопок с экрана.
Пилотный прогон
Пройдите сценарий сами или с коллегой: битая связь или не тот экран посреди теста сбивают участника и портят данные — NN/g советует пилот перед реальными сессиями.
Мысли вслух
Попросите участника проговаривать, что он видит, ищет и ожидает. Это главный источник находок в качественном тесте.
Наблюдение
Отмечайте, где человек остановился, вернулся назад, нажал не туда. Если он нажал на элемент без связи, спросите, что он ожидал увидеть.
Вывод
После пяти сессий сведите проблемы в таблицу: шаг, что произошло, у скольких участников, что меняем. Исправьте и при необходимости проверьте ещё раз.
В режиме Present у прототипа есть полезные настройки: Hide UI скрывает интерфейс Figma, а Show hints on click подсвечивает кликабельные области, когда человек нажимает мимо. Подсказки удобны на презентации, но на тесте они показывают ответ — решите заранее, включать ли их.
- Сформулирован один-два вопроса, на которые отвечает тест
- Задачи написаны языком пользователя, без названий кнопок
- Прототип прогнан пилотно, все связи ведут куда нужно
- Есть ветки ошибок и пустых состояний, а не только успешный путь
- Участники — из целевой аудитории, а не коллеги из команды
- Итоги сведены в таблицу «проблема → частота → решение»
Когда прототип уже не нужен и пора в код
Прототип перестаёт окупаться, когда вопросы, ради которых его делали, получили ответ, а новые вопросы касаются того, что макет показать не может. Ориентиры:
Ещё прототип
- Участники теряются на одном из шагов
- Команда спорит о порядке шагов или наборе полей
- Не проверены ветки ошибок
- Заказчик не может представить сценарий целиком
Уже код
- Сценарий проходят без подсказок, остались мелкие правки текста
- Вопросы про реальные данные: длинные имена, сотни мастеров, медленная сеть
- Нужно проверить настоящую валидацию, доступность с экранным диктором, скорость
- Нужны реальные метрики: конверсия, время до записи
Кликабельный прототип не проверяет производительность, реальные ответы сервера и работу с клавиатурой и экранным диктором так, как это делает код. Для таких вопросов делают прототип в коде или MVP — минимальную рабочую версию с настоящими данными. Сам прототип при этом не выбрасывают: связанный с компонентами Figma, он становится спецификацией сценария для разработчиков.
Источники
- Nielsen Norman Group — UX Prototypes: Low Fidelity vs. High Fidelity
- Nielsen Norman Group — User Journeys vs. User Flows
- Nielsen Norman Group — Usability Testing 101
- Figma Help Center — Guide to prototyping in Figma
- Figma Help Center — Create overlays in your prototypes
- Figma Help Center — Create interactive components with variants