Экран выбора подписки в приложении: как выделить цену, период и условия

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

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

Например, условные планы «Месяц» и «Год» можно описать так: доступ на один месяц с оплатой каждый месяц; доступ на год с оплатой за весь год. Если автор продукта хочет показать эквивалентную месячную стоимость годового варианта, подпишите её именно как расчётный эквивалент, а рядом оставьте сумму, которая будет списана за год. Иначе крупное «299 ₽ в месяц» может восприниматься как сумма ближайшей оплаты, хотя фактически в примере пользователь выбирает платёж 3 588 ₽ за весь период.

Сделайте черновую таблицу до макета:

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

Крупную цифру нельзя отрывать от подписи. Пользователь должен прочитать не «299», а завершённую конструкцию: «299 ₽ в месяц» или «3 588 ₽ за год». Визуально сумма может быть заметнее, но единица времени и порядок оплаты должны находиться рядом, а не в сноске внизу экрана.

При выборе иерархии начните с трёх уровней:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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