Repository navigation
Tech Spec Design Gradebook
Техническое задание на разработку дизайна модуля "Электронный журнал"
Ниже — структура ТЗ на дизайн интерфейса (UX/UI). Раздел ориентирован исключительно на визуальную часть, пользовательский опыт, структуру экранов и требования к клиентскому интерфейсу. редактировали Ширяев Михаил и Юрьев Никита из ОИ 31.09
Модуль «Электронный журнал» представляет собой веб-интерфейс в единой образовательной системе College Management System, предназначенный для наглядного структурирования, ведения и оперативного анализа учебных результатов и посещаемости занятий студентами колледжа.
Интерфейс спроектирован по двухэтапной модели взаимодействия:
- Экран-селектор предметов и групп: навигационный хаб преподавателя для быстрого выбора нужной учебной дисциплины и перехода в журнал конкретной академической группы.
- Экран журнала занятий: полнофункциональная электронная ведомость с разделением занятий по типам (лекции, практики, контрольные), сдвоенными ячейками учёта (оценка + статус посещения), быстрым поиском студентов и сводной панелью итогов за период.
Ключевые цели интерфейса:
-
Чёткое разделение контекста: преподаватель не перегружен единой бесконечной таблицей; сначала выбирается связка «Дисциплина
$\to$ Группа», после чего открывается целевая ведомость. - Двойной учёт в одной ячейке: устранение необходимости вести отдельные таблицы для оценок и пропусков — каждая ячейка наглядно объединяет балл (слева) и статус присутствия/пропуска (справа).
- Дифференциация пропусков и типов занятий: визуальное разграничение пропусков по уважительной причине («У») и без причины («Н»), а также цветовое и текстовое маркирование формата пары (лекция, практика, контрольная).
- Оперативный поиск и контроль итогов: встроенная строка фильтрации студентов по списку и автоматический расчёт посещаемости и среднего балла как по каждому студенту, так и по группе в целом.
Интерфейс модуля обеспечивает визуальное представление и интерактивное взаимодействие со следующими функциями:
- Просмотр списка учебных дисциплин преподавателя: отображение карточек предметов («Предмет 1», «Предмет 2», «Предмет 3»...) на стартовом экране селектора.
- Просмотр списка групп, относящихся к учебной дисциплине: структурированные списки академических групп внутри карточки каждой дисциплины с указанием количества групп и численности студентов.
- Просмотр электронного журнала по выбранной дисциплине: переход в журнал выбранной группы по кнопке «Открыть журнал» с формированием таблицы занятий.
- Добавление оценки студенту: ввод балла в левую половину ячейки занятия либо через кнопку глобального действия «Внести оценки».
- Изменение существующей оценки: контекстное редактирование числового значения в ячейке занятия с немедленной перерисовкой.
- Удаление оценки с проверкой прав пользователя: интерфейс очистки значения отметки (сброс в состояние «—»).
- Добавление комментария к оценке: поле примечания к строке студента для текстовых заметок («Есть оценка», «Без замечаний»).
- Просмотр даты и времени выставления оценки: информационный тултип/поповер при наведении на ячейку с метаданными фиксации балла.
- Просмотр преподавателя, выставившего оценку: отображение автора записи во всплывающей карточке подробностей.
- Учёт посещаемости студентов: отображение индикатора посещения в правой половине каждой сдвоенной ячейки занятия.
-
Добавление отметки о посещении или отсутствии студента: проставление символа присутствия (
./+), пропуска без причины (Н) или пропуска по уважительной причине (У). - Изменение статуса посещаемости: быстрое переключение между статусами явки кликом по правой части ячейки занятия.
- Добавление комментария к посещаемости: фиксация причины отсутствия («1 пропуск без причины», «Уважительный пропуск» / по заявлению) в итоговом блоке примечаний.
- Просмотр оценок конкретного студента: горизонтальная строка успеваемости студента по всем проведенным датам занятий.
- Просмотр посещаемости конкретного студента: колонка «Доля посещений» в итоговой секции таблицы, отражающая личный процент явки учащегося.
- Фильтрация журнала по дисциплине: возможность в любой момент сменить контекст через навигационную ссылку «К выбору предметов и групп».
- Фильтрация журнала по студенту: интерактивное поле поиска («Найти студента») для мгновенной фильтрации строк ведомости по подстроке.
- Фильтрация данных по учебному периоду: селекторы учебного периода («1 семестр») и конкретного месяца («сентябрь 2026») с индикацией числа занятий («9 занятий»).
- Расчёт среднего текущего балла студента по дисциплине: колонка «Средний балл», вычисляемая строго по выставленным оценкам конкретного студента.
- Получение итоговых данных по студенту: итоговый блок колонок «Итоги за выбранный период» (Средний балл, Доля посещений, Примечание).
- Предоставление данных журнала другим модулям системы: левое боковое меню для бесшовного перехода в разделы «Расписание», «Рабочие программы», «Отчёты».
- Подготовка данных для последующего формирования отчётов: кнопка действия «Экспорт журнала» в верхней панели инструментов.
Стартовый экран модуля, организующий доступ к журналам по иерархическому принципу:
- Заголовок страницы: крупный заголовок «Выберите предмет и группу, чтобы открыть журнал».
-
Карточки дисциплин: независимые контейнеры для каждого предмета преподавателя («Предмет 1», «Предмет 2», «Предмет 3»):
- Заголовок дисциплины и счётчик прикреплённых групп (например, плашка «3 группы», «2 группы»);
- Список групп (Группа 1, Группа 2, Группа 3...);
- Краткая статистика группы: количество студентов, форма контроля;
- Кнопка перехода «Открыть журнал» у выбранной группы.
Основной рабочий экран ведомости:
-
Навигационная цепочка (Хлебные крошки): ссылка
К выбору предметов и групп$\to$ разделитель/$\to$ активная секцияЭлектронный журнал. -
Заголовочный блок и контекст:
- Название: «Оценки и посещаемость»;
- Метаданные группы: плашка количества студентов («12 студентов»), учебный год («2026/27 учебный год»);
- Предупреждающий демонстрационный бейдж: «Демонстрационные данные: Все учебные данные вымышлены».
-
Панель действий (Action Bar):
- Кнопка «Экспорт журнала» (выгрузка отчёта);
- Кнопка «Добавить занятие» (создание новой колонки даты);
- Кнопка «Внести оценки» (переход в режим массового ввода отметок).
-
Панель параметров периода:
- Селектор периода: подпись «Учебный период», значение «1 семестр»;
- Селектор месяца: подпись «Месяц», значение «сентябрь 2026»;
- Индикатор занятий: подпись «Занятия за период», значение «9 занятий».
-
Инструменты фильтрации таблицы:
- Поле поиска: иконка лупы, плейсхолдер «Найти студента».
-
Таблица ведомости (Матрица журнала):
-
Группа колонок «Список группы»:
- Колонка
№(порядковый номер: 01, 02 ... 12); - Колонка
Студент(ФИО учащегося: Студент 01 .. Студент 12).
- Колонка
-
Группа колонок «Занятия (сентябрь 2026)»:
- Колонки дат проведенных занятий;
- В шапке каждой колонки отображаются дата урока и бейдж типа занятия:
- Лекция;
- Практика;
- Контрольная.
-
Сдвоенные ячейки учёта: каждая клетка разделена по вертикали на две половины:
-
Слева: числовая оценка (
5,4,3,2или—при отсутствии); -
Справа: статус посещаемости (
./+— присутствовал,Н— пропуск без причины,У— уважительный пропуск).
-
Слева: числовая оценка (
-
Группа колонок «Итоги за выбранный период»:
- Колонка
Средний балл(арифметическое среднее оценок студента, например4,12); - Колонка
Доля посещений(процент или дробь посещённых пар, например8/9или89%); - Колонка
Примечание(статусные подсказки: «1 пропуск без причины», «Уважительный пропуск», «Есть оценка»).
- Колонка
-
Группа колонок «Список группы»:
-
Подвал ведомости (Сводка и легенда):
-
Блок итогов группы:
- «Показаны все студенты: 12 из 12»;
- «Средний балл группы: 4,12»;
- «Посещено: 100/108 (93%)»;
- Счётчики пропусков группы: «Н: 5», «У: 3».
-
Блок легенды обозначений:
-
оценка— выставленный балл; -
—— без оценки; -
.или+— присутствовал на паре; -
Н— отсутствовал без причины; -
У— отсутствовал по уважительной причине.
-
-
Блок правил расчёта:
- Текстовое пояснение: «В каждой ячейке: оценка слева, посещение справа. Средний балл рассчитан только по выставленным оценкам; посещаемость — доля от 9 занятий, Н и У не учитываются как посещение».
-
Блок итогов группы:
- Пользователь открывает: преподаватель входит в модуль «Электронный журнал».
- Видит: экран-селектор с заголовком «Выберите предмет и группу, чтобы открыть журнал» и карточками назначенных дисциплин («Предмет 1», «Предмет 2», «Предмет 3»).
- Вводит / выбирает: в блоке «Предмет 1» находит карточку «Группа 1» и нажимает кнопку «Открыть журнал».
-
Получает результат: экран переключается на ведомость «Группы 1» по выбранной дисциплине. Вверху отображаются хлебные крошки
К выбору предметов и групп / Электронный журнал, заголовок «Оценки и посещаемость» и таблица с 12 студентами.
- Пользователь открывает: преподаватель просматривает журнал за сентябрь.
- Видит: заголовки столбцов с датами занятий и цветными метками типов: лекционные дни отмечены плашкой Лекция, практические занятия — плашкой Практика, контрольный опрос — акцентной плашкой Контрольная.
- Вводит / выбирает: наводит курсор на столбец контрольной работы.
- Получает результат: весь столбец контрольной работы мягко подсвечивается, позволяя визуально сопоставить оценки именно за эту проверочную работу по всему списку студентов.
- Пользователь открывает: ведомость группы открыта, в списке 12 студентов.
- Видит: строку поиска с подсказкой «Найти студента» над таблицей.
- Вводит / выбирает: кликает в поле поиска и вводит «05».
- Получает результат: таблица мгновенно фильтруется, скрывая остальные строки и оставляя на экране только строку «Студент 05» с его оценками и посещаемостью. При очистке поля отображаются все 12 студентов.
- Пользователь открывает: преподаватель проверяет ответ «Студента 01» на практическом занятии.
- Видит: ячейку студента за текущую дату, разделенную на левую и правую зоны (оценка слева, посещение справа).
-
Вводит / выбирает: кликает на левую часть ячейки и вводит балл
5. -
Получает результат: в левой половине ячейки отображается цифра
5, правая часть остаётся отмеченной как присутствие, а итоговый показатель среднего балла студента в крайней правой колонке пересчитывается.
- Пользователь открывает: староста сообщает, что «Студент 03» находится на больничном (предоставлена справка).
- Видит: правую область ячейки текущего занятия у «Студента 03».
-
Вводит / выбирает: кликает по статусу посещаемости и выбирает статус
У(уважительный пропуск). -
Получает результат: в правой части ячейки фиксируется синяя буква
У. В колонке «Примечание» появляется запись «Уважительный пропуск», общий счётчик уважительных пропусков в подвале увеличивается (У: 3), а процент посещаемости группы пересчитывается с учётом отсутствия.
- Пользователь открывает: преподаватель проводит перекличку в начале лекции и обнаруживает отсутствие «Студента 02».
- Видит: ячейку «Студента 02» за текущую дату.
-
Вводит / выбирает: кликает по зоне посещаемости и выставляет
Н. -
Получает результат: в правой части ячейки загорается плашка
Н. В примечании строки фиксируется «1 пропуск без причины», счётчик пропусков в подвале увеличивается (Н: 5), общий процент посещаемости группы снижается.
- Пользователь открывает: в расписании появилось дополнительное практическое занятие.
- Видит: верхнюю панель инструментов с кнопкой «Добавить занятие».
- Вводит / выбирает: нажимает «Добавить занятие», указывает дату и тип (например, «Практика»).
-
Получает результат: в таблице появляется новая колонка с датой и бейджем Практика. Счётчик в панели периода обновляется с «9 занятий» на «10 занятий», а ячейки инициализируются пустыми значениями (
—).
- Пользователь открывает: преподаватель проверил контрольные работы у всей группы.
- Видит: кнопку «Внести оценки» в панели действий.
-
Вводит / выбирает: нажимает «Внести оценки», активируя быстрый клавиатурный режим перехода по ячейкам столбца контрольной работы сверху вниз (через клавишу
Enter/ стрелки). -
Получает результат: преподаватель последовательно за несколько секунд заполняет баллы для всех 12 студентов без лишних кликов мышью. При выходе из режима средний балл группы в подвале автоматически обновляется (например, до
4,12).
- Пользователь открывает: преподаватель завершает заполнение журнала за сентябрь.
- Видит: нижний блок итогов под таблицей.
-
Вводит / выбирает: просматривает сводные данные:
- «Показаны все студенты: 12 из 12»;
- «Средний балл группы: 4,12»;
- «Посещено: 100/108 (93%)»;
- Количество прогулов: «Н: 5», уважительных пропусков: «У: 3».
- Получает результат: полная аналитическая картина учебной дисциплины видна в одном месте без необходимости ручных калькуляций.
- Пользователь открывает: ведомость заполнена, требуется сдать табель в учебную часть.
- Видит: кнопку «Экспорт журнала» рядом с добавлением занятий.
- Вводит / выбирает: нажимает «Экспорт журнала».
- Получает результат: система формирует файл отчёта за сентябрь 2026 со всеми оценками, типами пар и сводкой посещаемости, браузер инициирует стандартный диалог сохранения документа.
- Пользователь открывает: преподаватель закончил работу с «Группой 1» по «Предмету 1».
-
Видит: навигационную ссылку
К выбору предметов и группв левом верхнем углу над заголовком. - Вводит / выбирает: кликает по ссылке.
- Получает результат: ведомость закрывается, интерфейс возвращает преподавателя на экран-селектор с карточками предметов («Предмет 1», «Предмет 2», «Предмет 3»), где можно открыть журнал следующей группы.
- Концепция интерфейса: строгая, аккуратная веб-стилистика образовательной ERP-системы без избыточных декоративных эффектов, отвлекающих от работы с числовыми данными.
- Иерархия экранов: строгое визуальное разделение на экран выбора групп (карточная раскладка) и экран ведомости (табличная матрица).
-
Сдвоенная ячейка учёта:
- Чёткое вертикальное разделение ячейки на две равные функциональные зоны;
- Левая половина: контрастное отображение числового балла;
- Правая половина: цветной бейдж статуса посещения (
.,Н,У); - Независимый клик и фокус для каждой половины ячейки.
-
Типы занятий (в шапке дат):
- Лекция: нейтральный синий оттенок фона плашки;
- Практика: зеленоватый оттенок фона плашки;
- Контрольная: контрастный фиолетовый/бордовый акцентный цвет.
-
Статусы посещаемости:
- Присутствие (
./+): нейтральный серый или приглушённый зелёный маркер; - Пропуск без причины (
Н): выразительный кораллово-красный цвет; - Пропуск по уважительной причине (
У): информационный синий цвет; - Прочерк (
—): полупрозрачный серый текст с пониженной контрастностью.
- Присутствие (
-
Шрифтовая основа: современный гротеск (шрифты
Plus Jakarta Sans,Interили системный стек). -
Табличная читаемость:
- Имена студентов: выравнивание по левому краю с достаточными отступами;
- Оценки и статусы: строго по центру ячеек;
- Числовые показатели итогов: моноширинные цифры (
font-variant-numeric: tabular-nums) для идеального выравнивания десятичных долей.
-
Клавиатурная навигация: возможность последовательного перемещения по ячейкам клавишами
Tab,Shift+Tab, стрелками навигации и ввод балла с цифрового блока клавиатуры (Numpad). -
Контрастность: соответствие стандарту WCAG 2.1 AA (коэффициент контрастности текста и маркеров к фону
$\ge 4.5:1$ ). -
Фокус-состояния: чёткая контрастная рамка активной редактируемой ячейки (
:focus-visible).
-
Фиксация колонок (Sticky Header & Column):
- Первая колонка с номерами и именами студентов фиксируется у левого края при горизонтальной прокрутке длинного списка дат;
- Шапка с датами и типами занятий фиксируется сверху при вертикальной прокрутке списка студентов;
- Заголовок и фильтры остаются легкодоступными.
- Корректная и стабильная работа в двух последних мажорных версиях браузеров: Google Chrome, Zen browser, Mozilla Firefox, Apple Safari, Microsoft Edge, Arc browser.
- Клиентская реализация на стандартном стеке HTML5, CSS3 и Vanilla JavaScript без необходимости предварительной компиляции (No-Build).
| Метод | Endpoint | Какому экрану / элементу необходим | Ожидаемые данные для рендеринга |
|---|---|---|---|
GET |
/api/v1/gradebook/courses |
Экран 1: Селектор предметов и групп | Список доступных преподавателю дисциплин с перечнем прикрепленных групп, количеством студентов и метаданными. |
GET |
/api/v1/gradebook/journal/{group_id} |
Экран 2: Журнал занятий группы | Полная структура ведомости: список студентов группы, перечень дат занятий с типами (Лекция/Практика/Контрольная), матрица сдвоенных отметок (оценка + посещаемость), сводные показатели группы. |
POST |
/api/v1/gradebook/lessons |
Экран 2: Кнопка «Добавить занятие» | Передача параметров нового урока { group_id, date, lesson_type }. В ответ — добавленный столбец в таблицу. |
PUT |
/api/v1/gradebook/entries |
Экран 2: Ввод оценки / посещения | Передача объекта изменения { student_id, lesson_id, grade, attendance_status, comment }. В ответ — обновлённая ячейка и пересчитанные итоги. |
POST |
/api/v1/gradebook/entries/batch |
Экран 2: Кнопка «Внести оценки» | Пакетное сохранение массива оценок по колонке занятия. |
GET |
/api/v1/gradebook/export/{group_id} |
Экран 2: Кнопка «Экспорт журнала» | Генерация файла ведомости за выбранный период (1 семестр / месяц). |
Макет интерфейса из Figma:
- Слева (Экран 1): Навигационный селектор предметов и академических групп («Выберите предмет и группу, чтобы открыть журнал»).
- Справа (Экран 2): Ведомость журнала занятий («Оценки и посещаемость» со сдвоенными ячейками «оценка слева, явка справа», типизацией занятий «Лекция / Практика / Контрольная», фиксацией пропусков «Н» / «У» и сводным блоком итогов в подвале).
- Реализован экран-селектор со списком предметов, групп и кнопками «Открыть журнал».
- Реализован экран ведомости журнала с переходом из селектора и возвратом через хлебные крошки.
- Реализована поддержка сдвоенных ячеек: оценка отображается слева, статус посещаемости — справа.
- Поддерживаются все статусы посещаемости: присутствие (
./+), пропуск без причины (Н), уважительный пропуск (У). - В шапках колонок дат отображаются метки типов занятий: Лекция, Практика, Контрольная.
- Поле «Найти студента» осуществляет живую фильтрацию строк таблицы без задержек.
- В подвале ведомости рассчитываются сводные метрики: общий средний балл группы, процент явки, счётчики «Н» и «У».
- Первая колонка с именами студентов остаётся зафиксированной (Sticky) при горизонтальной прокрутке таблицы.
- Интерфейс взаимодействует с API по контрактам раздела 4.1 без захардкоженных данных.
- Код клиентской части написан чисто, без внешних тяжёлых библиотек и сборщиков, успешно проходит проверку в целевых браузерах.