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

Если вы тоже неуверенно используете свободное пространство в макете, идите учиться на курс «Дизайнер интерфейсов». Мы расскажем про построение композиции, про психологию восприятия и о том, как управлять вниманием пользователя.

Хотите погрузиться в эту тему самостоятельно? Читайте материал нашего друга — Ника Бабича, главного редактора UX Planet. Мы перевели и адаптировали его для вас.
10 июля 2018
главный редактор UX Planet


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


«Пространство нужно рассматривать как активный элемент, а не пассивный фон»
Ян Чихольд


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

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

Пустое пространство так же важно, как и сами элементы пользовательского интерфейса, ведь даже «пустое место» имеет свою цель — оно обеспечивает визуальную целостность интерфейса. Пространство выполняет четыре основные функции:


01
Улучшить понимание
Пространство упрощает просмотр и чтение контента.
Четкость и читабельность — важнее всего

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

Исследование, проведенное в Wichita State University подтвердило, что чем больше пространство, тем лучше восприятие текста, хотя скорость чтения может снижаться. Как отмечает Дмитрий Фадеев:
Правильное использование пространства между параграфами текста и на полях может улучшить его понимание на 20%
При оптимизации текстового контента необходимо обратить внимание на две вещи: пространство для полей и расстояние между строками (межстрочный интервал). Именно межстрочный интервал может значительно улучшить читаемость текста. В общем, чем больше расстояние между строками, тем легче читать текст, хотя слишком большой интервал может нарушить целостность текста и сделать его несвязным. Опять же, главное — найти идеальный баланс.
Слева: структура текста очень плотная, нехватка пространства заставляет пользователей напрягать глаза. Справа: удачное использование пространства и хорошая читабельность.
02
Обозначьте отношения между элементами
Лейаут состоит из совокупности его частей. Взаимосвязь этих частей друг с другом помогает определить количество свободного пространства вокруг них. То есть пространство выступает в роли ориентира.
Разместите родственные элементы вместе

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

Существует связь между расстоянием и концентрацией внимания: чем больше расстояние между объектами, тем больше внимания они привлекают. Причем отсутствие других элементов позволит усилить акцент на этих объектах. Используйте пространство в своих целях, чтобы блуждающий взгляд пользователей останавливался на важных элементах интерфейса. Дополнительное пространство и отсутствие отвлекающих элементов вокруг объектов делает их более заметными для пользователя.
Чем больше расстояние вокруг объекта, тем больше он притягивает внимание
Команда почтового сервиса Mailchimp часто использует пространство в своем дизайне. Если бегло просмотреть их главную страницу, взгляд сразу упадет на кнопку «Sign up Free» (подписаться бесплатно).
Наша задача как дизайнеров — создать доступный механизм для общения
Пространство помогает поддержать общую иерархию элементов интерфейса. А также оно создает симметрию или асимметрию в дизайне. Симметрия — это запоминаемость и гармония, а асимметрия — это привлечение внимания. Асимметрию можно использовать для привлечения внимания к определенному месту или элементу на странице. Асимметричный элемент выделяется среди других.
Асимметричный элемент выделяется среди других.
04
Создайте ощущение эксклюзивности
Хотя пространство часто применяется для улучшения пользовательского опыта, оно также может использовано и в эстетических целях. Дизайнеры дорогих брендов используют пространство, чтобы создать ощущение утонченности. Сочетание деликатной работы с типографикой, фотографиями и пространством можно наблюдать на сайтах всех люксовых брендов. Пространство добавляет ощущение изысканности и роскоши и дает понять, что сам продукт намного важнее, чем окружающая его среда.
Позвольте продукту говорить самому за себя
Индустрия моды использует пространство в рекламе, чтобы показать изысканность и дороговизну их товаров.
Пространство — это не просто пустое полотно, это еще и мощный инструмент дизайнера. Возможно, этим инструментом не так легко овладеть, ведь это не только искусство, но и целая наука. Чтобы научится понимать, какое количество пространства должно быть использовано в том или ином дизайне, необходима практика. Чем больше проектов вы создадите, тем больше знаний приобретете.
На третьем курсе программы «Дизайнер интерфейсов» вы научитесь воплощать свои идеи в дизайн-концепции и самостоятельно создадите визуальный язык своего интерфейса.

У вас будет много практических уроков, вы попробуете работать в Photoshop, AdobeXd, Figma и Sketch. Вы научитесь создавать анимацию, узнаете про возможности пользовательских исследований и аналитики, протестируете и доработаете прототип собственного интерфейса.

Вы научитесь:

- Создавать интерактивные прототипы на основе бумажных прототипов

- Использовать современные инструменты прототипирования

- Анализировать работоспособность прототипа

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

- Детализировать и улучшать дизайн прототипа

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


Хотите создавать не только удобные, но и красивые интерфейсы?
Понравилось? Поделитесь с друзьями