Рубрика развивается при поддержке

Оформление текстов

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

В закладки

2 режима восприятия визуальной информации:

1. режим захвата, когда мы мельком глазами по диагонали глядим на текст и понимаем суть;

2. последовательное изучение, требующее мыслетоплива.

В идеале, необходимо сделать так, чтобы в документе самое важное “загружалось” в голову при прочтении.

Последовательное изучение похоже на “змейку”:

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

Берем “змейку”, на которой шрифт не читабельный, применяем данный инструмент. И видим, что увеличение шрифта не решает проблему читабельности никак.

Правила быстрого прочтения текста:

  • буквы меньше, текста - больше;
  • сократить строчку на 1/3.
  • увеличить интервал между строчками, а также ширину строки;
  • разбить “змейку” на “змеенышей”;
  • сделать больше свободного места по периметру “змейки”.

Основываясь на правилах, получаем вот такой текст:

Теперь гораздо легче читать. В нем можно выделить какую-то ключевую мысль.

Улучшаем читаемость текста по шагам:

1. Возьмем кирпич текста:

и увеличим его поля по краям. Обратите внимание, что на макетах дорогих брендов всегда очень много свободного места:

На сайте “Тинькофф” в графах заполнения данных могут поместиться целых три строчки, но разработчики оставили их широкими:

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

2. Правило уменьшения ширины строки на 1/3 меньше применяется в редких случаях. Чтобы его использовать, нужно знать определенное количество символов, которое должно помещаться в одной строке. Это количество определяется в индивидуальном порядке и не носит универсальный характер.

Обратите внимание, что тест, отделенный красной стрелкой предназначен для поисковых роботов, все остальное же - для обычный посетителей сайта.

3. Пример удачного межстрочного интервала:

​Идеальный деловой документ.

Разбили условно на части, так сказать превратили его в “змейку”.

Этот же текст делим на “змеенышей”:

Довели документ на максимально легкий для прочтения уровень.

Все подробности в видео:

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

Написать
{ "author_name": "Павел Лебедев", "author_type": "self", "tags": [], "comments": 2, "likes": 10, "favorites": 87, "is_advertisement": false, "subsite_label": "marketing", "id": 113327, "is_wide": false, "is_ugc": true, "date": "Wed, 18 Mar 2020 19:24:42 +0300", "is_special": false }
Простой коллтрекинг
для малого бизнеса
Новый алгоритм с
настройкой в два клика
Узнать больше
Коллтрекинг
без боли
Простые настройки
Умный алгоритм
Чистая аналитика
Подробнее
Простой коллтрекинг
для малого бизнеса
Знание источников продаж
постичь ты сможешь
познать
Простой коллтрекинг
для малого бизнеса
Знание источников продаж
постичь ты сможешь
постичь
(function(d, w) { var analyticsCategory = "CoMagic branding"; var sendEvent = function sendEvent(label) { var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Click"; var value = "" .concat(analyticsCategory, " \u2014 ") .concat(label, " \u2014 ") .concat(action); console.log("Analytics: %c".concat(value), "color: #E87E04"); if (window.dataLayer !== undefined && analyticsCategory) { window.dataLayer.push({ event: "data_event", data_description: value }); } }; var rand = function rand(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }; var id = rand(1, 4); var head = document.querySelector(".comagic-branding-head"); head.setAttribute("data-comagic", id); sendEvent(id + " — Header", "Init"); head.addEventListener("click", function() { sendEvent(id + " — Header"); }); var branding = document.querySelector( '.comagic-branding[data-comagic="' + id + '"]' ); branding.style.display = "block"; sendEvent(id + " — Footer", "Init"); branding.addEventListener("click", function() { sendEvent(id + " — Footer"); }); })(document, window);
0
2 комментария
Популярные
По порядку
0

Спасибо большое за информацию, очень интересная пища для размышлений 😄

Ответить
0

С удовольствием посмотрю видео! Спасибо

Ответить

Прямой эфир