Как спланировать анимацию взаимодействия с питомцем, реагирующую на касание
Спланируйте анимацию как короткую причинно-следственную цепочку: мгновенно подтвердите нажатие пальцем, покажите реакцию питомца, а затем вернитесь в состояние готовности. Решите, что означает касание, выберите одно понятное действие, соответствующее этому смыслу, и протестируйте тайминги на реальном устройстве. Отзывчивая анимация заключается не столько в добавлении лишних движений, сколько в том, чтобы первое визуальное изменение происходило незамедлительно, а вся последовательность ощущалась связанной с касанием.
1. Определите, что именно должно передавать касание
Прежде чем делать наброски поз, сформулируйте правило взаимодействия одним предложением: «При касании питомец замечает человека и реагирует коротким приветствием». Результат касания должен быть постоянным. Если одно и то же касание то кормит персонажа, то играет с ним, то приветствует его, анимация не сможет четко дать понять, что произошло.
Разделите ввод на два момента: опускание пальца и его подъем. Небольшое изменение состояния нажатия при опускании пальца подтверждает, что цель зафиксировала ввод; основная реакция питомца может последовать, когда касание подтвердится при отпускании. В руководстве Apple по отзывчивости нажатия и отпускания на сенсорном экране описываются как дискретные взаимодействия с отдельными визуальными откликами. Такое разделение помогает пользователю почувствовать отклик на касание, даже если более масштабная анимация персонажа занимает больше времени. Понимание отзывчивости пользовательского интерфейса (Understanding user interface responsiveness)
2. Выберите реакцию с понятным визуальным считыванием
Выберите одно основное движение, передающее замысел при текущем размере отображения персонажа. Приветствием может быть движение глаз с последующим небольшим наклоном головы; игривым откликом — быстрый отскок тела. Это примеры дизайна, а не строгие правила. Отдавайте предпочтение изменениям силуэта или мимики, которые остаются узнаваемыми даже при малом размере персонажа, и избегайте нагромождения нескольких жестов до того, как пользователь успеет понять первый.
Стройте реакцию на основе предвосхищения (anticipation), действия (action) и возврата в исходное положение (settle). Предвосхищением может быть быстрый взгляд в сторону места касания. Действие — это определяющий жест. Возврат восстанавливает комфортную позу ожидания без резких рывков. Такая последовательность — практический дизайнерский вывод из рекомендаций платформы, призванный сделать обратную связь реалистичной, краткой и точной: движение должно усиливать действие, а не конкурировать с ним. Руководство Apple по созданию пользовательских интерфейсов: Движение (Apple Human Interface Guidelines: Motion)
3. Сделайте так, чтобы первый кадр подтверждал касание
Первое визуальное изменение важнее, чем общая продолжительность всей реакции. В качестве базового дизайн-решения сделайте так, чтобы персонаж или область касания менялись сразу же при нажатии — за счет едва заметного сжатия, подсветки или движения глаз — а затем переходили в выразительный ответ после отпускания. Точный тайминг следует настраивать в контексте интерфейса, а не опираться на некое универсальное число.
Если анимация запускается только после загрузки ресурсов, проверки удаленных данных или выполнения других не связанных задач, может показаться, что взаимодействие не сработало. По возможности не связывайте подтверждение нажатия с ресурсоемкими операциями. В документации Apple заметная задержка в дискретных взаимодействиях называется зависанием (hang) и отличается от микрозадержек (hitches), представляющих собой прерывания плавного движения. На практике проверяйте как то, начинает ли персонаж реагировать без задержек, так и то, двигается ли он плавно после начала реакции. Понимание отзывчивости пользовательского интерфейса (Understanding user interface responsiveness)
4. Выбирайте длительность и функции сглаживания под конкретную задачу
Используйте минимальную продолжительность, которая позволяет зрителю распознать реакцию и увидеть ее завершение. Быстрое подергивание ухом может закончиться мгновенно; для считывания поворота головы требуется время. Если анимация кажется вялой, сократите задержку перед ее ключевым движением, прежде чем сжимать по времени каждую позу. Если она кажется слишком резкой, скорректируйте переход в действие или выход из него, а не добавляйте длинную паузу.
Задайте движению осмысленный профиль скорости. Реакция может начинаться быстро и плавно замедляться к финальной позе, в то время как небольшой отскок может слегка выходить за пределы конечной точки перед возвратом. Это иллюстративные примеры: подходящая кривая зависит от стиля персонажа и амплитуды движения. Apple рекомендует использовать краткую, точную обратную связь и предостерегает от ситуаций, когда людям приходится ждать окончания анимации, чтобы продолжить взаимодействие. Руководство Apple по созданию пользовательских интерфейсов: Движение (Apple Human Interface Guidelines: Motion)
5. Решите, что происходит при повторных касаниях
Протестируйте второе касание во время воспроизведения первой реакции. Выберите четкое правило: перезапускать реакцию, ставить следующий ответ в очередь, плавно переходить (blend) в новую позу или игнорировать дальнейшие касания до определенного момента. Для простого взаимодействия с питомцем перезапуск короткой реакции или плавный переход к новой позе помогает сохранить ощущение отзывчивости персонажа; выстраивание нескольких полных реакций в очередь может создать впечатление, что питомец запаздывает за действиями человека.
Какое бы правило вы ни выбрали, не оставляйте анимацию в незавершенном состоянии. Проверяйте касания во время предвосхищения, основного жеста и возврата в исходное положение. Также протестируйте касание, которое начинается как нажатие, но заканчивается за пределами целевой области, если ваша платформа отличает такое поведение от полноценного касания. В рекомендациях Apple по кнопкам отмечается, что отпускание касания внутри границ элемента управления запускает его действие; пользовательская обработка касаний должна четко определять аналогичное поведение. Понимание зависаний в приложении (Understanding hangs in your app)
6. Сохраняйте доступность взаимодействия без полноценного движения
Сделайте реакцию опциональной там, где платформа предлагает настройки движения, и при необходимости сохраняйте передаваемую касанием информацию с помощью статичного изменения состояния. Для веб-интерфейсов в документации W3C описан метод, использующий медиа-запрос prefers-reduced-motion для отключения или замены запускаемого взаимодействием движения, когда пользователь запрашивает уменьшение движения. На странице W3C описывается сам метод, а не строгое требование использовать исключительно эту реализацию. Метод W3C C39: Использование CSS-запроса prefers-reduced-motion для предотвращения движения (W3C Technique C39: Using the CSS prefers-reduced-motion query to prevent motion)
Если вы добавляете звук или тактильный отклик, сделайте так, чтобы они напрямую соответствовали визуальной реакции, и используйте их осознанно. В руководстве Apple по тактильному отклику говорится, что обратная связь должна совпадать с визуальным изменением или реагировать на действие пользователя, и содержится предупреждение, что чрезмерное использование снижает ее значимость. Анимации питомца не нужны дополнительные каналы обратной связи, если само движение уже делает результат понятным. Руководство Apple по созданию пользовательских интерфейсов: Воспроизведение тактильного отклика (Apple Human Interface Guidelines: Playing haptics)
7. Проведите целенаправленное тестирование касаний
Тестируйте на целевом устройстве при реальном размере отображения, а не оценивайте результат только по шкале времени в редакторе. Задайте себе несколько практических вопросов: фиксируется ли нажатие визуально, понятно ли, что сделал питомец, возвращается ли поза в интерактивное состояние и ведет ли себя повторное касание предсказуемо? Сначала оцените анимацию на нормальной скорости; замедленное воспроизведение помогает рассмотреть переходы между позами, но не позволяет понять, ощущается ли тайминг отзывчивым при реальном использовании.
Затем протестируйте пограничные случаи: коснитесь экрана несколько раз подряд быстро, коснитесь рядом с границей цели и включите в настройках устройства режим уменьшения движения. Обращайте внимание на задержки перед стартом, замершие кадры, резкие сбросы и накладывающиеся друг на друга реакции, из-за которых теряется смысл происходящего. Apple отмечает, что даже задержка в один интервал обновления экрана может вызвать рывок в движении, поэтому проверяйте как плавность, так и воспринимаемое время начала реакции. Повышение отзывчивости приложения (Improving app responsiveness)
Надежный план прост: определите смысл касания, подтвердите его мгновенно, поставьте одну понятную реакцию, верните персонажа в позу готовности и решите, как обрабатывать прерывания. Настройте последовательность на устройстве, а затем повторите те же проверки с включенным режимом уменьшения движения. Итоговое поведение должно делать связь между касанием и ответом питомца простой и естественной для восприятия.