Выравнивание: 3 профессиональных совета

Мало кто знает правду: если UI вашего дизайна выглядит неопрятно или громоздко — скорее всего вы недостаточно хорошо выровняли все элементы.

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

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

Строго говоря, здесь всё ровно. Приятная типографика и картинка высокого качества. И тем не менее, выглядит как-то не ахти... Ну что тут у нас?

Мы хотим, например, чтобы всё выглядело чётко и чисто. Что больше всего нам мешает?

Думаю, аватарка. Выглядит неказисто: всё смещено в одну сторону, а справа — КИЛОМЕТРЫ свободного места.

Что бы нам сделать? Отцентровать?


Не-не-не. Теперь смотрится странно из-за подписи под текстом с левой стороны.

Может, сместить вправо? Но давайте подумаем: вот мы сместили и что видим? Напротив подписи под цитатой есть свободное место справа — значит, аватарку хорошо бы опустить туда.

Я добавил линии линейки, чтобы сразу стало видно: картинка выровнена по верху и по правой стороне вместе c остальным текстом. Понимаете?

СОВЕТ № 1: Если текст выровнен по левому краю, то правый край будет рваным (и наоборот).

Язык не поворачивается сказать, что у нас получилось ровно. Ничего удивительного, ведь текст с выравниванием по левой стороне имеет справа разрывы разной ширины в конце строчек! Если наша цель — как можно лучше всё выровнять, надо придумать новый план действий.

Сейчас прозвучит странно, но этот пример — полезный. Хочу чтобы ваш подход к выравниванию был таким: у вас есть определенное количество элементов на странице — не больше и не меньше. И вам нужно, чтобы страница выглядела МАКСИМАЛЬНО ЧИСТОЙ. Разные способы выравнивания дают разный уровень ЧИСТОТЫ.

В данном случае текст с выравниванием по левому краю и картинка с выравниванием по правому (технически они оба делят правый край) не дают полного ощущения чёткости.

Давайте переиграем.


Гораздо лучше! И я ещё кое-что сделал. Заметили?

СОВЕТ № 2: Централизация — надежный способ выравнивания.

Я расположил аватарку и подпись по центру.

Несмотря на то, что мы разбираем этот пункт на нашем занятии по выравниванию на Learn UI Design, делая домашку, студенты постоянно о нём забывают. Расположение двух объектов по центру — это тоже выравнивание.

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

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

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


Да, стоит. У этого даже свой термин есть — висячая пунктуация. Тексты так оформляются с момента появления печати на свет — в буквальном смысле.

СОВЕТ № 3: Используйте висячее выравнивание для деталей с массой меньше массы текста.

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

До

После

... и маркированные списки ...

До

После

Обратите внимание, что совсем НЕ ОБЯЗАТЕЛЬНО оформлять маркированные списки именно так!

... и небольшие фигуры — полу-иконки полу-символы ...

До

После

... и много прочих вещей. Вы уже не сможете это развидеть, и будете замечать проблемы с выравниванием везде. Вот, например, на что нужно обратить внимание в этом финальном макете? И почему там в одном месте это есть, а в другом нет? Хммммм