Страница курса и текст урока

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

Каталог «Маршрута» помогает выбрать тему, но карточка содержит только краткое объяснение. После перехода человек должен увидеть результат курса, предпосылки и последовательность занятий. Создадим страницу курса «Сетка каталога», затем первый урок «Колонки и промежутки». Оба экрана продолжают данные, которые уже показаны в карточке.

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

Содержание курса

Создайте фрейм верхнего уровня Desktop/Course шириной 1440. Включите вертикальный Auto Layout, задайте высоту Hug contents и фон surface/page. Поместите экземпляры Header и Footer, а между ними — CourseIntro и LessonList. Полноширинные области используют общий внутренний Content с ограничением 1120.

В CourseIntro добавьте название «Сетка каталога», пояснение «Научитесь размещать карточки в колонках и управлять промежутками», метаданные «Базовый · 8 уроков» и основную кнопку «Начать урок». Эти сведения согласованы с карточкой. Если на карточке указан базовый уровень, страница курса не должна неожиданно требовать опыт настройки сложной сборки.

Перед программой разместите короткое описание предпосылок: «Вы знаете структуру HTML и умеете назначать CSS-свойства элементам». Это помогает человеку решить, готов ли он начать. Список предпосылок не обязан перечислять каждую технологию, встречающуюся в примере. Он обозначает навыки, без которых объяснение следующего шага будет непонятно.

Для программы курса используем восемь названий из courses.json в архиве: «Колонки и промежутки», «Размеры треков», «Автоматическое размещение», «Выравнивание», «Адаптивный ряд», «Длинный контент», «Области страницы» и «Собираем каталог». Это вымышленные данные макета. Их количество совпадает с метаданными, поэтому дизайн не учит человека игнорировать противоречивые числа.

В строке программы не сокращайте название до одного слова, если это меняет учебную задачу. «Размеры» не объясняет, что речь о треках сетки, а «Данные» не различает загрузку и отображение. Длинная осмысленная строка полезнее короткой неопределённой, если контейнер умеет переносить текст. Можно добавить краткую поясняющую подпись как отдельное свойство, однако она не должна повторять заголовок другими словами. Программа помогает предсказать путь обучения, поэтому каждое название должно описывать конкретный следующий результат.

Повторяемая строка программы

Создайте LessonRow с номером, названием и небольшой стрелкой. Внутренний горизонтальный контейнер использует Fill container по ширине и Hug contents по высоте. Названию оставьте доступное пространство, номеру и стрелке — фиксированные области. При длинной строке переносится название, а номер не сжимается в нечитаемый знак.

Превратите строку в компонент с текстовыми свойствами Number и Title. На странице курса добавьте восемь экземпляров в вертикальный LessonList. Граница между строками может принадлежать каждой строке или общему списку, но выберите один подход. Если одновременно нарисовать две границы, линия между занятиями станет толще остальных без смысловой причины.

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

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

Экран для чтения

Создайте Desktop/Lesson с общей шапкой и футером. Основную текстовую колонку ограничьте шириной 720 и расположите внутри общей области. Сверху добавьте путь «Все курсы / Сетка каталога», название «Колонки и промежутки» и вводный абзац. Текстовый стиль Body сохраняется, но новая ширина поддерживает чтение последовательного объяснения.

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

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

После текста добавьте второстепенное действие «К программе курса» и основное «Следующий урок». Для последнего потребуется отдельный экран или явно подписанное продолжение за пределами прототипируемого пути. В нашей первой демонстрации активным сделаем возврат к программе; подробный сценарий следующего урока не разрабатываем. Это честно задаёт границу интерактивного образца.

Сопоставьте короткую карточку и полную программу через те сведения, которые человек запомнил при выборе. Надпись «8 уроков» должна раскрыться в восемь осмысленных строк, уровень «Базовый» — в понятные требования к началу работы, а тема сетки — в результат, связанный с колонками и промежутками. Если программа неожиданно начинается с регистрации в другом сервисе, карточка задала неверное ожидание. Такое чтение обнаруживает смысловые расхождения раньше настройки переходов. Оно особенно полезно, когда три экрана редактировались в разное время и визуально всё ещё выглядят одинаково.

Согласованность перехода

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

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

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