Текст приложения в режиме разделённого экрана: как сохранить читаемость

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тестируйте промежуточные ширины, а не только крайние состояния «телефон» и «планшет». На границе переключения layout особенно легко получить скачок: два столбца ещё включены, но заголовок каждой карточки уже тесен; после маленького сдвига окна одна панель внезапно исчезает. Android рекомендует проверять поведение на ширинах классов compact, medium и expanded и принимать решения по размеру окна. Не копируйте пороги бездумно: подберите момент перестройки по вашему содержимому.

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

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

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

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

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

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

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

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

Ориентируйтесь на текущую область приложения и классы размеров окна, а не только на категорию устройства. В документации Android описаны окна compact, medium и expanded и тестирование на соответствующих ширинах. Дополнительно попробуйте реальный режим разделения экрана и переходы, пока приложение открыто.

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

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

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