2learn

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

Что это такое

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

Почему это важно

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

Ключевые идеи

Одно главное на экран

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

Экран: подтверждение заказа
1-е  «Ваш заказ подтверждён»    самый крупный текст на странице
2-е  дата доставки              на шаг меньше, высокий контраст
3-е  номер заказа и сумма       мелко, низкий контраст, но можно выделить
4-е  «Вернуться к заказам»      ссылка, а не кнопка

Используйте шкалу отступов, а не произвольные числа

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

4    между подписью и её значением
8    между связанными элементами управления
16   между группами внутри карточки
40   между разделами страницы

Близость заявляет отношение

Пространство читается как смысл, ведь ближние вещи принадлежат друг другу: сдвиньте подпись на 4 пикселя от её поля вместо 16 — и она станет указанием для всей карточки.

Выравнивайте по одному краю и держите его

Выберите левый край содержимого и держите его для каждого элемента вниз по странице: блок, отстоящий на 3 пикселя левее, читается как ошибка, хотя никто не может объяснить почему.

Повторяйте образец, а не изобретайте для каждого экрана

Если третья карточка свёрстана не так, как первые две, пользователь не выучит ничего из первых двух, поэтому постоянство структуры внутри одного типа страниц и делает страницу просматриваемой.

Практика

Проранжируйте один экран за пять секунд

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

Готово, когда: они первым называют задуманный главный элемент, либо вы его увеличили или уменьшили всё вокруг него.

Переразложите одну карточку, не меняя больше ничего

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

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

Частые ошибки

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

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.