Типографика нижнего листа в приложении: текст, действия и высота

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

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

Для короткого выбора можно показать лист с заголовком «Способ получения», двумя понятными вариантами и одной основной кнопкой. Если же внутри появляются несколько последовательных форм, длинные объяснения, вложенная навигация и черновик, который легко потерять, экрану тесно в листе. На iOS Human Interface Guidelines описывают sheet как поверхность для ограниченной задачи, связанной с контекстом; Android также рассматривает bottom sheet как вспомогательное содержание. Руководства платформ различаются, поэтому общий принцип — не копировать внешний вид, а проверить, что паттерн подходит сценарию.

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

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

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

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

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

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

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

Если есть ограничения, помещайте их рядом с тем вариантом, к которому они относятся. Фраза «Бесплатная отмена до 17:00» должна стоять около конкретного времени, а не в общем подвале листа, где связь теряется. Когда пояснение длинное, сначала вынесите ключевое условие в короткую строку, а детали показывайте по запросу. Не превращайте каждый выбор в карточку с несколькими абзацами: сравнительную информацию человек должен уметь просмотреть вертикально.

Счётчики, даты и суммы оформляйте так, чтобы различались значение и единица измерения: «2 гостя», «до 18:00», «1 250 ₽». Не разносите знак валюты или единицу на отдельную строку, если это меняет прочтение. Для длинных локализованных числовых подписей заложите перенос и тестовые данные с максимальными ожидаемыми значениями, а не только короткое «1 шт.».

Основная кнопка должна иметь устойчивое положение и понятную подпись. Если кнопка закреплена над нижним краем, прокручиваемое содержимое не должно уходить за неё без визуальной границы; нижний системный отступ учитывайте отдельно. Для опасного действия не полагайтесь только на красный цвет: надпись должна назвать последствие, например «Удалить адрес». Если действие необратимо, листу может понадобиться дополнительный этап подтверждения, но не второй незаметный слой поверх первого.

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

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

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

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

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

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

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

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

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

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

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

Для платформенных деталей сверяйтесь с актуальными руководствами: <a href="https://developer.apple.com/design/human-interface-guidelines/sheets">Apple Human Interface Guidelines: Sheets</a> и <a href="https://developer.android.com/develop/ui/compose/components/bottom-sheets">Android Developers: Bottom sheets in Jetpack Compose</a>. Они описывают разные компоненты и реализации, поэтому используйте их как контекст для конкретной платформы.