Prototype Story Builder: от требований заказчика до готового задания на разработку

Для чего это нужно

Prototype Story Builder помогает превратить потребность бизнеса в понятное и согласованное задание для разработки.

Например, компании нужно дать менеджерам возможность быстро видеть задолженность клиентов.

Потребность бизнеса
Менеджер должен видеть, какие клиенты имеют просроченную задолженность.

Бизнес-процесс
Описываем, когда и откуда менеджер получает информацию, какие действия может выполнить.

Прототип
Создаём экран со списком клиентов, суммами задолженности, сроками оплаты и необходимыми действиями.

Требования и User Stories
Фиксируем логику работы интерфейса, источники данных, правила отображения и действия пользователя.

Результат
Заказчик видит, как будет работать решение, а разработчик получает понятное задание: что нужно сделать, как это должно выглядеть и как должно работать.

Регистрация и вход

Prototype Story Builder - единое пространство между заказчиком, аналитиком и разработчиком в веб-приложении.

Пользователь регистрируется, подтверждает email, создаёт проект, собирает прототип из UI-компонентов, сохраняет повторяемые решения как шаблоны, показывает сценарий заказчику, собирает комментарии и формирует документ ТЗ.

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

При регистрации заполните имя пользователя, email и пароль. Пароль должен содержать минимум 8 символов, буквы и цифры; максимальная длина - 128 символов.

Нажмите Создать аккаунт. Приложение создаст пользователя и отправит письмо с подтверждением адреса. Откройте почту и перейдите по ссылке из письма. До подтверждения email вход будет заблокирован.

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

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

Проекты и старт работы

В разделе проектов видно список доступных проектов и свойства выбранного проекта: даты создания и изменения, число страниц, блок Бриф проекта (цель, границы, участники, критерии успеха) и полное описание; проект можно сразу выгрузить кнопкой Экспортировать (Markdown, Word или PDF).

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

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

Редактор прототипа

Откройте проект, выберите страницу и добавьте на холст нужные компоненты: кнопки, поля ввода, таблицы, переключатели, текст, контейнеры, навигационные элементы, медиа и 1C-ориентированные элементы. Рабочая область проекта разделена на вкладки Конструктор, Сценарии использования и Блок-схемы; страницы и компоненты находятся во вкладке Конструктор.

Переместите объекты, измените размер и настройте их через палитру справа. Для каждого элемента заполните текст, подсказку, плейсхолдер, бизнес-описание, легенду и действие. Эти данные станут основой будущей документации.

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

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

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

Инструменты конструктора

• Страницы — создание, переименование, копирование в текущий или другой проект, изменение порядка, удаление и сохранение набора страниц как шаблона;
• Слои — выбор объектов в структуре экрана и управление их порядком;
• Библиотека компонентов — добавление стандартных, навигационных, табличных, медиа- и 1C-ориентированных компонентов, а также объектных шаблонов;
• холст — перетаскивание, изменение размера, поворот, множественное выделение рамкой, копирование, вставка, дублирование и удаление объектов;
• панель инструментов — отмена и повтор, группировка и разгруппировка, блокировка, сетка, точки и справка по горячим клавишам;
• Свойства — положение, размеры, текст, стиль, состояние и специфические параметры выбранного компонента; у таблиц доступны строки, колонки, объединение и разделение ячеек;
• Действия — тип реакции элемента и целевая страница для интерактивного перехода;
• Сценарии страницы и Сценарии использования — действие пользователя, результат системы, условия и критерии проверки для страницы, отдельного объекта или группы.

Часть команд зависит от выбранного объекта, прав на проект и активного тарифа. Заблокированный объект сначала нужно разблокировать; недоступная команда отображается неактивной или сопровождается пояснением.

Интерактивный режим и комментарии

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

После перехода та же заполненная страница открывается в интерактивном режиме.

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

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

Блок-схемы

Во вкладке Блок-схемы можно создать несколько схем проекта и смоделировать бизнес-процесс целиком. Добавляйте блоки Старт, Стоп, Процесс, Документ, Вариант и обычный блок из библиотеки или быстрой палитры, соединяйте их стрелками и распределяйте по дорожкам.

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

Нажмите Проверить схему, чтобы найти изолированные блоки, некорректные связи, входящие стрелки у старта, исходящие у финала и вариант без двух веток. Схему можно экспортировать в SVG или PNG. Изменения сохраняются на сервере; отдельная история версий блок-схем в текущем интерфейсе ещё не доступна.

Блок-схемы описывают бизнес-процесс, а Потоки навигации ниже фиксируют простые переходы экран → экран — это разные инструменты.

Потоки навигации

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

Чтобы создать переход, выберите Исходную страницу, Целевую страницу и тип действия — например, Клик, Отправка формы или Открыть модальное окно, — затем нажмите Связать.

Заполненная форма создания перехода

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

Потоки навигации фиксируют простые переходы экран → экран. В отличие от них, Блок-схемы описывают бизнес-процесс целиком с блоками, стрелками и дорожками. Готовая навигационная структура используется в интерактивном прототипе и попадает в проектную документацию.

Документация и экспорт

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

Нажмите Версии проекта, чтобы открыть раздел документации. Слева отображается список версий проекта, справа - предпросмотр Техническое задание. Выберите нужную версию, затем нажмите Скачать ТЗ .md или Скачать ТЗ .docx, чтобы получить файл для согласования и передачи заказчику или команде разработки. Готовую версию можно Отправить на согласование, а из списка проектов документ доступен для экспорта в Markdown, Word и PDF кнопкой Экспортировать.

Если нужно вернуться к зафиксированному состоянию, выберите версию и нажмите Восстановить проект из версии. Приложение перенесёт сохранённые экраны, компоненты и настройки обратно в проект.

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

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

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

Командная работа

Откройте раздел Команда, чтобы увидеть участников аккаунта и количество занятых мест. Введите email коллеги и нажмите Пригласить, чтобы подключить его к рабочему пространству.

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

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

В разделе Профиль можно изменить имя, email и пароль, включить или выключить подсказки. Команда Выйти на всех устройствах завершает остальные активные сессии.

Где искать нужный инструмент

• верхнее меню — продукт, проекты, цены, FAQ, обратная связь, профиль, команда, подписка и выход;
• Конструктор — страницы, слои, компоненты, холст и свойства;
• Сценарии использования — требования и критерии проверки выбранного объекта;
• Блок-схемы — моделирование и проверка бизнес-процесса;
• режимы над холстом — Холст, Интерактивный прототип и Потоки навигации;
• Комментарии — замечания к экрану или объекту и фильтры по области и статусу;
• Версии проекта — проверка готовности, документация, восстановление, экспорт, согласование и запросы на изменение;
• список проектов — создание и открытие проектов, бриф, статус, экспорт Markdown/Word/PDF и доступные операции жизненного цикла;
• Администрирование — системный раздел для пользователей с административной ролью; его инструменты управления пользователями, проектами, лендингом и платежными настройками не доступны обычному участнику.

Итог

Prototype Story Builder закрывает полный цикл работы аналитика: регистрация, создание проекта, сборка прототипа, сохранение шаблонов, проверка сценария, сбор комментариев и выгрузка документации. Приложение особенно полезно там, где прототип должен быть связан с требованиями, User Stories, бизнес-правилами и будущей реализацией.