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

  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

Похожие

Воскресенье без торговли. Проверьте, где вы будете делать покупки
В воскресенье 18 ноября магазины будут закрыты. Покупки могут быть сделаны, среди прочего в пекарнях, на автозаправках и в торговых точках, которыми управляют владельцы. Также будут открыты зоны общественного питания в избранных галереях.
Лучшие онлайн факсы
Хотя современные компьютеры, принтеры и, очевидно, сегодня в офисах жизненно важны другие технологии, и нельзя отрицать роль, которую скромный факсимильный аппарат играл в мире бизнеса за последние несколько десятилетий. И действительно, роль, которую он все еще играет, - то, что вы можете не осознавать, - это то, что использование факсов на бизнес-арене
Антивирусные приложения для Android бесполезны - вот что нужно сделать вместо этого - ExtremeTech
... ие комиссии по ссылкам на этой странице. Условия эксплуатации , Android вырос, чтобы стать крупнейшей вычислительной платформой на планете, и это делает его целью. Вы не можете проводить много времени в интернете, не услышав о какой-то новой Android вредоносная программа, которая определенно разрушит ваш телефон. Эти отчеты всегда основаны на фактах, но они могут преувеличивать
Альфа-каналы: предварительно умноженные против прямых
Альфа-каналы являются полутоновыми каналами в дополнение к цветным каналам файла. Они определяют прозрачность и часто очерчивают объекты или выделения как матовые или трафаретные. Альфа-каналы могут поставляться предварительно сшитыми («в форме») или прямыми, с прозрачностью, сглаженной только при наложении. Справка по After Effects объясняет
Веб-программирования. Что такое кроссбраузерность?
Для просмотра интернет-сайтов пользователи сети Интернет используют специальные программы - браузеры. Еще несколько лет назад посетителям интернета были известны лишь один-два разные браузеры, то теперь число таких программ исчисляется десятками, особенно, если учитывать, что каждая из них имеет несколько версий, отличающихся по функциональности. В связи с этим появилось понятие кроссбраузерности
Почему вы должны отказаться от OpenOffice и использовать бесплатный пакет LibreOffice
OpenOffice был первым крупным конкурентом свободного программного обеспечения Microsoft Office и из-за этого у него все еще есть господствующее признание имени, которое является проблемой. Разработчики почти все переехали в LibreOffice, духовный преемник OpenOffice. Но OpenOffice продолжает работать как свой собственный проект, видя небольшое
Обзор антивирусного программного обеспечения McAfee LiveSafe 2015
McAfee был одним из пионеров антивирусного программного обеспечения. Сейчас это основная часть подразделения Intel по безопасности, и его продуктом, близким к лучшему, является LiveSafe. Этот набор утилит безопасности включает одну особенно привлекательную функцию; он может защитить столько устройств, сколько у вас есть, если они работают под управлением Windows, OS X, Android или iOS. Где программа падает, находится в ее интерфейсе. Мы могли бы простить его довольно скучный, чрезмерный
Список прокси-серверов Германии
... исок прокси-серверов - на этой странице представлен самый большой и актуальный список работающих прокси-серверов, доступных для общего пользования. Наше мощное программное обеспечение ежедневно проверяет более миллиона прокси-серверов, причем большинство прокси-серверов проверяется не реже одного раза в 15 минут, создавая один из самых надежных списков прокси в Интернете - и все это бесплатно. Любой прокси-сервер, указанный на этой странице, можно использовать
Инструменты, которые помогут вам администрировать службы Microsoft Online / Office 365, часть 1
«Инструменты, полезные при администрировании служб Microsoft Online / Office 365, часть 1» Мачей Очал Многие компании планируют избавиться от своих серверных комнат или просто похудеть, перенеся услуги за пределы компании. Они делают это благодаря снижению затрат на обслуживание и гибкости в управлении различными аспектами внедренного решения и его высокой масштабируемости. Это означает, что вы можете в любое время купить лицензии для последующих пользователей,
Лучшие хостинг-провайдеры 2019 года: доступный, быстрый и простой в использовании
Добро пожаловать в руководство Cloudwards.net для лучших провайдеров веб-хостинга. В течение следующих 5000 слов мы проведем вас через плотный и часто запутанный мир веб-хостинга и дадим лучшие результаты в определенных категориях. Мы также собираемся определить, что такое веб-хостинг, ответить на часто задаваемые вопросы и поговорить о том, почему переход на бесплатный веб-хостинг вообще плохая идея. Вот как это будет происходить: после определения того, что такое веб-хостинг,
Модульные наборы кухонной мебели - все, что нам нужно знать, часть. II
Кухонная мебель из «средней полки» - как изготавливаются модули? или модульные

Комментарии

Что делать, если по какой-то причине мы больше не хотим использовать кредиты и поэтому решили удалить аккаунт?
Что делать, если по какой-то причине мы больше не хотим использовать кредиты и поэтому решили удалить аккаунт? Для этого найдите соответствующую вкладку, где мы найдем пример письма с просьбой удалить наш профиль. Мы можем отправить такой запрос обычной почтой, однако, чтобы улучшить всю процедуру, консультанты, работающие на информационной линии, часто рекомендуют отправлять такие инструкции в электронном виде с адреса электронной почты, который ранее был указан в регистрационной форме. Иногда
Какие цвета вы должны использовать в спальне?
Какие цвета вы должны использовать в спальне? Опять же, я собираюсь пойти против всех книг и дать вам факты. Спальня, помимо очевидного, обычно используется для сна, и из-за этого она считается энергией Инь (тихой), большинство книг скажут вам нарисовать ярко-красный ( ян) или ярко-розовые, чтобы активировать ваши отношения, опять же, если у вас была консультация, красный может быть хорошим цветом для использования, так как практикующий будет знать все ваши элементы в этой конкретной области, но
Итак, какое имя вы выберете?
Итак, какое имя вы выберете? Какой будет жизнь вашего ребенка? Этот уникальный инструмент от Johnson's Baby ищет в Интернете информацию о скрытых значениях имен, чтобы помочь родителям найти идеальную форму. Какова история имени? Как люди с таким именем жили в прошлом, и что это имя будет значить для будущего вашего ребенка? Johnson's Baby, DM9DBB и UNIT9 создали инструмент, который отвечает на эти вопросы. Здравствуйте, My Name Means собирает данные в режиме реального
Есть ли какое-нибудь программное обеспечение для Linux или дистрибутив, который вы хотели бы предложить для обзора?
Есть ли какое-нибудь программное обеспечение для Linux или дистрибутив, который вы хотели бы предложить для обзора? Что-то, что вы любите или хотели бы узнать? пожалуйста напишите мне свои идеи , и я рассмотрю их для будущей колонки Linux Picks and Pans. И используйте функцию комментариев читателя ниже, чтобы предоставить свой вклад!
Вы разработчик программного обеспечения, который чувствует, что это необходимо, или вы доверяете своим пользователям?
Вы разработчик программного обеспечения, который чувствует, что это необходимо, или вы доверяете своим пользователям?
Что такое онлайн факс?
Что такое онлайн факс? Современные физические факсимильные аппараты впервые появились в 1960-х годах, получив известность в 1980-х годах, задолго до того, как предприятия получили в свое распоряжение высокоскоростной интернет. Однако у физических факсимильных аппаратов есть свои недостатки, в том числе необходимость в выделенном номере факса, необходимость повторной отправки факсов, которые сталкиваются с сигналом занятости, застревание бумаги из-за неправильной подачи и куча факсимильной
Фактически, вы должны загрузить и установить Personal Locker отдельно; почему бы не включить его в основную установку?
Фактически, вы должны загрузить и установить Personal Locker отдельно; почему бы не включить его в основную установку? Прежде чем мы обнаружили, где его найти, мы пошли в справочную систему. Локальной справки нет, что обидно, и вызов онлайн-справки выдает ошибку 404, утверждая, что файл отсутствует на сервере. Это требует сортировки. [caption id = "attachment_112480" align = "aligncenter" width = "960"]
Биткойн Вики: что такое Биткойн?
Биткойн Вики: что такое Биткойн? Начало работы Биткойн: Биткойн для начинающих Собственный биткойн-аккаунт: лучшие биткойн-кошельки в сравнении Где я могу (конечно) купить биткойны (BTC)? Чтобы спекулировать в краткосрочной перспективе
Если кто-то говорит, что произошло страшное падение - вы посмотрите, какой был курс несколько лет назад?
Если кто-то говорит, что произошло страшное падение - вы посмотрите, какой был курс несколько лет назад? Биткоин так развивается по спирали. Криптовалюта уже никуда не денутся", - рассказывает Денис. Доктор юридических наук, советник Dega Partners Руслан Чернолуцкий объясняет - все операции по покупке или продаже криптовалюта официально запрещены. Отсутствует и судебная практика в этой сфере. То есть, если на биржу осуществят хакерскую атаку или же деньги "исчезнут", найти ответственного
Давайте вернемся к головоломке, которую мы обсуждали ранее; Сколько полей вы должны включить на странице захвата потенциальных клиентов?
Давайте вернемся к головоломке, которую мы обсуждали ранее; Сколько полей вы должны включить на странице захвата потенциальных клиентов? Используя стимул для бесплатной пробной версии, вы получаете лицензию на дополнительную информацию. Чем больше полей помните, тем лучше качество ведет. И поскольку вероятность того, что потребители воспользуются бесплатной пробной версией, выше, количество потенциальных клиентов, скорее всего, приведет к большему количеству конверсий.
1. Какое программное обеспечение для электронной коммерции вы используете для создания интернет-магазинов?
1. Какое программное обеспечение для электронной коммерции вы используете для создания интернет-магазинов? Вы должны быть полностью осведомлены об этой теме, прежде чем начинать какие-либо собеседования. Вам нужно программное обеспечение для электронной коммерции, которое будет функциональным, интуитивно понятным и простым в использовании. В конце концов вы будете работать с программным обеспечением, как только программист завершит создание вашего сайта. При поиске информации следите

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