Негативное пространство в дизайне пользовательского интерфейса: советы и лучшие примеры применения

Негативное пространство в дизайне пользовательского интерфейса: советы и лучшие примеры применения

Перевод статьи Negative Space in UI Design: Tips and Best Practices, автор Tubik Studio.

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

Что такое негативное пространство в дизайне?

По сути, негативное пространство или белое пространство, как его часто называют, — это область макета, которая остается пустой. Она может быть не только вокруг объектов, которые вы размещаете на макете, но также между ними и внутри них. Негативное пространство не только определяет границы объектов, но также создает необходимые связи между ними в соответствии с принципами гештальта и создает правильный визуальный образ. Поэтому пустое пространство является законным элементом дизайна, который имеет большое влияние на удобство его использования. «Белое пространство похоже на холст: это фон, который скрепляет элементы в дизайне, позволяя им выделиться», — говорит Mads Soegaard из Interaction Design Foundation.

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

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


Концепция материального дизайна

В чем разница между белым пространством и негативным пространством?

Ответ прост: никакой разницы. Эти понятия полностью взаимозаменяемы.

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

Почему негативное пространство важно?

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

Как клиенты, так и некоторые дизайнеры время от времени хотят разместить как можно больше элементов и функций на одной странице или экране, думая, что это будет полезно для пользователей. Но это ошибка: на самом деле пользователям не нужно все сразу. Более того, слишком много элементов без достаточного количества пространства значительно повышают уровень отвлечения внимания: пользователи перегружаются информацией и интерактивными элементами, большинство из которых им НЕ нужно. И приходится прикладывать усилия, чтобы найти то, что НУЖНО. Как отметил Aarron Walter: «если все кричит о внимании вашего зрителя, то ничего не слышно».

Разумный подход к негативному пространству в дизайне имеет ряд преимуществ. И мы хотели бы отметить следующие:

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

Давайте рассмотрим пример посадочной страницы Big City Guide. Здесь дизайнер применяет фоновую фотографию, которая играет роль негативного пространства на макроуровне. Более того, элементы фотографии и заголовка взаимосвязаны, они как бы переплетаются друг с другом: это делает негативное пространство активным объектом дизайна и придает странице единый гармоничный вид.


Посадочная страница Big City Guide

Основные факторы, на которые влияет негативное пространство

Правильное использование негативного пространства может оказать значительное влияние на следующие UX факторы.

Читабельность и четкость

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

Брендинг

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

Природа источника информации

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

Уровень внимания

Достаточное количество негативного пространства улучшает визуальную иерархию и позволяет пользователям сосредоточиться на ключевых элементах.

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

  • читабельность текста
  • восприятие графики
  • удобство навигации
  • способность выделять важное.

Приведем пару примеров. Вот домашняя страница The Big Landscape. На ней нет каких-либо визуальных рамок или таблиц. Но благодаря сбалансированному использованию негативного пространства, дизайнер создает четкую визуальную иерархию, тем самым позволяя пользователю просканировать информацию за доли секунды. Дизайн страницы выглядит организованным, но легким и воздушным. А белый фон и расположение объектов делают ее похожей на журнальную обложку. Имея гармоничный внешний вид, страница доносит до читателя необходимую информацию о целях и характере этого интернет-магазина.


The Big Landscape

Другой пример — мобильное приложение Upper app: здесь негативное пространство полностью черное, что создает большую контрастность с основными элементами интерфейса. На экране используется только одна прямая линия. Тем не менее,  расположение всех объектов выглядит организованным и хорошо читаемым благодаря достаточному количеству пространства и отсутствию отвлекающих факторов. Кроме того, это придает внешнему виду стильную минималистскую элегантность, что также доставляет эстетическое удовольствие.


Upper App

Подводные камни, на которые стоит обратить внимание

1. Своеобразная терминология. Когда вы разговариваете с клиентами, которые могут быть не очень хорошо знакомы с дизайнерскими терминами, обязательно объясните значение негативного пространства, прежде чем описывать дизайн-проект. Для человека «не в теме» может быть трудно понять, почему «этой странице нужно больше пустого пространства», когда он смотрит на полностью черный фон. Кроме того, негативное пространство может ассоциироваться с чем-то плохим, а ведь это вовсе не так. Так что не забудьте расставить все точки над i, прежде чем использовать термины.

2. Желание уменьшить негативное пространство, чтобы разместить больше объектов на странице или экране. Это характерно не только для дизайна пользовательского интерфейса. Вы можете услышать, как дизайнер интерьера рекомендует оставить немного свободного места клиенту, который хочет четыре книжных шкафа в одной комнате вместо двух. Или как архитектор объясняет, почему нужно оставить немного незанятого пространства вокруг здания, чтобы оно смотрелось лучше. Более того, иногда перепланировка элементов с лучшим использованием негативного пространства создает иллюзию того, что комната или здание больше, чем они есть на самом деле. И то же самое происходит с данными, которые вы должны их поместить на мобильный экран или веб-страницу. Решите, что важнее, что вторично, а что можно убрать, чтобы сделать навигацию интуитивно понятной. Негативное пространство поможет создать гармоничный вид экрана или страницы, даже если он наполнен информацией и функционалом.

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

Спасибо!

Оставляйте комментарии, вопросы и пожелания. Какие статьи вы хотели бы увидеть в нашем блоге? Какие темы вам интересны? Если нужно перевести какой-то конкретный материал, то пишите, скидывайте ссылки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *