Как сделать прототип с прокруткой и закреплённой шапкой

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

Разберём длинную страницу бронирования экскурсии: компактная шапка, фотография и описание, маршрут, отзывы и действие выбора даты. Инструменты интерактивного прототипирования Pixso поддерживают прокручиваемое содержимое и закреплённые элементы. Это позволяет просмотреть страницу целиком и решить, какая часть навигации действительно должна постоянно оставаться на экране.

Начните с видимой области, а не со всей страницы целиком

Создайте фрейм размером с экран, на котором хотите проверить макет. Для этого примера возьмём 390 × 844 пикселя. Это размеры учебного макета, а не обязательный стандарт мобильного дизайна: повторите проверку на размерах, актуальных для вашего проекта.

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

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

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

Настройте направление прокрутки у нужного фрейма

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

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

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

Закрепляйте шапку, только если она оправдывает занятое место

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

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

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

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

Закрепление fixed и прилипание sticky работают по-разному

Элемент с поведением fixed остаётся в одном и том же видимом положении на протяжении прокрутки. Заголовок раздела с поведением sticky обычно движется вместе с документом, пока не достигнет заданной границы, а затем удерживается у неё в пределах своего контейнера. На одном скриншоте эти варианты могут выглядеть одинаково, но при прокрутке ведут себя по-разному.

Для веб-реализации в справочнике MDN по свойству position объясняется разница между fixed и sticky, а также роль содержащих и прокручиваемых элементов. При передаче макета описывайте поведение точно, вместо того чтобы подписывать словом sticky любой постоянно видимый элемент.

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

Вложенная прокрутка должна решать отдельную задачу

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

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

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

Что проверить, если прокрутка работает неправильно

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

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

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

Проверяйте прокрутку на конкретной задаче чтения

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

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

Включите работу с клавиатурой в проверку реализации. Критерий WCAG «Фокус не перекрыт» касается ситуаций, когда элемент с фокусом полностью скрыт содержимым, созданным автором страницы. Закреплённая шапка или панель бронирования не должны приводить к тому, что клавиша Tab переводит пользователя на невидимое действие.

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

Соберите прототип с прокруткой в Pixso и проверьте страницу от первого экрана до последнего значимого действия.