Содержание
Правило 60-30-10 в UX — это универсальный принцип цветового баланса, согласно которому 60% интерфейса занимает доминирующий (основной) цвет, 30% — вторичный цвет для крупных блоков, и оставшиеся 10% — акцентный цвет для ключевых элементов (кнопок, ссылок, уведомлений). Это правило, заимствованное из классического дизайна интерьеров, позволяет создавать гармоничные, ненавязчивые и интуитивно понятные цифровые интерфейсы, где взгляд пользователя естественным образом притягивается к самым важным зонам.
Откуда взялось правило 60-30-10
Изначально правило 60-30-10 использовалось в интерьерном дизайне для создания визуально сбалансированных помещений: 60% — цвет стен, 30% — цвет мягкой мебели и штор, 10% — акценты (подушки, картины, вазы). В веб-дизайне и UX это правило начали активно применять с распространением плоского дизайна и минимализма, когда цвет стал главным инструментом управления вниманием пользователя. Оно оказалось настолько эффективным, что вошло в базовые гайдлайны многих крупных компаний, включая Google Material Design.
Как работает каждый из трёх компонентов
60% — основной цвет (фоновый)
Это доминанта, которая задаёт общее настроение интерфейса. Чаще всего это нейтральный, светлый или тёмный оттенок, который не раздражает глаза и служит «воздухом» для контента. Задача основного цвета — создать ощущение простора и чистоты, а также обеспечить комфортное чтение. В большинстве современных сайтов это белый, очень светлый серый (например, #F5F5F5) или тёмный фон для ночного режима. Ни в коем случае не используйте яркие или насыщенные цвета в качестве 60% — у пользователя быстро устанут глаза.
30% — вторичный цвет (структурный)
Это цвет для ключевых структурных элементов: шапки сайта, боковых панелей, карточек товаров, подвалов, навигационных меню. Вторичный цвет должен контрастировать с основным, но не перетягивать на себя всё внимание. Он создаёт иерархию: помогает глазу отделять один смысловой блок от другого. Типичный пример: на сайте с белым фоном (60%) вторичным цветом (30%) может быть светло-серый для карточек или тёмно-синий для верхнего меню.
10% — акцентный цвет (целевой)
Это «точка притяжения» — самый яркий, контрастный цвет, который используется дозированно, только для самых важных элементов интерфейса: кнопки «Купить», «Заказать звонок», «Подписаться», активные ссылки, уведомления, иконки корзины. Акцентный цвет должен резко выделяться на фоне первых двух. Его задача — направлять пользователя к целевому действию (CTA). Если акцентных цветов больше одного или их площадь превышает 10%, интерфейс становится «пёстрым», и пользователь не понимает, куда нажимать.
| Компонент | Процент | Пример в интерфейсе | Задача |
|---|---|---|---|
| Основной (фоновый) цвет | 60% | Белый или тёмный фон всей страницы | Обеспечить читаемость, воздух, спокойствие |
| Вторичный (структурный) цвет | 30% | Шапка сайта, карточки товаров, боковая панель | Создать иерархию блоков, отделить контент |
| Акцентный (целевой) цвет | 10% | Кнопка «Купить», ссылка, иконка корзины, активный пункт меню | Привлечь внимание к действию, повысить конверсию |
Почему это правило работает в UX
Человеческий мозг эволюционно настроен на поиск закономерностей и отличий. Если интерфейс состоит из одного цвета — он скучный и «слепой»: пользователь не понимает, куда смотреть. Если цветов слишком много и они равномерно распределены — мозг перегружается, возникает «визуальный шум», и пользователь покидает сайт. Правило 60-30-10 даёт оптимальный баланс: 90% интерфейса (фон + структура) нейтральны и предсказуемы, а 10% — яркое и заметное, но не раздражающее. Глаз автоматически фокусируется на акцентах, что увеличивает скорость принятия решения и конверсию.
Как применить правило 60-30-10 на практике
Даже если вы не профессиональный дизайнер, вы можете использовать этот принцип при создании сайта или лендинга. Вот пошаговая инструкция:
- Выберите основной цвет. Начните с нейтрального: белый, очень светлый серый, кремовый. Если сайт развлекательный — можно тёмный фон (чёрный, тёмно-синий).
- Подберите вторичный цвет. Он должен отличаться от основного, но не кричать. Например, для белого фона (60%) возьмите светло-серый (#F0F0F0) или умеренно тёмный цвет бренда, но в спокойной тональности.
- Выделите акцентный цвет. Это самый яркий цвет вашего бренда: оранжевый, красный, ярко-зелёный, насыщенный синий. Используйте его строго для кнопок, активных ссылок, значков корзины и небольших иконок.
- Проверьте контрастность. Акцентный цвет должен хорошо читаться на основном и вторичном фонах. Используйте онлайн-инструменты (WebAIM Contrast Checker).
- Не превышайте 10% для акцентов. Если кажется, что акцентного цвета мало — скорее всего, вы всё делаете правильно. Лучше меньше, да лучше.
Пример из реального UX
Возьмём популярный интернет-магазин. Основной цвет (60%) — белый фон, чтобы товары и тексты читались легко. Вторичный цвет (30%) — серый для карточек товаров и бледно-голубая шапка сайта. Акцентный цвет (10%) — ярко-жёлтая кнопка «В корзину» и красный значок уведомлений. Пользователь заходит на сайт, его взгляд не цепляется за фон, скользит по серым карточкам, и ярко-жёлтые кнопки мгновенно привлекают внимание к покупке. Это и есть идеальная работа правила 60-30-10.
Когда правило можно нарушать
Правило 60-30-10 — это не догма, а эвристика. Его можно нарушать, если у вас есть веские причины. Например:
- Монохромный интерфейс (один цвет в разных оттенках) — тогда акцент создаётся не цветом, а тенью или жирностью шрифта.
- Брендовый дизайн с жёсткими цветовыми ограничениями (например, у компании только два корпоративных цвета, и третий взять неоткуда).
- Игровые и развлекательные интерфейсы — там допустимо больше яркости и пестроты.
Но для 90% коммерческих сайтов, лендингов и приложений правило 60-30-10 остаётся золотым стандартом, который проверен тысячами A/B-тестов.
Правило 60-30-10 в UX — это простой и мощный инструмент для создания интерфейсов, которые не раздражают, направляют пользователя и повышают конверсию. Начните применять его уже при создании следующего макета — и вы заметите, как улучшится восприятие вашего продукта.
