Как понятно записывать наведение, перетаскивание и микровзаимодействия

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

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

Почему микровзаимодействия трудно снять

Против вас работают три вещи:

• Они короткие. Всплывающая подсказка может быть видна 400 миллисекунд. Мельком зритель её просто не заметит.
• Они мелкие. Смена состояния флажка занимает крошечную долю кадра 1080p.
• Вы уже знаете, куда смотреть. Действие выполняли вы, поэтому ваш взгляд следовал за ним идеально. Взгляд зрителя — нет.

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

Начните с более высокой частоты кадров

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

Любую запись с перетаскиванием, анимированными переходами или быстрыми состояниями наведения снимайте на 60 к/с. Файл будет больше, но сжать его можно при экспорте — а вот добавить кадры, которых не было, уже не получится.

Замедлите руку

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

Практические правила во время записи:

• Подведите курсор к цели и остановитесь перед нажатием
• Дайте клику проявиться визуально, прежде чем двигаться дальше
• Не проскакивайте цель с последующей коррекцией — подходите одной плавной дугой
• Никогда не двигайте курсор во время объяснения: оставьте его на месте

Дайте наведению время

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

Полезная привычка: считайте про себя, пока держите наведение. Не досчитали до «двух» — вы поспешили.

Правило трёх тактов для перетаскивания

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

1. Захват — наведите курсор на элемент, нажмите и на мгновение замрите, чтобы состояние захвата стало видно
2. Перенос — двигайтесь медленно, по прямой и читаемой линии к цели
3. Отпускание — задержитесь над областью назначения перед отпусканием, чтобы подсветка зоны успела считаться

Короткая пауза между тактами делает работу целой фразы закадрового текста.

Закрепите внимание эффектами курсора

Инструменты курсора в Recorded созданы именно для таких моментов:

• Сглаживание курсора убирает дрожание, из-за которого быстрые движения трудно проследить. Для большинства демо подходит средний уровень.
• Подсветка кликов делает момент нажатия очевидным — это важно, когда результат на экране едва заметен.
• Размер курсора можно увеличить, чтобы указатель оставался различимым после экспорта, особенно у зрителей со смартфона.

В записях с обилием перетаскиваний подсветка кликов обязательна: именно она сообщает, что кнопка всё ещё удерживается.

Приближайте, но не теряйте цель из кадра

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

Два рабочих подхода:

• Включите оба конца. Кадрируйте область с источником и целью, даже если ради этого придётся сделать зум мягче.
• Приближайте по тактам. Зум на захвате, лёгкий отъезд во время переноса, снова зум на отпускании.

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

Замедление для по-настоящему быстрых действий

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

Участок скорости 0,5x на односекундной анимации даёт зрителю две секунды и не создаёт неловкой паузы в озвучке. Добавьте зум на тот же диапазон — и даже переход в 200 миллисекунд станет полностью читаемым.

Проговаривайте невидимое

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

Закройте это двумя способами:

• Скажите вслух: «Я удерживаю Shift и тяну, чтобы выделить весь диапазон»
• Добавьте текстовую подпись в этот момент с клавишей или жестом, чтобы всё было ясно и без звука

Частые ошибки

• Запись на 30 к/с и последующее удивление, почему перетаскивание рвётся
• Сразу двигаться дальше после клика, не дождавшись отклика интерфейса
• Показывать наведение курсором, который уже уезжает в сторону
• Приблизить так сильно, что зритель теряет пространственные ориентиры
• Считать анимацию очевидной, потому что вы видели её сотню раз

Быстрый чек-лист перед записью

Прежде чем снимать демо, построенное на микровзаимодействиях:

1. Установите частоту кадров 60 к/с
2. Включите сглаживание курсора и подсветку кликов
3. Увеличьте размер курсора, если ролик рассчитан на маленькие экраны
4. Отрепетируйте перетаскивание или наведение один раз — вдвое медленнее привычного
5. Наметьте участки зума и убедитесь, что цель остаётся в кадре
6. Отметьте скрытые действия, которым понадобится озвучка или подпись

Заключение

Микровзаимодействия — это те детали, благодаря которым софт кажется продуманным, и они исчезают из записей, если их не беречь намеренно. Замедлите руку, дайте наведению полные две секунды, разложите перетаскивание на захват-перенос-отпускание, а остальное доверьте эффектам курсора и зуму.

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