Длинные подписи на мобильных кнопках: как сохранить действие при переносе текста

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

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

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

Сначала отличите название действия от пояснения. Кнопка отвечает на вопрос «что произойдёт при нажатии?», а контекст, ограничение или выгода часто лучше помещаются рядом: над кнопкой, в подписи поля или в тексте экрана. Например, вместо «Оплатить заказ картой онлайн» можно оставить «Оплатить», если экран уже ясно показывает заказ и способ оплаты. Если способ ещё не выбран, его нельзя просто выкинуть: сначала измените структуру выбора.

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

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

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

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

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

Не уменьшайте шрифт автоматически, чтобы «впихнуть» каждую надпись. Такой приём создаёт разные размеры у одинаковых действий и ухудшает читаемость именно у самых важных кнопок. Apple рекомендует адаптировать интерфейс к увеличению Dynamic Type и сводить усечение полезного текста к минимуму; это требует проверить рост компонента, а не только макет с обычным размером. Источник: <a href="https://developer.apple.com/design/human-interface-guidelines/typography/">Apple HIG: Typography</a>.

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

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

Обрезка приемлемее в статическом вторичном тексте, когда полный текст доступен в другом месте и потерянная часть не меняет действие. Для первичной команды сначала проверяйте перенос, расширение, вертикальный стек или изменение соседнего контента. Технически интерфейсный фреймворк может поддерживать перенос, ограничение числа строк и разные режимы переполнения; например, эти параметры раздельно описаны в документации Jetpack Compose. Источник: <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicText.composable">Android Developers: BasicText</a>.

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

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

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

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

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

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

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

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

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

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

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

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