Правило 60-30-10 — это один из самых простых и эффективных способов создать гармоничную цветовую палитру в UX/UI-дизайне. Этот принцип помогает правильно распределить цвета в интерфейсе, выстроить визуальную иерархию и сделать дизайн более сбалансированным. Несмотря на простоту, правило 60-30-10 активно используется как в веб-дизайне, так и в продуктовых интерфейсах.
Суть правила заключается в распределении цветов по пропорции: 60% — доминирующий цвет, 30% — вторичный и 10% — акцентный. Такой подход помогает направлять внимание пользователя и избегать визуального шума. В этом материале разберём, как работает правило 60-30-10 в интерфейсах и как применять его на практике.
Как это работает:
- 60 % цветовой палитры занимает основной цвет, который задает общий тон и делает дизайн целостным.
- 30 % отводится вторичному цвету, который поддерживает основной, создавая контраст и визуальный интерес.
- Оставшиеся 10 % предназначены для акцентного цвета, который выделяет важные элементы и привлекает внимание.
В UI-дизайне правило 60-30-10 помогает выстраивать понятную цветовую иерархию интерфейса.
Если вы хотите глубже разобраться в работе цвета в интерфейсах, рекомендуем изучить материал про психологию цвета в UX/UI, а также полный гайд по цвету в дизайне сайтов и приложений. Дополнительно будет полезна статья про форматы кодирования цвета в интерфейсах.
Два способа применения правила 60–30–10
1. Классический подход
- 60 % — основной цвет, формирующий визуальный стиль интерфейса.
- 30 % — вторичный цвет, используемый на меньших участках для контраста и баланса.
- 10 % — акцентный цвет, выделяющий ключевые элементы, например кнопки призыва к действию или уведомления.
2. Гибкий подход
Если вторичный цвет является нейтральным и создает сильный контраст с основным, их можно поменять местами:
- Вторичный цвет становится основным и занимает 60 % интерфейса, создавая чистый и сбалансированный фон.
- Первоначальный основной цвет теперь занимает 30 %, оставаясь заметным и сохраняя идентичность бренда.
- 10 % по-прежнему отводится акцентному цвету для выделения интерактивных элементов.
Этот метод помогает создать чистый и гармоничный интерфейс, при этом основной брендовый цвет остается узнаваемым, даже если занимает меньше пространства.
Правильное распределение цветов по правилу 60-30-10 снижает визуальную перегрузку интерфейса.
- 60 % — вторичный цвет в качестве фона, обеспечивающий целостность дизайна.
- 30 % — основной цвет для ключевых элементов, таких как карточки, иконки, навигация.
- 10 % — акцентный цвет для выделения кнопок и важных деталей.
Практическое применение
При использовании правила 60–30–10 не нужно точно измерять процентное соотношение цветов. Важно просто соблюдать общий баланс, чтобы интерфейс выглядел гармонично.
Надеюсь, эта статья поможет вам создавать эстетичные и удобные пользовательские интерфейсы.
При создании цветовой палитры сайта правило 60-30-10 остаётся надёжной отправной точкой.
Освоение правила 60-30-10 — базовый навык современного UX/UI-дизайнера.
Часто задаваемые вопросы по теме
Что такое правило 60-30-10 в дизайне?
Правило 60-30-10 — это принцип распределения цветов, при котором:
60% занимает основной цвет
30% — дополнительный
10% — акцент
Такое соотношение помогает создать сбалансированный и читаемый интерфейс.
Зачем использовать правило 60-30-10 в UI?
Оно помогает:
выстроить визуальную иерархию
снизить визуальный шум
выделить важные элементы
улучшить читаемость интерфейса
Метод направляет взгляд пользователя и делает интерфейс более понятным.
Можно ли нарушать правило 60-30-10?
Да. Это не жёсткое правило, а ориентир. В некоторых проектах пропорции могут немного отличаться, если этого требует дизайн-задача.
Какой цвет должен быть акцентным?
Обычно акцентный цвет (10%) — самый контрастный и заметный. Его часто используют для:
CTA-кнопок
ссылок
важных индикаторов
Подходит ли правило 60-30-10 для тёмной темы?
Подходит ли правило 60-30-10 для тёмной темы?
