Всё, из чего собирается интерфейс
Тридцать модулей в шести семействах: навигация, раскрытие, данные, ввод, обратная связь и контент. Каждый — рабочая разметка на токенах vai8, а не картинка: вкладки переключаются, аккордеоны раскрываются, тумблеры щёлкают. Переключатель тем проверяет обе подложки.
Навигация
Отвечает на два вопроса: где я нахожусь и куда могу перейти. Текущее положение обязано быть видно без догадок.
Вкладки
Не больше пяти вкладок. Стрелки клавиатуры переключают, Tab выходит наружу.
Вертикальные вкладки
Для длинных списков разделов, где горизонталь не вмещает подписи.
Сегментированный переключатель
Два-четыре взаимоисключающих варианта. Больше — вкладки или список.
Хлебные крошки
Со второго уровня вложенности. Последний элемент — не ссылка.
Постраничная навигация
Всегда с общим числом: иначе не видно, где конец.
Шаги мастера
Пройденное отмечено галочкой, а не только цветом.
Боковое меню
Текущий раздел выделен фоном и цветом, счётчики справа.
Командная палитра
Вызов по сочетанию клавиш. Для продуктов, где действий больше двадцати.
Раскрытие и наложение
Прячут второстепенное, пока оно не понадобилось. Ключевое правило — возврат: из любого раскрытого состояния должен быть очевидный выход.
Аккордеон
Как подключить систему
Живой канал и закреплённый
Можно ли менять токены под проект
На теге details — работает без сценариев и доступен с клавиатуры.
Выпадающее меню
Опасное действие отделено чертой и окрашено в цвет опасности.
Модальное окно
Отозвать ключ доступа?
Проекты с этим ключом потеряют доступ немедленно. Отменить нельзя.
Заголовок формулирует вопрос, кнопка — ответ. «Да» и «Нет» запрещены.
Боковая панель
Для фильтров и деталей, когда контекст списка нужно сохранить.
Подсказка
Только пояснение, никогда — важная информация. По фокусу тоже показывается.
Раскрытие строки
Детали внутри таблицы без ухода со страницы.
Отображение данных
Сначала сводка, потом подробности. Состояние кодируется формой, а не только числом, чтобы важное считывалось боковым зрением.
Таблица
| Проект ▲ | Статус | Людей | Расход ключа | Обращений | ||
|---|---|---|---|---|---|---|
| Каталог | активен | 4 | 12 408 | |||
| Панель логистики | активен | 2 | 3 902 | |||
| Витрина товаров | лимит | 7 | 48 771 | |||
| Архив 2025 | остановлен | 0 | 104 |
Поиск, фильтры, сортировка по столбцу, выбор строк, действия в конце строки, полосы расхода и моноширинные числа. Таблица прокручивается внутри себя, страница — нет.
Показатели
Значение, подпись, динамика. Стрелка дублирует цвет формой.
Список
Длинные строки обрезаются многоточием, а не ломают раскладку.
Календарь
Выбор даты и диапазона. Выходные не выделяются цветом — только положением.
Доска задач
Перетаскивание обязано иметь клавиатурную альтернативу.
Хронология
Свершившееся и предстоящее различаются заливкой точки.
Ввод данных
У каждого поля обязательны подпись, состояние ошибки и подсказка формата. Плейсхолдер подписью не является — он исчезает при вводе.
Текстовые поля
Три состояния: обычное, ошибка, успех. Текст ошибки объясняет, что исправить.
Выбор и множественный выбор
Выбранное показано метками с крестиком — снять можно в один приём.
Переключатели
Тумблер применяется сразу, флажок — по кнопке сохранения. Путать нельзя.
Ползунок
Значение показано числом: по положению точное не считывается.
Загрузка файлов
Ограничения названы до выбора файла, а не в сообщении об ошибке после.
Поиск с подсказками
Совпадение подсвечено. Пустой результат — тоже результат, его показывают.
Обратная связь
Сообщает результат действия и состояние системы. Каждое сообщение отвечает на два вопроса: что произошло и что делать дальше.
Всплывающие уведомления
Успех исчезает сам, ошибка ждёт закрытия и предлагает повтор.
Сообщения в потоке
Иконка, заголовок и пояснение. Цвет — не единственный носитель смысла.
Пустое состояние
Всегда с действием. Пустой экран без выхода — тупик.
Ожидание
Полоса с оценкой времени, скелетон — с формой будущего содержимого.
Контентные блоки
Из них собираются публичные страницы. Каждый блок несёт одно сообщение и один призыв; два призыва в блоке отменяют друг друга.
Тарифы
- 1 проект
- 10 тыс. обращений
- 10 проектов
- 100 тыс. обращений
- Закреплённый канал
- Без ограничений
- Отдельный контур
Выделен один тариф. Цена крупно, условия списком без маркетинга.
Вопросы и ответы
Сколько стоит подключение
Что будет при исчерпании лимита
Размечается как FAQPage — попадает в результаты поиска.
Отзыв
Спор о цвете кнопки закончился в тот день, когда акцент стал один и был записан в принципах.
Автор обязателен: анонимная цитата не работает как доказательство.
Логотипы клиентов
Одна высота, приглушённый цвет — ряд не должен спорить с содержимым.
Галерея
Первый элемент крупнее — сетка перестаёт быть однообразной.
Видео
Не запускается само, со звуком — никогда. Субтитры обязательны.
Диалог с агентом
Реплики различаются стороной и заливкой. Расход токенов — рядом с ответом.
Подписка и согласие
Флажок согласия не проставлен заранее — иначе согласие недействительно.
Таблицы: варианты оформления
Одна разметка, шесть режимов подачи. Выбор зависит от того, что читают: отдельное значение, строку целиком или итог по группе.
Базовая
| Проект | Статус | Обращений |
|---|---|---|
| Каталог | активен | 12 408 |
| Панель | активен | 3 902 |
| Витрина | активен | 48 771 |
Линии только между строками. Вертикальных границ нет — они дробят взгляд.
Чересполосица
| Дата | Событие | Токенов |
|---|---|---|
| 27.07 | Выпуск ключа | 1 204 |
| 26.07 | Правка токенов | 880 |
| 25.07 | Приёмка макета | 3 411 |
| 24.07 | Подключение проекта | 642 |
Оправдана от пяти столбцов: помогает не соскользнуть на соседнюю строку.
Плотная
| Код | Токен | Значение | Контраст |
|---|---|---|---|
| 01 | --bg | #1a1816 | — |
| 02 | --ink | #efe9e1 | 13,8 |
| 03 | --ink-2 | #b8ada0 | 7,4 |
| 04 | --amber | #f0a35e | 8,1 |
| 05 | --danger | #e8736a | 5,2 |
Для справочников, где важно видеть много строк разом.
Закреплённая шапка
| Проект | Июнь | Июль |
|---|---|---|
| Каталог | 9 204 | 12 408 |
| Панель | 2 810 | 3 902 |
| Витрина | 31 460 | 48 771 |
| Архив | 1 040 | 104 |
| Демо | 512 | 388 |
| Песочница | 204 | 176 |
Прокрутите внутри — заголовки остаются на месте. От десяти строк обязательно.
Группировка и итоги
| Статья | Сумма, руб. |
|---|---|
| Разработка | |
| Вёрстка | 84 000 |
| Интеграция | 126 000 |
| Сопровождение | |
| Хостинг за год | 18 000 |
| Итого | 228 000 |
Группа — строка на всю ширину, итог отделён чертой сверху.
Состояния строк
| Ключ | Состояние | Расход |
|---|---|---|
| vai8_live_169b… | выбран | 78 % |
| vai8_live_4c02… | превышен лимит | 104 % |
| vai8_live_9ab1… | обычная | 41 % |
| vai8_live_0f77… | отозван | — |
Состояние кодируется полосой слева и текстом, а не одной заливкой.