Главное Свежее Вакансии Образование
17 002 17 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Теория близости: главное правило дизайна, которое расставляет все по местам

Впервые о теории близости я прочитал в 2007 году. Она была сформулирована так: «объекты, расположенные близко друг к другу, воспринимаются связанно». Тогда я подумал: «спасибо, Кэп! Я как-то и сам догадался, что букву “М” нужно вешать ближе к мужскому туалету, а не к женскому».

Тогда я не осознал, что это одно из главных правил дизайна, которое помогает подбирать расстояния между элементами, размеры полей, расположение кнопок, размер логотипов и многое другое. А главное, теория позволяет быстро понять, хороший перед вами дизайн или нет, даже если вы не дизайнер.Обычно теорию близости иллюстрируют разными геометрическими фигурами, которые то ближе, то дальше друг от друга. Это выглядит очевидно, как и сама формулировка теории, но когда дело доходит до практики, возникают проблемы. Поэтому я попробую объяснить основы теории на примере букв: b_58d7faf4751bc.jpg Даже тут теория близости начинает работать: буквы в словах должны быть ближе друг к другу, чем слова. Как только расстояние между буквами приближается к ширине пробела, наступает хаос: b_58d7faf4acbd7.jpg Это очевидно, но давайте применим то же правило к расстоянию между строками. Что должно быть связано сильнее: строки или слова в строках? Очевидно, что слова связаны сильнее, поэтому и расстояния между словами должны быть ощутимо ближе, чем между строками. Что значит ощутимо ближе? Если сделать межстрочное расстояние раза в полтора больше пробела, они начнут явно отличаться: b_58d7faf533db8.jpg Для сравнения — тут межстрочный интервал (интерлиньяж) пережат и почти равен ширине пробела: b_58d7faf59a55c.jpg Чувствуется, что его нужно увеличить, но насколько? Благодаря теории близости мы знаем ответ: чтобы он стал ощутимо больше ширины пробела. Многие дизайнеры делают это на уровне интуиции, без понимания внутренней логики. У кого-то получается лучше, у кого-то хуже. Допустим, нам надо расположить текст на плашке. Теория близости работает как гравитация — объекты, которые выглядят более массивными «притягивают» к себе более мелкие. А границы формата, будь то страница книги, окно браузера или край визитки, можно представить как границы с массивной черной дырой — когда мы приближаемся к ним, начинает работать внешнее притяжение. Расположим текст на плашке: b_58d7faf5d4856.jpg Вроде бы все аккуратно и ровно. Но если вспомнить теорию близости, можно понять, что отступы от края «спорят» с расстоянием между абзацами, то есть они почти равны: b_58d7faf61c06c.jpg Нужно сделать отступы ощутимо больше расстояния между абзацами, тогда будет однозначно восприниматься, что они внутри формата, а не стремятся наружу: b_58d7faf661fb6.jpg Давайте добавим заголовок: b_58d7faf6a26dd.jpg Подобную ошибку дизайнеры допускают чаще всего. Заголовок или подпись должны однозначно относиться к тексту. На практике заголовки часто зависают ровно посередине между двумя текстами или в расстояние между заголовком и текстом вмешивается иллюстрация: b_58d7faf6df300.jpg Давайте сверстаем заголовок и текст следуя логике теории близости: буквы в словах связаны сильнее слов, слова связаны сильнее строк, строки связаны сильнее абзацев, абзацы связаны сильнее заголовка и текста, заголовок вместе с текстом связаны внутри формата. Это поможет подобрать правильные расстояния: b_58d7faf73161f.jpg Пользуясь теорией близости, легко перейти от абстрактных «слишком близко к краю» к конкретике: «подпись должна быть ближе к полю, к которому она относится, чем к краю формы». Например, в этой анимации дизайн формы шаг за шагом изменяется с помощью теории близости, и логически связанные элементы становятся ближе друг к другу.b_58d7fc3610133.jpgТак, связывая и разделяя элементы расстоянием и массой, можно делать логичные и аккуратные сайты, презентации, буклеты. Кроме того, теория близости помогает объективно оценивать дизайн. Например, тут дизайнер не заморачивался и расставил элементы как попало: b_58d7faf7b738a.jpg Сходу не понятно, у какой новости какое время публикации, заголовок завис между текстом и иллюстрацией. Зная теорию близости легко понять, думал ли дизайнер об удобстве восприятия, а также легко дать четкие инструкции по улучшению. Пока другие просят «добавить воздуха» или «причесать дизайн», с теорией близости можно быть конкретным: «заголовок должен быть ближе к новости, к которой он относится». Конечно, стопроцентной точности до пикселя добиться нельзя, но можно сделать большой шаг в сторону объективности, чего в дизайне так не хватает. Надеюсь, у меня получилось объяснить основы теории близости не слишком абстрактно, но и не слишком запутанно. Думаю, они помогут вам, как и мне когда-то, лучше понимать логику дизайна и перейти от субъективных ощущений к конкретным и логичным действиям.

+29
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Евгений Стоичков
все верно. вполне даже хрестоматийно. я, даже в таком случае аналогичный материал сам писать не буду, а буду ссылаться на эту статью.
Ответить
Хабил Батыршин
Спасибо за статью! Вы ещё расскажите про другие способы управления вниманием?
Ответить
Alexey Pedosenko
Роман, спасибо за пост — очень полезно помнить о таком.
Ответить
Сергей 19698
Вопрос только в том, что алгеброй гармонию не измерить, все равно надо даверяться интуиции..
Ответить
Алексей Чалов
не стоит, даверяй словарю
Ответить
Игорь Гец
Это должно быть полезно дизайнерам, жаль, что это воспримут единицы, т.к. остальные сами гуру)
Ответить
Серёжка Терновых
Раз https://www.artlebedev.ru/kovodstvo/sections/136/

И два — развёрнутый вариант с большим количеством примеров
http://artgorbunov.ru/bb/soviet/20140818/

Зачем повторяться, сослались бы просто :)
Ответить
Евгений Стоичков
фуфу, автор написал как раз четко по делу. а эти два божества церкви самого себя один фуфло , другой занудство гонят. ортемия первого вообще не считаем. там ахинея из серии "мальчик до 20 лет сидел у мамки под юбкой, вылез и стал описывать как удивителен этот мир и учить всех как правильно пользоваться общественными сортирами". Ортемий Второй, невыносимо утомляет своим крючкотворством.

и да насрать, пардон, что уже "типа было". у ортемия 90% всего кретаифа "уже было раза 2".
Автор, пиши еще. Я не всегда с тобой согласен, но тебе есть что говорить.
Ответить
Серёжка Терновых
Ммм, в наших кругах к этим ребятам относятся с уважением. И если вам в одном месте слишком поверхностно, а во втором заумно, видимо эта тема не для вас.

Если интересны базовые правила дизайна в доступной форме — подпишитесь на книгу Типографика и верстка на сайте Горбунова
Ответить
Евгений Стоичков
Ваши круги это что такое? Вы из какой эпохи? Я прям растерялся. Если бы вы сказали что в ваших кругах Катю Клэп уважают мне было все ясно. Это не хорошо и не плохо, это было бы ясно. А так, я слышу от вроде не пенсионера что " В наших кругах Кобзона и Баскова уважают" или "в наших кругах бабушкины серванты уважают". Че за круги? "Дизайнеры рунетов из 2000х " или "дети дизайнеров рунетов из 2000х".Или " мы приехали з сэла, и дизайну научились в бурсе англицкого дызайну". Это я сейчас не лично вам, это я "кругах" так себе представил.
Мне так точно не интерсны "базовые" правила дизайна, особенно от выходцев из Говностудии. Горбунов неплохой чувкак, и его творчество я знаю еще с незапамятных времен, но кумарит это создание секты книжных червей вокруг и всех этих курсов коучингов. И лично мне ни в этой статье, ни в писанине горбуновых-толстых читать нечего. Я это прочитал лет 15 назад в оригиналах. А еще раньше дошел до всего сам. Но эта статья хоть и не огининальна в отличие от вышеуказанных Евангелий хорошо годится показывать всяким безруковым экономя время на мои объяснения.
Ответить
Денис Хабибуллин
Да у Лебедева бред через страницу написан, типа креативный Мэн. А здесь ребята четко расписали.
Ответить
Pragmatika
Продуманные и понятные сайты для продажи товаров и услуг в интернете.
Николай Яковенко
Если кто-то о чем-то писал, это не повод не писать об этом самому. Тут хорошая, самобытная статья.

Кстати, о правиле внутреннего и внешнего писали не только Лебедев и Горбунов. "Книга по верстке для тех, кто не умеет верстать", автор Робин Уильямс. Когда ее перечитываю, то возникает ощущение, что половина Советов про верстку — пересказ этой книги.
Ответить
Нерудас
сайт для владельцев спецтехники
Елена Рокотова
да, только недавно про соотношение внутреннего и внешнего читала в книге Типографика и верстка, а так же на сайте Горбунова куски выложены. кого интересует системно, всесторонее эта тема - по ссылке выше на сайте Горбунова есть. а тут рерайт и копипаста
Ответить
u4et.ru
Вэб-приложение для ведения складского, торгового и управленческого учета
Ильшат Кил
Есть ли дизайнеры придерживающиеся этого метода? Я бы поработал с таким
Ответить
Egor Silonov
Большое спасибо за эту статью. Я занимаюсь продвижением и часто в статьях прошу все выровнять, чтобы читателю было легче воспринимать информацию. Только это было где то на интуитивном уровне. Сейчас знаю конкретное руководство!) Спасибо!)
Ответить
Анна 69175
Очень неудобно, что скрины "плохого" и "хорошего" находятся не рядом. Приходится постоянно скроллить туда-сюда. Были бы рядом - визуальная разница была бы более очевидна.
Ответить
Arman Marabyan
Спасибо хорошая статья!
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.