Что в видео-уроке:
В уроке создаём блок преимуществ из восьми карточек. Настраиваем компоненты, Auto Layout и иконки, подбираем оптимальные размеры карточек, выравниваем разный объём текста и корректируем пиктограммы с помощью Constraints и оптической компенсации.
Начинаем со структуры блока
Восьмой блок лендинга посвящён преимуществам компании. В нём много самостоятельных тезисов, поэтому основная задача — организовать информацию так, чтобы её можно было быстро просмотреть и сравнить.
Начинаем с заголовка и сохраняем стандартный верхний отступ блока. Для самих преимуществ используем карточки с иконкой, подзаголовком и коротким описанием.
Иконки заранее подготовлены как компоненты, поэтому их можно быстро заменять в экземплярах карточек, сохраняя единые размеры и оформление.
Продолжаем стилистику карточек
Для карточек используем светло-серый фон, уже появлявшийся в предыдущих блоках, и знакомый стиль мягкой тени. Это помогает продолжить визуальную систему сайта без введения новых цветов и эффектов.
Иконку помещаем в небольшой зелёный круглый элемент. Сначала можно попробовать разные варианты расположения — сбоку, по центру или над текстом. При большом количестве текста наиболее устойчивой оказывается композиция, где иконка находится сверху, а текстовая группа располагается ниже.
Карточки не требуют дополнительных декоративных вырубок: в этом блоке важнее сохранить чистоту и облегчить восприятие большого количества информации.
Настраиваем выравнивание элементов в карточке
Первый вариант с центральной выключкой выглядит аккуратно только при одинаковом объёме текста. Как только заголовки и описания начинают занимать разное количество строк, карточки становятся сложнее для чтения.
Поэтому текст выравниваем по левому краю. Иконки остаются визуальным акцентом, а заголовки и описания образуют понятную вертикальную структуру.
Все текстовые элементы внутри карточки располагаем от верхнего левого края. Так различия в количестве строк меньше влияют на общую композицию.
Ищем подходящий формат сетки
На этапе работы полезно проверить несколько вариантов расположения карточек. Более узкие карточки позволяют собрать больше элементов в одной строке, но текст становится тесным, а высота увеличивается.
Увеличение ширины карточки, наоборот, сокращает количество переносов и делает блок компактнее по вертикали. После нескольких итераций выбираем вариант, в котором тезисы легче охватить взглядом и между элементами остаётся достаточно воздуха.
Необязательно сохранять первый выбранный формат сетки. Если блок занимает слишком много места или создаёт заметные пустоты, лучше пересобрать его, сохранив ту же информацию.
Выравниваем карточки с разным количеством текста
В преимуществах неизбежно встречаются разные по длине заголовки и описания. Если высота карточки автоматически зависит от контента, вся сетка начинает «прыгать».
Для итогового варианта ориентируемся на самую наполненную карточку и задаём остальным одинаковую фиксированную высоту. Содержимое при этом выравниваем от верхнего края.
Лучше оставить свободное пространство в нижней части некоторых карточек, чем размещать контент по центру и получать волнообразное движение заголовков и иконок.
Дополнительно можно немного отредактировать формулировки, убрав слова, которые не влияют на смысл. Это сокращает лишние переносы и делает карточки ещё компактнее.
Настраиваем внутренние расстояния
Расстояние от границ карточки до контента должно быть достаточно большим, чтобы текст не выглядел зажатым. В финальном варианте увеличиваем внутренние поля и уменьшаем расстояния между связанными элементами.
Иконка, заголовок и описание должны восприниматься как одна смысловая группа. Поэтому расстояние между ними меньше, чем внешний отступ карточки и промежутки между соседними карточками.
После настройки отдельных карточек весь блок можно собрать через Auto Layout, чтобы сохранить одинаковые интервалы между строками и колонками.
Работаем с компонентами и иконками
Каждая пиктограмма находится внутри собственного компонента. При замене иконок важно проверять не только размеры контейнера, но и настройки Constraints.
Если для объекта установлен Scale, изменение ширины или высоты компонента может растянуть саму пиктограмму. Поэтому для иконок, которые должны сохранять свои пропорции, лучше использовать привязку к центру вместо масштабирования по размеру контейнера.
Контейнерам задаём одинаковые размеры, а сами иконки центрируем внутри них. Благодаря этому разные по форме пиктограммы занимают сопоставимую визуальную область.
Компенсируем форму иконок оптически
Даже при одинаковых математических размерах иконки могут выглядеть по-разному. Узкий документ, широкая коробка или асимметричный знак имеют разный визуальный вес.
Поэтому после технического выравнивания проверяем каждую пиктограмму глазами. Некоторые элементы приходится немного сдвигать вправо или влево относительно математического центра.
Такая оптическая компенсация помогает добиться ощущения ровного ряда, даже если реальные координаты элементов немного отличаются.
Завершаем блок
После замены всех иконок ещё раз проверяем размеры, внутренние отступы и выравнивания. Для описаний в карточках точки в конце не ставим, сохраняя единое оформление коротких тезисов.
В тексте также исправляем висячие предлоги и союзы с помощью неразрывных пробелов. После финальной проверки мастер-компоненты переносим в общую область компонентов, а в рабочем макете оставляем только необходимые экземпляры.
В результате получается компактный блок преимуществ, в котором большой объём информации не перегружает страницу, а карточки, типографика и иконки продолжают общую стилистику лендинга.
