Типографика на складном смартфоне: как не терять текст у линии сгиба

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

Складной телефон — не просто смартфон с экраном побольше. В закрытом состоянии он похож на обычный телефон, а в раскрытом предлагает другую ширину, пропорции и способы взаимодействия. В промежуточном положении пользователь может поставить устройство на стол или читать его как раскрытую книгу. Поэтому экрану часто нужны разные компоновки, а не одна страница, растянутая до нового размера. Android Developers описывает folded, unfolded, book и tabletop как разные положения, для которых интерфейс может адаптироваться: https://developer.android.com/develop/adaptive-apps/guides/foldables/learn-about-foldables.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источники: Learn about foldables — Android Developers (https://developer.android.com/develop/adaptive-apps/guides/foldables/learn-about-foldables); Support different display sizes — Android Developers (https://developer.android.com/develop/adaptive-apps/guides/support-different-display-sizes).