Белое пространство Распечатать

Автор: Ярослав Бирзул \ Опубликовано 12 января 2008 года в категории Полезные заметки \

Я давно хотел написать что-либо полезное на такую благородную тему, как эта, но мне постоянно удавалось найти какую-то другую, более легкую в восприятии читателей тему, и всё таки сегодня я решился.

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

whitespace

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

Изначально пустое, белое пространство — чистый лист. Я думаю, вы наверняка рисовали когда-то на обычном листе А4 формата. Так вот — когда вы рисовали несколько рисунков я глубоко сомневаюсь, что вы использовали в качестве раздлителя своих каляк-маляк линии. Наверняка вы рисовали небольшие рисунки в разных частях листа, и это помогало воспринимать их как отдельные элементы. Та же ситуация и в сайтостроении — чтобы показать, что какой-либо элемент не принадлежит другому, или не является с этим самым другим одним целым — их нужно разделить. Логично? Я думаю да. А делить мы будем девственным, белым пространством.

Что?

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

Макро whitespace

WhiteSpace (или Белое пространство) — расстояние между несколькими логическими блоками на сайте, которое помогает эти же блоки отделить друг от друга, улучшает общую композицию на сайте. Делится на два разряда — макро, микро, что позволяет определить специфику воздействия на пользователя для каждого из них.

Что нужно понимать под макро и микро? Я думаю вы уже догадались чисто интуитивно, что макро — это большое белое пространство, которое определяет между собой сами логические блоки на сайте. Микро же — определяет пустое пространство между несколькими элементами уже в самом блоке.

Микро whitespace

Зачем?

Что это за зверь я думаю вы поняли, и вопросов по этому поводу быть не должно. Зато наверняка будут вопросы зачем же белое пространство вообще нужно? С этим всё просто — пустое пространство нужно как альтернатива линиям, полосам, и другим неблагородным элементам.

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

Текст без белого пространства

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

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

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

Как?

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

  • Между заголовком и основным текстом
  • Между двумя явными блоками (На моем примере — «Рубрики» и «Последние записи».
  • Между элементами в отдельном блоке, которые никак логически не связаны
  • Между двумя схожими элементами, дабы избежать каши в головах пользователей (см. выше мою подписку на rss — между двумя элементами есть пустое микро-пространство)
  • Между изображением и текстом (Я решил эту задачу добавив 10-пиксельную окантовку в каждом сопровождающем изображении, это тоже выход)

Причем явно не стоит использовать whitespace в таких ситуациях как:

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

Выводы

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

Тем временем

1. Мишка Квакин придумал усыГи… Жуть какая-то.

2. Юра Гугнин пишет о моде на треш в дизайне.

3. Сергей Чаботько обозревает СЕО блоги.

4. Футуриус раскрывает планы относительно будущего своего блога.

Похоже заметки



27 ответов в статье «Белое пространство»

ZAV39 пишет нам 12 января, 2008 в 5:29

Да, пространство рулит :)

Ярослав Бирзул пишет нам 12 января, 2008 в 7:42

ZAV39, еще как, главное потом самому о нем не забывать :)

McBumf пишет нам 12 января, 2008 в 11:21

Странно слышать столько негатива относительно линий, полос и “т.п. мишуры”. Надеюсь это шутка? Я всегда считал эти элементы, как впрочем и белое пространство, основами основ вэб-дизайна и юзабилити. Безусловно, не стоит с ними перебарщивать и пихать как разделители всего и вся, но и так категорично пренебрегать, думаю то же не дело. на многих сайтах с эталонными интерфейсами (facebook, wikipedia) линии используются и для отделения заголовка от содержания, и между явными блоками. Так что, главное знать меру и как раз не зацикливаться на чем-то одном. Я понимаю, ваш блог, в основном, читают люди, у которых присутствует вкус и чувство гармонии, но если вдруг заглянет какой-нибудь дилетант, он может принять вывод этой статьи буквально и массово кремирует ни в чем неповинные полосы и линии в своём недодизайнерском сознании +)
А в целом за статью спасибо! Как раз столкнулся с необходимостью убедить клиента в том, что белое пространство- это добро, а делать разные версии дизайна, чтобы наглядно ему это продемонстрировать- в лом +) Но с вашими аргументами, думаю и на словах его удасться убедить, если вы, конечно не против +)

Ярослав Бирзул пишет нам 13 января, 2008 в 2:32

McBumf, линии раздражают глаз в своем стандартном виде - белое пространство - нет :) Разумеется, пользуйтесь статьей )

rusblaze пишет нам 15 января, 2008 в 6:07

Ох и не всегда линии раздражают. Возьмите те же порталы. Куда там без линий? Да, пустое пространство - замечательный инструмент. Но, скажите, чем Вам так линии не угодили?

Ярослав Бирзул пишет нам 15 января, 2008 в 7:37

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

Если нет - покажите положительные примеры, где пустое пространство проигрывает.

rusblaze пишет нам 16 января, 2008 в 11:25

Честно искал. Искал сайт (не блог, а именно сайт. Блоги - отдельная песня), где белое пространство решало бы все проблемы разделения информационных блоков и где линии явно лишние. Единственный более-менее приближенный к этому идеалу сайт: http://kommersant.ru/. Но и тут видим цветовое, стилевое деление на блоки, а так же столь нелюбимые Вами линии (что интересно, здесь они используются по-минимуму, да и не выделяются. Но роль свою выполняют на ура).

Кроме того, наткнулся на несколько сайтов, где линии правят бал (http://www.yahoo.com/, http://www.cnn.com/ etc.) и один, где whitespace явно проигрывает (http://news.bbc.co.uk/). Надеюсь, я правильно Вас понял? :)

Ярослав Бирзул пишет нам 16 января, 2008 в 11:37

rusblaze, я нанесу ответный удар :)

1. С каких пор блог стал не сайтом?
2. Главный авторитет - Хабрахабр - http://www.habrahabr.ru - никаких лишних линий.
3. Второй авторитет - Газета - http://www.gazeta.ru
4. Третий авторитет - Memori.ru - интерфейс на который поклоняются.
5. Еще авторитет - Google
6. Ну и интерфейс, которому вообще можно поклонятся - почему-то абсолютно не содержит линий: http://www.yandex.ru (ya.ru)

Yahoo, CNN с точки зрения юзабилити проигрывают даже украинской Meta (www.meta.ua), не стоит их в пример приводить.

Посмотрев BBC News - не согласен, что там whitespace что-то и кому-то проигрывает :)
http://news.bbc.co.uk/ - содержит кучу линий, а пустого пространства как раз там мизер, всё сжато, как-будто места нехватало для всего.

Ярослав Бирзул пишет нам 16 января, 2008 в 11:40

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

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

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

rusblaze пишет нам 16 января, 2008 в 12:19

Так. Наша песня хороша, начинай сначала. Линии есть везде, куда Вы указали (в том числе и на Яндексе ;)) Такие вещи, как цветовое выделение блоков используется и на Вашем новом интерфейсе. Видимо, я что-то не так понял :(

Теперь по порядку.
1) блоги - сайты, но специфические. Между прочим, я не оспариваю пользу whitespace. Загляните на мой бложек, там есть ТОЛЬКО пустое пространство в качестве разделителя.
2) Хабрахабр не такой уж и авторитет, честно говоря. Кроме того, структура явно блоговая, а блоги я трогать не хочу…
3) Мемори - хороший интерфейс. Понятность и простота восприятия достигаются, в основном, за счет того же цветового деления и … линий :)
5 - согласен, качественно
6 - не до конца согласен. Местами бред, но яндекс вообще отдельная и долгая песня :)

Найдите 10 принципиальных отличий главных страниц meta и yahoo… :)

Короче. Чтобы избежать флудовости записей… Использовать линии и прочие “неблагородные” разделители не только можно, но и нужно. К месту. Со вкусом. Без них как-то бедновато. А юзабилити - это далеко не только понятность. Насыщенность и грамотность интерфейса (особенно, веб) приносят удовольствие, что очень важно.

Касательно нового интерфейса, представленного картинкой… Как уже сказано, есть неблагородные разделители. ОЧЕНЬ мало (респект, что получилось:)), но есть. Думаю, прочие качества интерфейса обсуждать здесь не будем? ;)

Ярослав Бирзул пишет нам 16 января, 2008 в 12:45

1. Да, я уже смотрел.
2. С каких пор Хабр не авторитет? :)
3. Линий на мемори нет

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

rusblaze пишет нам 16 января, 2008 в 1:44

Хабр не так авторитетен… Ну, для меня например, после пары статей на неактуальные темы.

Касательно линий… Хотелось бы вставить картинку :) Ладно, видимо мы линиями разные элементы называем.

Я бы предложил сойтись на том, что нужно использовать тот тип разграничителя, который подходит для данного дизайна, не постулируя whitespace, как самый-самый лучший :). Собственно, эту мысль я и хотел выразить в комментариях к Вашей статье.

Злоупотреблять вообще ничем не стоит ;)

Спасибо за диалог!

Ярослав Бирзул пишет нам 16 января, 2008 в 1:47

rusblaze, и вам :)

Yorick пишет нам 18 января, 2008 в 11:25

Отличная статья, эта тема и правда нигде не освещалась нормально, а между тем она довольно животрепещущая в свете распространения моды на “чистый”, глянцевый дизайн - в этом смысле whitespace лучший друг и помощник.

Ярослав Бирзул пишет нам 18 января, 2008 в 11:35

Yorick, да - благодаря моде на чистые 2.0 интерфейсы, без малейшего “выпендрежа” белое пространство является лучшим другом и товарищем.

Midgard пишет нам 19 января, 2008 в 8:20

Спасибо за перевод статьи alistapart.com ;)

Ярослав Бирзул пишет нам 19 января, 2008 в 8:43

Midgard, какой?

Midgard пишет нам 19 января, 2008 в 9:43

http://www.alistapart.com/articles/whitespace/

Ярослав Бирзул пишет нам 19 января, 2008 в 9:55

Midgard, прочитал, благодарю. У дураков мысли сходятся.

Midgard пишет нам 19 января, 2008 в 10:11

Всегда пожалуйста :) У нас все для человека, все во благо человека (c) :D

#1313 пишет нам 4 июня, 2008 в 11:53

вам не кажется, что линий всё-таки многовато? :)

Ярослав Бирзул пишет нам 4 июня, 2008 в 12:12

#1313, кажется. Это было связано с тем, что в бытность предыдущего дизайна мне приходилось форматировать статья с помощью “цитат”, из-за глючности редактора. Они были без линий.

О простоте | О юзабилити веб интерфейсов пишет нам 21 июня, 2008 в 4:05

[...] Грубо говоря – это продолжение к нашумевшей статье о Белом пространстве, так как без него простота быстро становится [...]

Константин пишет нам 26 июня, 2008 в 7:19

Старнно, что вы не нашли статьи на тему whitespace(негативное пространство, белое пространство). Я видел несколько переводов указанной выше статьи на русском. [Не говоря уже о том что готовил к публикации один из них ;)]

Негативное пространство это мощный, но не универсальный инструмент. У него есть небольшая сложность в применении ввиду того, что негативное пространство это не пустое пространстао.

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

Довольно давно я читал шикарнейшую и самое главное доступную для простого смертного книги о дизайне, которая так и называется “Недизайнерская книга о дизайне”… очень всем рекомендую.

Ярослав Бирзул пишет нам 26 июня, 2008 в 11:01

Константин, эта книга у меня лежит на полке, никак не удосуживаюсь взяться за неё.

По поводу статей: ну на момент написания (пол года прошло) я не нашел ни одной статьи на русском.

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

Блочная разметка в проектировании | О юзабилити веб интерфейсов пишет нам 24 июля, 2008 в 11:51

[...] 3. Если для того, чтобы разделить какие-либо блоки, или внутренние под-блоки цвета вам уже не хватает (довольно частый случай в моей практике) - смело используйте линии, немного градиентные плашки (но в градациях серого), и пустое пространство. [...]

Комментируйте