Как собрать черновые экраны и связать их в прототип

Каждый инструмент помогает ответить на свой вопрос: куда человек идёт, что видит и как выглядит интерфейс.

Схема уже есть. Теперь превратите её блоки в экраны: для шага «Указывает, куда и когда везти» покажем поля адреса, выбор времени и кнопку перехода к оплате. Визуальное оформление можно будет проработать после того, как станет понятна структура.

Один экран с разной детализацией

Переключите вкладки и сравните набросок, вайрфрейм и макет. Чем больше деталей, тем больше работы может потребоваться при изменении экрана.

Когда вайрфрейм не нужен

• Мелкая правка в существующем интерфейсе. Поменять текст кнопки или порядок двух полей быстрее показать прямо в макете.
• Экран уже существует и не меняется. Для прототипа можно использовать готовый макет.
• Достаточно схемы. Если нужно разобраться только в переходах между шагами, отдельные вайрфреймы могут не понадобиться.

Черновое оформление помогает сосредоточиться на составе экрана и действиях человека.

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

Что делать с картинками и иконками

• Вместо фото — серый прямоугольник с подписью и соотношением сторон: «фото товара 1:1». Так можно оценить, сколько места останется для текста.
• Вместо иконки — слово. Например, «поиск» вместо лупы. Для этого упражнения подписи достаточно: она помогает обсудить действие, не тратя время на подбор значка.
• Карту, график или аватар тоже можно обозначить серым блоком с подписью, если для текущей проверки достаточно показать их место на экране.

С реальным текстом легче заметить, чего не хватает на экране и где нужно больше места.

«Рыба» вроде Lorem ipsum заполняет место, но не помогает проверить смысл. По ней трудно понять, хватит ли человеку информации и поместятся ли реальные данные. Ниже — что она скрывает.

• Длину. Вместо короткого «Lorem ipsum dolor sit» в карточке может оказаться «Кофе в зёрнах Lavazza Crema e Aroma, 1 кг». Реальное название помогает заранее проверить переносы строк.
• Содержание. По тексту-заполнителю не понять, достаточно ли информации, чтобы узнать товар или выбрать действие.
• Нерешённые вопросы. Слово «Заголовок» обозначает место для текста, но не говорит, что там будет написано. На наброске этого может хватить, а для обсуждения экрана уже нужна формулировка.

Где брать настоящие тексты

• Из продукта. Скопируйте из интерфейса названия, суммы и статусы, которые подходят вашему сценарию.
• Из схемы сценария. Подписи переходов могут стать основой для текста кнопок: «Оформить», «К оплате», «Подтвердить».
• Из обращений в поддержку. Посмотрите, какие ошибки встречают люди и какие вопросы задают.
• У редактора, если он есть в команде. На черновике можно вместе подобрать текст и сразу увидеть, как он работает на экране.

Используйте реалистичные числа и даты

Одной условной суммы «1234 ₽» мало для проверки. Возьмите цены из продукта разной длины: например, 3 480 ₽, 12 999 ₽, 149 ₽. Посмотрите, помещаются ли они рядом с названием и как выравниваются. То же с датами: «12 марта, 10:00–14:00» занимает больше места, чем заглушка «Дата доставки».

Проверьте длинные тексты и пустые состояния

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

• Самое длинное название, которое есть в базе.
• Двенадцать позиций в корзине вместо двух.
• Ноль: пустая корзина, ни одного адреса, ничего не найдено.
• Длинные имена и адреса: «Константинопольский Вячеслав Александрович», «ул. 40 лет Октябрьской революции, 128, корп. 3, кв. 214».

Эти состояния уже отмечены на схеме сценария. Теперь можно показать, как выглядит каждое из них, и проверить, хватает ли места для нужных элементов.

Размер, положение, заливка и свободное место помогают выделить действие даже в сером черновике.

В нашем сценарии у каждого экрана есть главное действие: в корзине — оформить заказ, на доставке — перейти к оплате, на оплате — заплатить. Остальные действия тоже нужны, но их можно сделать менее заметными. Если все кнопки выглядят одинаково, человеку приходится читать каждую, чтобы понять, как продолжить.

Четыре инструмента, которые работают без цвета

1. Размер. Главную кнопку можно сделать крупнее остальных. В нашем примере она занимает всю ширину блока.
2. Положение. Разместите главное действие после информации, которую нужно прочитать или заполнить перед нажатием.
3. Визуальный вес. Серая заливка, контур и простой текст помогают показать разную значимость действий.
4. Свободное место. Отступы вокруг кнопки отделяют её от соседних элементов и помогают заметить.

Что проверить в расположении кнопок

• Три одинаково заметные кнопки. На экране оплаты они могут затруднить поиск следующего шага.
• «Назад» выглядит так же, как «Оплатить». Возврат должен оставаться доступным, но в этом сценарии главное действие — оплата.
• Главное действие за пределами видимой области. Проверьте, понятно ли, что экран нужно прокрутить. Для этого задайте вайрфрейму высоту реального экрана.

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

Экраны сценария удобно разделить на три зоны. В черновике начнём с главного действия, затем добавим содержимое и шапку.

Как распределить десять минут

1. Минута. Выпишите из схемы, что человек делает на этом шаге. Достаточно одной фразы с глаголом.
2. Минута. Нарисуйте кнопку главного действия с реальной подписью. Она поможет определить, что ещё нужно на экране.
3. Четыре минуты. Добавьте поля, варианты выбора и суммы, которые нужны для этого действия. Используйте реалистичные тексты и данные.
4. Минута. Добавьте шапку: название экрана и кнопку «Назад». Основу можно скопировать с предыдущего экрана.
5. Две минуты. Добавьте вторичные действия и важные пояснения: условия оплаты, ссылку «Изменить».
6. Минута. Проверьте выравнивание и убедитесь, что главное действие заметно при размытии.

На чём можно сэкономить время

Дополнительные состояния разместите рядом

Для пустой корзины, отклонённого платежа и сообщения «Ничего не найдено» подготовьте отдельные варианты экранов. Разместите их рядом с основными и подпишите: «Корзина — пусто», «Оплата — карта отклонена». В прототипе свяжите их с нужными ветками. Так основной путь оформления заказа останется понятным.

Переходы позволяют пройти сценарий и проверить, как экраны работают вместе.

Кликабельный прототип состоит из экранов и переходов между ними. Человек нажимает кнопку и видит следующий шаг. Так сценарий можно пройти без ваших пояснений и заметить места, где непонятно, что делать дальше.

Что связывать обязательно

• Основной путь целиком — от входа в сценарий до результата, без пропущенных шагов.
• Возврат на предыдущие шаги. Если человек захочет проверить или изменить данные, кнопка «Назад» должна работать.
• Одну-две ветки из схемы: например, пустое состояние или ошибку. Для упражнения не нужно связывать все дополнительные ветки.

Что проверить при настройке переходов

1. Связывайте кнопку, а не весь экран. Если переход срабатывает при нажатии в любом месте, человек сможет продолжить, даже не найдя нужную кнопку. По такому прохождению трудно судить, понятен ли экран.
2. Используйте мгновенные переходы. Для проверки структуры в этом упражнении анимация не нужна. Её можно настроить позже, если она понадобится для проверки взаимодействия.
3. Называйте экраны как в схеме: «2. Указывает, куда и когда везти — Доставка». Так будет проще сопоставлять схему с прототипом и записывать замечания к шагам.
4. Начинайте с точки входа, указанной на схеме. В нашем сценарии это корзина. Если сразу открыть оплату, часть пути останется непроверенной.

В каком инструменте собрать прототип

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

После настройки переходов проверьте прототип сами, а затем дайте его человеку, который не знает, как всё задумано.

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

Что записывать

• Где человек остановился и сколько времени искал следующий шаг.
• На что нажал и чего ожидал. Если нажал повторно, возможно, не заметил реакции.
• Где спросил «А что дальше?» — здесь стоит проверить подписи и переходы.
• Какой элемент принял за кнопку, хотя перехода у него нет.

Ниже — собранный прототип сценария из урока. Пройдите его целиком: от корзины до подтверждения. В нём спрятаны два тупика — найдите их по дороге.

Три типичных тупика

• Кнопка без связи. Видна, но не реагирует на нажатие. Добавьте переход или заглушку. Если действие не нужно в сценарии, уберите кнопку.
• Не работает «Назад». Путь вперёд связан, а вернуться к предыдущему шагу и изменить данные не получается.
• Ветка обрывается. Например, экран ошибки есть, но с него нельзя вернуться или повторить действие.

После проверки исправьте найденные проблемы и пройдите прототип ещё раз сами. Если хотите проверить, понятен ли он с первого раза, пригласите нового человека: предыдущий участник уже знаком с маршрутом.

Возьмите сценарий из предыдущей темы, нарисуйте его экраны и свяжите их в кликабельный прототип.

Часть 1 · Подготовка, 15 минут

1. Выпишите экраны из схемы. Два шага могут находиться на одном экране. Для упражнения ориентируйтесь на 3–5 экранов.
2. Определите главное действие каждого экрана и напишите текст кнопки. За основу можно взять подписи переходов на схеме.
3. Соберите настоящие тексты: названия, суммы, даты, статусы. Откройте свой продукт и скопируйте оттуда.
4. Выберите одно дополнительное состояние: пустой экран или ошибку. Для упражнения этого достаточно.

СЦЕНАРИЙ: ______________________        Дата: __.__.____
ВХОД: ______________________   ВЫХОД: ______________________

ЭКРАНЫ
1. экран «______________»
   главное действие (текст кнопки): ______________________
   что нужно человеку для этого действия: ______________________
   настоящие тексты: ______________________________________
   ведёт на: ______________  назад на: ______________

2. экран «______________»
   главное действие: ______________________
   что нужно: ______________________________________
   настоящие тексты: ______________________________________
   ведёт на: ______________  назад на: ______________

3. экран «______________»
   главное действие: ______________________
   что нужно: ______________________________________
   настоящие тексты: ______________________________________
   ведёт на: ______________  назад на: ______________

СОСТОЯНИЕ, которое рисуем дополнительно: ______________________

КНОПКИ, ВЕДУЩИЕ ЗА ГРАНИЦУ СЦЕНАРИЯ (им нужна заглушка)
— ______________________
— ______________________

ПРОВЕРКА
самостоятельно: ____ тупиков найдено
коллега: остановился на ______________, спросил ______________
человек не из команды: остановился на ______________
исправлено: ______________________________________

Часть 2 · Нарисовать экраны, час

1. Отведите по десять минут на экран. Порядок из раздела 5: главное действие → содержимое → шапка → вторичные действия и пояснения → проверка иерархии.
2. Начинайте с простых экранов, сложный оставьте на потом.
3. Используйте оттенки серого, реальные тексты и один шрифт. Оформление можно будет проработать позже.
4. Если застряли на детали, обозначьте её серым блоком с пояснением и переходите к следующей.
5. Нарисуйте выбранное состояние в копии основного экрана и разместите рядом.

Часть 3 · Настроить переходы, 20 минут

1. Свяжите основной путь целиком, от входа до результата.
2. Добавьте возвраты на предыдущие шаги.
3. Свяжите ветку с дополнительным состоянием и настройте возврат из неё.
4. Добавьте заглушки для кнопок, ведущих за пределы сценария.
5. Проверьте, что связаны кнопки, а не целые экраны.

Часть 4 · Проверить и исправить, 30 минут

1. Сами: проверьте все кнопки, включая вторичные действия и возвраты.
2. С коллегой: опишите задачу одной фразой и наблюдайте, как он её выполняет. Не подсказывайте, куда нажимать.
3. С человеком не из команды: повторите проверку. Записывайте остановки, лишние нажатия и вопросы.
4. Исправьте найденные проблемы и ещё раз пройдите прототип сами.

Что должно получиться

• Вайрфреймы всех экранов сценария — серые, с настоящими подписями.
• Минимум одно состояние рядом с основным экраном.
• Кликабельный прототип со связанным главным путём, возвратами и заглушками.
• Заполненный план прототипа с результатами трёх проверок.

План работы: 15 минут на подготовку, час на экраны, 20 минут на переходы и полчаса на проверку с правками. Всего — около двух часов. Это ориентир для упражнения; договориться с участниками лучше заранее.

Частые сложности

• «Экранов получилось десять». Проверьте, не включили ли вы дополнительные состояния в основной путь. Возможно, сценарий стоит разделить на несколько задач.
• «Хочется заняться оформлением». Попробуйте бумагу или файл без библиотеки стилей. Заранее выберите один шрифт и несколько оттенков серого.
• «Не знаю, что написать». Предложите черновую формулировку и пометьте, что нужно уточнить. Такой текст уже можно обсудить.
• «Некого позвать на проверку». Для этого упражнения можно попросить друга, соседа по коворкингу или коллегу из другой команды, который не видел проект. Он поможет заметить непонятные шаги. Для специализированного продукта нужен человек, знакомый с задачами его пользователей.
• «Прототип прошли с первого раза без замечаний». Убедитесь, что не подсказывали и переходы срабатывали только по кнопкам. Если всё так, отметьте результат и проверьте сценарий со следующим участником.

Вайрфреймы для задания готовы, если

• Использованы оттенки серого и один шрифт
• Названия, суммы, даты и ошибки соответствуют сценарию
• Вместо «Lorem ipsum», «Заголовок» и «Название товара» стоят реальные или черновые тексты
• Картинки обозначены серыми блоками с подписью и нужным соотношением сторон
• Иконки заменены словами
• Главное действие выделено и заметно при размытии
• Вторичные действия менее заметны, чем главное
• Блоки выровнены, отступы кратны 8
• Нарисовано хотя бы одно дополнительное состояние экрана
• Проверены длинные названия, много позиций и отсутствие данных

Прототип для задания готов, если

• Главный путь связан целиком, от входа до выхода
• Работают возвраты на предыдущие шаги
• Связана хотя бы одна ветка и возврат из неё
• Каждая видимая кнопка ведёт либо на экран, либо на заглушку
• Переходы настроены на кнопках
• Экраны названы как в схеме сценария
• Стартовый экран — тот же вход, что на схеме
• Участник может открыть прототип по ссылке и пройти его без подсказок

Что мешает собрать и проверить прототип

• Ранний переход к оформлению. Подбор шрифтов, цвета и теней отнимает время и может отвлечь обсуждение от структуры.
• «Lorem ipsum». Скрывает главное: влезает ли настоящий текст и достаточно ли его человеку.
• Слова-заглушки. «Заголовок», «Кнопка», «Название товара» — признак, что решение ещё не принято.
• Три одинаково заметные кнопки. Человеку сложнее найти главное действие.
• Доведение первого экрана до идеала. На остальные экраны и настройку переходов может не хватить времени.
• Дополнительные состояния в основной цепочке. Из-за них труднее проследить основной путь.
• Кнопки без связей. Тупик: человек нажимает, ничего не происходит, прогон обрывается.
• Не работает «Назад». Человек не может вернуться к предыдущему шагу и изменить данные.
• Переход по нажатию в любом месте. Человек может пройти сценарий, не найдя нужных кнопок.
• Подсказки о нужном действии. Они мешают заметить места, где интерфейс непонятен.
• Нет доступа к прототипу. Участник не сможет начать проверку, пока вы не настроите доступ или не пришлёте файл.

В этом уроке учимся собирать черновые экраны и связывать их в понятный сценарий. На следующих уровнях — проверять решения и выбирать, что стоит прототипировать.

• Sketching User ExperiencesБилл Бакстон, 2007 · книга на английском · платнаяЧем набросок отличается от прототипа и зачем рисовать несколько вариантов, прежде чем доводить один: главы «The Anatomy of Sketching» и «Sketches are not Prototypes» из первой части. Толстая книга 2007 года о подходе, не практикум; в открытом доступе только оглавление.
• Не заставляйте меня думатьСтив Круг, 3-е издание · книга на русском · платнаяПочему экран не читают, а просматривают, и что это значит для черновика: главы 2–3 о просмотре и «рекламных щитах», глава 5 о лишних словах. Короткая книга с примерами 2013 года.
• Guide to prototyping in FigmaFigma · справка на английском · бесплатноС чего собирается прототип в Figma: связь от кнопки к экрану, сценарий и его стартовый экран — и словарь терминов в конце, чтобы понимать остальную справку. Обзор, обновлён в 2024 году.
• Create and manage prototype flowsFigma · справка на английском · бесплатноКак задать стартовый экран сценария, дать участнику ссылку сразу на него и вписать задание для проверки в описание сценария. Справка Figma, 2025 год.