Адаптивные экраны и размеры

Курс «Макет учебного портала в Figma»

Готовые desktop-экраны «Маршрута» рассчитаны на ширину 1440. Посетитель телефона располагает значительно меньшим пространством, но по-прежнему должен выбрать курс и открыть занятие. Создадим мобильные варианты каталога, курса и урока, сохраняя данные и смысл переходов. Масштабирование готовой картинки не решает эту задачу: оно уменьшило бы также текст и области нажатия.

В нашем контрольном мобильном фрейме ширина равна 390, боковые отступы — 20, содержимое — 350. Эти значения помогают обнаружить проблемы, но не покрывают все устройства. Важнее определить, какие размеры следуют за родителем, какие зависят от текста и где происходит содержательная смена композиции.

Внутренняя ширина компонентов

Возьмите экземпляр CourseCard и поместите в вертикальный мобильный CourseList. У списка — Fill container по ширине, Hug contents по высоте и промежуток 16. У карточки выберите Fill container по ширине. Начальная desktop-ширина 357,33 больше не должна сохраняться как обязательное число в каждом применении.

В мобильном экземпляре используйте естественную высоту карточки по содержимому. Если в предыдущем образце был выбран фиксированный desktop-ряд высотой 340, это ограничение снимите именно для мобильного применения или оформите согласованный responsive-вариант компонента. Заголовок может занять две строки, описание — три, а кнопка переместится ниже. Последовательный список от этого не нарушится.

Ширину вложенной кнопки установите Fill container. Она займёт доступную область карточки за вычетом padding. При этом основной компонент Button сохраняет прежние внутренние поля и типографику. Не растягивайте вручную фон отдельно от надписи: связанный контейнер уже выражает нужное отношение. Если действие осталось узким, проверьте родителя и выбранный экземпляр.

Авторский курс Figma объясняет Fill container при сборке экранов из экземпляров, а также ограничения максимальной ширины в системе контейнеров. Мы используем эти правила для отдельной мобильной композиции. Механизм можно сопоставить с авторским уроком сборки страниц.

На промежуточном размере 768 не обязаны точно повторяться ни desktop, ни mobile. Можно получить две карточки в ряду и менее широкий hero. Запишите, по какому условию меняется число колонок: карточке требуется достаточная минимальная ширина для названия и действия. Такая формулировка помогает разработчику выбрать разумный переход между размерами. Указывать только два снимка без этого объяснения недостаточно: между ними остаётся множество ширин, на которых случайная фиксированная геометрия может выйти за границы.

Когда перенос не заменяет решение

Горизонтальный список карточек можно настроить с переносом в следующую строку. В актуальном Auto Layout свойства могут называться flow, а набор способов компоновки шире исторического direction. Наш учебный пример использует горизонтальную, вертикальную и wrap-компоновку; новые grid-возможности не требуются для основного результата. Смотрите название режима в своей версии редактора.

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

Создайте вариант Header с Size=mobile. В нём остаются марка «Маршрут» и кнопка «Меню», общая высота — не меньше выбранного размера области нажатия. Назначьте боковой padding 20. Не оставляйте невидимые desktop-ссылки поверх кнопки: скрытый слой с прототипной связью способен создать лишнюю интерактивную область.

В Hero примените Display/Mobile размером 32/40 и сократите вертикальные поля до 40. Содержание абзаца сохраняется. Декоративный значок можно убрать, если он отнимает место у основного объяснения. Мы не удаляем учебную информацию ради того, чтобы экран выглядел как уменьшенная desktop-версия.

Курс и длинная статья

Скопируйте содержательную структуру Desktop/Course в Mobile/Course. Программа занятий остаётся вертикальной. У LessonRow текстовая область занимает доступную ширину между номером и стрелкой, высота строки определяется переносами. Название «Автоматическое размещение» подходит для проверки: оно длиннее «Выравнивание» и быстрее выявляет фиксированную высоту.

У Mobile/Lesson основная колонка получает ширину 350. Кодовый блок имеет собственную область и предполагаемую горизонтальную прокрутку в реализации. В макете можно показать начальный фрагмент строки и подпись поведения. Не следует представлять обрезанный код как полный пример: читатель должен понимать, что продолжение доступно через движение внутри блока.

Для обычного абзаца оставьте Body 18/28, пока длина и плотность не дают основания менять его. Автоматически уменьшать размер шрифта вместе с шириной экрана неправильно: именно на небольшом устройстве читателю важно различать знаки. Адаптивность прежде всего меняет распределение пространства и порядок блоков, сохраняя содержание доступным.

В конце урока расположите возврат к программе и следующее действие вертикально. Так они не будут конкурировать за половину тесной строки. Основное действие сохраняет визуальный приоритет, второстепенное остаётся понятным по надписи. Если одно из действий ещё не прототипируется, подпишите границу сценария в служебной спецификации.

Длинный заголовок и узкая ширина могут одновременно увеличить высоту карточки. Поэтому оценивайте не только отдельный компонент, но и страницу целиком: футер должен уходить ниже списка, а следующий смысловой блок — сохранять промежуток после последней карточки. Ручное перемещение футера исправляет лишь один размер. Если его положение связано с содержимым вертикального родителя, изменение текста остаётся локальным редактированием, а общая композиция получает ожидаемую высоту. Так адаптивность охватывает обе координаты, даже когда главным поводом для изменения была ширина.

Ограничения и контрольные ширины

Помимо 390 рассмотрите ширины 320 и 768 на копиях контрольных экранов. Это не измерение всей адаптивности, а способ найти жёсткие связи. Смотрите, не выходят ли карточки за края, помещается ли марка и сохраняется ли смысл программы. При каждом случае объясняйте причину: фиксированная ширина ребёнка, отсутствие Fill container или новая потребность в смене композиции.

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

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

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