Skip to content

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

Александр Шуменков edited this page May 20, 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. Пользователь задаёт параметры отбора, выбирает способ группировки и нажимает «Построить диаграмму».
  4. Под формой отображаются сводные показатели и диаграмма по отфильтрованным данным.

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

  1. Пользователь заполняет один или несколько фильтров:
    • название объекта;
    • создатель;
    • тип: все объекты, только таблицы или только формы;
    • комментарий;
    • описание формы;
    • статус формы: любой, черновик, опубликована;
    • дата создания от/до;
    • дата изменения от/до;
    • дата последнего просмотра от/до;
    • количество полей в форме от/до.
  2. В поле «Группировка для диаграммы» пользователь выбирает признак, по которому будут сгруппированы найденные объекты:
    • по создателю;
    • по типу;
    • по статусу формы;
    • по месяцу создания;
    • по месяцу изменения.
  3. Пользователь нажимает «Построить диаграмму».
  4. Приложение отбирает таблицы и формы, которые соответствуют заданным условиям.
  5. Под фильтрами обновляются показатели:
    • количество найденных записей;
    • количество таблиц;
    • количество форм.
  6. На полотне строится столбчатая диаграмма количества объектов по выбранной группировке.

Особенности работы фильтров:

  1. Фильтры по названию, комментарию и описанию выполняют поиск по вхождению текста.
  2. Фильтр по создателю поддерживает выбор нескольких пользователей.
  3. Фильтр по статусу применяется только к формам; таблицы при выбранном статусе не попадают в результат.
  4. Фильтр по количеству полей применяется к формам; для таблиц количество полей считается равным нулю.
  5. Все заданные условия объединяются по логике И — объект должен соответствовать каждому выбранному фильтру.

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

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

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

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

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

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

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

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

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

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

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

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

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

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