Взвод, отступаем!
Соблюдай дистанцию, даже в дизайне 😷
Фундамент
Фундаментальный принцип зрительного восприятия абсолютно любой информации — принцип близости.
Расположенные на малых расстояниях объекты воспринимаются вместе и зависимо друг от друга, образуя одну сущность, а на больших — раздельно и независимо. По этому принципу выстраивается вся смысловая конструкция, а такие расстояния в дизайне называются отступами.
Вообще отступы применяются практически везде в повседневной жизни. Например, в письменной речи помимо абзацев роль отступов выполняют ещё и знаки препинания, такие как точка, запятая, двоеточие, скобки, тире и т. д. Они также разделяют речь на отдельные смысловые блоки. Заменив запятую на отступ, мы увидим как он влияет на смысл текста.
Сейчас у нас три независимых слова, где два постоянных значения «казнить» и «помиловать», а также одно переменное «нельзя». С помощью нужного отступа мы сможем создать визуальную связь и получить нужный нам смысл. Для этого мы уменьшим отступ к нужному значению, когда как другое значение останется независимым и будет считываться отдельно.
... тех, кто не изучит материал.
Так мы получили два равнозначных смысловых блока: «казнить» и «нельзя помиловать». С помощью такого базового и порой даже интуитивно понятного принципа и задаётся необходимая семантика.
Но в примере мы показали связь на малом масштабе. Контент же гораздо больше, а значит обязан рубрицироваться — делиться на множество объектов со своей целью и субординацией. Следовательно, отступы у каждого объекта должны быть разные.
Внутренние и внешние
Во всех корпоративных гайдлайнах по фирменному стилю прописан один важный параметр — защитная область для логотипа: некое личное пространство, в которое не должны входить иные элементы, не имеющие отношения к логотипу. Ничто не должно мешать идентифицирующему элементу легко считываться.
Общее название такой защитной области в дизайне называется внешним отступом: вывески на фасаде здания, поля журнала и книги. В html-верстке также есть разделение на внутренние и внешние отступы: padding (внутренние), margin (внешние).
Работа по распределению внутренних и внешних отступов опирается на конкретное правило. Такое правило называется, внезапно, «Правилом внутреннего и внешнего»:
Внешний отступ всегда больше, чем внутренний
Книжные поля — яркий пример внешних отступов. Страничный модуль является цельным блоком, состоящим из текстового модуля и его внешнего отступа, расположенным в пространстве: в комнате, в вагоне метро, в аудитории на парте.
Визуально, такой внешний отступ выделяет текстовый модуль на фоне остальных объектов пространства, и помогает читателю лучше сфокусировать внимание на нем.
Примечание: Конечно, книжные поля созданы выполнять и иную функцию: дать возможность читателю не закрывать текстовый блок пальцем, когда тот удерживает страницу.
Внутренним отступом, например, является межстрочный интервал текстового блока. Абзац состоит из строк текста, имеющих межстрочный интервал — те самые внутренние отступы. А все отступы связанные с самим абзацем будут являться внешними.
Текстовый модуль страницы, в свою очередь, состоит из нескольких абзацев. Следовательно, отступ между абзацами становится внутренним отступом, а поля всего текстового модуля — внешним. Значит поля по правилу должны быть больше, чем внутренний отступ.
Намеренно нарушив это правило, мы увидим, как блоки теряют свою связь и цельность, а малые поля заставляет текст спорить с границами конструкции, цепляться за края и теряться на фоне такого конфликта. Сфокусироваться и прочитать это тяжело.
Вернём все обратно и закрепим ещё раз основной тезис: внешний больше внутреннего, внутренний меньше внешнего.
Смысловые блоки
Как говорилось выше, всё состоит из связей. Связи нескольких объектов образуют новый объект: слова образуют строки, строки образуют абзацы или текстовые блоки, абзацы образуют страничный модуль.
Даже вспомним школьную физику: связь протонов и нейтронов образует ядро, связь ядра и электронов образует атом, связь атомов разных элементов образует молекулу, связь молекул — вещества, и так до бесконечности.
В дизайне такие объекты, состоящие из связей других объектов, называются смысловыми блоками. Главное правило, которое стоит запомнить при конструировании смысловых блоков:
Cмысловой блок состоит только из одной связи разных элементов.
Покажу на практике, как мы конструируем блоки из объектов:
У нас есть фотография спикера, его имя, его должность, а также интерактивный элемент позволяющий задать вопрос этому спикеру. Разложим эти объекты по смыслу и временно зададим равный отступ.
Согласно психологии восприятия, первое, на что пользователь будет обращать внимание, это лицо, а значит композиционно и по смыслу первой мы поставим фотографию. Далее, остановив своё внимание на фотографии, читатель интуитивно хочет узнать имя владельца, после, занимаемую им должность. Знакомство завершено, можно перейти к действию — задать вопрос.
На примере видно, что последовательность соблюдена, элементы читаются по порядку и логично, но все равно спорят друг с другом, перетягивают внимание друг у друга. Их надо породнить — задать элементам субординацию и связь. Помним, что одна сущность имеет только одну связь, создавая группу.
В первую очередь определим опорный элемент конструкции.
Самая важная информация в данном случае — это имя и фамилия спикера. Логично было предположить связь имени с фотографией, мы видим спикера и знаем как его зовут. Но по контексту спикер ценен именно как специалист, а значит логичная связь будет имя и должность. Зададим им минимальный отступ, и мы получим первую группу — смысловой блок.
Отступ берем произвольный для примера.
Теперь наша группа «имя+должность» это отдельный смысловой блок, отдельный объект, а значит может иметь следующую связь. Зная имя и должность спикера логично было бы связать с тем как он выглядет. Даем отступ больше предыдущего и получаем следующую группу имя-должность-фото.
Остались последний элемент и последняя связь, проверяем что семантика не нарушена. Мы имеем блок с информацией о спикере и кнопку «задать вопрос». Задаём еще больший отступ.
Так мы выстроили визуальную иерархию, разбив контент на смысловые блоки.
Когда у нас в одном блоке состоят одинаковые группы, мы задаём одинаковые отступы.
Не стоит забывать, что размер отступа также зависит от разницы размеров элементов. Чем больше эта разница, тем больший отступ мы используем, в противном случае крупный объект визуально проглотит малый.
Систематизация отступов
Поняв принципы, назревает следующий немаловажный вопрос: а откуда брать значения для отступов? Как они считаются? На что стоит опираться и почему?
Мы рассмотрим две отработанные системы получения единого набора отступов: пространственную и типометрическую.
Пространственная применяется дизайнерами для разработки, например, сложных интерфейсов на ограниченном пространстве, где в организации присутствуют меньше контента, а больше короткие информативные и интерактивные, как в расписании наших выставок.
Типометрическая используется в ситуациях где нам приходится верстать много контента и мы не ограничены в его подаче, будь то лонгриды или презентации.
Типометрическая система
Как следует из названия, принцип получения таблицы отступов полностью базируется на типометрии, о которой я рассказывал в предыдущих гайдах. Поэтому для понимания необходимо изучить гайды про типометрию и интерлиньяж, так как значения и принцип мы будем брать оттуда.
Поскольку система базируется на размере шрифта нам нужен отступ связанный с ним. Выше я писал, что межстрочный интервал является отступом. Следовательно, мы возьмём его значение как минимальное для нашей системы.
Помним, что отправной точкой для типометрии является размер шрифта основного текста, а значит и отступ считать мы будем от него. Поскольку в примере мы использовали значение в 20pt с интерлиньяжем 150% от размера шрифта или 30pt, от этих значений мы и будем отталкиваться.
Межстрочный интервал, напомню, это разница между интерлиньяжем и размером шрифта, то есть 50% или 10 pt. Это первое значение нашей системы отступов.
30pt – 20pt = 10pt
Чтобы посчитать остальные используем тот же принцип геометрической прогрессии: считаем и отступы умножая на заранее заданный коэффициент.
10pt × 1,618 = 16pt
И так далее:
Для совсем малых размеров мы также получим пару размеров. Но на этот раз будем делить.
Теперь мы получили систему отступов основанную на типометрии. Визуально это выглядит так:
Имея такую таблицу, не потратив лишних минут, вы сможете собирать контент в красивую и удобочитаемую конструкцию. Кстати, design.profi.travel свёрстан, при помощи типометрической системы.
Пространственная система
За основу построения пространственной системы берутся размеры зон размещения контента или интерфейса.
Её суть тоже достаточно проста: общий размер контентной части сайта или приложения мы делим на равные кратные клетки, которые мы берём за некую «единицу объёма» и строим наши отступы по количеству этих самых единиц.
Например, маленький отступ между малым заголовком и текстом состоит из 1 единицы, равной, допустим, 10px, а для отступов крупных блоков 3 единицы — значит 30px и так далее.
Несмотря на простоту самой механики, читателю может оказаться непонятным, как мы можем определить саму единицу объёма. В зависимости от основной задачи есть разные пути решения, которые мы рассмотрим на конкретных примерах.
Для начала заглянем в конструктор сайтов «Тильда», с которым многие знакомы. В готовых типовых блоках можно задавать отступы кратные только 15 и 30 пикселям — 30, 45, 60, 75, 90, 105, 120 и т. д.
А почему?
А почему?
Во-первых, это определено жёсткой модульной сеткой, ширина контентной части которой равна 1200px, а каждая колонка из 12 равна 60px.
Во-вторых, что очень важно, данный конструктор создавался в первую очередь для людей далеких от знаний веб-дизайна и вёрстки сайтов.
Перед разработчиками стояла задача определить некую единицу отступа, которая имела бы хороший шаг, была кратна размеру контентной части и, самое главное, предельно понятна пользователю-недизайнеру. Так они пришли к единице в 30px и её половине 15px.
Несмотря на наличие мобильной и планшетной версии, у Тильды отсутствует адаптивность. Опять же, так проще пользователю- недизайнеру конструировать свой сайт по фиксированной сетке.
А как быть с адаптивностью, как учесть гибкую модульную сетку и не запутаться какие отступы нам нужны? Вот здесь сейчас надо быть очень внимательными, будут подводные камни.
Начнём с того, что определим под какие экраны и дисплеи наш контент должен подстраиваться:
Главная особенность этих размеров — они все кратны 2, 4, 8, 16. Достаточно удобные значения, их мы возьмём на вооружение и выберем из них ту самую «единицу объёма».
Сразу же обговорим, 2 нам не подойдёт. Она маленькая, у неё слишком незначительный шаг, все сведётся к неудобству с большим значениям самих единиц, а верстальщик получая макет потребует деноминировать значение более чёткие и понятные. 16 наоборот, имеет большой шаг, но число менее гибкое — в ограниченном пространстве, например, на мобильном устройстве, помешает его оптимизации.
А вот 8, как некое среднее значение, как раз можно определить в единицу объёма — у него неплохой шаг и система будет более гибкой. Кстати, значение 4 мы не выбрасываем — оно нам пригодится, как и 16.
Наш первый опорный отступ и шаг
И теперь мы строим систему, суммируя клетки в квадраты.
А вот и подводный камень! Обратите внимание на то, что здесь ломается визуальная градация — чем больше отступы, тем менее заметна их разница в размерах. А все из-за того что мы используем один и тот же шаг в +8px на протяжении всего конструирования, в следствие чего градация размывается и система выглядит несбалансированной.
Ровная линия превращается в гиперболическую кривую
В типометрической системе этого не случилось. Шаг в типометрии всегда увеличивается в прогрессии вместе с размером шрифта, что сохраняет визуальную градацию. Значит, нашим значениям нужно задать такую же динамику.
Рассмотрим шкалу более внимательно:
В значениях 1, 2 видно как сильно клетки отличаются по размеру. Шаг относительно отступа достаточно большой, отступы увеличиваются рывками.
В значениях 3, 4, 5 и 6 разница все ещё ощущается, но не так рвано, как в первых значениях. Градация выглядит более сбалансированной — здесь наши значения работают правильно.
В значениях 7, 8 и 9 разница размылась по сравнению с предыдущими, значит шага в +8px им уже недостаточно.
Опираясь на сбалансированный сегмент 3−6, реконструируем нашу систему. Для сегмента 1−2 шаг +8px достаточно большой, а значит шаг нужен меньше. Вот тут нам и пригодится наша половинка в 4px. Добавим промежуточные значения:
Далее вступает сегмент 3−6. Здесь у нас ничего не меняется.
Сегменту 7−9 шага в +8px уже недостаточно. Значения шага 4 + 8 = 12px мы использовать не можем, так как нарушаем кратность размерам экранов устройств. Значит, берём шаг +16px, что логично, так как +4px половина от +8px, а +8px половина от +16px.
Сравним две градации:
Заметно, что градация Б, построенная на динамическом шаге, более явная и сбалансированная, при этом мы сохранили кратность значений к размерам экранов и устройств. Вот, что у нас получилось:
+8px
Фух!.. Кажется отбились
Это последняя статья из трилогии о систематизации контента в дизайне. Этот материал прорабатывался несколько месяцев, и все ещё очень далёк от идеала усвояемости. Поэтому настоятельно рекомендую перечитать эти материалы несколько раз, и вдумчиво.
Описанные принципы являются фундаментом, необходимым для дальнейшего погружения в теорию дизайна и применения знаний на практике.
Сопутствующие гайды и статьи:
ООО «Профи Трэвeл» 2020
Данный сайт является внутренним ресурсом компании Profi.Travel служащим для оптимизации и регуляции рабочих процессов и не применяется в коммерческих целях
