Улучшение читаемости текста. Как выбрать контрастные цвета

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

Что такое истинная близость? Это максимальная открытость между двумя любящими людьми, которая предполагает душевную уязвимость. Когда оба партнера 100% честны друг перед другом, не боятся доверять свои мысли, чувства, страхи или мечты. Близость — это возможность прикоснуться к душе человека, принять его настоящего со всем грузом прошлого, выдержать внутреннее сопротивление. У близости, как и у любви, есть свои правила, о которых мы сегодня поговорим.

12 правил близости: как нужно любить?

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

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

3. Близость не стирает личностные границы партнеров, наоборот, делает их куда более четкими и ясными. Чем интимнее устанавливается общение, тем плотнее идет взаимодействие, тем понятнее правила игры.

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

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

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

7. Даже в самых близких отношениях между супругами могут существовать секреты, это нормально. Но лучше стремиться минимализировать «слепые зоны», быть максимально открытыми.

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

9. Отказ от секса не равен отказу в любви. Кроме сексуальной близости, есть еще много вариантов проявления нежных чувств. Нежелание интимных отношений не значит, что партнеры не могут быть близки.

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

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

12. Близость не дает никаких гарантий, что любовь в паре продлится вечно. Нет гарантий, что человек не уйдет, найдя свое счастье рядом с кем-то другим. Чужие чувства сложно запрограммировать, они не являются нашей собственностью. Но раз уж наши миры пересеклись, лучше постараться сохранить в сердце огонь благодарности.

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

Когда же переходить к сексу? «Правила» зависят от вашего возраста и личных чувств. Если вам 18 и вы – девственница, дождитесь обручения. Если вам 39, то можете выждать месяц-другой. Конечно, если вы – убежденная противница секса вне брака, можете ждать и до свадьбы. Любящий мужчина отнесется с уважением к любому вашему решению.

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

А если вам тоже нравится заниматься сексом и отказ так же тяжел для вас, как и для него? Значит ли это, что нужно соглашаться на секс на первом или втором свидании? Увы, нет, нет и еще раз нет. Вы должны запастись терпением. Поверьте, вы не пожалеете о нескольких неделях или месяцах воздержания. Зачем рисковать? Вы можете показаться мужчине легкой добычей, и он на следующий же день выложит все подробности приятелям в раздевалке спортзала. Лучше пусть он сердится и придумывает новые способы, которые помогут ему соблазнить вас на следующем свидании, чем отправится к следующей девушке. Ожидание лишь усилит его желание, а страсть, когда вы наконец решитесь на секс, будет неутолимой.

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

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

Вы можете возразить, что не против заняться сексом с мужчиной на первом или втором свидании и испытать судьбу, даже если потом он не позвонит. В конце концов, вы оба – взрослые люди и сами решаете судьбу своих отношений. По личному опыту мы точно знаем, что девушки, которые заявляют нечто подобное, попросту лгут сами себе. В глубине души женщина будет страдать, если мужчина, с которым она провела ночь, больше не позвонит. Каждая женщина хочет, чтобы мужчина, с которым она занималась сексом, продолжал отношения с ней – конечно, если он ей по-настоящему нравится (а мы предполагаем, что женщины идут в постель только с теми, кто им действительно нравится). Все наши знакомые, которые говорили, что в разрыве после секса нет ничего страшного, очень переживали, когда оказывались в подобной ситуации. Соглашаясь на секс на втором свидании, вы не знаете, окажется ли ваш партнер джентльменом или скотиной. Девушки «Правил» не рискуют. Они должны как следует узнать человека, прежде чем согласиться на секс с ним.

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

Отдыхая в постели после отличного секса, не говорите:

– Хочешь, я освобожу в шкафу полку для твоих вещей?

– Я положила для тебя зубную щетку в ванной.

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

– А теперь, когда мы спим вместе, как будут развиваться наши отношения? Что для тебя значит все происшедшее?

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

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

Если вы встречаетесь с мужчиной месяц-другой и не собираетесь заниматься с ним сексом, будет справедливо дать ему знать. Иначе вы будете просто дразнить его. Но что, если секса вам хочется куда больше, чем ему? «Правила» дают нам такой ответ на этот вопрос: не хотите проблем – не заговаривайте о сексе. Когда ваши отношения станут серьезными, когда вы поймете, что он с ума от вас сходит, только тогда можно будет заговорить об этом – невзначай и в шутку.

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

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

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

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

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


Для сравнения - тут межстрочный интервал (интерлиньяж) пережат и почти равен ширине пробела:


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

Допустим, нам надо расположить текст на плашке. Теория близости работает как гравитация - объекты, которые выглядят более массивными «притягивают» к себе более мелкие. А границы формата, будь то страница книги, окно браузера или край визитки, можно представить как границы с массивной черной дырой - когда мы приближаемся к ним, начинает работать внешнее притяжение. Расположим текст на плашке:


Вроде бы все аккуратно и ровно. Но если вспомнить теорию близости, можно понять, что отступы от края «спорят» с расстоянием между абзацами, то есть они почти равны:


Нужно сделать отступы ощутимо больше расстояния между абзацами, тогда будет однозначно восприниматься, что они внутри формата, а не стремятся наружу:


Давайте добавим заголовок:


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

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


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


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

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

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

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

• Поля и отступы
• Пространство вокруг изображений и графических элементов
• Межстрочный интервал и расстояние между буквами

И хотя некоторые люди могут считать все разновидности пустоты пустой тратой ценного пространства, все они являются очень важными элементами дизайна. Фактически все поля, пробелы и отступы так же важны, как и сам контент. Эту мысль очень четко выразил Ян Чичолд: «Пустое пространство следует рассматривать как активный элемент, а не как пассивный фон».

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

Улучшение читаемости текста

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

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

Уточнение соотношений элементов

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

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

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

Дизайнер может использовать пустое пространство для того, чтобы сообщить пользователю нечто важное, то, что должно быть заметным с первого взгляда. У расстояния между объектами и привлечением внимания есть прочная связь – чем больше расстояние, тем больше внимания привлекает объект. Отсутствие других элементов поблизости приведет к тому, что объект будет больше выделяться на фоне. Знание этого правила позволит дизайнеру управлять вниманием пользователя – окружая главные элементы пустым пространством, он будет «вести» взгляд зрителя от одной части дизайна к другой. Пустота вокруг элемента заставляет посмотреть на него просто потому, что рядом больше ничего нет. При этом белого пространства не должно быть слишком много – иначе в дизайне пропадет логика и люди перестанут воспринимать соотношения между элементами.

Визуальная иерархия

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

Mailchimp, как можно видеть из приведенного выше примера, является большим сторонником использования пустого пространства во всех своих проектах. Когда посетитель попадает на главную страницу Mailchimp, кнопка бесплатной регистрации «Sign Up Free» привлекает внимание почти сразу. Используя симметрию, дизайнер может создать сбалансированную компоновку с одинаково важными правой и левой частями макета.

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

Вывод

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