Связь читается расстоянием
Близость — ответ на второй вопрос: что с чем связано. И правило у неё одно и жёсткое: человек читает связь расстоянием, а не смыслом.
| Что сделано | Что понимает человек |
|---|---|
| подпись вплотную к своей картинке | подпись относится к этой картинке |
| подпись посередине между двумя | относится к любой из них |
| подпись ближе к чужой картинке | относится к чужой |
Третья строка — не преувеличение. Человек не рассуждает, он смотрит: если подпись физически ближе к соседней картинке, он свяжет её с соседней, даже когда из текста очевидно обратное. Он заметит ошибку через секунду, когда прочтёт, — но эта секунда и есть та цена, которую платят за плохую группировку.
Второе, что стоит знать: близость сильнее почти всего остального. Она перебивает цвет, рамку и подпись. Блок, обведённый рамкой, но стоящий вплотную к соседнему, всё равно читается вместе с ним; два блока одного цвета, разведённые на полстраницы, читаются как разные. Поэтому группировку чинят расстоянием, а не украшением.
И третье, самое практичное: группа — это то, что стоит тесно. Не то, что названо одним заголовком, не то, что подкрашено одинаково, а то, между чем меньше пустоты, чем вокруг. Если между заголовком и его текстом такой же зазор, как между этим текстом и следующим заголовком, — групп на странице нет вовсе, есть ровный столбик строк.
Сколько именно
Второе — сколько именно. Группы создаются разницей расстояний, и разница эта должна быть заметной.
| Где | Сколько | Почему |
|---|---|---|
| внутри группы | маленький зазор | элементы читаются как одно |
| между группами | в два-три раза больше | видна граница |
| вокруг всего блока | ещё больше | блок отделён от соседей |
Ключевое число здесь — в два-три раза, а не в полтора. Разница в полтора раза не читается как граница: человек видит, что «тут чуть просторнее», и не понимает, задумано это или случайность. Ровно та же арифметика, что у размеров заголовков, и по той же причине.
Второе правило — расстояний должно быть мало. Не «подобранные под каждый случай», а три-четыре значения на весь макет: маленькое, среднее, большое. Когда отступов двенадцать разных, человек перестаёт различать уровни вложенности, и группировка исчезает при формально правильных расстояниях.
И следствие, которое пригодится на любом инструменте: отступы удобно строить от одного числа. Взять восемь и пользоваться 8, 16, 24, 32 — это не педантизм, а способ не думать: любые два отступа из такого набора различаются заметно, и «почти одинаковых» среди них не бывает по построению. Подробнее об этом — в уроке про сетку и модуль.
Когда групп много
Третье — что делать, когда групп много. Правило близости легко применить к трём блокам и трудно — к списку из сорока строк.
| Приём | Когда | Что даёт |
|---|---|---|
| разбить на группы по 3–7 | длинный список | человек видит куски, а не поток |
| вложенность двумя уровнями | разделы и подразделы | видно, что к чему относится |
| общее поле вокруг группы | карточка, врезка | группа отделена от фона |
| разделитель | когда пустоты не хватает | крайняя мера, а не первая |
Первый приём — про число элементов. Список из сорока строк подряд человек не читает: он теряет место после десятой. Разбитый на группы по пять-семь, он читается кусками, и после каждого куска можно остановиться. Число «три-семь» не магическое, оно просто про то, сколько человек удерживает в голове разом.
Второй — про вложенность. Уровней тут, как и у важности, должно быть немного: два, редко три. Каждый следующий уровень отличается отступом, и отступы эти берутся из того же набора — иначе третий уровень окажется неотличим от второго.
А разделитель — линия между блоками — стоит последним в списке нарочно. Он честно работает, но занимает место, добавляет ещё один контур и часто ставится там, где хватило бы пустоты. Правило: сначала попробуйте увеличить зазор; линию рисуйте, когда зазор уже большой, а граница всё ещё не видна.