Skip to content

Макет и сценарий использования

Jump to bottom
Александр Шуменков edited this page Mar 22, 2026 · 2 revisions

Макет UI

ui_mockup

Сценарий использования

1. Авторизация

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь открывает приложение и видит экран авторизации с вкладками «Вход» и «Регистрация».
  2. Пользователь выбирает вкладку «Вход».
  3. Вводит логин и пароль.
  4. Нажимает кнопку «Войти».
  5. При корректных данных пользователь попадает в основное приложение на вкладку «Таблицы» (список таблиц).

Альтернативный сценарий:

  1. Пользователь вводит некорректные логин или пароль.
  2. Система показывает сообщение об ошибке под формой.
  3. Пользователь исправляет данные и повторяет попытку входа.

1.2. Регистрация

Действующее лицо: Новый пользователь.

Основной сценарий:

  1. Пользователь открывает приложение, видит экран авторизации.
  2. Переключается на вкладку «Регистрация».
  3. Вводит новый логин и пароль, подтверждает пароль.
  4. Нажимает кнопку «Зарегистрироваться».
  5. При успешной регистрации учётная запись сохраняется, пользователь автоматически считается вошедшим.
  6. Пользователь попадает на главную страницу приложения (вкладка «Таблицы»).

Альтернативный сценарий:

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

2.1. Вкладка с таблицами (список таблиц)

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь находится в приложении и выбирает в левом меню пункт «Таблицы».
  2. В шапке видит поле поиска по таблицам и кнопку «+ Создать таблицу».
  3. Над списком — кнопка «Фильтры» (см. п. 2.2).
  4. Ниже отображается таблица со списком таблиц: название, дата и время создания, дата и время изменения, дата и время последнего просмотра, создатель, действия (удаление).
  5. При клике по строке (не по кнопке «Удалить») пользователь переходит в режим просмотра/редактирования выбранной таблицы.

Альтернативный сценарий:

  1. Пользователь нажимает «Удалить» в строке — открывается подтверждение; при согласии таблица удаляется (см. п. 5).

2.2. Применение фильтров (для списка таблиц)

Действующее лицо: Пользователь.

Основной сценарий:

  1. На вкладке «Таблицы» пользователь при необходимости вводит текст в поле поиска в шапке.
  2. Нажимает кнопку «Фильтры» над таблицей — открывается всплывающая панель поверх контента (список не сдвигается).
  3. В панели отображаются критерии (вертикальный список кнопок):
    • по дате просмотра (по умолчанию),
    • по названию,
    • по дате создания,
    • по дате изменения,
    • по создателю.
  4. Пользователь нажимает один из критериев — он сразу становится активным, список пересчитывается:
    • если в поиске есть текст — отображаются только строки, у которых выбранное поле содержит введённую подстроку (без учёта регистра);
    • если поиск пустой — список сортируется по выбранному полю.
  5. Повторное нажатие на «Фильтры» скрывает панель.

Альтернативный сценарий:

  1. Пользователь не открывает фильтры — поиск в шапке при пустом критерии по умолчанию ведёт себя согласно последнему выбранному критерию (из скрытого состояния по умолчанию — дата просмотра).

3. Окно создания таблицы

Действующее лицо: Пользователь.

Основной сценарий:

  1. На вкладке «Таблицы» пользователь нажимает кнопку «+ Создать таблицу».
  2. Открывается экран «Создание таблицы» с полем «Название таблицы».
  3. Пользователь вводит название и нажимает кнопку «Создать таблицу».
  4. Система создаёт новую таблицу с базовой сеткой ячеек и текущими датами создания/изменения.
  5. Пользователь автоматически перенаправляется в окно редактирования таблицы.

Альтернативный сценарий:

  1. Пользователь закрывает экран создания (возвращается назад).
  2. Таблица не создаётся, список таблиц остаётся без изменений.

4. Редактирование таблицы

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь открывает таблицу (через клик по строке в списке).
  2. На экране таблицы видит:
    • название таблицы (редактируемое поле),
    • область комментария,
    • верхнюю панель с кнопками «Фильтры», «История», «Сохранить»,
    • сетку ячеек (строки 1..40, столбцы A..AN).
  3. Пользователь редактирует содержимое ячеек (вводит текст/числа).
  4. По мере изменения значений таблица сохраняется в локальном хранилище.
  5. При необходимости пользователь нажимает «Сохранить» для фиксации имени и комментария.

Фильтры:

  1. Пользователь нажимает кнопку «Фильтры», иконки ▾ в заголовках столбцов становятся активными.
  2. Пользователь нажимает ▾ над нужным столбцом и видит список значений с чекбоксами.
  3. Отмечает значения, по которым нужно оставить строки, и закрывает окно.
  4. Таблица отображает только строки, соответствующие выбранным значениям.
  5. При повторном нажатии на кнопку «Фильтры» фильтрация сбрасывается, и видны все строки.

5. Удаление таблицы

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь открывает вкладку «Таблицы».
  2. В списке таблиц находит нужную строку.
  3. Нажимает кнопку «Удалить» в колонке «Действия».
  4. Появляется диалог подтверждения: «Удалить таблицу? Таблица будет удалена без возможности восстановления. Это действие нельзя отменить».
  5. Пользователь нажимает «Удалить».
  6. Таблица удаляется из хранилища и пропадает из списка.

Альтернативный сценарий:

  1. Пользователь нажимает «Отмена» в диалоге.
  2. Диалог закрывается, таблица остаётся без изменений.

6.1. Окно с формами (список форм)

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь выбирает в левом меню пункт «Формы».
  2. В шапке видит поле поиска по формам и кнопку «+ Создать форму».
  3. Над списком — кнопка «Фильтры» (см. п. 6.2).
  4. Ниже отображается таблица со списком форм: название, дата и время создания и изменения, просмотр, создатель, действия.
  5. При клике по строке открывается экран редактирования формы.
  6. Для удаления формы пользователь нажимает «Удалить» в колонке «Действия» и подтверждает в диалоге.

6.2. Применение фильтров (для списка форм)

Действующее лицо: Пользователь.

Основной сценарий:

  1. На вкладке «Формы» пользователь при необходимости вводит текст в поле поиска в шапке.
  2. Нажимает «Фильтры» — открывается всплывающая панель с критериями (аналогично списку таблиц):
    • по дате просмотра (по умолчанию),
    • по названию,
    • по дате создания,
    • по дате изменения,
    • по создателю.
  3. Один клик по критерию сразу применяет фильтрацию по поисковой строке или сортировку при пустом поиске.
  4. Повторное нажатие «Фильтры» скрывает панель.

7. Создание формы

Действующее лицо: Пользователь (создатель формы).

Основной сценарий:

  1. На вкладке «Формы» пользователь нажимает кнопку «+ Создать форму».
  2. Открывается экран конструктора формы.
  3. Пользователь задаёт:
    • название формы,
    • описание,
    • набор полей (тип, заголовок, варианты ответов для списков/чекбоксов и т.п.).
  4. Пользователь нажимает «Создать форму».
  5. Форма сохраняется, появляется в списке форм и может быть отредактирована или использована для сбора ответов.

8. Редактирование формы

Действующее лицо: Пользователь (владелец или редактор формы).

Основной сценарий:

  1. Пользователь открывает форму (клик по строке в списке форм).
  2. На экране формы видит:
    • поле с названием формы,
    • поле комментария,
    • вкладки «Редактировать», «Предпросмотр», «Ответы».
  3. На вкладке «Редактировать» пользователь:
    • меняет типы полей,
    • редактирует заголовки и варианты ответов,
    • добавляет или удаляет поля.
  4. Нажимает «Сохранить», изменения записываются, обновляется дата изменения формы.

9. Предпросмотр форм

Действующее лицо: Пользователь (проверяющий форму).

Основной сценарий:

  1. На экране формы пользователь переключается на вкладку «Предпросмотр».
  2. Видит форму так, как её увидит респондент (поля ввода, варианты ответа).
  3. При необходимости возвращается на вкладку «Редактировать», чтобы поправить текст или структуру.

10. Результаты форм (ответы)

Действующее лицо: Пользователь (аналитик/владелец формы).

Основной сценарий:

  1. Пользователь открывает нужную форму.
  2. Переходит на вкладку «Ответы».
  3. Видит таблицу с ответами: по строкам — отдельные ответы, по столбцам — поля формы.
  4. Может просматривать и анализировать собранные данные.

11. Удаление формы

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь находится на вкладке «Формы».
  2. Находит нужную форму в списке.
  3. Нажимает кнопку «Удалить» в колонке «Действия».
  4. Появляется диалог подтверждения: «Удалить форму? Форма и ответы будут удалены без возможности восстановления».
  5. Пользователь нажимает «Удалить», форма и её ответы удаляются из хранилища.

Альтернативный сценарий:
Пользователь нажимает «Отмена» — диалог закрывается, форма остаётся.

12. Окно экспорта

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь выбирает в левом меню пункт «Экспорт данных».
  2. Видит две карточки: «Таблицы» и «Формы» со списками чекбоксов.
  3. Отмечает какие именно таблицы и формы нужно выгрузить.
    Если ничего не отмечено, по умолчанию экспортируются все.
  4. В блоке «Формат» выбирает один из вариантов: JSON, CSV или XML.
  5. Нажимает кнопку «Скачать экспорт».
  6. Приложение формирует файл выбранного формата и предлагает его скачать.

13. Окно импорта

Действующее лицо: Пользователь.

Основной сценарий:

  1. Пользователь выбирает в левом меню пункт «Импорт данных».
  2. Выбирает формат файла (JSON/CSV/XML) и файл с данными.
  3. Подтверждает запуск импорта.
  4. Приложение загружает данные и обновляет локальное хранилище (таблицы и формы).
  5. После завершения импорта пользователь возвращается к списку таблиц и видит обновлённые данные.

14. Окно статистики

Действующее лицо: Пользователь (аналитик).

Общее:

  1. Пользователь открывает вкладку «Статистика».
  2. Выбирает источник данных: метаданные всех таблиц и форм или строки одной выбранной таблицы.
  3. Настраивает оси и при необходимости многокритериальный фильтр, затем нажимает «Построить диаграмму» — результат отображается на полотне под формой.

Основной сценарий (метаданные — таблицы и формы):

  1. В поле «Источник данных» выбрано «Метаданные (таблицы и формы)».
  2. В «Ось X (категории)» пользователь выбирает, по какому признаку группировать объекты на диаграмме:
    • владелец;
    • год создания;
    • год изменения;
    • месяц создания (группировка в формате год-месяц);
    • тип (таблица / форма).
  3. В «Фильтр: тип» задаёт подмножество: все объекты, только таблицы или только формы.
  4. При необходимости добавляет условия фильтра (кнопка «+ Добавить условие»): для каждого условия выбирается «столбец» в логической схеме (название, владелец, даты, тип) и оператор — содержит / не содержит / равно / не равно / больше / меньше / ≥ / ≤ / пусто / не пусто (часть операций применима к числовым и текстовым сравнениям). Несколько условий объединяются по И (должны выполняться все).
  5. Нажимает «Построить диаграмму» — строится столбчатая диаграмма количества объектов по выбранной оси X на отфильтрованном наборе.

Основной сценарий (данные из одной таблицы):

  1. В «Источник данных» выбрано «Данные из таблицы».
  2. Пользователь выбирает таблицу из списка.
  3. Указывает ось X — столбец сетки (буква столбца A, B, C …), значения которого станут категориями на диаграмме.
  4. При необходимости указывает ось Y (группировка) — второй столбец; тогда для каждой категории по X показывается распределение по значениям столбца Y (составная визуализация).
  5. В блоке условий фильтра задаёт ограничения по ячейкам строк (столбец A…, оператор, значение) — аналогично расширенным операторам; отбираются только строки, удовлетворяющие всем условиям.
  6. Нажимает «Построить диаграмму» — отображается диаграмма по отфильтрованным строкам.

Альтернативный сценарий:

  1. Не выбрана таблица или не задана ось X для режима «данные из таблицы» — приложение выводит подсказку на полотне вместо диаграммы.

15. Окно «Действия в формах»

Действующее лицо: Пользователь (аудит / владелец данных).

Основной сценарий:

  1. Пользователь выбирает в меню пункт «Действия в формах».
  2. Видит общий журнал записей: форма, действие (например, создание, изменение, удаление), пользователь, дата и время.
  3. Слева от таблицы — поле «Поиск…», справа — кнопка «Фильтры» (тот же принцип, что на вкладке «Формы»): всплывающая вертикальная панель с критериями по дате и времени (по умолчанию), по форме, по действию, по пользователю.
  4. Ввод текста в поиск и выбор критерия сразу отфильтровывают журнал по выбранному полю или сортируют список при пустом поиске.

Альтернативный сценарий:

  1. История пуста — в таблице отображается сообщение, что действий нет.

16. Окно «Действия в таблицах»

Действующее лицо: Пользователь (аудит / владелец данных).

Основной сценарий:

  1. Пользователь выбирает в меню пункт «Действия в таблицах».
  2. Видит общий журнал по всем таблицам: название таблицы, действие, пользователь, дата и время.
  3. Использует поиск и «Фильтры» с критериями: по дате и времени (по умолчанию), по таблице, по действию, по пользователю — поведение аналогично п. 2.2 и п. 15.
  4. Таким образом можно быстро найти, кто и когда менял конкретную таблицу.

Альтернативный сценарий:

  1. Для таблицы ещё не велась история — соответствующих строк в журнале нет.

Clone this wiki locally