Руководство по модулю «Дополнительные настройки. Личный кабинет. Тема»
Добро пожаловать в подробное руководство по использованию модуля «Цвета интерфейса»!
Описание модуля
Модуль «Цвета интерфейса» (Тема) предназначен для настройки цветового оформления клиентского портала (личного кабинета пациента). С его помощью администратор системы может задавать фирменные цвета медицинской организации, которые будут использоваться в оформлении всех страниц личного кабинета.
В отличие от модулей «Организации», «Филиалы», «Структурные подразделения» и «Страницы», которые управляют структурой и доступностью функционала, модуль «Тема» отвечает исключительно за визуальное оформление — цвета кнопок, ссылок, статусов, уведомлений и других элементов интерфейса.
Корректная настройка этого модуля позволяет создать единый фирменный стиль клиники в цифровой среде, повысить узнаваемость бренда и обеспечить комфортное визуальное взаимодействие пациентов с личным кабинетом.
Структура страницы модуля
Интерфейс модуля представляет собой список цветовых переменных, каждая из которых имеет:
- Визуальный образец цвета — цветной квадрат, демонстрирующий текущий цвет.
- Название цвета — например, «Основной», «Дополнительный», «Успех» и т.д.
- Описание назначения — для каких элементов интерфейса используется данный цвет.
- Примеры применения — демонстрация кнопок или элементов в выбранном цвете.
- Шкала оттенков — линейка от светлого к тёмному с выделением основного цвета.
- Кнопка «Изменить» — для выбора нового цвета.
Кнопки управления
Кнопки управления обеспечивают выполнение ключевых функций модуля:
- Сохранить — сохраняет все внесённые изменения цветовой схемы. Рекомендуется нажимать после выбора всех цветов.
- Изменить (в карточке каждого цвета) — открывает палитру для выбора нового цвета. После выбора цвета автоматически генерируется шкала оттенков.
Доступные цветовые переменные
В модуле представлены следующие цветовые переменные для настройки клиентского портала:
| Цветовая переменная | Описание | Элементы интерфейса |
|---|---|---|
| Основной | Главный цвет бренда. Кнопки, ссылки и активные элементы — то, что бросается в глаза первым. | Кнопка «Записаться», активные ссылки, иконки, выделение выбранных элементов. |
| Дополнительный | Второстепенные элементы: иконки, рамки, неактивные состояния. | Иконки навигации, границы полей ввода, второстепенные кнопки. |
| Успех | Успешное сохранение, подтверждение записи, зелёные статусы. | Уведомления об успешной записи, статус «Подтверждено», зелёные индикаторы. |
| Информация | Подсказки, информационные плашки и нейтральные уведомления. | Информационные баннеры, всплывающие подсказки, справочная информация. |
| Помощь | Вспомогательные подсказки, обучающие элементы и пояснения. | Обучающие туры, подсказки-помощники, раздел «Как это работает». |
| Предупреждение | Важные предупреждения, истекающие сроки, жёлтые статусы. | Уведомления о скором приёме, предупреждения о заполнении данных. |
| Опасность | Удаление, ошибки, необратимые действия — всё что требует осторожности. | Кнопка «Удалить», сообщения об ошибках, статус «Отменено». |
Шкала оттенков
Для каждого выбранного цвета система автоматически генерирует шкалу оттенков — от самого светлого до самого тёмного. Шкала содержит 11 оттенков, где 7-й оттенок (отмеченный рамкой) является основным выбранным цветом.
- Светлые оттенки (1–6) используются для фонов, неактивных состояний и второстепенных элементов.
- Основной цвет (7) используется для основных активных элементов.
- Тёмные оттенки (8–11) используются для наведения курсора (hover), теней и акцентов.
Кому полезен модуль
- Руководителям и владельцам клиник: Для создания единого фирменного стиля в цифровой среде и повышения узнаваемости бренда.
- Маркетологам и дизайнерам: Для реализации корпоративных цветов в клиентском портале без привлечения разработчиков.
- IT-специалистам и администраторам: Для быстрой настройки визуального оформления личного кабинета.
- Пациентам (косвенно): Комфортная и привычная цветовая гамма снижает когнитивную нагрузку и повышает доверие к клинике.
Рекомендации по использованию
- Используйте фирменные цвета клиники. Основной цвет должен совпадать с цветом логотипа и основным цветом сайта для создания единого визуального образа.
- Соблюдайте цветовой контраст. Убедитесь, что текст на цветных кнопках остаётся читаемым (обычно белый или тёмно-серый).
- Не перегружайте интерфейс. Используйте основной цвет дозированно — только для ключевых элементов, чтобы не создавать «цветовой шум».
- Проверяйте все состояния. После смены цветов убедитесь, что корректно отображаются состояния кнопок (наведение, нажатие, неактивное состояние).
- Используйте семантические цвета по назначению. «Успех» должен быть зелёным, «Опасность» — красным, «Предупреждение» — жёлтым. Пациенты привыкли к этой семантике, и её нарушение может вызвать путаницу.
- Тестируйте на мобильных устройствах. Цвета могут выглядеть по-разному на разных экранах, особенно яркие и светлые оттенки.
Преимущества модуля
- Брендирование: Возможность настроить клиентский портал в фирменных цветах медицинской организации.
- Гибкость: Отдельная настройка каждого семантического цвета (успех, предупреждение, опасность и т.д.).
- Автоматическая генерация оттенков: Система сама создаёт палитру из 11 оттенков на основе выбранного цвета.
- Визуальный контроль: Реальное отображение примеров кнопок и элементов в выбранных цветах.
- Простота: Интуитивно понятный интерфейс выбора цвета не требует специальных знаний.
- Мгновенное применение: После сохранения изменения сразу становятся видны всем пациентам в личном кабинете.
Заключение
Модуль «Цвета интерфейса» (Тема) является важным инструментом для визуальной настройки клиентского портала. Он позволяет создать единое фирменное оформление личного кабинета пациента, повысить узнаваемость бренда и обеспечить комфортное взаимодействие с интерфейсом.