Переходы и прокрутка прототипа

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

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

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

Навигация между экранами

На странице 04 Prototype поместите копии готовых верхних фреймов, сохраняя имена и данные. Назовите поток Desktop — выбор курса, а стартом сделайте каталог. Выберите кнопку «Открыть курс» у карточки «Сетка каталога», откройте Prototype и создайте взаимодействие On click с действием Navigate to к фрейму курса.

На странице курса свяжите «Начать урок» с Desktop/Lesson. На экране урока действие «К программе курса» ведёт к конкретному фрейму курса. Здесь явная цель удобнее общего Back: человек понимает, что вернётся к программе, независимо от того, каким способом он оказался в уроке. Back уместен, когда смысл действия состоит именно в возврате по истории.

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

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

Если одинаковая кнопка встречается на desktop и mobile, после копирования связи проверьте её целевой фрейм. Внешне обе программы похожи, но переход из мобильного каталога на desktop-курс неожиданно изменит масштаб и ширину. Имя назначения и принадлежность к потоку должны совпадать с исходным экраном. Для такого случая удобно добавлять размер к имени верхнего фрейма, сохраняя обычное имя компонента внутри. Это не усложнение пользовательской навигации: служебные названия остаются в файле автора.

Общая ссылка и локальная цель

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

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

Для поиска создайте отдельный поток Поиск — нет совпадений. Скопируйте Default-каталог в стартовый фрейм Desktop/Catalog Search и заранее впишите в поле «анимация». Его кнопка «Найти» ведёт к Empty, действие «Сбросить поиск» — к исходному каталогу с пустым полем. У такого пути есть отдельный старт, запрос и цель: он не начинается уже внутри готовой пустой выдачи. Не утверждаем, что Figma выполняет настоящий поиск или принимает введённый текст: прототип показывает заранее подготовленное состояние. Эта граница должна быть понятна участнику обсуждения.

Прокрутка документа

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

Кнопка «Выбрать курс» в hero использует Scroll to к контейнеру CourseList внутри того же экрана. Это не переход на новую страницу. Укажите цель именно в текущем фрейме, чтобы не попасть в похожий список другого контрольного размера. Повторяющиеся имена полезны для компонентов, но при прототипировании необходимо проверять контекст цели.

Если шапка закреплена сверху, контент может пройти под ней. Задайте непрозрачную поверхность и продумайте отступ цели прокрутки, чтобы заголовок списка не оказался скрыт. В Figma настройки fixed, scrolling и constraints связаны с выбранным родителем и окном просмотра. В реализации потребуется отдельно проверить поведение браузера; макет не переносит эти параметры в CSS автоматически.

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

Прочитайте подписи действий вслух в том порядке, в котором их встретит посетитель: «Открыть курс», «Начать урок», «К программе курса», «Все курсы». Каждая фраза должна совпадать с назначенной целью перехода. Если «Все курсы» возвращает человека на единственную программу, дело не в скорости анимации: действие обещает другой уровень каталога. Исправьте цель или подпись до добавления эффектов. Такой разбор помогает оценить путь без предположения, что красивое движение само объяснит смену контекста. Фактическое поведение останется отдельным предметом самостоятельного просмотра прототипа.

Мобильное меню и просмотр

Для кнопки «Меню» подготовьте отдельный фрейм Mobile/Menu с переходом «Все курсы» и действием закрытия. Используйте Open overlay, если панель должна появляться поверх текущего экрана. Тогда Close overlay возвращает человека к тому же содержимому. Navigate to к новой странице меню дал бы другую историю и потребовал бы явного возврата.

У overlay укажите положение, затем проверьте область закрытия. Нельзя рассчитывать только на маленький крест в углу, если он теряется среди декоративных элементов. Название «Закрыть меню» делает действие ясным. Если предусмотрено закрытие по нажатию вне панели, запишите это в спецификации как отдельное условие, а не случайный эффект настройки.

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

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