Таблица цен, не прейскурант. Это точка, где посетитель решает: платить или уйти. Дизайн этой точки либо подталкивает к действию, либо хоронит конверсию.

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

Ниже 16 примеров от Dropbox до BigCartel с разбором: почему их таблицы запоминаются и какие приёмы работают.

💡 Быстрый обзор:

• Пройдите по примерам и заметьте повторяющиеся паттерны
• Сверьтесь со сравнительной таблицей и выберите подходящий подход
• Примените матрицу приёмов из итогового раздела

Сравнительная таблица: 16 подходов к дизайну таблиц цен

1. Dropbox

Страница планов Dropbox, один из самых чистых примеров. Три карточки, описательные изображения пакетов, разделение «для себя» и «для команд» тонкой линией, не цветом.

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

• Плюсы: иллюстрации вместо иконок; разделение линией, не цветом; интеграция с фоном
• Минусы: при большом количестве функций минимализм может недодать информации
• Где посмотреть: 🔗 Dropbox Plans

2. Wufoo

Wufoo использует полноцветную матрицу с переключением «месяц / год» через слайдер. Функции показаны через сравнение: полный список только в популярном плане Bonafide, а слева и справа, зелёные галочки напротив доступных пунктов.

CTA-кнопки сверху и снизу, для страниц, которые скроллят, это критично. Ушёл вниз изучать фичи, кнопка уже ждёт.

• Плюсы: матрица со слайдером; сравнение функций через популярный план; CTA сверху и снизу
• Минусы: перегружен цветом, на мобильных может рябить
• Где посмотреть: 🔗 Wufoo Pricing

3. Freshdesk

Freshdesk добавляет анимированный элемент: популярный план отмечен GIF парящего воздушного шара, единственное движение на статичной странице. Взгляд притягивается мгновенно.

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

• Плюсы: анимация фокусирует на популярном плане; последовательная цветовая тема
• Минусы: GIF может отвлекать при повторных заходах
• Где посмотреть: 🔗 Freshdesk Pricing

4. Plugmatter

Собственный пример Plugmatter: матрица в красно-белой гамме под бренд. Функции слева, планы справа, центральный план «подсвечен» яркостью, а не новым цветом.

Тот же дизайн доступен как шаблон в их плагине таблиц цен, редкий случай «ешь свой собачий корм» в действии.

• Плюсы: строгий брендовый стиль; подсветка центра яркостью; дизайн = демонстрация продукта
• Минусы: контрастный красный не универсален
• Где посмотреть: 🔗 Plugmatter

5. Pulse

Pulse доказывает: чем меньше текста, тем смелее дизайн. Просторная вёрстка, крупная кнопка, минимум описаний. Популярный план в центре темнее фоном и ярче кнопкой, тег «Большая ценность» над ним.

• Плюсы: разреженная вёрстка даёт воздух; тег с ценностным предложением
• Минусы: для сложных продуктов воздуха может быть слишком много
• Где посмотреть: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp сделал динамический тег «Рекомендуемые»: передвинул слайдер количества подписчиков, и рекомендуемый план сменился. Посетитель не гадает, что брать.

Цена показана после описания возможностей, посетитель оценивает ценность до того, как увидит цифру.

• Плюсы: динамический тег под потребность; цена после ценности
• Минусы: на малых экранах слайдер может быть неудобен
• Где посмотреть: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk предлагает бесплатный триал для ВСЕХ пакетов, не только базового. Кнопки «Try» выделены оранжевым и ведут к полнофункциональной профессиональной версии.

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

• Плюсы: триал на все планы; полнофункциональный тестовый период
• Минусы: сложный продукт может не раскрыться за триал
• Где посмотреть: 🔗 Zendesk Pricing

8. Litmus

Litmus использует крупные цветовые блоки, по одному на план. Цвета дополняют друг друга и не конфликтуют.

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

• Плюсы: цветовые блоки для различения планов; два разных по смыслу CTA
• Минусы: крупные блоки требуют много вертикального пространства
• Где посмотреть: 🔗 Litmus Pricing

9. BeanStalk

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

Названия пакетов (Bronze, Platinum) не несут смысла, но подробные описания компенсируют это.

• Плюсы: 3D-эффект для дорогих планов; разная «серьёзность» под аудиторию
• Минусы: имена планов неинформативны; 3D на сверхплоском сайте выглядит устаревшим
• Где посмотреть: 🔗 BeanStalk Pricing

10. Readymag

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

• Плюсы: минимализм до двух цветов; приём с маленьким знаком валюты; тултипы вместо текстовых стен
• Минусы: на длинных таблицах два цвета могут сливаться
• Где посмотреть: 🔗 Readymag Pricing

11. Crazyegg

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

Выбранный план окрашен в синий (доверие), кнопки, в зелёный (действие). Цвета работают на психологию.

• Плюсы: гипертрофированные различия; trust-синий + action-зелёный
• Минусы: только для таблиц с малым числом переменных
• Где посмотреть: 🔗 Crazyegg Pricing

12. Heroku

Heroku практически полностью монохромен, всё в оттенках фиолетового, кроме единственного синего пятна на кнопке профессионального плана. Глаз идёт прямо туда.

Цена встроена ВНУТРЬ кнопки, а не над ней. Описание планов через наследование: «Все функции бесплатного плана +…», и так по цепочке.

• Плюсы: монохром с одним цветовым акцентом; цена внутри CTA; каскадное наследование
• Минусы: монохромность может показаться скучной
• Где посмотреть: 🔗 Heroku Pricing

13. Freshbooks

Freshbooks, «парящий» текст между страницами. Большинство планов различаются только количеством клиентов и ценой, меньше различий, чище дизайн.

План Evergreen с тегом «самые популярные» и маленьким знаком доллара относительно цифры, тот же приём, что у Readymag.

• Плюсы: чистота за счёт малого числа переменных; парящий эффект
• Минусы: только когда планы различаются 1-2 параметрами
• Где посмотреть: 🔗 Freshbooks Pricing

14. Slidedeck

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

• Плюсы: дизайн не мешает сравнению; визуальное равенство заставляет читать
• Минусы: без визуального якоря легко потеряться
• Где посмотреть: 🔗 Slidedeck Pricing

15. YepText

YepText, самая быстрая для восприятия таблица в подборке. Три строки, характерные названия пакетов (Workin' It, The Beast, The Champ), решение за секунды.

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

• Плюсы: сверхбыстрое восприятие; характерные названия
• Минусы: для комплексных SaaS слишком мало информации
• Где посмотреть: 🔗 YepText Pricing

16. BigCartel

BigCartel использует изображения как фон секции цен: каждая картинка показывает, ДЛЯ КОГО план, художник с парой работ, растущий магазин, серьёзный бизнес. Визуальный портрет аудитории сильнее слов.

Функции раскрываются во всплывающем окне, таблица остаётся чистой, информация доступна в один клик.

• Плюсы: изображения показывают аудиторию; скрытые детали во всплывающем окне
• Минусы: риск что посетитель не кликнет; не для сравнения «лицом к лицу»
• Где посмотреть: 🔗 BigCartel Signup

Видео: дизайн таблиц цен, который повышает конверсию

Разбор от DNSK Design Study о том, как «более уродливые, но понятные» таблицы цен повысили конверсию DNSK Design Study. Шесть минут, и станет ясно, почему визуальная «красивость» часто вредит:

⁉️🤔 Частые вопросы

Что делает таблицу цен «конверсионной»?

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

Обязательно ли выделять один план как «популярный»?

Почти всегда полезно. Посетитель приходит с сомнением «какой выбрать?», и выделенный план его снимает. Исключение, когда планы чётко делятся по аудиториям, как у Dropbox: личный / командный / enterprise. Тогда лучше делить визуально, а не подсветкой.

Сколько планов оптимально?

Три или четыре. Три, классика: базовый / популярный / продвинутый. Четыре, если есть enterprise-сегмент. Пять и больше, риск «паралича выбора». Из 16 примеров большинство используют 3-4 плана.

Какие цвета для CTA-кнопок работают лучше?

Зелёный («идти») и оранжевый («действовать сейчас»). Синий для trust-элементов. Красный осторожно: привлекает внимание, но читается как «опасность». Главное, CTA-кнопка должна быть ЕДИНСТВЕННЫМ элементом этого цвета на странице.

Стоит ли показывать цену сразу или прятать за «связаться с нами»?

Для self-service, показывать сразу и прозрачно. Скрытая цена раздражает. Для enterprise с индивидуальным ценообразованием, дайте намёк («от $X»), а точную цифру через контакт. Пример: Heroku в подборке.

Какой подход к дизайну таблицы цен выбрать?

16 примеров позади. Теперь главное: что применить к вашему проекту.

Если у вас 3-4 плана с понятными различиями, берите подход Freshbooks или Readymag: минимум цветов, акцент на 1-2 переменных, маленький знак валюты. Работает для большинства SaaS.

Если планы сильно различаются по функциям, матрица как у Plugmatter или Wufoo: функции слева, планы справа, галочки на пересечениях. Разница видна за секунды.

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

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

И главный урок подборки: дизайн таблицы цен не про «красиво». Он про «понятно с первого взгляда, какой план брать». Сделайте это, и конверсия скажет сама за себя.