Принцип близости в веб-дизайне

Недавно я достал старую книгу по дизайну, к которой не притрагивался уже давно, и она напомнила мне о принципе дизайна, который многие из нас применяют на практике, возможно, только подсознательно, если вообще применяют. Книга посвящена дизайну для печати, но я подумал, что это будет отличная тема для обсуждения в контексте веб-дизайна.

Roman Jarmukhametov
Роман Джармухаметов
Senior Web Designer
Принцип близости в веб-дизайне

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

Я еще расскажу о деталях и некоторых способах эффективной реализации, но этого определения должно быть достаточно для обсуждения в данной статье.

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

Не бойтесь белого пространства

Первый шаг к правильной реализации принципа близости -это понимание важности белого пространства в дизайне.

Отсутствие белого пространства - распространенная проблема в любительских дизайнах. Дизайн - это средство передачи информации, и когда любители пытаются передать сообщение с помощью дизайна, их естественная склонность - равномерно распределить содержание, чтобы заполнить пространство, не задумываясь о потенциале хорошо организованного белого пространства.

Белое пространство может повлиять на поведение пользователя не меньше, если не больше, чем само содержание страницы. Белое пространство направляет взгляд пользователя в нужную сторону, создает контраст и производит неизгладимое впечатление.

 

Несмотря на то, что сайт W3Avenue, представленный выше, содержит значительное количество контента (статьи в многочисленных категориях, как и любой дизайнерский блог) и ряд объявлений на боковой панели, он не перегружает пользователя визуально.

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

Поэтому не бойтесь пустого пространства в вашем дизайне. Правильное использование белого пространства - это первый шаг в реализации принципа близости и, таким образом, повышение визуальной привлекательности дизайна.

Визуальная группировка связанных элементов

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

Карточка слева не загромождена; на ней есть немного белого пространства.Но элементы не сгруппированы логически, поэтому эффект слабый.

Читателю приходится многократно пересматривать карточку. Однако карта справа имеет более приятный визуальный эффект. Читателю достаточно взглянуть на неё для восприятия информации (подробнее об этом позже).

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

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

Хотя сайт Arora Designs не является сложным или перегруженным информацией, использование белого пространства и визуальное разделение сгруппированных элементов являются эффективными. Здесь следует отметить, что"белое пространство" не обязательно должно быть белым; это может быть любое пустое пространство между элементами, независимо от цвета.

В случае с Arora Designs, хотя белое пространство имеет цвет, оно служит той же цели - визуально разделить области заголовка, навигации и контента.

Создание визуальной иерархии

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

Иерархию передает способ группировки и подгруппировки элементов.

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

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

Эта иерархия была бы невозможна без белого пространства (включая макро-и микробелое пространство). Список справа - это просто случайная группировка элементов без какой-либо видимой взаимосвязи или иерархии.

Реализовать этот принцип на сайте с помощью такого простого элемента, как HTML-список, очень легко. Задача состоит в том, чтобы использовать этот принцип в качестве руководящего фактора при создании сайта, начиная с этапа планирования и составления схемы и заканчивая дизайном.

Макеты, которые легко просматривать и читать

Контент, организованный в иерархию и логически сгруппированный, легче читать и просматривать.

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

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

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

Хорошим примером этого принципа являются новостные сайты.

Сетки помогают в работе с близостью

Один из способов группировки предметов и правильного использования белого пространства - это использовать сетку.

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

Ниже приведены скриншоты с двух веб-сайтов, на которых использована система сетки 960. Они оба довольно простые (т.е. не перегружены контентом, как новостные сайты), но они показывают, что сетки дают элементам страницы пространство для дыхания, предоставляя каждому разделу свой собственный визуальный дом.

Ведите пользователей по правильному пути

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

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

Близость может меняться в отзывчивых дизайнах

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

Например, на странице Transport for London Driving на рабочем столе ссылки на информацию о зоне сверхнизких выбросов и зоне низких выбросов появляются рядом, в двух разных колонках. Представление этих двух ссылок в непосредственной близости позволяет пользователям легко увидеть и сравнить их, чтобы решить, на какую из них они хотят нажать. Однако на маленьких экранах эти ссылки выглядят расположенными далеко друг от друга, поскольку две колонки расположены одна над другой, а не бок о бок. Такое неудачное размещение может привести к тому, что мобильные пользователи никогда не обнаружат второй тип эмиссионной зоны.

Транспорт Лондона: Информация о двух типах зон с низким уровнем выбросов появляется в непосредственной близости на большом экране (слева). На мобильном устройстве (справа) разделы, соответствующие двум зонам, располагались далеко друг от друга по причине того, каким образом колонки были размещены в отзывчивом макете.

Заключение

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

Хотите получать нашу рассылку по дизайну и автоматизации бизнеса?

Вы будете два раза в месяц  получать обзор советов по дизайну и автоматизации.
Спасибо за подписку!
Упс! Что-то пошло не так при отправке формы.

Похожие посты блога

Как автоматизировать создание контента

Как автоматизировать создание контента

Контент есть везде, и он нужен каждому бизнесу. Его создание требует усилий. Использование средств автоматизации поможет вам упорядочить работу.
Читать полностью
arrow_forward
Актуальная тема для обсуждения: устойчивое развитие в цифровом дизайне и посредством него

Актуальная тема для обсуждения: устойчивое развитие в цифровом дизайне и посредством него

Потому что существует только планета А, и дизайнеры могут сделать гораздо больше для её спасения
Читать полностью
arrow_forward
Автоматизация малого бизнеса - что нужно знать

Автоматизация малого бизнеса - что нужно знать

Малый бизнес также может извлечь выгоду из автоматизации, и в этой статье блога мы обсудим, что вам нужно знать о том, как она может работать для вас!
Читать полностью
arrow_forward
Как мы повышаем ценность проектов для клиентов

Как мы повышаем ценность проектов для клиентов

В процессе работы над проектами веб-дизайна и разработки наша веб-студия постоянно думает о том, как мы можем повысить ценность нашей работы, сделав создаваемые веб-сайты более легкими для клиентов в обслуживании и обновлении, а также удобными для работы даже спустя годы.
Читать полностью
arrow_forward