421 lines
28 KiB
Markdown
421 lines
28 KiB
Markdown
# План стилизации кнопок
|
||
|
||
Дата аудита: 01.06.2026
|
||
Среда аудита: `https://localhost`
|
||
Метод: визуальный обход через Playwright, фиксация скриншотов и computed styles.
|
||
|
||
## 1. Краткое резюме
|
||
|
||
Интерфейс уже имеет узнаваемую базу: тёмная админ-панель, фиолетовый акцент, компактные таблицы и отдельные публичные кабинеты преподавателя/студента. Главная проблема не в отдельных кнопках, а в отсутствии единого контракта между смыслом действия и его визуальным видом.
|
||
|
||
Сейчас одинаковые классы могут выглядеть по-разному в разных SPA, а одинаковые действия могут получать разные цвета, размеры и плотность. Из-за этого пользователь каждый раз заново считывает интерфейс: где главное действие, где безопасное второстепенное, а где рискованное.
|
||
|
||
Цель новой структуры: закрепить единую кнопку как системный компонент с понятными ролями, размерами и правилами использования.
|
||
|
||
## 2. Что было проверено
|
||
|
||
| Раздел | Проверенные сценарии | Скриншот |
|
||
|---|---|---|
|
||
| Авторизация | Вход, показ пароля, переключение темы | [`audit-buttons-01-login.png`](../audit-buttons-01-login.png) |
|
||
| Дашборд админки | Быстрые переходы, recheck, сайдбар | [`audit-buttons-02-dashboard.png`](../audit-buttons-02-dashboard.png) |
|
||
| Пользователи | Создание пользователя, архивирование | [`audit-buttons-03-users-form.png`](../audit-buttons-03-users-form.png) |
|
||
| Меню настроек | Выпадающее меню, выход, переход в настройки | [`audit-buttons-04-settings-menu.png`](../audit-buttons-04-settings-menu.png) |
|
||
| Настройки | Навигация отдельной SPA | [`audit-buttons-05-settings-general.png`](../audit-buttons-05-settings-general.png) |
|
||
| Кабинет преподавателя | Недели, сегодня, выход, тема | [`audit-buttons-06-teacher.png`](../audit-buttons-06-teacher.png) |
|
||
| Кабинет студента | Недели, сегодня, выход, тема | [`audit-buttons-07-student.png`](../audit-buttons-07-student.png) |
|
||
| Модальное окно | Создание ручной сетки, отмена, закрытие | [`audit-buttons-08-modal.png`](../audit-buttons-08-modal.png) |
|
||
|
||
Дополнительно были сохранены скриншоты отдельных разделов: календарный график, аудитории, группы, дисциплины, расписание, формы обучения, база данных, временные слоты.
|
||
|
||
## 3. Текущее состояние
|
||
|
||
### 3.1. Авторизация
|
||
|
||
|
||
|
||
Найдены кнопки:
|
||
|
||
| Кнопка | Текущая роль | Комментарий |
|
||
|---|---|---|
|
||
| `Войти` | Primary | Корректно считывается как главное действие экрана. |
|
||
| `Показать пароль` | Icon utility | Нужен единый icon-only стиль и обязательный `aria-label`. |
|
||
| `Переключить тему` | Icon utility | Отличается от такой же кнопки в кабинетах преподавателя и студента. |
|
||
|
||
Вывод: экран логина близок к правильной иерархии, но icon-only controls нужно привести к общей форме и размеру.
|
||
|
||
### 3.2. Дашборд админки
|
||
|
||
|
||
|
||
Найдены кнопки и ссылки-кнопки:
|
||
|
||
| Кнопка | Текущий вид | Проблема |
|
||
|---|---|---|
|
||
| `Конструктор расписания` | Primary link | Хороший кандидат на основной CTA блока. |
|
||
| `Точечные изменения / Просмотр` | Secondary link | Выглядит как второстепенное действие, это корректно. |
|
||
| `Перепроверить` | `btn-primary`, маленькая высота | Primary используется для сервисного действия, хотя это не главное действие страницы. |
|
||
| `Настройки` | Sidebar button | Визуально близко к навигации, но реализовано как кнопка. |
|
||
| `Переключить тему` | Круглая icon button | Отличается от публичных кабинетов. |
|
||
|
||
Основной вывод: `btn-primary` сейчас означает и главный CTA, и компактную служебную кнопку. Это размывает иерархию.
|
||
|
||
### 3.3. Формы и таблицы админки
|
||
|
||
|
||
|
||
Типичные кнопки:
|
||
|
||
| Кнопка | Смысл | Текущее впечатление |
|
||
|---|---|---|
|
||
| `Создать` | Подтверждение формы | Главная кнопка, но размер и стиль отличаются между основной админкой и настройками. |
|
||
| `Архивировать` | Рискованное, но часто обратимое действие | Визуально слишком близко к удалению. |
|
||
| `Изменить` | Второстепенное действие строки | В разных разделах бывает фиолетовой или нейтральной. |
|
||
| `Удалить` | Деструктивное действие | Встречается в разных размерах и оттенках красного. |
|
||
|
||
Проблема: таблицы используют кнопки как плотный action bar, но размеры скачут от `24x28` до `113x28` и `96x40`. Это создаёт визуальный шум в строках.
|
||
|
||
### 3.4. Меню настроек и выход
|
||
|
||
|
||
|
||
Кнопка `Выйти` находится рядом с навигационными пунктами и выглядит почти как обычный пункт меню. Семантически это сессионное действие с риском потерять текущий контекст, поэтому ему нужен отдельный quiet-danger стиль.
|
||
|
||
Рекомендация: `Выйти` не должен выглядеть как обычная навигация. Достаточно `Danger subtle`: красный текст на спокойной поверхности без агрессивной заливки.
|
||
|
||
### 3.5. Отдельная SPA настроек
|
||
|
||
|
||
|
||
В настройках виден тот же сайдбарный паттерн, но кнопки внутри разделов получают другую визуальную систему.
|
||
|
||
Пример различий:
|
||
|
||
| Класс | Основная админка | Настройки |
|
||
|---|---|---|
|
||
| `btn-primary` | Часто прозрачный фон, белый текст, визуальная заливка может приходить из другого слоя | Фиолетовая заливка `rgb(139, 92, 246)`, высота `40px`, жирность `700` |
|
||
| `btn-delete` | Красный tint, высота часто `28px`, font-weight `400` | Красный tint, высота `40px`, font-weight `700` |
|
||
| `btn-secondary` | Фиолетовый tint или светлая surface-кнопка | Нейтральная surface-кнопка |
|
||
|
||
Вывод: одинаковое имя класса не является дизайн-контрактом. Компонент кнопки нужно нормализовать на уровне токенов и модификаторов.
|
||
|
||
### 3.6. Кабинеты преподавателя и студента
|
||
|
||
|
||
|
||
|
||
|
||
В публичных кабинетах используется отдельная светлая система:
|
||
|
||
| Элемент | Преподаватель | Студент |
|
||
|---|---|---|
|
||
| `Сегодня` | Primary blue `rgb(29, 78, 216)` | Primary teal `rgb(15, 118, 110)` |
|
||
| `Выйти` | Outline, белый фон, radius `8px` | Outline, белый фон, radius `8px` |
|
||
| `‹` / `›` | Outline icon-like buttons | Outline icon-like buttons |
|
||
| `Переключить тему` | Текстовый символ `◐` | Текстовый символ `◐` |
|
||
|
||
Проблема: одно действие `Сегодня` меняет цвет в зависимости от кабинета. Это допустимо для брендинга ролей, но плохо для системных кнопок. Ролевые цвета лучше использовать в расписании, бейджах и карточках, а не в базовой кнопочной иерархии.
|
||
|
||
### 3.7. Модальные окна
|
||
|
||
|
||
|
||
Найдены:
|
||
|
||
| Кнопка | Роль | Рекомендация |
|
||
|---|---|---|
|
||
| `Создать сетку` | Primary | Оставить primary. |
|
||
| `Отмена` | Secondary/Ghost | Сделать ghost или secondary без акцента. |
|
||
| `Закрыть` (`×`) | Icon close | Привести к icon-only button `40x40` или `36x36`, с `aria-label="Закрыть"`. |
|
||
|
||
Модальная структура в целом правильная, но её нужно подчинить тем же токенам, что и остальные кнопки.
|
||
|
||
## 4. Семантическая группировка найденных кнопок
|
||
|
||
### Primary: главное действие
|
||
|
||
Примеры: `Войти`, `Создать`, `Добавить`, `Сохранить правило`, `Сохранить год`, `Сохранить семестр`, `Сохранить график`, `Сохранить сетку`, `Сохранить слот`, `Создать сетку`.
|
||
|
||
Правило: одна primary-кнопка на форму, модальное окно или смысловой блок. Если на экране несколько форм, primary может быть в каждой форме, но не должна превращаться в оформление всех кнопок подряд.
|
||
|
||
### Secondary: обычное второстепенное действие
|
||
|
||
Примеры: `Изменить`, `Обновить`, `Показать`, `Тест`, `Сменить статус`, `Преподаватели`, `Загрузить сетку`, `Заполнить диапазон`.
|
||
|
||
Правило: использовать для действий, которые помогают выполнить задачу, но не являются главным подтверждением.
|
||
|
||
### Tertiary / Ghost: тихое действие
|
||
|
||
Примеры: `Очистить`, `Очистить форму`, `Отмена`, `Назад в панель`, `Свернуть`, `Из формы`, `Все`, `Точечные изменения / Просмотр`.
|
||
|
||
Правило: использовать там, где действие должно быть доступно, но не конкурировать с сохранением или созданием.
|
||
|
||
### Danger: деструктивное действие
|
||
|
||
Примеры: `Удалить`.
|
||
|
||
Правило: только для необратимых или почти необратимых операций. Красный цвет должен быть зарезервирован именно под риск.
|
||
|
||
### Danger subtle: рискованное, но не удаление
|
||
|
||
Примеры: `Архив`, `Архивировать`, `Удалить сетку`, `Выйти`.
|
||
|
||
Правило: использовать для действий с негативным или сессионным эффектом, но без визуальной паники solid-red кнопки.
|
||
|
||
### Icon button: компактное служебное действие
|
||
|
||
Примеры: `Переключить тему`, `Показать пароль`, `Скрыть панель`, `Закрыть`, `‹`, `›`.
|
||
|
||
Правило: фиксированный квадратный размер, единое состояние hover/focus, обязательный доступный текст через `aria-label`.
|
||
|
||
### Navigation item: навигация, а не кнопка действия
|
||
|
||
Примеры: пункты сайдбара `Дашборд`, `Конструктор правил`, `Календарный график`, `Пользователи`, `Общие настройки`.
|
||
|
||
Правило: не смешивать навигацию с action button. У неё отдельные active, hover и focus-состояния.
|
||
|
||
## 5. Предлагаемая дизайн-система кнопок
|
||
|
||
### 5.1. Токены
|
||
|
||
| Токен | Светлая тема | Тёмная тема | Назначение |
|
||
|---|---|---|---|
|
||
| `--button-primary-bg` | `#4F46E5` | `#8B5CF6` | Основное действие |
|
||
| `--button-primary-bg-hover` | `#4338CA` | `#7C3AED` | Hover primary |
|
||
| `--button-primary-text` | `#FFFFFF` | `#FFFFFF` | Текст primary |
|
||
| `--button-secondary-bg` | `#FFFFFF` | `rgba(255,255,255,0.04)` | Второстепенная поверхность |
|
||
| `--button-secondary-bg-hover` | `#F1F5F9` | `rgba(255,255,255,0.08)` | Hover secondary |
|
||
| `--button-secondary-border` | `#CBD5E1` | `rgba(255,255,255,0.10)` | Граница secondary |
|
||
| `--button-secondary-text` | `#334155` | `#F8FAFC` | Текст secondary |
|
||
| `--button-ghost-bg-hover` | `#F8FAFC` | `rgba(255,255,255,0.06)` | Hover ghost |
|
||
| `--button-danger-bg` | `#DC2626` | `#DC2626` | Удаление |
|
||
| `--button-danger-bg-hover` | `#B91C1C` | `#B91C1C` | Hover удаления |
|
||
| `--button-danger-subtle-bg` | `#FEF2F2` | `rgba(239,68,68,0.13)` | Риск без solid-заливки |
|
||
| `--button-danger-subtle-text` | `#B91C1C` | `#FECACA` | Текст risk subtle |
|
||
| `--button-focus-ring` | `rgba(79,70,229,0.35)` | `rgba(139,92,246,0.45)` | Focus outline |
|
||
|
||
Примечание: для всего продукта лучше выбрать один primary-акцент. Для текущей тёмной админки логично оставить фиолетовый `#8B5CF6`, а для светлой темы использовать более читаемый `#4F46E5`. Ролевые цвета преподавателя и студента лучше вынести из кнопок в расписание и бейджи.
|
||
|
||
### 5.2. Размеры
|
||
|
||
| Размер | Высота | Padding | Шрифт | Где применять |
|
||
|---|---:|---|---|---|
|
||
| `sm` | `32px` | `0 12px` | `13px / 600` | Таблицы, компактные действия строк |
|
||
| `md` | `40px` | `0 16px` | `14px / 600` | Формы, фильтры, модальные окна |
|
||
| `lg` | `48px` | `0 20px` | `15px / 700` | Вход, главный CTA экрана |
|
||
| `icon-sm` | `32x32` | `0` | icon `18px` | Табличные иконки |
|
||
| `icon-md` | `40x40` | `0` | icon `20px` | Верхние панели, модалки, навигация недель |
|
||
|
||
Базовый `border-radius`: `8px`.
|
||
|
||
Почему `8px`: интерфейс административный и рабочий. Радиус `8px` сохраняет мягкость, но выглядит собраннее, чем повсеместные `10px`, особенно в таблицах и плотных формах.
|
||
|
||
### 5.3. Варианты
|
||
|
||
#### Primary
|
||
|
||
Использовать для главного подтверждения.
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Фон primary, белый текст, без видимой границы |
|
||
| Hover | Фон темнее на 8-12% |
|
||
| Focus | Видимый ring `2px` |
|
||
| Disabled | Нейтральный фон, muted-текст, `cursor: not-allowed` |
|
||
|
||
Примеры: `Войти`, `Создать`, `Сохранить правило`, `Создать сетку`.
|
||
|
||
#### Secondary
|
||
|
||
Использовать для обычных действий рядом с primary.
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Surface-фон, тонкая граница, основной текст |
|
||
| Hover | Чуть более светлая/контрастная поверхность |
|
||
| Focus | Такой же focus ring, как у primary |
|
||
| Disabled | Opacity `0.5` |
|
||
|
||
Примеры: `Изменить`, `Обновить`, `Показать`, `Тест`.
|
||
|
||
#### Ghost
|
||
|
||
Использовать для тихих действий.
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Прозрачный фон, muted/regular text |
|
||
| Hover | Лёгкий surface-hover |
|
||
| Focus | Ring без изменения иерархии |
|
||
|
||
Примеры: `Отмена`, `Очистить`, `Назад в панель`, `Свернуть`.
|
||
|
||
#### Danger
|
||
|
||
Использовать только для удаления.
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Красная заливка, белый текст |
|
||
| Hover | Более тёмный красный |
|
||
| Focus | Красный или общий focus ring |
|
||
|
||
Примеры: `Удалить`.
|
||
|
||
#### Danger subtle
|
||
|
||
Использовать для рискованных действий без полного удаления.
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Красный tint-фон, красный текст, мягкая border |
|
||
| Hover | Более насыщенный tint |
|
||
| Focus | Видимый ring |
|
||
|
||
Примеры: `Архивировать`, `Архив`, `Выйти`, `Удалить сетку`.
|
||
|
||
#### Icon button
|
||
|
||
Использовать для действий, где текст заменён иконкой.
|
||
|
||
| Параметр | Правило |
|
||
|---|---|
|
||
| Размер | `32x32` в таблицах, `40x40` в тулбарах |
|
||
| Иконка | 18-20px, один набор иконок |
|
||
| Текст | Только через `aria-label` |
|
||
| Форма | Квадрат с radius `8px`, не круг, кроме специальных случаев avatar/fab |
|
||
|
||
Примеры: `Переключить тему`, `Показать пароль`, `Закрыть`, `Предыдущая неделя`, `Следующая неделя`.
|
||
|
||
## 6. Маппинг текущих кнопок на новую систему
|
||
|
||
| Текущие кнопки | Новый тип | Размер |
|
||
|---|---|---|
|
||
| `Войти` | `Primary` | `lg` |
|
||
| `Создать`, `Добавить` | `Primary` | `md` |
|
||
| `Сохранить правило`, `Сохранить год`, `Сохранить семестр`, `Сохранить график`, `Сохранить сетку`, `Сохранить слот` | `Primary` | `md` |
|
||
| `Создать сетку` | `Primary` | `md` |
|
||
| `Изменить`, `Обновить`, `Показать`, `Тест`, `Сменить статус` | `Secondary` | `sm` в таблицах, `md` в формах |
|
||
| `Преподаватели`, `Подгруппы`, `Календарь`, `Сетка` | `Secondary` | `sm` |
|
||
| `Очистить`, `Очистить форму`, `Отмена`, `Свернуть`, `Из формы`, `Все` | `Ghost` | `sm` или `md` |
|
||
| `Точечные изменения / Просмотр`, `Назад в панель` | `Ghost navigation` | `md` |
|
||
| `Удалить` | `Danger` | `sm` в таблицах, `md` в модалках |
|
||
| `Архив`, `Архивировать`, `Выйти`, `Удалить сетку` | `Danger subtle` | `sm` или `md` |
|
||
| `Переключить тему`, `Показать пароль`, `Скрыть панель`, `Закрыть`, `‹`, `›` | `Icon button` | `icon-sm` или `icon-md` |
|
||
| Пункты сайдбара | `Nav item` | отдельный nav-компонент |
|
||
|
||
## 7. Правила композиции
|
||
|
||
### Формы
|
||
|
||
Primary-кнопка должна стоять в конце формы или action row. Рядом с ней допустимы secondary/ghost-действия, но не ещё одна primary без причины.
|
||
|
||
Рекомендуемый порядок:
|
||
|
||
| Сценарий | Порядок |
|
||
|---|---|
|
||
| Форма создания | `Очистить` как ghost, `Создать` как primary |
|
||
| Форма редактирования | `Отмена` как ghost, `Сохранить` как primary |
|
||
| Фильтр | `Сбросить` как ghost, `Показать` как secondary или primary, если это единственное действие блока |
|
||
|
||
### Таблицы
|
||
|
||
В строках таблицы использовать только `sm`.
|
||
|
||
Рекомендуемый порядок:
|
||
|
||
1. Основное безопасное действие: `Изменить`, `Преподаватели`, `Подгруппы`.
|
||
2. Дополнительное действие: `Календарь`, `Сетка`.
|
||
3. Рискованное действие: `Архивировать` или `Удалить`.
|
||
|
||
Удаление лучше отделять визуально от остальных кнопок небольшим gap.
|
||
|
||
### Модальные окна
|
||
|
||
В модалке primary должен соответствовать заголовку и цели модалки.
|
||
|
||
Пример:
|
||
|
||
| Заголовок | Primary | Secondary/Ghost |
|
||
|---|---|---|
|
||
| `Новая ручная сетка` | `Создать сетку` | `Отмена` |
|
||
| `Удалить слот` | `Удалить` как danger | `Отмена` |
|
||
| `Редактировать слот` | `Сохранить слот` | `Отмена` |
|
||
|
||
Кнопка закрытия всегда icon-only с `aria-label="Закрыть"`.
|
||
|
||
### Навигация
|
||
|
||
Сайдбарные пункты не должны наследовать стили action-кнопок. У них отдельная логика:
|
||
|
||
| Состояние | Стиль |
|
||
|---|---|
|
||
| Default | Прозрачный фон, muted-текст |
|
||
| Hover | Нейтральный surface-hover |
|
||
| Active | Акцентный tint-фон, accent-текст |
|
||
| Focus | Видимый ring/outline |
|
||
|
||
## 8. Главные исправления по приоритету
|
||
|
||
| Приоритет | Что сделать | Почему важно |
|
||
|---|---|---|
|
||
| P1 | Нормализовать `btn-primary`, `btn-secondary`, `btn-delete` между основной админкой и настройками | Один класс должен означать один визуальный контракт |
|
||
| P1 | Развести `Danger` и `Danger subtle` | `Удалить` и `Архивировать` не должны выглядеть одинаково опасными |
|
||
| P1 | Ввести размерную шкалу `sm/md/lg/icon` | Таблицы и формы станут визуально ровнее |
|
||
| P2 | Унифицировать `Переключить тему`, `Закрыть`, `‹`, `›`, `Показать пароль` как icon buttons | Повысит предсказуемость и доступность |
|
||
| P2 | Убрать ролевые primary-цвета из student/teacher кнопок | Одинаковые действия будут считываться одинаково |
|
||
| P3 | Заменить текстовые символы `◐`, `×`, `‹`, `›` на иконки единого набора | Интерфейс станет аккуратнее и доступнее |
|
||
|
||
## 9. Визуальный референс поведения
|
||
|
||
```text
|
||
Primary
|
||
[ Сохранить правило ]
|
||
Фон: акцентный, текст белый. Только главное действие.
|
||
|
||
Secondary
|
||
[ Изменить ]
|
||
Фон: поверхность, тонкая граница. Обычное действие.
|
||
|
||
Ghost
|
||
[ Отмена ]
|
||
Фон: прозрачный. Тихое действие без конкуренции.
|
||
|
||
Danger
|
||
[ Удалить ]
|
||
Фон: красный. Только необратимое действие.
|
||
|
||
Danger subtle
|
||
[ Архивировать ]
|
||
Фон: красный tint. Рискованное, но не полноценное удаление.
|
||
|
||
Icon
|
||
[ icon ]
|
||
Фиксированный квадрат. Доступное название через aria-label.
|
||
```
|
||
|
||
## 10. Почему это решение улучшит интерфейс
|
||
|
||
Единая кнопочная система снижает когнитивную нагрузку. Пользователь перестаёт разгадывать каждый экран и начинает быстро узнавать роли: главное действие, второстепенное действие, отмена, удаление, навигация.
|
||
|
||
Разделение `Danger` и `Danger subtle` особенно важно для админ-панели. Сейчас `Архивировать` визуально конкурирует с `Удалить`, хотя риск у этих действий разный. После унификации красный solid будет означать только настоящее удаление.
|
||
|
||
Единая размерная шкала сделает таблицы спокойнее. В строках не будет скачков высоты и плотности, а формы и модалки начнут выглядеть как части одной системы.
|
||
|
||
Общий primary-цвет вернёт продукту целостность. Ролевые цвета можно сохранить там, где они помогают считывать расписание и принадлежность данных, но базовые действия должны оставаться стабильными.
|
||
|
||
## 11. Приложение: дополнительные скриншоты
|
||
|
||
| Раздел | Скриншот |
|
||
|---|---|
|
||
| Конструктор правил |  |
|
||
| Календарный график |  |
|
||
| Просмотр расписаний |  |
|
||
| Аудиторный фонд |  |
|
||
| Группы обучения |  |
|
||
| Структура вуза |  |
|
||
| Дисциплины |  |
|
||
| Пользователи |  |
|
||
| Временные слоты |  |
|
||
| Формы обучения |  |
|
||
| База данных |  |
|