Как приближать интерфейс в демонстрации продукта, сохраняя контекст

Обложка в технике масляной живописи с названием статьи и официальным изображением редактора Screen Studio: фиолетовые блоки приближения на отдельной временной шкале

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

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

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

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

Определите, что должно стать читаемым

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

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

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

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

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

Покажите общую картину перед деталями

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

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

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

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

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

Считайте автоматическое приближение отправной точкой

Руководство Screen Studio описывает автоматическое создание приближений по щелчкам и редактируемую временную шкалу приближения. В нем также рассматриваются добавление, настройка, отключение и удаление приближений. Это делает заметным важное различие: щелчок может подсказать полезную точку акцента, но монтажер по-прежнему решает, нужна ли она объяснению. Руководство Screen Studio по приближению показывает реальные элементы управления.

Опубликованный Screen Studio пример редактора с блоками приближения на отдельной временной шкале

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

Рассматривайте автоматические приближения как монтажные предложения. Оставляйте те, что раскрывают значимые детали. Объединяйте соседние действия, если их можно вместить в одно стабильное кадрирование. Убирайте перемещения, которые лишь следуют за обычными движениями курсора. Более спокойная камера часто придает самому поведению продукта больше убедительности.

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

Выбирайте центр приближения по смыслу

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

Руководство Screen Studio по ручному приближению описывает выбор увеличенной области, изменение ее положения и степени увеличения. Это конкретный пример того, как отделить решение о кадрировании от места щелчка. Механизм объяснен в инструкции по ручному приближению.

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

Не заставляйте зрителя одновременно гоняться за указателем и камерой. Курсор может двигаться внутри стабильного кадра. Камера не обязана реагировать на каждое небольшое перемещение. Меняйте кадрирование при значимом изменении местоположения свидетельств.

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

Конкретный план кадров для задачи общего доступа позволяет оценить кадрирование еще до анимации:

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

Если запись не позволяет держать необходимые свидетельства вместе, измените кадрирование или разделите этап до применения эффекта камеры.

Временная шкала приближения также отделяет увеличение от длительности. В опубликованном примере Screen Studio несколько фиолетовых блоков имеют одинаковую подпись «2x Auto», но занимают разные промежутки времени. Одинаковая степень приближения не дает аудитории одинаковых возможностей рассмотреть содержимое.

Два фрагмента временной шкалы приближения Screen Studio: интервалы автоматического двукратного увеличения разной длительности

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

Сохраните время для чтения после движения

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

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

Это важно при тесной синхронизации диктора и камеры. Фраза «Выберите доступ для просмотра» не должна закончиться до того, как меню ролей станет читаемым. Либо покажите нужный кадр раньше, либо задержите инструкцию. Голос должен говорить об информации, которую зритель действительно может увидеть.

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

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

Не путайте проблемы разрешения с проблемами кадрирования

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

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

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

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

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

Разделяйте удаленные друг от друга действия на этапы

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

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

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

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

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

Планируйте под конечный проигрыватель, а не только под исходный холст

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

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

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

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

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

Дайте камере смысловую задачу

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

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

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