Правило близости
Как не заварить кашу на сайте
Не буду говорить о шрифтах, цветах и содержании текста. Расскажу только об одной проблеме и как её избежать.
На сайте каша. Каша из-за того, что все элементы стоят близко друг к другу. Это частая проблема сайтов. Создатели стремятся поместить как можно больше информации на странице.
Пользователь открывает сайт и теряется от обилия информации. Слишком много всего и сразу.
Такой дизайн заставляет напрягаться, а этого не любит никто. Скорее всего человек закроет такой сайт и поищет что-то более приятное и простое.
Возьмем другой сайт той же тематики и сравним. Какой вам нравится больше?
Важно запомнить: задача дизайна - ясно и однозначно донести информацию, а не навести красоту или показать сразу всё.
Я расскажу, как помочь пользователю воспринять информацию. Начнём с 8 строк теории.
Принцип близости
Если два элемента расположены рядом, значит они связаны друг с другом. Даже если предметы отличаются друг от друга, но расположены близко, визуально они воспринимаются вместе. Это понятие называется “Принцип близости”.
Расстояние А объединяет точки в одну группу. Расстояние Б делит группы точек на 3 столбца. Если мы уравняем расстояния (А=Б), точки объединятся в общую группу.
Как принцип близости работает в дизайне
В основе хорошего дизайна лежит принцип близости. Если не следовать этому принципу, получается каша, как на первом примере.
В веб-дизайне принцип близости применяют для расположения блоков с контентом. Элементы объединяют в группы.Близость связывает их по смыслу. Группы отделяют друг от друга пустым пространством, чтобы не сливалось. Так проще воспринимать информацию.
Сгруппированные элементы на сайте выглядит лучше, чем разбросанные по странице. Близость связывает их по смыслу. Так мы видим логические группы, а не отдельные детали.
Рассмотрим на примерах насколько важно соблюдать принцип близости в веб-дизайне.
Текстовый блок
Абзац и заголовок это два самостоятельных блока. Расстояние от заголовка до статьи будет внешнее (Б). Расстояние между строчками текста - внутреннее (А).
В примере Б=А текст воспринимается как одно целое. Читать его неудобно.
Наведем порядок. Увеличим расстояние от заголовка до текста.
Стало лучше. Теперь внешнее больше внутреннего или Б>А. Заголовок обрел независимость.
Текстовый блок с изображением
Возьмем блок сайта по продаже букетов. Блок состоит из текста, заголовка и фото.
Поглядим на расстояния и сделаем вывод, что заголовок относится к фото. Текст же висит отдельно. Это неправильно. Исправим.
Отметим наши расстояния буквами, чтобы было проще.
Б - от фото до заголовка. А - от заголовка до текста.
Заголовок принадлежит тексту. Расстояние между ними должно быть меньше, чем от заголовка до фото. А < Б
Теперь заголовок и текст создают единый блок, который вступает в связь с фото.
Три наших блока объединяются в один большой и вступает в связь с заголовком «Наши услуги».
Появляется третья буква В. И формула теперь выглядит иначе В>Б>А.
Принцип коробки
Мне тяжело давался в изучении принцип внутреннего и внешнего. Хотелось его упростить. Я вывела для себя принцип «коробки».
Давайте представим, что у нас много коробок. Они занимают всю кухню и мешают ходить к холодильнику;) А выбрасывать их нельзя. Что будет делать? Соберем их одна в одну. Тоже самое предлагаю сделать с блоками сайта.
Вернемся к примеру с букетами.
Начинаем паковать коробки с самой маленькой. Мы знаем, что текст и заголовок составляют один блок. Запихиваем их в одну коробку А.
Коробка с текстом и заголовок имеет связь с фотографией . Берем большую коробку и пакуем туда фотографию и коробку поменьше . Теперь коробка А отделена от коробки Б расстоянием своей картонной стенки.
Мы получили 3 одинаковые коробки, которые связаны с заголовком «Наши услуги». Упаковываем коробки и заголовок и кладем их в самую большую коробку.
Картонных стенок между коробкой А и коробкой В стало больше. Следовательно, больше и расстояние между ними.
Варите кашу на завтрак, а не в дизайне
Запомните формулу: внутреннее ≤ внешнее. Используйте её на практике.
Если вам понравилось правило «коробки» — используйте его. Раскладывайте всю информацию по «коробкам».
Обращайте внимание на то, как сделаны другие сайты. Ищите хорошие дизайнерские решения. Ищите косяки, которые можно исправить. Это отличный способ прокачать уровень нормы и использовать её в своей работе.