Правило 60-30-10

Экран делится по площади на три части:

• 60 % — основа: главное содержимое, ради которого экран открыли;
• 30 % — поддержка: вторая по важности часть, она дополняет основу и не спорит с ней;
• 10 % — акцент: главное действие или то, что нужно заметить первым.

Равные части спорят между собой: непонятно, с чего начать. Неравные сразу показывают, что главное, что второстепенное и где действие.

Крупный акцентный элемент — карта, баннер, большая карточка — это доминанта экрана. Она занимает одну из крупных долей целиком: 30 или 60 % экрана.

Чтобы доминанта читалась как главное, ей нужно не меньше 30 % площади. Мельче — и она теряется среди остальных блоков.

Акцент выделяется, только когда его немного — примерно десятая часть экрана. Стоит акцентов стать несколько, и ни один из них уже не бросается в глаза.

Правило пришло из дизайна интерьеров и в исходном виде описывает цвет: 60% площади — основной цвет, 30% — дополнительный, 10% — акцентный.

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