Как проектировать тарифные страницы: ВКС, вебинары и онлайн-мероприятия

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

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

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

Я собрал десять pricing-страниц из этих и смежных категорий. Это референсы для проектирования, а не десять прямых конкурентов с одинаковым продуктом. RingCentral RingEX включён отдельно как пример бизнес-коммуникаций с акцентом на телефонию.

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

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

Что сравнивать у конкурентов

Не все ссылки ведут на отдельные тарифы ВКС. Здесь важно классифицировать конкретную страницу, а не компанию целиком:

• ВКС и рабочие пакеты с онлайн-встречами: Zoom Workplace, Webex Meetings, Microsoft Teams и Google Workspace с Meet. В последних двух случаях сравниваются в том числе пакеты приложений, а не только видеосвязь.
• Вебинарные платформы: Livestorm, Demio и ClickMeeting. Полезны для изучения вместимости, ведущих и автоматизации вебинаров.
• Вебкасты, мероприятия и сопровождение: BigMarker и Airmeet. Здесь к платформе могут добавляться другой масштаб события и работа сервисной команды.
• Смежный коммуникационный продукт: RingCentral RingEX. В подборке открыта страница с акцентом на бизнес-телефонию, не отдельные тарифы ВКС или RingCentral Events.

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

В этой таблице зафиксированы видимые предложения и подписи CTA. Путь после клика и оплаты у конкурентов для этой подборки не проходился.

На узком экране таблицу можно прокрутить по горизонтали.

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

Начните с единицы покупки

В видеосервисе слово «пользователь» может означать сотрудника с лицензией, ведущего трансляции или зрителя. Для дизайна это три разные сущности.

Для собственной ВКС-модели отдельно проверьте число лицензий организаторов, вместимость и длительность встреч, правила параллельного проведения, запись и хранение. Это список вопросов к модели, а не обязательные платные ограничения. Кредиты участия из вебинарной платформы нельзя автоматически переносить в тарифы обычных видеовстреч.

У Zoom Workplace оплата платного пакета привязана к пользователю, а число участников встречи показано отдельным ограничением. У Demio вместимость комнаты соседствует с условиями оплаты за ведущего. У Livestorm предлагаются кредиты участия: страница объясняет, как учитывается человек в конкретной сессии, включая просмотр записи. Это разные способы посчитать потребление, хотя все сервисы работают с видео.

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

Перед макетом запишите одну фразу: «Клиент покупает ___ на срок ___, чтобы ___; в пакет входит ___». Если команда заполняет пропуски по-разному, сначала нужно договориться о предложении.

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

Разделите пакет и масштаб

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

Demio показывает вместимость комнаты внутри предложений. ClickMeeting тоже позволяет выбирать число участников, сохраняя различие между Live и Automated. Такой приём полезен, если людям действительно нужен один набор функций при разном масштабе.

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

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

Карточки должны объяснять различия

Названия Basic, Pro и Business почти ничего не говорят без контекста. Подпись «для растущего бизнеса» тоже оставляет слишком много трактовок. Гораздо полезнее: «для регулярных вебинаров с автоматическими напоминаниями» или «для мероприятий с настройкой и сопровождением».

Я бы начинал карточку с короткого описания задачи, затем показывал цену и условия, главный лимит и несколько отличий. Остальное вынес бы в сравнение. Это стартовая композиция для проверки, а не обязательное число строк.

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

Выделенный пакет тоже должен иметь понятное основание. Webex подчёркивает Business, Zoom выделяет Pro, Demio делает акцент на Premium. Сам факт такого выделения не доказывает, что вашей аудитории нужен средний или самый дорогой пакет. Подпись «популярный» требует данных. Если их нет, объясните рекомендацию через сценарий: «для команды с несколькими ведущими».

Простыми словами: посетитель должен суметь закончить фразу «мне нужен этот тариф, потому что…», не ссылаясь на цвет карточки.

Покажите, сколько и когда спишется

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

В открытой годовой версии Webex рядом показаны сумма на пользователя за год и месячный эквивалент. На страницах Zoom и Demio возле месячной цифры есть пояснение о годовой оплате. У Google Workspace к периоду добавляется промопредложение. Каждый дополнительный слой требует ясной подписи.

Для проверки возьмём учебный пример: лицензия стоит 1 000 ₽ за пользователя в месяц при оплате года, в команде пять человек. Тогда годовая сумма составит 60 000 ₽ до возможных налогов и дополнений. Это пример арифметики интерфейса, а не цена одного из сервисов.

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

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

Дайте таблице отдельную работу

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

У Google Workspace сравнение организовано вокруг приложений и групп функций. Demio разделяет возможности, длительность сессии, вместимость сцены, администраторов и поддержку. Эти группы помогают искать ответ на конкретный вопрос.

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

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

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

Enterprise и услуги: объясните причину другого пути

В рассмотренных версиях Zoom, Webex и Google Workspace Enterprise остаётся колонкой рядом с другими тарифами. У BigMarker индивидуальная цена применяется уже к нескольким пакетам. Airmeet отдельно описывает Managed Events, где команда сервиса берёт на себя работу над мероприятием.

Отсюда нет правила «Enterprise всегда надо убирать из сетки». Выбор композиции зависит от того, насколько сопоставимы предложения.

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

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

Простыми словами: «поможем разобраться» и «проведём за вас» представляют разную ценность. Одна строка «приоритетная поддержка» эту разницу не передаёт.

CTA продолжает обещание тарифа

На Webex видны разные действия для бесплатного входа, покупки и обращения в продажи. У BigMarker пакеты ведут к запросу расчёта. У ClickMeeting пробный доступ, покупка и индивидуальный контакт различаются прямо в карточках.

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

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

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

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

Соберите страницу вокруг последовательности вопросов

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

[Для какой задачи нужен продукт?]
                 |
                 v
[Что покупаю: пакет, объём, период]
                 |
                 v
[Карточки: цена, лимит, отличия, CTA]
                 |
       +---------+----------+
       |                    |
       v                    v
[Проверить различия]   [Нужен другой состав]
       |                    |
       v                    v
[Таблица + условия]    [Индивидуальный расчёт]
       |                    |
       +---------+----------+
                 |
                 v
[Выбор сохранён в форме / оформлении]
                 |
                 v
[Понятный результат и следующий шаг]

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

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

Как проверить результат до разработки

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

Попросите выбрать предложение и объяснить:

1. Что входит в покупку и какого ограничения человек может достичь первым.
2. Сколько он заплатит, за какой период и изменится ли сумма позже.
3. Почему соседний пакет подходит хуже.
4. Что произойдёт после нажатия основной кнопки.

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

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

Перед передачей макета проверьте короткий список:

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

Лучший референс для этой работы зависит от вопроса. У Webex удобно изучать период и условия оплаты, у Livestorm единицу потребления, у Demio настройку вместимости, у Airmeet состав сервиса, у Google Workspace подробное сравнение. Берите конкретное решение, проверяйте его на своей модели и сохраняйте объяснение, почему оно помогает вашему пользователю выбрать.

Ссылки

• Zoom Workplace Pricing: лицензии, ограничения встреч, дополнения и сравнение.
• Cisco Webex Pricing: открывшаяся британская версия, продуктовые вкладки и периоды оплаты.
• Microsoft Teams: Business Plans: отдельный инструмент и пакеты Microsoft 365.
• Google Workspace Pricing: пользователи, период, промо и матрица возможностей.
• RingCentral RingEX Pricing: пользовательские лицензии и набор CTA.
• Livestorm Pricing: кредиты участия и объяснение учёта потребления.
• Demio Pricing: пакеты, вместимость и условия оплаты за ведущего.
• ClickMeeting Pricing: проба, живые и автоматизированные вебинары.
• BigMarker Pricing: состав пакетов при индивидуальной цене.
• Airmeet Pricing: вебинары, события и проведение с командой сервиса.