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

Как незаполненное пространство влияет на дизайн сайта
Перевод статьи Le pouvoir de l'espace blanc
Автор : Mads Soegaard
инструменталь пространство - инструментальный проектирования пользовательского опыта. Значимость свободного пространства может вас поразить, так как его часто недоценивают. Так же, как тишину между музыкальных нот. Тем не, он настолько мощный, что от него может зависеть, останется пользователь на вашей странице или нет.
Les gens de l'extérieur ne sont pas les mêmes que les gens de l'intérieur. изображения и так далеее. пространство, "воздух") - это фон, который объединяет в дизайне все элементы вместе, позволяя им выделиться.

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

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

пространство (или контрформа) - это область между элементами дизайна. Это также пространство внутри самих элементов, включая промежутки между типографическими знаками.
названию, белое пространство не обязательно белое. угодно цвет, текстура, паттерн и дажее изображе фоновое изображение. Главное, чтобы на этом фоне хорошо считывался контент.
Le système d'information sur la santé est en cours d'élaboration et de mise à jour, et le système d'information sur la santé est en cours d'élaboration. белое пространство - это изящно, к тому же повышает качество пользователь - это изящно, к тому же повышает качество пользовательского опыта.

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

Напротив, белое пространство - прекрасный инструмент для сбалансирования визуальных элементов и организации конта для улучшения визуальной коммуникациии.
Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général et qu'il n'y a pas de raison de s'y opposer. Пустое пространство успокаивает нас и дает нам "дышать".
Дизайнер должен учитывать другие детали интерфейса, используя незаполненую область, и экспериментировать, чтобы найти необходимый баланс между ней и остальными элементами.

Виды белого (пустого) пространства : микро и макро

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

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

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

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

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

К примеру, новостные сайты полагаются на микро-незаполненое пространство для обеспечения пользователям удобочитаемости контента. Комфортное восприятие информации читателем мет критическое значение.
Использование негативного пространства в онлайн-журналах :
2. Общая стилистика проекта
интерфейса значтельно влияет на соотношение между микро- и макро- контрформой в макете в макете. Выбор стилистического решения является решающим фактором при выборе того или иного преобладающего пространства.
3. Пользователь
баланса макро- и микро- белых пространств для конкретной аудитории проводится тестирование пользовате польского опитвательского опыта. терии, которую можно применить ко всем пользователям. Как всегда в User Experience мы должны основываться на даных, полученных в результате исследования целевой аудитории.
4. Позиционирование бренда
Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô, Ô. Подумайте о брендинге таких компаний, как Apple, Mercedes Benz и IKEA. Как они подтверждают эту теорию ?
apple.com

Активное и пассивное использование белого пространства

Другой подход : делить контрформу на активную и пассивную.
Активное белое пространство
для упорядочения структуры страницы и для того, чтобы пользователю на ней ориентироваться.
Пассивное белое пространство
Les deux parties sont d'accord sur le fait qu'il y a des différences entre les deux pays et qu'il y a des différences entre les deux pays. Например, негативное пространство между строками и абзацами функционирует таким образом :
Изображение сверху показывает разницу между текстом без использования белого пространства, текстом с пассивным его использованием и текстом с активным использованием негативного пространства.
1
"La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme", "La vie de l'homme". Видно, что отсутствие "воздуха" делает текст дробленым и сжатым. Его очень тяжело читать.
2
есть небольшое пассивное (и микро-) пространство. Вы заметили, насколько легче этот текст читается по сравнению с первым ?
3
белое пространство, что позволяет лучше ориентироваться в тексте. из первого примера становится текстом, к формату котрого мы привыкли. удобочитаелое пространство повышает общую удобочитаемость и усваиваемость текста, но оно также необходимо для сохранения здоровья глаз и душевной руавновешенности !

ключевы параметра дизайна, на которые влияет белое пространство

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

Помните последний пример с текстами ? пустого проства в дизайне влият на удобочитаемость и обще впечатление поль впечатление поль. Счастливые читатели скорее всего останутся на вашей странице.
2. Тональность дизайна и брендинг
Le système d'information de l'Union européenne (UEI) a été mis en place par l'UEI. количеством макро-белого пространства отражают минималишим количеством макро-белого пространства отражают минимализм итонченность. Сайты с меньшим количеством макро-белого пространства чаще всего бывают информативными, как в случае новостных сайтов.

Эти признаки не "высечены на камне". Всегда лучше протестировать использованную контрформу на ваших пользователях. Только они смогут сказать, как они воспринимают ваш дизайн.
3. Фокус и внимание
Les deux parties sont d'accord sur le fait qu'il s'agit de la même chose pour les deux parties, mais les deux parties sont d'accord sur le fait qu'il s'agit de la même chose pour les deux parties. и направлят внимание пределят точки фокуса и направлят на кользователя на конкретные части страницы.
сайта важно определить приоритеты - что на странице самое главное.

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

Резюме

1
область среди и вокруг всех элементов дизайна. Это инструмент дизайнера в проектировании пользовательского опыта.
2
Белое пространство не обязательно белое. Это просто наименование для определения мест, где нет никаких элементов контента.
3
зависимости от 4 факторов : контет, стилистика, пользователь и бренд.
4
для организации контента на макете и направленита такете и направления пользователя через блоки контента. пространство между элементами контента : текстом, изображениями изображениями прочим.
5
контрформе с точки зрения ее активности и пасивиности. белое пространство улучшает пользовательский опыт, оно нужно для удобства восприятия контента. Активное белое пространство управляет фокусом внимания пользователя. Оно помогает контенту выделиться и создать его "образ".

Mads Soegaard : Mads Soegaard
Перевод, иллюстрации, дизайн и верстка : Юлия Засс
расли материал вам понравился, расскажите о нем друзьям. Спасибо !
Читайте также :