Лекция №3: Основы композиции, сетки и Auto Layout

Контекст лекции:

• Дисциплина: Веб-дизайн и проектирование интерфейсов.
• Целевая аудитория: Студенты 2 курса технических специальностей.
• Практическая цель: Подготовка к Лабораторной работе №3, посвященной созданию Wireframe (каркасов интерфейса).

1. Введение: Хаос против Системы

Исторически сложилось так, что дизайн часто ассоциируется с чистым творчеством. Однако в инженерии и проектировании интерфейсов действуют другие правила. В классическом искусстве композиция может выстраиваться интуитивно, но в инженерном дизайне композиция — это строгая математика и геометрия. Мы не рисуем картины, мы проектируем системы взаимодействия.

Пользователь, открывая веб-сайт или приложение, не сканирует интерфейс хаотично. Его взгляд движется по устоявшимся паттернам, таким как F-паттерн (для текстовых страниц) и Z-паттерн (для лендингов). Наша главная задача как проектировщиков — осознанно управлять взглядом пользователя, используя два мощнейших инструмента: визуальную иерархию и сетку.

2. Психология восприятия (Gestalt Principles)

Чтобы управлять вниманием, мы обращаемся к законам гештальтпсихологии. Самый важный закон восприятия для любого проектировщика интерфейсов — это Закон близости (Law of Proximity).

• Базовое правило: Объекты, которые расположены физически близко друг к другу, человеческий мозг автоматически воспринимает как связанную группу.
• Инженерная логика в интерфейсе: Это правило диктует нам строгую иерархию отступов. Например, заголовок раздела должен располагаться ближе к тексту, к которому он логически относится, чем к предыдущему блоку информации.
• Правило внутреннего и внешнего: Расстояние внутри элемента (например, внутри карточки товара) всегда должно быть меньше, чем расстояние между соседними карточками.

Закон подобия (Law of Similarity): В дополнение к Закону близости работает Закон подобия. Объекты, которые выглядят одинаково (имеют общий цвет, форму, размер), воспринимаются пользователем как элементы со схожей функцией. Именно поэтому все главные кнопки целевого действия (Primary Actions) на сайте должны быть стилизованы единообразно.

3. Сетки (Grids) и Атомарная единица 8px

В профессиональном дизайне интерфейсов мы никогда не используем случайные числа для размеров, такие как 13px или 7px. Мы используем строгую систему.

Важный нюанс: Сетка и Типографика Размер самого шрифта (Font Size) не всегда обязан быть кратен 8. Однако межстрочный интервал (Line-height) — это габаритный контейнер текста, и он обязательно должен подчиняться правилу кратности (например, 24px или 32px). Только так текстовые блоки не будут ломать общий вертикальный ритм макета.

4. Auto Layout: Святой Грааль Figma

Если вы расставляете кнопки и текстовые блоки руками, перетаскивая их мышкой — вы делаете это неправильно. В современной Figma 95% всех профессиональных макетов строятся исключительно на функции Auto Layout.

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

Основные настройки Auto Layout и их прямые аналоги в коде:

• Direction (Направление): Вы можете выстроить элементы по вертикали (↓), что соответствует flex-direction: column. Либо по горизонтали (→), что в коде записывается как flex-direction: row.
• Wrap (Перенос): Свойство (↵) заставляет элементы переноситься на новую строку, если они не помещаются в контейнер (аналог flex-wrap: wrap).
• Gap (Отступ): Это расстояние между соседними элементами строго внутри контейнера (свойство gap в CSS).
• Padding (Поля): Внутренние отступы самого контейнера от его краев до контента (padding: top right bottom left).
• Alignment (Выравнивание): Определяет, как элементы позиционируются внутри свободного пространства контейнера (аналог justify-content и align-items).

5. Логика ресайза (Resizing Constraints)

Как ведут себя элементы при изменении размера экрана? Адаптивный дизайн строится на трех базовых типах поведения ширины и высоты:

width: 24px;

Продвинутая фишка: Min/Max размеры Как и в CSS, в Figma можно задать минимальные и максимальные ограничения (аналоги min-width и max-width). Это спасает интерфейс от "поломки", когда на очень широком мониторе кнопка растягивается на весь экран, или на узком телефоне текст сжимается в нечитаемую полоску.

6. Box Model (Блочная модель) и Best Practices

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

• У нас есть Content (сам текст или картинка).
• Вокруг него — Padding (воздух внутри рамки, который входит в общий размер элемента, если включен box-sizing: border-box).
• Дальше идет Border (обводка). Важное правило для веба: всегда ставьте позиционирование обводки в режим "Inside", чтобы пиксельные размеры в макете совпадали с реальностью в браузере.
• А вот привычного Margin (внешнего отступа) в чистом виде в Figma нет. Вместо него мы используем свойство Gap родительского контейнера Auto Layout.

Золотые правила работы (Best Practices):

• Глубокая вложенность — это нормально: Сложный интерфейс строится как матрешка.
  • Кнопка: Текст + Иконка = Auto Layout (Горизонтальный).
  • Карточка: Картинка + Заголовок + Блок(Цена + Кнопка) = Общий Auto Layout (Вертикальный).
• Краш-тест: Как проверить, что вы собрали макет правильно? Удалите кусок текста в заголовке вашей карточки. Если кнопка снизу сама плавно «подпрыгнула» вверх, закрыв пустое пространство — вы всё сделали идеально.

7. Глоссарий лекции

• Layout Grid: Вспомогательная сетка из колонок; не видна при экспорте макета, но критически важна для выравнивания.
• Auto Layout: Система автоматической компоновки элементов (аналог Flexbox).
• 8pt Grid: Система проектирования, где все отступы и размеры кратны 8.
• Gutter: Расстояние (пустота) между колонками сетки.
• Breakpoint (Контрольная точка): Ширина экрана (в пикселях), при которой меняется структура макета (например, 1024px для перехода с Desktop на Tablet).
• Responsive Design (Адаптивный дизайн): Подход, при котором интерфейс плавно подстраивается под ширину устройства пользователя.

8. Домашнее задание и Лабораторная работа №3

Для подготовки к следующей лабораторной работе вам необходимо:

1. Посмотреть официальный туториал по Auto Layout на YouTube-канале Figma.
2. Настроить Layout Grid в своих учебных проектах:
   • Desktop (1440px): 12 колонок, Margin (поля) 80-100px.
   • Mobile (360-390px): 4 колонки, Margin 16px.
3. Чек-лист для Лаб №3: Вы должны быть готовы собирать Wireframe (структурный каркас страницы) исключительно в Auto Layout. Работаем только серыми блоками, без цветов, картинок и детализации. Тренируемся собирать "атомы" (кнопки) и "молекулы" (карточки, меню навигации).

Проверь себя!