Учимся применять Auto Layout в реальном макете

Это режим Auto Layout, при котором элементы располагаются последовательно с заданным фиксированным расстоянием между ними.

Это настройка Frame, которая скрывает части вложенных элементов, выходящие за его границы.

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

После знакомства с основными настройками Auto Layout важно научиться применять его в реальном прототипе.

Главный принцип — не пытаться превратить в Auto Layout абсолютно всю страницу. Инструмент особенно полезен там, где он позволяет:

• сохранять одинаковые расстояния;
• автоматически перестраивать элементы при изменении текста;
• быстро добавлять и удалять повторяющиеся объекты;
• облегчать подготовку адаптивных версий;
• уменьшать количество ручных перемещений.

Если же структура становится слишком сложной из-за большого количества вложенных Auto Layout, автоматизация начинает мешать вместо того, чтобы экономить время.

Проще всего увидеть пользу Auto Layout на блоке, в котором есть заголовки, подзаголовки и описания.

Каждую связанную пару можно превратить в отдельный Auto Layout:

• подзаголовок;
• описание.

Затем несколько таких смысловых групп объединяются во внешний Auto Layout, а уже вся группа может быть связана с основным заголовком блока.

Получается знакомый принцип матрёшки: один Auto Layout находится внутри другого.

У каждого уровня структуры можно задать собственный отступ.

Например:

• между подзаголовком и описанием — 10 px;
• между соседними смысловыми группами — 30 px;
• между главным заголовком и основным содержимым — 60 px.

Если текст в одном из описаний станет длиннее и займёт дополнительные строки, все элементы ниже автоматически сместятся. При этом заданные расстояния сохранятся.

Это и есть одна из главных причин использовать Auto Layout в текстовых блоках.

Если требуется увеличить отступ между подзаголовком и его описанием, нужно выбрать именно внутренний Auto Layout этой пары.

Если необходимо изменить промежуток между несколькими группами, выбирается их общий контейнер.

Так каждый уровень отвечает за собственную часть системы:

• внутренний Auto Layout — за элементы внутри группы;
• следующий — за расстояния между группами;
• внешний — за связь группы с заголовком блока.

Если менять значения не на том уровне, можно быстро запутаться.

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

Если текст или внутренний Auto Layout имеют Fixed, они сохраняют фиксированную ширину.

Чтобы содержимое реагировало на изменение родительского контейнера, используется Fill container.

После этого ширина текстового блока начинает зависеть от доступного пространства: при сужении строки перестраиваются, при расширении — занимают большую ширину.

Во вложенных Auto Layout одного Fill container может оказаться недостаточно.

Представим структуру:

1. текст находится во внутреннем Auto Layout;
2. несколько таких Auto Layout объединены в общий;
3. этот общий блок соединён с заголовком.

Если внутренние элементы настроены правильно, но их родитель остаётся Fixed, внешний контейнер всё равно не сможет нормально растягивать содержимое.

Поэтому при настройке адаптивности полезно двигаться от внутреннего элемента к внешнему и проверять режим ширины на каждом уровне.

Если что-то перестало растягиваться, первым делом стоит искать Fixed в одном из родительских контейнеров.

Когда структура настроена правильно, при изменении ширины блока:

• текст автоматически переносится;
• высота смысловых групп меняется;
• следующие элементы сдвигаются;
• внутренние расстояния сохраняются;
• внешний отступ остаётся прежним.

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

Кнопка — один из элементов, где Auto Layout практически всегда полезен.

Вместо отдельного текста и нарисованного под ним прямоугольника можно сделать Auto Layout с заливкой, скруглением и внутренними отступами.

Главное — расположить содержимое по центру контейнера.

Тогда независимо от ширины и высоты кнопки текст останется центрированным.

Если кнопке задан Fixed, внутренние отступы не определяют её итоговый размер — ширина и высота остаются фиксированными.

При использовании Hug contents контейнер начинает зависеть от содержимого и Padding.

Например, можно задать:

• меньшие отступы сверху и снизу;
• более крупные — слева и справа.

Так кнопка автоматически увеличивается, если текст становится длиннее, и уменьшается при короткой надписи.

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

Если добавить к тексту иконку, появляется ещё один важный параметр — расстояние между элементами.

Например, между иконкой и текстом можно оставить около 10 px.

Этот промежуток должен быть меньше внешних отступов кнопки, поскольку текст и иконка составляют одну смысловую группу.

Порядок элементов легко поменять обычным перетаскиванием. Все Padding и расстояния сохранятся автоматически.

Пункты меню — повторяющиеся элементы, поэтому их удобно объединить в горизонтальный Auto Layout.

После этого можно:

• задать один промежуток между всеми пунктами;
• менять его одним значением;
• добавлять новый пункт через Ctrl + D;
• переставлять пункты без ручного выравнивания.

Например, если задано расстояние 20 px, новый пункт автоматически появится с таким же отступом.

Технически можно объединить логотип, меню, контакты и кнопку в общую автоматическую структуру.

Но это не всегда необходимо.

Если Auto Layout уже решает главную задачу внутри меню и контактных групп, этого может быть достаточно. Полная автоматизация хедера способна создать дополнительные ограничения, особенно если новый пункт меню перестанет помещаться в контейнер.

В такой ситуации дизайнер всё равно должен принять решение:

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

Auto Layout помогает перестраивать интерфейс, но не принимает композиционные решения за дизайнера.

В прототипе есть группа табов с несколькими категориями. Такая структура тоже хорошо подходит для Auto Layout.

Каждый таб можно превратить в отдельный Auto Layout, а затем объединить их в один горизонтальный контейнер.

При этом:

• текст центрируется внутри каждого пункта;
• внутренние элементы могут использовать Fill container;
• общий контейнер управляет всей шириной конструкции;
• новые пункты легко добавляются и удаляются.

Так фильтр становится значительно удобнее редактировать.

После создания внешнего скругления внутренние элементы могут выходить за его границы.

В этом случае используется Clip content.

Настройка скрывает всё, что находится за пределами внешнего Frame. Благодаря этому внутренние прямоугольники не выступают из скруглённых углов контейнера.

Так конструкция остаётся аккуратной даже при добавлении новых табов.

Если внутренним табам назначить Fill container, они начинают занимать доступное пространство внутри внешнего Auto Layout. При изменении ширины главного контейнера элементы автоматически растягиваются или сужаются.

Получается гибкая конструкция, которую легче адаптировать под разные размеры экрана. Важно при этом контролировать текст. Даже технически корректно работающий Auto Layout не гарантирует, что длинные названия останутся удобными на слишком узкой ширине.

Карточка состоит из большего количества взаимосвязанных элементов:

• изображения;
• заголовка;
• цены;
• характеристик;
• значений;
• кнопки.

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

Поэтому карточку не обязательно полностью автоматизировать. Лучше определить только те участки, где Auto Layout действительно помогает.

Например, строку «Площадь — 190 м²» удобно оформить как горизонтальный Auto Layout.

То же самое можно сделать для:

• количества комнат;
• этажности;
• типа дома.

После этого отдельные строки объединяются вертикально. Так появляется возможность централизованно управлять расстоянием между строками.

Если название характеристики должно находиться слева, а её значение — справа, можно использовать Space between.

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

При расширении карточки элементы расходятся, а при сужении приближаются друг к другу.

Чтобы это работало, внешний контейнер также должен получать нужную ширину через Fill container или фиксированное значение.

Карточки могут содержать разное количество текста. Если кнопка просто идёт сразу после содержимого, её положение будет отличаться:

• в одной карточке выше;
• в другой ниже;
• в третьей ещё ниже.

Так появляется визуальная «лесенка», которая особенно заметна у активных залитых кнопок. Лучше сохранить кнопки на одной горизонтальной линии.

Для этого карточке можно задать фиксированную или заранее определённую высоту, а основную информацию и кнопку распределить через Space between по вертикали. Тогда изменение количества строк сверху не будет сразу двигать кнопку.

Если содержимого становится слишком много и оно начинает пересекаться с кнопкой, высоту самой карточки можно увеличить. Так сохраняется порядок элементов и одинаковое положение CTA в нескольких карточках.

При работе с несколькими карточками удобно сначала найти вариант с самым длинным содержимым. По нему можно определить необходимую высоту карточек и положение кнопки.

После этого карточки с меньшим количеством текста просто получат немного больше свободного пространства, но кнопки останутся на одной линии. Это визуально чище, чем разная высота и постоянно прыгающие CTA.

Auto Layout особенно полезен для:

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

Сложные карточки и большие композиции не обязательно полностью переводить на Auto Layout. Главная задача — не количество автоматизированных элементов, а экономия времени и предсказуемое поведение макета.

Перейти к следующему модулю