Иерархия и отступы — Примеры

Пример 1 — Назовите, что подтверждение говорит первым

Коллега сверстал подтверждение заказа как четыре пункта, все в 16px, поэтому взгляду не за что зацепиться. Ниже — эскиз текущего экрана; решите, какой элемент пользователь должен увидеть первым, и перестройте ранги остальных так, чтобы каждый шаг вниз был заметен.

Заказ подтверждён             16px
Доставка вт 14 мая            16px
Заказ №48213 · £86.50         16px
Вернуться к заказам           16px

Решение

«Ваш заказ подтверждён»       24px, самый жирный
«Доставка вт 14 мая»          17px, высокий контраст
Заказ №48213 · £86.50         13px, низкий контраст
Вернуться к заказам           текстовая ссылка, а не кнопка

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

Пример 2 — Переложите карточку на шкалу отступов

В карточке ниже промежутки выбраны на глаз: 6, 14 и 27 пикселей, хотя задуманы группы «подпись со значением», «кнопка со значением» и «карточка с разделом». Переложите её на шкалу из четырёх шагов, не меняя ни цвет, ни размер шрифта.

Карточка
  «Адрес доставки»            6px снизу
  «Уиллоу-роуд, 24»           14px снизу
  [ Изменить ]                27px снизу
Следующий раздел

Решение

Карточка
  «Адрес доставки»            4 снизу
  «Уиллоу-роуд, 24»           одна группа с подписью
  [ Изменить ]                8 снизу
Следующий раздел              40 снизу

Теперь каждый промежуток берётся из 4, 8, 16 или 40, поэтому адрес стоит вместе со своей подписью, а кнопка — с адресом: так, как экран и имеет в виду. Произвольные значения и заставляют страницу казаться почти выровненной — каждое по отдельности можно оправдать, однако вместе они читаются как сползание; шкала же делает повторение незаметным, а группировку намеренной.