28 KiB
План стилизации кнопок
Дата аудита: 01.06.2026
Среда аудита: https://localhost
Метод: визуальный обход через Playwright, фиксация скриншотов и computed styles.
1. Краткое резюме
Интерфейс уже имеет узнаваемую базу: тёмная админ-панель, фиолетовый акцент, компактные таблицы и отдельные публичные кабинеты преподавателя/студента. Главная проблема не в отдельных кнопках, а в отсутствии единого контракта между смыслом действия и его визуальным видом.
Сейчас одинаковые классы могут выглядеть по-разному в разных SPA, а одинаковые действия могут получать разные цвета, размеры и плотность. Из-за этого пользователь каждый раз заново считывает интерфейс: где главное действие, где безопасное второстепенное, а где рискованное.
Цель новой структуры: закрепить единую кнопку как системный компонент с понятными ролями, размерами и правилами использования.
2. Что было проверено
| Раздел | Проверенные сценарии | Скриншот |
|---|---|---|
| Авторизация | Вход, показ пароля, переключение темы | audit-buttons-01-login.png |
| Дашборд админки | Быстрые переходы, recheck, сайдбар | audit-buttons-02-dashboard.png |
| Пользователи | Создание пользователя, архивирование | audit-buttons-03-users-form.png |
| Меню настроек | Выпадающее меню, выход, переход в настройки | audit-buttons-04-settings-menu.png |
| Настройки | Навигация отдельной SPA | audit-buttons-05-settings-general.png |
| Кабинет преподавателя | Недели, сегодня, выход, тема | audit-buttons-06-teacher.png |
| Кабинет студента | Недели, сегодня, выход, тема | audit-buttons-07-student.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.
Рекомендуемый порядок:
- Основное безопасное действие:
Изменить,Преподаватели,Подгруппы. - Дополнительное действие:
Календарь,Сетка. - Рискованное действие:
АрхивироватьилиУдалить.
Удаление лучше отделять визуально от остальных кнопок небольшим 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. Визуальный референс поведения
Primary
[ Сохранить правило ]
Фон: акцентный, текст белый. Только главное действие.
Secondary
[ Изменить ]
Фон: поверхность, тонкая граница. Обычное действие.
Ghost
[ Отмена ]
Фон: прозрачный. Тихое действие без конкуренции.
Danger
[ Удалить ]
Фон: красный. Только необратимое действие.
Danger subtle
[ Архивировать ]
Фон: красный tint. Рискованное, но не полноценное удаление.
Icon
[ icon ]
Фиксированный квадрат. Доступное название через aria-label.
10. Почему это решение улучшит интерфейс
Единая кнопочная система снижает когнитивную нагрузку. Пользователь перестаёт разгадывать каждый экран и начинает быстро узнавать роли: главное действие, второстепенное действие, отмена, удаление, навигация.
Разделение Danger и Danger subtle особенно важно для админ-панели. Сейчас Архивировать визуально конкурирует с Удалить, хотя риск у этих действий разный. После унификации красный solid будет означать только настоящее удаление.
Единая размерная шкала сделает таблицы спокойнее. В строках не будет скачков высоты и плотности, а формы и модалки начнут выглядеть как части одной системы.
Общий primary-цвет вернёт продукту целостность. Ролевые цвета можно сохранить там, где они помогают считывать расписание и принадлежность данных, но базовые действия должны оставаться стабильными.
11. Приложение: дополнительные скриншоты
| Раздел | Скриншот |
|---|---|
| Конструктор правил |  |
| Календарный график |  |
| Просмотр расписаний |  |
| Аудиторный фонд |  |
| Группы обучения |  |
| Структура вуза |  |
| Дисциплины |  |
| Пользователи |  |
| Временные слоты |  |
| Формы обучения |  |
| База данных |  |