Структура для создания гармоничной системы интервалов

Правило для контейнеров

Контейнеры представляют собой фреймы в пользовательском интерфейсе, которые содержат контент. Обычно это: страницы, карточки, модальные окна и т. д. Поскольку контейнеры находятся на самом высоком уровне иерархии, они получают наибольшие значения расстояния (16 пикселей в примере).

Правило для контента

Контент находится внутри контейнера. Он содержит:

  • Заголовки (h1, h2, h3, h4, h5)
  • В перемежку с данными в виде абзацев, списков, форм, таблиц.

Весь этот контент складывается вертикально с использованием полей.

Вычисление интерлиньяжа line-heaght:

  • Начнем с h1 и поэкспериментировать с различными параметрами расстояния, начиная с (0px), 2px, 4px, 8px. Пример с  48px и отступом 4px выглядит очень хорошо.
  • Затем h2. Обычно h2 является первым заголовком в контейнере. Таким образом, по правилам для контейнеров верхний h2 получил 16 пикселей в верхней части. Нужно дать 16px-интервал (максимально допустимый интервал) вверху всех h2 (как на 2 примере).
  • Затем поэкспериментируем с интервальными значениями 0px, 2px, 4px и 8px между всеми заголовками (h2, h3, h4, h5) и включая списки, абзацы, таблицы, формы. Промежуточные результаты 2px и 4px оказались достаточно хорошими вариантами, но поля 2px немного лучше. Постарайтесь придерживаться только одного значения отступов, так как это упрощает дизайн, а также процесс разработки.

Интервал между элементами списка

Список представляет собой структуру данных, состоящую из нескольких элементов однородных данных. Поскольку список группирует все эти однородные элементы данных , важно, чтобы элементы списка имели не слишком больше отступы друг от друга. В то же время элементы списка все же должны быть немного отделены друг от друга. Итак, эксперимент с интервалом между 0px и 16px. У меня было всего 3 значения для экспериментов — 2,4,8. 4px между элементами списка выглядели лучше всего для постоения иерархии.

Интервал между двумя последовательными полями ввода с метками

Формы имеют последовательные поля ввода, расположенные друг над другом. 2 вариант выглядит лучше всего.

Интервал между двумя последовательными полями ввода без меток

Отсутствие меток не является хорошей практикой для доступности интерфейса. Тем не менее, в некоторых ситуациях кажется, что лучше не отображать метки в пользовательском интерфейсе (но продолжать объявлять метки в реализации, чтобы обеспечить доступность и скрыть их на экране, используя огромные поля). Сценарии:

  • Когда несколько полей ввода вместе подразумевают 1 объект (например, в разделе «Адрес» ниже группа полей: адрес улицы 1, адрес улицы 2, город, область, почтовый индекс)
  • Когда ярлык слишком очевиден / повторяется, чтобы быть прописанным (например, панель поиска)

В таких ситуациях, в зависимости от того, используете ли вы легенду или нет, выполняется разный интервал. Поскольку группа полей для обозначения 1 объекта, используется меньшее расстояние (8 пикселей). Однако, когда вы не хотите логически группировать поля ввода как 1 объект, большее расстояние помогает (16 пикселей).

Интервал между таблицами

Таблицы очень полезны для группировки данных подобного типа — точно так же, как списки. Однако таблицы используются, когда данные намного более плотные и имеют много атрибутов. Если данные расположены слишком близко друг от друга, может быть трудно прочитать всю строку таблицы, не отвлекаясь на смежные данные строки. Имея 8px между таблицей текста и границами строк таблицы, мы получаем в общей сложности 16px интервал между текстом через 2 строки.

Правило для компонентов

Компоненты — это кнопки, поля ввода, значки и т. д. Эти компоненты часто размещаются рядом друг с другом по горизонтали (встроенные). Также все компоненты были с размерами равными 4 (также 8). Таким образом, кнопки и поля ввода имели внутреннее пространство высотой 24px (и вместе с нижней границей 1px и 1 px, общая высота была 26px). Когда отдельные компоненты и тип идеально подходят к базовой сетке и пропорционально распределены друг от друга, общая компоновка идеально согласована и гармонична.

Расстояние между двумя компонентами

Здесь простое правило, 8px для промежутка между любыми 2 смежными компонентами. В некоторых случаях использовалось 4px, чтобы показать более плотную взаимосвязь между двумя компонентами (закон близости Гештальт психологии).

Интервал между компонентами

По 8px для левой/правой стороны внутри компонентов.

Интервал между компонентами с иконками

Еще раз — применив закон близости Гештальт, сгруппируем значки внутри компонента, разделив их на 4 пикселя — вместо 8px.

Разметка компонентов и внешних значков

Если значок связан с компонентом, отступ от него будет на 4 пикселя от компонента, чтобы показать связь ассоциации (принцип близости Гештальта). Однако, если значок связан с набором компонентов, то он отстоит от 8px от последнего компонента, чтобы уточнить, что он не связан только с последним компонентом, а с полным набором.

Мини введение в Гештальт психологию. 

03.09.2017


Предыдущий пост

Следующий пост