Цветовая палитра в духе Slack
Палитра в духе Slack - яркий, дружелюбный вид чат-приложения: белая область сообщений, глубокая фиолетовая боковая панель и зелёный акцент для статуса «в сети» и позитивных действий.
Посмотрите, как палитра в духе Slack выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Slack?
Командным чатам нужна цветовая система, которая остаётся читаемой сквозь сотни коротких сообщений в день, но при этом ощущается тёплой и дружелюбной, а не клинической. Частый приём - дать основной области навигации (боковой панели каналов) отдельный, часто глубокий насыщенный цвет, а сам контент сообщений оставить на простом белом или почти белом фоне для максимальной читаемости.
Этот мокап - цветная боковая панель каналов рядом с белой лентой сообщений - заимствует этот подход с разделением цвета, плюс зелёный акцент, зарезервированный для присутствия и статуса, чтобы показать, как палитра держится в быстро прокручиваемом интерфейсе переписки. Это оригинальный макет в этом духе, а не копия реальной брендовой системы какого-либо конкретного чат-продукта.
Ключевые визуальные характеристики
- Явно окрашенная (часто глубокого фиолетового) боковая панель, чётко отделённая от белой области сообщений
- Маленькие круглые аватары рядом с каждым сообщением для быстрого узнавания автора
- Зелёная точка или бейдж, последовательно используемые для статуса «в сети» или активности
- Панель ввода сообщения, закреплённая внизу экрана
- Названия каналов и счётчики непрочитанного в виде компактных элементов списка на боковой панели
Цветовые характеристики
- Один глубокий, насыщенный цвет, зарезервированный для боковой панели навигации - отдельно от области сообщений
- Простой белый или почти белый фон для самого контента сообщений, для максимальной читаемости
- Отдельный зелёный акцент для присутствия/статуса, отдельно от основного цвета боковой панели
Типографика
- Дружелюбный, скруглённый шрифт без засечек для имён пользователей и текста сообщений
- Жирное начертание зарезервировано для имён пользователей, тексты сообщений остаются обычной насыщенности
- Мелкий текст времени в приглушённом вторичном цвете рядом с каждым сообщением
UI-паттерны
- Цветная боковая панель со списком каналов и личных сообщений
- Белая лента сообщений с аватаром, именем пользователя и временем у каждого сообщения
- Панель ввода сообщения, закреплённая внизу экрана
- Маленькие статусные точки или бейджи поверх аватаров
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Slack?
Глубокий насыщенный цвет (часто фиолетовый) для боковой панели каналов, простая белая область сообщений для читаемости и зелёный акцент, зарезервированный именно для индикаторов «в сети»/статуса.
Это официальные цвета бренда Slack?
Нет - это оригинальный макет, вдохновлённый общим видом командных чат-приложений вроде Slack, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Зачем использовать разный цвет для боковой панели и области сообщений?
Это помогает мгновенно ориентироваться между «навигацией» и «контентом», а сам разговор остаётся на нейтральном фоне, так что текст сообщений и аватары легко читаются весь день.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Slack, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Slack вместо цветов по умолчанию.