Чем заполнить пустое место на рисунке

Содержание
  1. Apple
  2. Buffalo
  3. Dropbox
  4. Chanel
  5. Google
  6. Как использовать пустое пространство в дизайне интерфейсов
  7. Знакомство с пробелом
  8. Почему пробелы важны
  9. 7 способов улучшить пользовательский опыт с помощью пустого пространства
  10. 1. Выделите определенные элементы
  11. 2. Соедините связанные элементы
  12. 3. Не допускайте визуальный беспорядок
  13. 4. Направляйте пользователя через интерактивный контент
  14. 5. Улучшение чтения текста
  15. 6. Используйте его в качестве визуального разделителя
  16. 7. Создайте чувство изысканности и элегантности
  17. Несколько слов о заинтересованных сторонах
  18. Вывод
  19. Два типа пустого пространства
  20. Два размера пустого пространства
  21. Пустое пространство белого цвета?
  22. Где и как использовать пустое пространство
  23. Пустое пространство и элементы призыва к действию (CTA)
  24. Использование пустого пространства для эмоционального отклика
  25. Как побороть желание заполнить пустоты
  26. Кто хорошо использует пустое пространство?
  27. Заключение
  28. Веб-дизайн. Быстрый старт

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

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

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

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

В данном случае пустое пространство в дизайне передает чувство доверия и надежности.

Apple

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

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

Buffalo

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

Dropbox

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

Chanel

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

Google

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

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

Как использовать пустое пространство в дизайне интерфейсов

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

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

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

Знакомство с пробелом

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

“Супрематизм. Автопортрет в двух измерениях” кисти Казимира Малевича. “Негативное пространство” – это пространство между элементами композиции.

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

«Белое пространство» не должно быть белым. В дизайне ToyFight много негативного пространства, окрашенного в красный цвет.

Почему пробелы важны

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

Макро пробел vs. Микро пробел

Существует два типа пробелов:

  • Микро. Пробелы между строками текста и внутри сетки и т. д. Этот пробел делает контент разборчивым и удобочитаемым.
  • Макро. Пробел между основными элементами на странице. Например, левый и правый столбцы на странице Medium. В отличие от микро-пробелов макро-пробелы действуют как контейнер всего дизайна

7 способов улучшить пользовательский опыт с помощью пустого пространства

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

1. Выделите определенные элементы

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

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

Чем больше пустого пространства вокруг объекта, тем больше он привлекает глаз.

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

Читайте также:  Файл лицензии windows был изменен

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

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

2. Соедините связанные элементы

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

Скорее всего, вы видите две группы точек, а не просто 12 точек. Все точки одинаковые, и единственное, что их отличает – это пробел, который разделяет их.

Этот закон может применяться к элементам дизайна взаимодействия. Давайте рассмотрим, как это работает в контексте веб-форм:

  • Поместите подписи ближе к соответствующим полям. Как известно, предметы, расположенные рядом друг с другом, связаны между собой. Можно четче передавать информацию, когда подписи расположены ближе к полю, к которому они относятся. Регулируя расстояние, можно упростить просмотр контента и увеличить шансы на успешное завершение пользователем задачи. Слева: Кажется, что подпись и поле ввода не связаны между собой. Справа: Подпись и поле ввода кажутся одним целым
  • Группируйте связанные поля. Известно, что длинные формы, со множеством полей для заполнения кажутся огромными. Пользователи не решаются заполнять такие формы. Объединяя связанные поля вместе, вы можете помочь пользователям понять информацию, которую они должны заполнить. Обе формы в приведенном ниже примере имеют одинаковое количество полей. Но есть отличие – все поля в форме, расположенной справа, разделены на три группы. Количество контента одинаковое, но производимое им на пользователей впечатление сильно отличается.

Форма справа облегчает процесс ввода данных. Изображение: NNgroup

3. Не допускайте визуальный беспорядок

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

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

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

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

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

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

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

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

4. Направляйте пользователя через интерактивный контент

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

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

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

Асимметрия отлично подходит для привлечения внимания к конкретной области (или элементу) на странице. Изображение: Pivotal

5. Улучшение чтения текста

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

  • Межстрочный интервал или высота строки может значительно улучшить удобочитаемость текста. Как правило, чем больше высота строки, тем лучше опыт пользователя во время чтения. Хотя ее слишком большое значение может сломать единство и сделать дизайн разобщенным.
Читайте также:  Сопротивление галогенной лампы 12 вольт

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

Если вы хотите улучшить типографику своего дизайна, рекомендуем прочитать статью “10 советов по типографике в веб-дизайне”

6. Используйте его в качестве визуального разделителя

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

Приложение Yelp для Android. Каждый пункт в списке разделяется разделителем без полей. Линия поперек ощущается как остановка – она отчетливо отделяет предметы. В результате, макет ощущается тяжелым.

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

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

7. Создайте чувство изысканности и элегантности

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

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

Пробел может добавить чувство изысканности и роскоши, создавая ощущение, что продукт более важен, чем пространство, в котором он живет. Изображение: Tom Ford

Несколько слов о заинтересованных сторонах

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

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

Вывод

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

Springboard – это онлайн-школа, которая поможет вам освоить UX дизайн с помощью курсов под руководством тренера. Если вам понравилась эта статья, вы, вероятно, также оцените наше бесплатное руководство по знакомству с UX дизайном.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

Дата публикации: 2016-08-05

От автора: в веб-дизайне к пустому пространству относят области без текста и изображений. Можно сказать, что это «визуальная тишина». Чтобы наш дизайн функционировал, необходимо правильно сочетать пустое пространство с используемым.

Прежде чем начать, посмотрите видео ниже. Роуэн Аткинсон: добро пожаловать в ад:

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

То же самое можно сказать и про музыку. Хотя там это может быть лишь затишье перед резким нарастанием ритма, а не полная тишина.

Заметили, как в примере выше «падает» бит на 0,45 и 1,29? Тишина придает драматизма будущим событиям. Я взял танцевальный трек, но с легкостью мог взять пятую симфонию Бетховена.

В обоих примерах тишина – критический фактор привлечения внимания. Точно так же работает пустое пространство. В веб-дизайне к пустому пространству относят области без текста и изображений. Можно сказать, что это «визуальная тишина». Чтобы наш дизайн функционировал, необходимо правильно сочетать пустое пространство с используемым.

Хотя Google не всегда славились своими дизайнерскими навыками, они всегда были сторонниками пустого пространства, что заметно по их домашней странице. Google запустили свой редизайн, когда страницы их конкурентов типа Yahoo! были плотно упакованы прогнозами погоды, новостями и почтой. Интерфейс без излишеств позволил пользователям сосредоточить внимание на основной задаче – поиске в интернете, не отвлекаясь на то, что им не нужно.

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

Два типа пустого пространства

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

Читайте также:  Что будет если съесть сухой ролтон

Пассивное пустое пространство: пространство между словами в строке или пространство вокруг логотипа и других графических элементов.

Взгляните на домашнюю страницу 500px, как на ней используется активное и пассивное пустое пространство.

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

Два размера пустого пространства

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

На скриншоте выше показано пустое микропространство между кнопками Log In и Sign up, а также между заголовком и параграфом.

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

В дизайне Tumblr пустое макропространство четко прослеживается в пустом футере и боках.

Пустое пространство белого цвета?

Термин пустое пространство подразумевает отсутствие цвета или тона, что может сбить с толку. Пустое пространство, на самом деле, может быть любого цвета, который отвечает в вашем дизайне за пустоту – желтый, синий, зеленый или даже текстура (как в примере Todoist ниже).

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

Где и как использовать пустое пространство

Пустое пространство и элементы призыва к действию (CTA)

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

Использование пустого пространства для эмоционального отклика

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

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

Как побороть желание заполнить пустоты

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

Эта привычка часто переходит и на дизайн. Стоит нам только заметить пустую область в нашем дизайне, мы начинаем думать «Чем бы его заполнить?». Такое мышление может вызвать проблемы у дизайнеров.

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

Кто хорошо использует пустое пространство?

За всю свою историю Volkswagen был мастером применения пустого пространства в рекламе в журналах. С самого начала их простые, но динамичные макеты выделялись среди статичной журнальной рекламы.

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

Основные компоненты на месте, но реклама уже не оказывает такого эффекта, как раньше:

автомобиль кажется менее впечатляющим;

взгляд уже не так легко порхает над макетом;

сложнее преподнести историю с упавшим в обморок мужчиной.

Как видно на изображениях внизу, с 1960-х до сегодняшнего дня Volkswagen использовал пустое пространство для достижения большего эффекта.

По сравнению с Volkswagen компания Apple новичок, но уже показала себя ярым приверженцем дизайна с пустым пространством – от их сайта, изделий и до знаменитого дизайна и архитектуры Apple store.

Заключение

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

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

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

Автор: Saad Al-Sabbagh

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Оцените статью
Добавить комментарий

Adblock
detector