32 подписчика

Сила выравнивания. Как невидимые линии создают целостный интерфейс.

7 апреля 20217 апр 2021

4 мин

Оглавление

Живая практика
Шаг 1. Осматриваемся
Шаг 2. Делаем выравнивание. Простое и висячее.

Бывает, смотришь на какую-нибудь страницу, и не можешь понять, что с ней не так. Вроде бы, всё в порядке, но что-то царапает.

Ощущение «всё не то, не знаю что» – это знак, что надо присмотреться к выравниванию элементов и текстов.

Выравнивание - это ещё один фундаментальный принцип проектирования и дизайна интерфейсов. Общее правило выравнивания можно выразить так:

Выравнивание - это то, что позволяет нам отличить профессиональную работу от любительской раньше, чем мы задумаемся об этом. Небрежное выравнивание создаёт лишние шумы, замедляет работу пользователя.

Рассмотрим простой и немного утрированный пример, а заодно попрактикуемся в выравнивании.

Живая практика

Надо сделать блок с анонсами событий. Всё просто: заголовок, даты, контент, картинка, адрес со ссылкой на карту, ссылка на страницу новости. Но вот дизайнер принёс на утверждение макет:

Исходник. Вы готовы поставить свою подпись?

Шаг 1. Осматриваемся

Результат никого не устроил. Но почему? Что нужно улучшить? Как всегда, постараемся сформулировать проблему. Для начала, рассмотрим блоки поближе.

Крупные элементы задают линии, по которым "хочет" идти наш взгляд

Но взгляду приходится переходить по красным

И увидим, что элементы не выровнены никак. Из-за этого вся композиция рассыпается. Блок напоминает полку в шкафу трудного подростка, на которой валяется груда скомканной одежы.

Шаг 2. Делаем выравнивание. Простое и висячее.

Давайте, для начала, попросим дизайнера выровнять элементы по левому краю.

Стало немного аккуратнее. Но заказчику показывать ешё рано.

Стало заметно, как "шумят" точки в маркированном списке и иконка-геометка слева от адреса

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

Висячее выравнивание - это приём, при котором мелкие элементы сдвигаются так, чтобы текст оказался на одной линии.

Шаг 3. Нейтрализуем рваные края текста.

Дизайнер сделал, как его просили. Теперь текст считывается быстрее и проще. Но ощущения безупречной чистоты всё ещё нет. Что этому мешает? Может быть, рваное пространство между текстом и картинкой? Попробуем убрать?

Слева - более-менее. А справа - неряшливая рванина

Надо сказать, что выравнивание текста - это маленький ад для перфекциониста. И вот почему:

Что с этим делать? Есть одна рекомендация:

Как работает это правило, в случае, когда надо разместить картинку рядом с текстом? А вот как.

Дизайнер разместил ровный край текста и край картинки так, чтобы они "смотрели друг на друга". А также, убрал маркированный список совсем. И перенёс геометку вправо.

Ну вот, уже терпимо. Бедновато, но чистенько. Дёшево и сердито.

Правый край картинки и левый край текста - это сильные строгие линии. Если поставить их рядом - порядка добавится.

Шаг 4. Смотрим на промежуточный результат

В целом, блок уже выглядит прилично. И можно было бы оставить так... Если бы на дворе был 2005 год. Да, мы убрали критичные проблемы. Но получили до зевоты скучный и заезженный макет. Очевидно, что страница выглядит грустно и уныло. Что делает её такой? Покажем и сформулируем:

Выравнивание по центру опять ломает сильную линию и создаёт излишне большие пустоты по бокам.

Во-первых, нас подводит выравнивание блоков по центру. Не то, чтобы его нельзя было использовать совсем. Этот способ выравнивания не подходит в нашем случае. Потому что из-за него:

взгляд пользователя опять должен двигаться по ломаной;
слева и справа возникают ничем не оправданные пустоты;
правый край блоков не связан вообще ни с чем - просто болтается в пространстве.

Во-вторых, никуда не годится сама идея - располагать анонсы в вертикально в широких блоках. И если мы не завернули эту идею сразу - то исключительно в учебных целях :-).

Почему такой способ размещения блоков - плохой? Потому что:

Сам блок содержит совсем мало информации. Делать его таким широким - это всё равно, что делить одну сосиску на 10 голодных студентов. Внимание читателя - размазывается, рассеивается. Он устаёт раньше, чем успевает добраться до сути;
Как такие блоки будут смотреться на мобильных устройствах? Если верстальщик сделает всё правильно - блок оптимизируется автоматически и текст уйдёт под картинку. А если нет - вёрстка поедет. Так или иначе, это хлипкое место. Здесь можно споткнуться.

Сформулировать проблему - это почти её решить. Давайте помучаем дизайнера ещё немного.

Шаг 5. Собираем размазню.

Попросим дизайнера сделать блоки узкими и разместить их горизонтально.

Не подумайте, что все наши наработки из шагов 1-3 пропали даром. Обратите внимание: мы сохранили почти все достижения, связанные с выравниванием и оптимизацией текстов внутри блоков. Словом, работали не зря. :-)

Макет уже близок к утверждению. Осталось исправить пару мелких проблем:

надо сделать более заметными даты событий. Сейчас они расположены на полупрозрачных серых плашках и нет никакой возможности найти их быстро;
текст анонса утратил связь с картинкой и вывалился из ритма.