Другие файлы cookie можно настроить.
Урок 2: Иерархия: управляем взглядом зрителя
Почему одинаковый текст ломает мозг
На прошлом уровне стало понятно, как выделить один главный элемент контрастом. Но что делать, если на экране сразу три разные мысли?
Люди в интернете не читают весь текст подряд — они сканируют экран глазами за пару секунд. Когда все строчки написаны одним размером, взгляд теряется.
Правило игры: Босс, Офицер и Крип
Визуальная иерархия устроена точно так же, как враги в компьютерной игре: по размеру сразу понятно, кто здесь самый важный.
Самый крупный и жирный. Первым забирает внимание и отвечает на вопрос «Что это?»
Средний размер. Держит важную выгоду: цену, дату или класс персонажа.
Мелкий и спокойный. Нужен для подробностей, которые читают в последнюю очередь.
В каком порядке глаз зрителя считывает эти уровни?
Сборка карточки персонажа
Сейчас в карточке героя все три строчки одного размера — получилась скучная каша. Задача: выставить правильный размер для каждого этажа информации.
Когда две кнопки кричат одновременно
Иерархия работает не только в тексте, но и в кнопках. Если на экране два действия — одно обязательно должно уступить дорогу главному.
Посмотрим на окно покупки в игре. Сейчас обе кнопки («Забрать награду» и «Отмена») одинаково яркие. Из-за этого игрок может случайно нажать на отмену и потерять приз.
Афиша стрима и иерархия в нейросетях
Задача: выбрать макет анонса, в котором с первого взгляда считывается название события, затем время и только потом детали.
[1. Главный герой]: крупный кибер-дракон на переднем плане в фокусе,
[2. Второстепенный фон]: размытый ночной город вдалеке, минимализм, без мелкого шума
Суперсила иерархии активирована!
Иерархия строит чёткую очередь чтения: сначала крупный Босс-заголовок, затем средний подзаголовок и в конце — мелкие детали.