бесплатно без регистрации урок 2 из 16

Порядок важности

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

7 мин чтения · 3 главы ·6 заданий ·домашняя работа

Три уровня

Порядок важности — это ответ на первый из трёх вопросов: что здесь главное. Он строится не словами, а видом, и человек читает его до того, как прочёл хоть одно слово.

Главноеодно на экранВторостепенноенесколькоСлужебноевсё остальноечетвёртый уровень читается как один из трёх, а не как новый
Больше трёх глаз не различает: восьмой «выделенный» элемент уже ничем не выделен.
УровеньСколько его на экранеПример
главноеоднозаголовок, цена, кнопка действия
второстепенноенесколькоподзаголовки, названия разделов
служебноевсё остальноеподписи, сноски, даты

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

Отсюда первое практическое следствие: «выделить» можно не всё. Просьба «сделайте это тоже поважнее» всегда исполняется за счёт чего-то другого — либо главное перестаёт быть главным, либо новое выделение оказывается неотличимым от служебного. Третьего не бывает, и сказать об этом лучше сразу.

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

Чем показывают важность

Второе — чем показывают важность. Средств четыре, и у каждого своя громкость.

РазмерВесЦветМестовидно дальшевсеготише размера,работает в текстесильный, нокапризныйвыше и левее —раньшедвух средств почти всегда достаточно: размер и вес,размер и место. Четыре сразу читаются как крик
Одного размера обычно мало, а всех четырёх сразу — уже слишком.
СредствоНасколько сильноеГде осторожно
размерсамое сильное, видно дальше всегомелкое главное не спасёт ничем
вес (насыщенность)тише размера, работает внутри текстаполужирного абзаца не бывает
цветсильное, но капризноена печати и у дальтоников исчезает
местотихое и надёжноевыше и левее — значит раньше

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

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

Как это ломается

Третье — как порядок важности ломается. Способов немного, и все они узнаваемы.

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

Последняя строка — самая частая и самая тихая. Разница меньше полутора раз не читается с одного взгляда: человек видит, что «тут что-то немного другое», и не понимает, уровень это или случайность. Поэтому заголовок делают не на два пункта крупнее текста, а в полтора-два раза.

И противоположная беда, которую почему-то считают безопасной: «выделено всё» — это то же самое, что «не выделено ничего». Документ, где жирным набрана половина предложений, читается ровно как документ без единого выделения, только медленнее. Автор при этом уверен, что он помог читателю.

Отдельный случай — чужие требования. «По закону эта строка должна быть не мельче основного текста», «здесь обязателен дисклеймер» — такие требования порядок важности не отменяют, а сужают. Служебная строка, которую нельзя уменьшить, делается тише другими средствами: серее, в стороне, ниже. Главное остаётся главным.

Задания урока

Каждое проверяется сразу: ответ сверяется с эталоном, и на неверный вариант приходит разбор.

  1. Чем больше уровней важности, тем понятнее устройство страницы.легко
  2. Три уровня должны различаться с одного взгляда. Настройте размеры так, чтобы заголовок читался главным, название раздела — вторым, а подпись — служебной.средне
  3. К какому уровню это относится?средне
  4. Отметьте место, где порядок важности сломан.средне
  5. Основной текст 12 пунктов. Каким должен быть заголовок, чтобы разница читалась с одного взгляда — то есть не меньше чем в 1.5 раза?средне
  6. Заказчик просит: «Выделите ещё и телефон, и адрес, и часы работы — это тоже важно».сложно
Пройти урок с проверкой заданий Курс «Основы дизайна» открыт и бесплатен, прогресс сохраняется.
Открыть курс