PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
Темні панелі · Порівняння
Тестові кольори для заголовка й навігації. Порівняйте в обох темах; номер і код кольору залишаються однаковими.
01 · Чистий чорний #0A0A0A
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
02 · Холодний чорний #080A0D
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
03 · М’який графіт #15181C
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
04 · Синій графіт #1B2025
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
05 · Світліший сланець #252A30
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
06 · Теплий антрацит #211F1F
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
07 · Нейтральний антрацит #1C1D20
PANEM / PPC
UI Kit
Компоненти та правила інтерфейсу
Button · Кнопки
Варіанти, розміри та стани кнопок.
01 · Матриця варіантів і наповнення
| Варіант | Текст | Текст та іконка | Іконка | Вимкнено |
|---|---|---|---|---|
| Основна | ||||
| Другорядна | ||||
| Контурна | ||||
| Без фону | ||||
| Небезпечна дія | ||||
| Посилання |
02 · Розміри
03 · Наведення, натискання та фокус
Стан: Звичайний · Натискань: 0
Наведіть курсор, утримайте кнопку або перейдіть до неї через Tab і натисніть Space. Це справжні стани поточної кнопки PPC.
04 · Правила використання
Кнопка запускає дію. Кнопці лише з іконкою потрібна доступна назва. Окремий стан завантаження й остаточне оформлення інтерактивних станів: Треба узгодити.
Pill / SourceTag · Мітки
Pill виділяє короткий підпис; SourceTag позначає джерело. Ці елементи не є кнопками.
Card · Картки
Оболонка для заголовка й змісту. Два наявні розміри показані поруч.
Варіанти розміру
Стандартна
Мала
Правило використання
Картка групує пов’язану інформацію. Інтерактивний вибір усієї картки: Треба узгодити.
SectionHeader · Заголовок секції
Заголовок другого рівня з необов’язковим поясненням.
02 · Аналітика
Огляд кампаній
Демонстраційне пояснення розділу.
Skeleton · Завантаження
Наявна анімована заготовка для змісту, який ще завантажується.
Приклад композиції
KpiCard / KpiGrid · Показники
Значення показника, джерело та зміна за період.
Картки показників
Компактна картка показника
Вибір картки, її окремі стани помилки та завантаження: треба узгодити.
TrendBar · Смуги порівняння
Два періоди на спільній шкалі від 0 до 100%.
BarList · Списки та смуги
Підпис і значення передаються даними. Довжина смуги відображає нормалізований відсоток.
AdvisoryBox · Інформація
Пояснення до даних. Оформлення інших рівнів повідомлень потребує погодження.
SummaryGrid · Висновки
Нумерований список висновків.
Конверсії у прикладі зросли.
Вартість конверсії у прикладі знизилася.
DataTable · Таблиці
Реальна таблична оболонка PPC з демонстраційними рядками та порожнім результатом.
01 · Є дані
| Кампанія | Покази |
|---|---|
| Демо · кампанія А | 284 000 |
| Демо · кампанія Б | 86 400 |
02 · Порожній результат
| Кампанія | Покази |
|---|---|
| Демонстраційних кампаній немає. | |
03 · Інші стани
ComparisonTable · Порівняння показників
Спеціалізована композиція таблиці. Для довільних робочих списків використовуйте DataTable.
Звичайна щільність
| Показник | Жовтень | Вересень | До вересня |
|---|---|---|---|
| Конверсії | 320 | 280 | Зростання. Покращення. 14,3% |
| Вартість конверсіїЗниження вартості у цьому прикладі є покращенням. | 120 ₴ | 150 ₴ | Зниження. Покращення. 20% |
| ВитратиБез даних про план оцінку не визначено. | 38 400 ₴ | 42 000 ₴ | Зниження. Без оцінки. 8,6% |
HealthCard · Стан API
Усі чотири стани існуючого компонента. Це заздалегідь задані приклади, запитів до API тут немає.
Підключено
Немає з’єднання
Помилка відповіді
Потрібне налаштування
Токени дизайну
Єдині кольори, шрифти та відступи для всіх компонентів PPC.
Кольори
Макет і лінії
Зовнішнє компонування визначає сторінка. Компоненти займають доступну ширину свого контейнера.
- Максимальна ширина змісту: 1240 px, клас max-w-content.
- Межі: 1 px; роздільники таблиць: 2 px; акцентна смуга заголовка: 4 px.
- Картки мають прямі кути. Мітки мають радіус 2 px.
- Лівий зміст фіксований на широкому екрані; на вузькому відкривається кнопкою.
Іконки та ефекти
Lucide залишається основним набором. Нижче — анімовані іконки для дій і станів; наведіть курсор на іконку, щоб побачити ефект.
Lucide — поточні іконки
Беремо з lucide-animated
Активність
Стан системи
Перехід
Відкрити дані
Підтвердження
Успішна дія
Пошук
Знайти запис
Налаштування
Параметри
Потенційно можемо взяти
Сповіщення
Нові події
Зростання
Зміна метрик
Календар
Період звіту
Завантаження
Експорт даних
Skeleton має наявну анімацію завантаження. Додаткові тіні та декоративні анімації: треба узгодити.
Треба узгодити
Компоненти нижче ще не реалізовані. Перелік зберігає відкриті рішення без порожніх макетів.
- Input · Поле вводу
Введення одного значення: підпис, підказка, іконка та результат валідації.
Стани: Звичайний, Наведення, Фокус, Заповнений, Помилка, Успіх, Вимкнено.
- Textarea · Багаторядкове поле
Введення довгого тексту з підписом і підказкою.
Стани: Порожнє, Заповнене, Фокус, Помилка, Вимкнено.
- Checkbox · Прапорець
Незалежний вибір одного або кількох значень.
Стани: Не вибрано, Вибрано, Частково вибрано, Наведення, Фокус, Вимкнено.
- Radio · Одиночний вибір
Вибір одного варіанта у групі.
Стани: Не вибрано, Вибрано, Наведення, Фокус, Вимкнено.
- Switch · Перемикач
Увімкнення та вимкнення налаштування.
Стани: Вимкнений, Увімкнений, Наведення, Фокус, Недоступний.
- Select · Вибір зі списку
Поле вибору, відкритий список і його пункти.
Стани: Закритий, Відкритий, Вибраний пункт, Фокус, Помилка, Вимкнено.
- Dropdown · Меню дій
Список дій, який відкриває кнопка.
Стани: Закритий, Відкритий, Наведення на пункт, Фокус, Недоступний пункт.
- Modal · Діалогове вікно
Заголовок, зміст, дії та закриття діалогу. Потрібно визначити керування фокусом.
Стани: Звичайний, Небезпечна дія, Успіх, Попередження, Інформація.
- Notification · Повідомлення
Повідомлення про результат дії; спосіб показу й тривалість ще не визначені.
Стани: Інформація, Успіх, Попередження, Помилка, Закриття.
- Accordion · Розкривний блок
Заголовок із прихованим або відкритим змістом.
Стани: Закритий, Відкритий, Наведення, Фокус, Вимкнено.
- Tabs · Вкладки
Перемикання між пов’язаними панелями змісту.
Стани: Неактивна, Активна, Наведення, Фокус, Вимкнено.
- Rating · Оцінка
Є у Figma-прикладі. Потребу цього компонента для PPC також треба узгодити.
Стани: Без оцінки, З оцінкою, Наведення, Лише перегляд.
Правила використання
Каталог показує компоненти з того самого коду, який імпортують сторінки PPC.
- Спільне оформлення змінюється в компоненті або токені. Не копіюйте приклад разом із власними стилями на іншу сторінку.
- Демонстраційні дані й пояснення належать каталогу. Дані продукту передаються через props.
- Колір доповнює текст. Зростання й падіння не визначають автоматично покращення чи погіршення.
- Клавіатурна доступність наявних елементів зберігається. Нові візуальні стани, яких немає в погодженому дизайні, потребують узгодження.