Как объяснить тариф с помощью моушн-графики
Два тарифа обещают «от $6». В одном каждая единица оплачивается по ставке достигнутого диапазона. В другом каждая часть потребления оплачивается по своей ставке. Видео может показать одинаково привлекательную начальную цену и оставить у зрителя два совершенно разных ошибочных представления о счёте.
После видео о тарифе человек должен уметь рассчитать счёт: определить учитываемые единицы, применить правило цены и понять период оплаты. Поэтому полезная история — это расчёт: что считается, какое правило применяется и как получается сумма к оплате.
Анимация может постепенно раскрыть этот расчёт. А может скрыть. Низкий месячный эквивалент появляется первым, а годовое обязательство — слишком поздно для чтения. Счётчик проносится через значения, не показывая момент смены правила. Скидка доминирует на экране, а срок её действия исчезает в переходе.
Начните с полного счёта и восстановите последовательность в обратном порядке: определите количество, примените ставку и оставьте период оплаты рядом с итогом.
Начните с вопроса, на который зрителю действительно нужен ответ
«Объясните наши цены» может означать разное. Потенциальному покупателю нужно выбрать тариф, оценить счёт за потребление, понять годовую оплату или узнать, что происходит после исчерпания включённого объёма. Вопросы связаны, но требуют разных демонстраций.
Выберите один главный вопрос для ролика. Для оплаты по потреблению: «Сколько будут стоить шесть единиц в этом месяце?» Для годовой подписки: «Почему на странице написано $29 в месяц, если сегодня я плачу $348?» Для тарифа по местам: «Кто именно учитывается как платное место?»
Узкий вопрос не разрешает опускать условия, меняющие ответ. Наоборот, он помогает их выявить. Если сумма зависит от валюты, периода, активных мест или минимального обязательства, эти факты входят в расчёт. Декоративный список функций продукта — нет.
Напишите ожидаемый ответ до раскадровки. Если команда не может согласовать расчёт обычным текстом, анимация усилит разногласие. Уточните правило с ответственным за продукт или биллинг, затем решайте, как объяснить его визуально.
Объясните объёмную и ступенчатую модели на примере диапазонов Stripe
Документация Stripe по тарифам с диапазонами различает две модели на примере вымышленного бизнеса по продаже шрифтов. В примере единицы с первой по пятую стоят $7, с шестой по десятую — $6.50, свыше десяти — $6. При шести единицах объёмная модель даёт $39, ступенчатая — $41.50.
Разница в том, где применяется ставка. Объёмная модель использует ставку достигнутого диапазона для всех шести единиц. Ступенчатая считает первые пять по $7, шестую — по $6.50. Поэтому одно количество и одна таблица ставок требуют разных визуальных объяснений.
В анимации объёмной модели одна ставка может связывать всё количество с итогом. В ступенчатой отдельные группы должны оставаться видимыми достаточно долго, чтобы показать, почему ранние единицы сохраняют прежнюю ставку. Простая замена «$7» на «$6.50» над всей группой объяснит неверную модель.
Это редакторское следствие арифметики. Сложная анимация не нужна. Шесть отметок, видимая граница диапазона и постоянный промежуточный итог объяснят больше, чем вращающаяся карточка тарифа, если связи между ними правильные.
Сделайте счёт достаточно небольшим для понимания и достаточно полным для доверия
У расчётного примера должны быть определённые количество, учитываемая единица, период, валюта и итог. Укажите исключения, без которых зритель иначе поймёт результат, например отсутствие налогов в иллюстративном промежуточном итоге. Не добавляйте несвязанные исключения лишь ради впечатления полноты.
Для ступенчатого примера из шести единиц визуальная последовательность может начаться с шести подписанных объектов. Объедините пять, один оставьте отдельно. Рядом с первой группой покажите «5 × $7 = $35», со второй — «1 × $6.50 = $6.50». Затем сведите суммы в «$41.50 за шесть единиц в этом месяце».
Конечное состояние важно. Если промежуточные итоги исчезают до появления общей суммы, зрителю приходится помнить числа и одновременно следить за движением. Сохраните основание расчёта видимым при появлении результата. Полное уравнение позволяет проверить объяснение, а не просто принять его.
Не добавляйте в пример сбор или скидку, если они не отвечают главному вопросу ролика. Каждый новый член расчёта вводит ещё одну связь для понимания. Если у реального продукта есть обязательная базовая плата, её нужно включить; необязательному сложному частному случаю может быть место в отдельном примере рядом с видео.
Покажите границу, на которой интуиция может подвести
Одно количество демонстрирует арифметику, но не обязательно раскрывает поведение тарифа. Полезная вторая сцена проводит количество через границу. Вопрос: что меняется в правиле, а что остаётся прежним?
При ступенчатой модели переход с пяти на шесть единиц добавляет одну единицу следующего диапазона. Первые пять остаются на месте по прежней ставке. Анимируйте добавление новой единицы во вторую группу, а не перекрашивание всех. Движение подчёркивает сохранение предыдущего промежуточного итога.
При объёмной модели пересечение границы может менять ставку для всего количества. В отдельном вымышленном примере допустим, что до 100 единиц каждая стоит $10, а от 101 — $8. Сто единиц дадут $1,000; 101 — $808. Дополнительная единица уменьшает итог этого примера, поскольку меньшая ставка применяется ко всем единицам.
Не интерполируйте незаметно кривую стоимости между дискретными количествами. Плавная кривая может подразумевать дробные единицы или непрерывное правило, которых тариф не поддерживает. Если продукт считает целые места, показывайте целые места. Если потребление бывает дробным, до проектирования счётчика укажите действительную единицу и порядок округления.
Переход с пяти на шесть особенно ясно показывает разницу. Обе модели начинают с $35 за пять единиц. Объёмная затем достигает $39 — рост на $4, хотя отображаемая ставка шестой единицы составляет $6.50. Причина в том, что первые пять тоже получают меньшую ставку. Ступенчатая достигает $41.50, поскольку новая ставка применяется только к новой единице. Для семи единиц итоги составят соответственно $45.50 и $48.
Это хорошие контрольные точки раскадровки: показать пять единиц с текущим итогом, добавить шестую и затем точно показать, какие подписи ставок меняются. В объёмной версии меняйте все шесть подписей вместе. В ступенчатой оставьте первые пять нетронутыми и добавьте отдельный промежуточный итог для шестой. Тогда зритель увидит правило оплаты, а не будет восстанавливать его по конечной сумме. Удерживайте оба промежуточных итога рядом с общим достаточно долго, чтобы их можно было сложить.
Держите цену, единицу и время оплаты вместе
Вымышленная годовая подписка проще: $348 с оплатой раз в год, что эквивалентно $29 в месяц. Но и её легко анимировать неудачно. Крупные «$29», показанные за несколько секунд до годового платежа, создают неполное впечатление на протяжении большей части сцены.
Считайте число, единицу и условие оплаты одной информационной группой. Их визуальный акцент может различаться, но появляться как несвязанные факты они не должны. Месячный эквивалент может быть набран самым крупным шрифтом, а «$348 с ежегодной оплатой» — стоять сразу под ним, с общим появлением и неподвижной выдержкой.
В нашей вымышленной сцене подписки используется именно эта связь: обе строки устанавливаются на 0,8 секунды и остаются неподвижными до 4,8 секунды. Более сложному счёту может потребоваться долгая выдержка или поэтапный расчёт.
Не допускайте, чтобы переход стирал условие, оставляя главное число. Если карточка сжимается в угол и выживает лишь «$29», уменьшенная версия уже сообщает другое. Проверяйте каждое состояние композиции, включая финальную карточку и обрезку для соцсетей, как самостоятельное ценовое утверждение.
Анимируйте объяснение, а не сумму к оплате
Бегущий счётчик часто выглядит аккуратно, но его смысл неоднозначен. Это текущее потребление, накапливаемая сумма, оценка или просто эффект появления? Зритель не должен гадать.
Если сумма фиксирована, появление стабильного значения может быть понятнее перебора промежуточных цен, которые никто не заплатит. Если цель — объяснить накопление, нарастающий итог полезен, но должен оставаться связанным с добавляемыми единицами. Тогда счётчик представляет расчёт, а не украшение.
Особенно осторожно обращайтесь со скидками. Анимация от $100 к $60 передаёт сравнение, но его основание должно быть видно. $100 — прежняя цена, месячная альтернатива или цена до вводного предложения? Типографика и движение не могут дать определение, которого нет в самом предложении.
Не компенсируйте неясную подпись эффектным движением. Если зритель не может объяснить, что считает «потребление», тысяча движущихся точек не решит проблему. Замените абстракцию конкретной единицей или покажите одно учитываемое событие перед переходом к общему количеству.
Сделайте неопределённость видимой, если счёт является оценкой
Одни видео демонстрируют точный счёт при фиксированных допущениях. Другие — калькулятор, результат которого зависит от будущего поведения. Это разные обещания. Точное на вид число может придать оценке необоснованную определённость.
Обозначьте входные данные, которые предполагаются, а не наблюдаются. Например, оценка может предполагать 12 активных мест в течение месяца без изменений внутри периода. Такое допущение рядом с расчётом помогает понять, почему собственная сумма может отличаться.
Если реальная система включает переменное потребление, рассмотрите несколько содержательных сценариев вместо одного якобы универсального ответа. Низкий, типичный и высокий варианты полезны при явных определениях. Их нельзя представлять как измеренное распределение клиентов, если таких данных нет.
Не выдумывайте округление, пропорциональный перерасчёт, налоги или обменный курс ради реалистичности примера. Либо проверьте правило, либо ограничьте учебный пример областью, где оно не требуется. Небольшое точное объяснение полезнее подробного вымышленного счёта, поданного с уверенностью реального продукта.
Проектируйте экран для сравнения и проверки
В сцене с ценой обычно минимум три уровня чтения: сумма, объясняющее правило и контекст, ограничивающий пример. Иерархия должна направлять внимание, не делая нижние уровни фактически нечитаемыми.
Показывайте близостью, какие подписи относятся к каким числам. Держите единицу рядом с суммой, а не в далёкой легенде. Выравнивайте сопоставимые диапазоны одинаково. Если зритель сравнивает два тарифа, сохраняйте общие допущения в одном положении, чтобы различия было легко проверить.
Цвет может выделять активный диапазон или добавленное количество, но не должен быть единственным признаком группы. Подписи, скобки или последовательная пространственная группировка сохраняют объяснение и в стоп-кадре, и для людей с иным восприятием цвета.
Проверьте результат в реальном размере распространения. Условие, читаемое в полноэкранном редакторе, может исчезнуть в маленькой встроенной карточке. Если оно необходимо для понимания цены, композиция обязана его защищать. Уменьшить число может быть правильным компромиссом.
Связывайте последующие правки с правилом расчёта
Ценовые материалы часто меняются из-за кампании, а не решения команды пересмотреть расчёт. Кто-то заменяет главное число и предполагает, что остальная анимация верна. Старое количество, промежуточный итог, период или условие на финальной карточке остаются незамеченными.
Держите исходные значения и отображаемые итоги вместе в проекте. Смена годовой оплаты на месячную должна запускать проверку суммы к оплате, основания сравнения, подписи платежа и всех сцен с этим предложением. Считайте видимое уравнение системой зависимостей, а не набором несвязанных текстовых слоёв.
Быстрая регрессионная проверка: выбрать одно обычное и одно граничное количество, независимо рассчитать оба и сравнить с экспортом. После любой правки цены проверьте эти количества снова.
Просите проверяющего рассчитать сумму, а не одобрить стиль
После просмотра проверяющий должен ответить на исходный вопрос видео. Для ступенчатого примера спросите стоимость семи единиц. Ожидаемый результат — $48: пять по $7 и две по $6.50.
Неправильный ответ даёт полезную диагностику. Если человек применяет $6.50 ко всем семи единицам, группировка или переход могли внушить объёмную модель. Если не может назвать период оплаты, подпись периода, возможно, появилась не вовремя или оказалась настолько второстепенной, что перестала помогать.
Также изучите граничные кадры экспортированного видео. Прочитайте последний стабильный кадр перед исчезновением. Прочитайте первый кадр после смены тарифа. Если условие ненадолго исчезает, а сумма остаётся, анимация создаёт вводящее в заблуждение промежуточное состояние, даже при верной финальной карточке.
Цель — не сделать цены простыми на вид, скрыв их устройство. Цель — сделать значимую структуру понятной. Хорошее объяснение даёт зрителю способ предсказать счёт и ясное понимание допущений прогноза. Анимация оправдана, когда помогает этому рассуждению.