Сила пустого пространства

  1. Что такое пробел?
  2. Микро против Макро пустое пространство
  3. Микро пустое пространство
  4. Макро пустое пространство
  5. Итак, что определяет, какое пустое пространство вы должны использовать?
  6. Активный против пассивного: еще один способ приблизиться к полезности пустого пространства
  7. Три элемента, которые следует учитывать при проектировании негативного пространства
  8. Тон дизайна и брендинг
  9. Фокус и внимание
  10. Еда на вынос
  11. Рекомендации и Где узнать больше

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

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

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

Давайте посмотрим, почему проектирование пустого пространства так важно.

Что такое пробел?

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

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

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

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

Люди расстраиваются, когда информация бомбардирует их. Мы люди, а не машины. Пустое пространство успокаивает нас, позволяя нам «дышать».

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

Микро против Макро пустое пространство

Пустое пространство обычно классифицируется на основе плотности микро пустого пространства и его связи с макро пустым пространством. Мы говорим о соотношениях и пропорциях.

Микро пустое пространство

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

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

Макро пустое пространство

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

В отличие от микро пустого пространства, макро пустое пространство выступает в качестве контейнера общего дизайна. Это «большая картина» пустого пространства - легче заметить. Вероятно, лучшим примером веб-сайта, который интенсивно (и эффективно) реализует макропробелы, является домашняя страница Google.com , Знаковый вид Google очень прост, но вы заметили что-то еще? Тот простота тоже успокаивает . Потому что нет беспорядка, там меньше работы для ваших глаз и ума. Вы можете сосредоточиться на причине, по которой вы здесь: искать что-то!

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

Итак, что определяет, какое пустое пространство вы должны использовать?

Использование как макро, так и микропространств зависит от следующих факторов:

Содержимое. Чем больше информации в макете, тем меньше будет пробелов в макросе. Напротив, объем микро пустого пространства будет увеличиваться. Этот компромисс жизненно важен; в противном случае страницы были бы сплошными порциями данных: их чрезвычайно трудно читать! Например, Boulton (2007) описывает, как новостные сайты имеют тенденцию зависеть от микро пустого пространства, чтобы обеспечить эффективный разборчивый опыт для пользователей. Удобство чтения пользователей имеет решающее значение.

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

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

Сообщение о брендинге. Использование пустого пространства может подсказать бюджет компании и, следовательно, качество продукта. Подумайте о брендинге для таких компаний, как Apple, Mercedes Benz и IKEA. Как они поддерживают эту теорию?

На рисунке ниже показаны как макро, так и микропробелы на старой странице новостного сайта BBC. Зеркальные бумажные газеты, новостные сайты, как правило, редко используют пустое пространство. Вместо этого они показывают свои правдоподобие через это большое количество контента на странице. Они отражают, как «происходит» наш мир!

Они отражают, как «происходит» наш мир

Активный против пассивного: еще один способ приблизиться к полезности пустого пространства

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

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

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

Изображение выше показывает разницу между текстом без примененного пробела, с применением пассивного пробела, а также с применением пассивного и активного пробела:

  • С левой стороны изображения текст не имеет реального пространства между символами, строками, абзацами и т. Д. Мы сразу заметили, что отсутствие пробелов делает текст сжатым и сжатым. Это очень сложно читать.
  • В центральном примере мы добавили пассивное (и микро) пустое пространство. Вы заметили, насколько легче вы можете прочитать это, чем первый?
  • Переходя к примеру с правой стороны, мы добавили несколько активных пробелов для навигации по тексту. К счастью, эта жесткая «стена текста», которую мы впервые увидели, стала чем-то вроде формата, к которому мы привыкли. Пробел может улучшить общую читаемость и поток текста, но он нам также нужен ради наших глаз и здравомыслия!

Три элемента, которые следует учитывать при проектировании негативного пространства

разборчивость

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

Тон дизайна и брендинг

Пустое пространство способствует тону общего дизайна. Веб-сайты с большим количеством макропробелов могут отражать минимализм и роскошь. Сайты с меньшим количеством макропробелов могут показаться информативными, как в случае новостных сайтов (Kyrnin, 2015).

Примечание: эти показания не «заложены в камень». Всегда лучше тестовое задание использование пустого пространства на ваших пользователей. Только они могут сказать вам, как они воспринимают ваши проекты.

Фокус и внимание

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

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

Еда на вынос

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

Как дизайнер, вы можете ввести пустое пространство на основе четырех основных факторов:

  • Содержание,
  • Дизайн,
  • пользователь и
  • марка

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

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

Рекомендации и Где узнать больше

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

Боаг, П. (2011 г., 15 февраля) Почему пустое пространство имеет значение. Мир Боаг. Получено с: http://boagworld.com/design/why-whitespace-matters/. [2014, 20 июня]

Боултон, М. (2007). Пробелы. Список отдельно. Полученное из: http://alistapart.com/article/whitespace , [2015, апрель]

Kollin, Z. UX Myths.Myth # 28: Пустое пространство - это пустое пространство. Получено с: http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space. [2014, 20 июня]

Кирнин, Дж . Значение пустого пространства в веб-дизайне. Веб-дизайн Основы. Получено с: http://webdesign.about.com/od/webdesignbasics/a/whitespace.htm. [2014, 20 июня]

Тернбулл, C. Использование пустого пространства (или отрицательное пространство) в ваших проектах. Веб-дизайн Tuts Plus. Получено с: http://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs--webdesign-3401. [2014, 20 июня]

Изображение героя: Автор / Владелец авторских прав: Julia Kay. Условия авторского права и лицензия: CC BY 2.0

Что такое пробел?
Однако, что им всем нужно для формирования этой картины?
Что такое пробел?
Итак, что определяет, какое пустое пространство вы должны использовать?
Как они поддерживают эту теорию?
Вы заметили, насколько легче вы можете прочитать это, чем первый?
Помните изображение с предыдущей страницы?