В следующих курсах по веб-дизайну мы будем всё больше фокусироваться на вопросах пользовательского опыта, дизайна и типографики. А сегодня в этом базовом курсе рассмотрим одно из главных и простых правил: правило близости. В английском его обычно называют principle of proximity или principle of grouping.
Правило близости: объекты, расположенные близко друг к другу, воспринимаются связанно.
Объекты справа воспринимаются как три отдельные колонки из-за группировки.
Из этого правила можно вывести более практическую форму: внутренние расстояния элемента должны быть меньше внешних.
Что такое внутреннее расстояние элемента? Это всё, что разделяет составные части элемента. В примере выше это расстояние между окружностями одной группы. В случае абзаца текста внутреннее расстояние — это интерлиньяж — расстояние между строками. Для слов — расстояние между буквами.
Что такое внешнее расстояние? Это расстояние до другого элемента. В примере выше это расстояние между колонками (блоками) окружностей. Для абзаца — расстояние до другого абзаца или заголовка. Для слов — расстояние до следующего слова.
Красным отмечено внутреннее расстояние, синим пунктиром — внешнее.
Для блока более верхнего уровня — «заголовок+абзац» — внутренним расстоянием является расстояние между заголовком и текстом, а внешним — расстояние между блоками (оно отмечено оранжевым пунктиром).
Вот типичный пример нарушения правил на веб-странице:
See the Pen Grouping: bad example by Hexlet (@hexlet) on CodePen.
Заголовки прилепились к чужим абзацам. Расстояния между элементами списка больше расстояния между заголовком и списком — внутренние расстояния оказались больше внешних. Строка с контактами слилась со строкой списка, как будто является её продолжением. Иконка электронной почты одинаково близка и к телефону, и к электронному адресу.
Отредактируйте CSS так, чтобы исправить эти проблемы.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»