60/30/10: цветовое соотношение для исправления некрасивых интерфейсов

Как балансировать цвета в интерфейсе

Твой интерфейс некрасив? К сожалению, это так, если в нём нет соотношения цветов 60/30/10. Без этого баланса пользователи не воспримут приложение как интуитивное. Мало того — ты не сможешь обосновать высокую цену за него. Некрасивые интерфейсы в итоге обходятся дороже, чем кажется.

Использование основного цвета везде

Например, это приложение имеет очень слабую эстетику, потому что не следует соотношению 60/30/10:

60% — нейтральные цвета для пространства
30% — основной цвет для идентичности
10% — акцентный цвет для действий

Основной цвет интерфейса — тёмно-синий, и он должен занимать 30% дизайна. Однако в этом приложении он занимает 60% — вдвое больше нормы. Нейтральные цвета составляют лишь 40% интерфейса, тогда как должны занимать 60%. Вдобавок в дизайне нет акцентного цвета.

Большинство дизайнеров склонны злоупотреблять основным цветом, стремясь создать сильную фирменную идентичность. Однако для этого достаточно применить его к 30% дизайна. Любое превышение может на самом деле ослабить фирменную идентичность — ты разбавляешь сигнал и превращаешь его в фоновый шум. Иными словами, переполнение интерфейса основным цветом разрушает соотношение сигнала к шуму. Цвет воспринимается как важный только тогда, когда он контрастирует с окружением. Эффект Ресторфф подтверждает эту идею: мозг автоматически запоминает элементы, которые визуально выделяются на фоне окружения.

Использование акцентного цвета как декорации

Важно также иметь акцентный цвет, отличный от основного фирменного. Это должен быть значительно более яркий цвет, привлекающий внимание пользователей к интерактивным элементам — кнопкам призыва к действию и индикаторам состояния.

Ещё одна ошибка дизайнеров — использование акцентного цвета как декорации. В примере видно, как акцентный цвет занимает 20% интерфейса, тогда как должен занимать только 10%. Дизайнер намеревался использовать акцентный цвет для визуальной привлекательности, но теперь он потерял направленность. Акцентный цвет больше не эффективно направляет пользователей к действиям и не помогает распознавать интерактивные элементы. При чрезмерном использовании он превращается из полезного сигнала в отвлекающий шум — и интерфейс становится сложнее в использовании.

Слишком много нейтральных цветов

Ещё одна распространённая проблема — когда дизайнеры злоупотребляют нейтральными цветами. В этом дизайне 90% нейтральных цветов, тогда как должно быть только 60%. Избыток нейтральных цветов ослабляет сигнал акцентного и основного цветов. Пользователи оказываются в плоском, скучном и пустом пространстве без фокуса и контраста.

Можно объяснить это иначе: слишком много нейтральных цветов создаёт конкурирующие фоны без какой-либо фигуры. Взгляду некуда идти — он останавливается в пустом пространстве в ожидании сигнала, который так и не приходит. Нет фирменной идентичности, нет действия, нет точки ориентации. Опыт проходит сквозь пользователя, не оставляя впечатления.

Идеальное цветовое соотношение (60/30/10)

Идеальное цветовое соотношение демонстрирует фирменную идентичность, направляет внимание к действиям и эффективно использует пространство. В нём правильный баланс между фигурой и фоном, между сигналом и шумом.

Обрати внимание, как 10% акцентного цвета выделяют основную кнопку призыва к действию и индикаторы состояния в боковом меню и вкладках. Акцентный цвет больше не используется как декорация — он служит конкретной цели: направлять пользователей к действиям и взаимодействиям.

Посмотри, как 30% основного цвета формируют фирменную идентичность, не перегружая пользователей. Он применён только к боковому меню и заголовочному тексту — этого достаточно, чтобы пользователи ассоциировали цвет с приложением. Цвет также достаточно тёмный, чтобы отображать высококонтрастный текст в доступном виде.

60% нейтральных цветов обеспечивают нужное количество пространства, в котором элементы интерфейса существуют и дышат. Пространство не ощущается ни переполненным, ни пустым — оно даёт пользователям возможность сосредоточиться на задачах без отвлекающих факторов. Такая эстетика делает приложение ощутимо премиальным, потому что каждый цвет используется осознанно. Ничто не выглядит незавершённым или случайным.