Расскажу о законе сохранения пикселей на примере алгебраических формул и их геометрических интерпретаций.
В процессе работы над математическими объяснялками для Практикума, я поняла, что важны не только «кадры», но и продуманные анимации между ними. Ни один значимый элемент не должен исчезать или появляться из ниоткуда. Нужно трансформировать исходную «форму» так, чтобы не возникало вопросов, как каждое следующее состояние получилось на основе предыдущего.
Самый простой пример — это правило раскрытия скобок:
Правила раскрытия скобок. Все примеры из тренажёра «Математика для цифровых профессий», Практикум
Обратите внимание, как a и x перелетают на новое место и становятся произведением ax. При этом слияние и плавное затухание служебных знаков допустимы.
Похожим образом учим раскрывать скобки с минусами. Здесь переходы чуть более сложные, поэтому делаем анимации в два шага:
Ещё интереснее становится, когда можно подключить графические метафоры, например, в формулах сокращённого умножения:
Тут важен последний шаг, где фигуры превратились в запись формулы.
Вычитание показывать наглядно сложнее, чем сложение. В формуле разности квадратов получилось собрать последовательную геометрическую интерпретацию:
А для квадрата разности пришлось начать с более крупной формы и уменьшать её до левой части формулы, постепенно формируя правую:
Моя любимая и самая эффектная — объёмная объяснялка для третьей степени:
По сути тут работает тот же закон сохранением пикселей в анимированных трансформациях, что и в самом первом примере. Правда, на одном из шагов мы не осилили 3D‑преобразование деталек и нарушили закон. Но благодаря тому, что на остальных шагах он соблюдается, объяснялка всё равно работает хорошо.
Кстати, в этом совете примеры идут от простого к сложному. Это важный принцип объяснений и объяснялок, который обсудим в следующий раз.
P. S. Это был совет о визуализации данных. Хотите узнать всё о графиках, диаграммах, дашбордах и интерактивных объяснялках? Присылайте вопросы.