Выключка (выравнивание)
Это способ выравнивания текста на странице или в колонке относительно её границ – по левому краю, по правому, по центру, по ширине.
Что в видео-уроке:
В уроке разбираем основные виды выключки и правила их применения в веб-дизайне. Рассмотрим выравнивание по левому и правому краю, по центру и по ширине, а также научимся сохранять единую композиционную логику внутри блоков и повторяющихся элементов.
Выключка по левому краю — основной вариант
В русскоязычных интерфейсах основной вариант — выравнивание текста по левому краю. Мы читаем слева направо, поэтому фиксированное начало каждой строки привычно для восприятия: глазу легче находить следующую строку и двигаться по тексту.
Особенно важно это для объёмных текстовых блоков. При левом выравнивании строки начинаются с одной вертикальной линии, благодаря чему текст остаётся предсказуемым и легко считывается.
Для языков с направлением письма справа налево система может быть другой, но при проектировании русскоязычных сайтов выключка по левому краю остаётся базовым решением.
Центрирование подходит для небольшого количества текста
Выравнивание по центру допустимо, если текст короткий. Оно может хорошо работать для:
- заголовков;
- небольших подзаголовков;
- текста в две-три строки;
- CTA-блоков;
- компактных элементов первого экрана.
Чем длиннее текст, тем сложнее его воспринимать при центрировании. Начало каждой строки оказывается в новой точке, поэтому глазу приходится постоянно искать место, откуда продолжать чтение.
Если текст занимает четыре и более строк и превращается в полноценный абзац, в рамках курса лучше переходить к левому выравниванию.
Правое выравнивание используйте в отдельных случаях
Для длинного текста выключка по правому краю неудобна: начало каждой новой строки постоянно смещается, что затрудняет чтение слева направо.
Однако такое выравнивание может использоваться ситуативно, например:
- для коротких подписей;
- отдельных слов;
- некоторых колонок таблиц;
- элементов футера;
- композиционных групп, привязанных к правой границе.
Иногда справа выравнивается не только текст, но и целая группа: логотип, подпись или другие связанные элементы. Если такое решение помогает сформировать устойчивую композицию и поддерживает общую ось, оно вполне допустимо.
Выравнивание по ширине лучше не использовать
При выключке по ширине текст растягивается от одной границы блока до другой. Чтобы заполнить строку, программа увеличивает или уменьшает расстояния между словами.
В результате возникают неравномерные пробелы: где-то слова расположены нормально, а где-то между ними появляются заметные пустоты. Такие разрывы нарушают ритм и усложняют чтение.
Особенно сильно проблема проявляется в адаптивных версиях. Когда ширина текстового блока уменьшается, в строку помещается меньше слов, поэтому свободное пространство между ними может увеличиваться ещё сильнее.
На десктопе подобный текст иногда выглядит относительно аккуратно, но при переходе на мобильную версию внутри предложений могут появиться огромные пробелы. Поэтому для веб-интерфейсов в рамках курса от выключки по ширине лучше отказаться.
Однотипные элементы должны иметь одинаковую выключку
Внутри одного блока повторяющиеся элементы лучше строить по единому принципу. Например, если блок преимуществ состоит из нескольких карточек с иконкой, заголовком и описанием, не стоит каждой карточке задавать собственное выравнивание.
Если первая карточка построена по левому краю, вторая по центру, а третья по правому, структура становится непредсказуемой.
Лучше выбрать одну систему:
- одинаково расположить иконки;
- использовать одну выключку заголовков;
- одинаково выровнять описания;
- сохранить общую композицию всех карточек.
Так информация легче считывается, а сами элементы проще адаптировать под другие разрешения.
В каталогах особенно важна повторяемость
Карточки каталога или интернет-магазина обычно содержат одинаковые категории информации: изображение, название, характеристики, стоимость, остаток, кнопку.
Пользователь быстро запоминает структуру первой карточки и затем считывает остальные по знакомой схеме. Если в каждой карточке менять расположение и выключку элементов, интерфейс становится сложнее и менее предсказуемым.
Повторяющийся контент должен иметь повторяющуюся структуру. Чем меньше необоснованных отличий, тем чище и понятнее выглядит макет.
Подложка создаёт собственные границы композиции
Необязательно использовать одно и то же выравнивание для всей страницы. Разные блоки могут иметь разную композицию.
Например, заголовок секции можно расположить по центру, а текст внутри карточек — по левому краю. Если карточки имеют собственные подложки, их границы создают отдельную систему, относительно которой и определяется положение текста.
Без таких визуальных границ сочетание разных осей может восприниматься случайным. Поэтому важно учитывать не только сам текст, но и контейнер, внутри которого он находится.
Разные блоки могут использовать разную выключку
Единообразие внутри блока не означает, что весь сайт должен быть выровнен исключительно одинаково.
Например:
- первый экран — по центру;
- информационный блок — по левому краю;
- следующий акцентный блок — снова по центру;
- карточки внутри него — по левому краю.
Такое чередование помогает создавать динамику страницы. Главное — чтобы внутри каждого конкретного блока пользователь мог легко понять общую ось и принцип расположения элементов.
Выключка должна быть связана с композицией
Выравнивание работает вместе с модульной сеткой, силовыми линиями, группировкой и общей композицией.
Если элементы выстроены по левому краю, они формируют заметную вертикальную линию. Если композиция центрированная, элементы поддерживают центральную ось.
Когда объекты не привязаны ни к одной понятной линии, появляется ощущение, что они случайно сдвинулись. Например, заголовок может формально находиться по центру, но расположенные рядом карточки или навигация визуально разрушат эту ось, и центрирование перестанет считываться.
Поэтому выключку всегда нужно оценивать не отдельно, а вместе со всем окружением.
Последовательное выравнивание делает интерфейс понятнее
В большинстве ситуаций достаточно простой системы: левую выключку использовать как основную, центрирование — для коротких текстовых блоков и отдельных композиций, правую — только там, где она решает конкретную задачу. От выравнивания по ширине в веб-интерфейсах лучше отказаться.
Не нужно придумывать уникальное выравнивание каждому элементу. Сохраняйте единую логику внутри повторяющихся блоков, привязывайте связанные элементы к общей оси и оценивайте выключку вместе с общей композицией. Тогда макет будет выглядеть чище, легче восприниматься и проще адаптироваться под разные разрешения.
