Правило 60-30-10: баланс кольору в дизайні

Уперше правило 60-30-10 по-справжньому клацнуло для мене, коли я витріщався на дашборд, який сам зібрав і який виглядав перевантаженим у спосіб, що я не міг пояснити. Палітра була нормальною. Кольори були гармонійними, витягнутими прямо з кола. Але екран відчувався гучним, ніби всі в кімнаті говорять одночасно. Проблема була не в тому, які кольори я обрав. Вона була в тому, скільки кожного я використав.

Це розрізнення і є всім сенсом правила 60-30-10. Воно каже майже нічого про тон і майже все про пропорцію: приблизно 60% вашого дизайну — це домінантний колір, 30% — вторинний підтримуючий колір, а 10% — акцент. Зробіть ці співвідношення правильно — і навіть посередня палітра читатиметься як продумана. Зробіть їх неправильно — і найретельніше налаштована гармонія все одно відчуватиметься хаотичною.

Звідки взялося це правило

Правило 60-30-10 запозичили з дизайну інтер'єрів, де декоратори десятиліттями використовують його, щоб збалансувати кімнату. Класичний розклад: 60% іде на стіни, близько 30% — на оббивку й більші меблі, а фінальні 10% — на аксесуари: декоративну подушку, вазу, картину на стіні. Зайдіть у добре спроєктовану кімнату — і ви зазвичай не зможете сформулювати, чому вона відчувається спокійною, але пропорції тихо роблять свою роботу на задньому плані.

Стилісти моди використовують ту саму логіку (костюм, сорочка, нагрудна хустинка), і десь по дорозі вона перекочувала в графічний і вебдизайн. Медіум змінився; принцип — ні. Ви даєте кожному кольору визначену роль і визначену кількість простору, і баланс настає майже автоматично.

Як це лягає на UI- та вебдизайн

Ось переклад, яким я реально користуюся, коли сідаю будувати інтерфейс.

• 60% — домінантний колір. Це ваше полотно: фони сторінок, великі поверхні, порожній простір, на якому сидить ваш контент. Він задає загальний настрій і, що важливо, зазвичай це колір, якого люди не помічають. У більшості хороших інтерфейсів домінантний — це нейтраль: білий, кремовий, світло-сірий, а в темному режимі — майже-чорний на кшталт #0F1115. Нейтралі домінують, бо вони щедрі; вони дають іншим кольорам нести характер, не воюючи з ними.
• 30% — вторинний колір. Це акторський склад другого плану: картки, бічні панелі, навігаційні смуги, роздільники секцій, вторинні поверхні. Він забезпечує структуру й другий шар контрасту щодо домінантного, але ніколи не вимагає уваги. Думайте про нього як про меблі в кімнаті.
• 10% — акцентний колір. Ось де живе дія: головні кнопки, посилання, активні стани, бейджі, той єдиний ряд графіка, за яким ви хочете, щоб люди стежили. Це декоративна подушка. Уся причина, чому він працює, — це дефіцит.

Останній пункт — той, що його більшість пропускає, тож дозвольте сказати прямо. Акцент потужний не через колір. Він потужний, бо його так мало. Коли ваш синій з'являється лише на головній кнопці й активному пункті навігації, око користувача за дві секунди вчиться, що синій означає дій тут. Тієї миті, коли синій з'являється ще й на заголовках, іконках, межах трьох карток і градієнті фону, він перестає щось означати. Ви розтратили сигнал.

Розібраний приклад

Дозвольте зібрати справжній, щоб пропорції не були абстрактними. Скажімо, я проєктую SaaS-дашборд, відкриваю генератор палітр, обираю спокійний синій за базу й використовую гармонії монохроматичну й комплементарну, щоб витягнути підтримуючі тони.

• Домінантний (60%): #F7F8FA, майже-білий прохолодний сірий. Це фон сторінки й порожній простір усередині карток. Ви ледь його реєструєте, що рівно правильно.
• Вторинний (30%): #1E293B, глибокий сланцевий. Він несе верхню навігацію, бічну панель, заголовки й основний текст. Зверніть увагу, що «вторинний» не мусить бути яскравим кольором — тут це темний нейтраль, що робить важку структурну роботу. Разом із домінантним це вже завершений, придатний до використання інтерфейс.
• Акцентний (10%): #2563EB, упевнений синій, відведений для головного CTA, посилань і активного стану меню. Більше нічого його не отримує.

Прожену цей синій через чекер контрасту щодо білого фону — і ви комфортно за порогом WCAG AA у 4.5:1 для звичайного тексту, що варто підтвердити, бо акцент, який провалює контраст, — це акцент, який провалює свою єдину роботу. (Детальніше про це в Коефіцієнти контрасту WCAG: пояснення.) Вбудований чекер в інструменті позначить це для вас іще до випуску.

Що вражає більшість людей у цій палітрі — це як мало кольору вона насправді містить. Два нейтралі й один синій. Це правило 60-30-10, що працює як задумано — стриманість читається як полірування.

Чому пропорція б'є вибір тону

Я висуну дещо контраверсійне твердження: для інтерфейсу правильні пропорції важать більше за точно вгадані тони. Ви можете замінити мій акцент #2563EB на бірюзовий, фіолетовий чи теплий кораловий — і дизайн усе одно відчуватиметься зібраним, бо тримається структура. Але візьміть прекрасно підібрану, ідеально гармонійну трикольорову палітру й застосуйте її рівними третинами — і вона виглядатиме як дорожній знак.

Це звільняє, щойно ви це засвоїте. Це означає, що новачку не потрібне ідеальне око на колір — йому потрібна дисципліна щодо того, скільки кожного кольору розгортати. Оберіть будь-яку здорову гармонію (аналогова й спліт-комплементарна — обидві поблажливі відправні точки; див. Розуміння колірної гармонії в UI-дизайні про те, як обирати), потім призначте ролі й нормуйте акцент безжально.

Група Nielsen Norman робить споріднене зауваження у своїй роботі про використання кольору для покращення дизайну: колір найкраще несе значення, коли його використовують ощадно й послідовно. Розподіл 60-30-10, по суті, — це практичний рецепт для цієї ощадності.

Помилки, які я бачу найчастіше

Немає чіткого домінантного. Це проблема дашборда, з якої я почав. Три кольори майже рівної ваги, жоден із них чітко не полотно, і оку нема де відпочити. Виправлення: оберіть один колір (зазвичай нейтраль) і закріпіть за ним приблизно 60% поверхні, перш ніж розміщувати будь-що інше.

Надмірне використання акценту. Найпоширеніший провал із великим відривом. Акцент закрадається на заголовки, потім на іконки, потім на кілька меж — і за один пообідній час дизайн лишається без фокусної точки. Корисна перевірка чуттям: якщо ви можете швидко вказати на більш ніж кілька різних місць, де ваш акцент з'являється на даному екрані, ви, ймовірно, його перевитратили. Підтягніть його назад до справжніх інтерактивних моментів.

Сприйняття чисел як святого письма. Це співвідношення, а не вимірювання. Ніхто не рахує пікселі. 60-30-10 — це скорочення для «один домінантний, один підтримуючий, один рідкісний». Якщо ваш розподіл сідає ближче до 70-20-10 — нормально. Важить ієрархія, а не десяткові знаки.

Забуття, що правило масштабується рекурсивно. Усередині однієї картки ви можете прогнати ті самі пропорції знову — переважно поверхня, трохи структурної деталі, дрібка акценту. І правило чисто переходить у темний режим: ваші 60% просто стають темним нейтралем замість світлого, з акцентами, яким часто потрібна легка десатурація, щоб не світитися. Якщо ви рухаєтеся туди, Найкращі практики для палітр темного режиму копають у налаштування.

Перетворюємо це на повторюваний метод

Ось робочий процес, який я б передав молодшому дизайнеру.

• Спершу оберіть гармонію. Відкрийте колірне коло, виберіть базовий тон і згенеруйте споріднений набір — аналоговий для спокою, комплементарний для пробивності. Не перемудровуйте з точними hex поки що.
• Призначте домінантний. Визначте свої 60%. Дев'ять разів із десяти це нейтраль. Світлий за замовчуванням, темний для темного режиму.
• Призначте вторинний. Оберіть 30%, які дають структуру — часто другий нейтраль чи приглушена версія кольору бренду. Підтвердьте, що домінантний і вторинний наодинці складають робочий макет.
• Нормуйте акцент. Витягніть один яскравий колір для 10%. Перевірте його контраст щодо поверхонь, яких він торкатиметься. А потім бережіть його — щоразу, коли вас тягне перевикористати його, питайте, чи цей елемент справді інтерактивний.
• Перевірте, примруживши очі. Відступіть, розмийте погляд і подивіться на екран. Ви маєте бачити спокійне поле з однією-двома яскравими точками, що притягують ваш погляд. Якщо все мерехтить, ваш акцент протік.

Причина, чому це правило пережило стрибок із віталень у дашборди, в тому, що воно вирішує проблему, яку люди відчувають, перш ніж можуть її назвати. Колір у дизайні насправді не про смак — він про бюджет. Правило 60-30-10 — це просто розважливий спосіб його витратити. Якщо хочете протестувати набір тонів перед фіксацією, киньте їх у генератор палітр, перевірте контраст, а потім поставте складніше питання, на яке інструмент за вас не відповість: не чи це правильні кольори, а скільки кожного я збираюся використати.