Нарушение симметрии обеспечивает контраст и привлекательность ваших проектов. Узнайте, когда и как применять это в своих проектах.
Асимметричная синхронизация анимации улучшает взаимодействие с пользователем, позволяя вам выразить индивидуальность и в то же время быстро реагировать на взаимодействия с пользователем. Это также создает контраст с ощущением, что делает интерфейс более привлекательным.
- Используйте асимметричную синхронизацию анимации, чтобы добавить индивидуальности и контраста в свою работу.
- Всегда отдавайте предпочтение взаимодействию пользователя; используйте более короткую продолжительность при ответе на нажатия или щелчки и резервируйте более длительную длительность для тех случаев, когда вы этого не делаете.
Как и большинство «правил» анимации, вам следует экспериментировать, чтобы выяснить, какие из них работают для вашего приложения, но когда дело доходит до пользовательского опыта, пользователи, как известно, нетерпеливы. Эмпирическое правило — всегда быстро реагировать на взаимодействие с пользователем . Тем не менее, большую часть времени действия пользователя асимметричны, поэтому и анимация тоже может быть асимметричной.
Например, когда пользователь нажимает, чтобы отобразить навигацию на боковой панели, вы должны отображать ее как можно быстрее, с продолжительностью около 100 мс. Однако когда пользователь закрывает меню, вы можете позволить себе анимацию просмотра немного медленнее, скажем, около отметки 300 мс.
Напротив, когда вы открываете модальное представление, это обычно означает отображение ошибки или другого критического сообщения. В таких случаях вам нужно будет включать представление немного медленнее, опять же около отметки 300 мс, но закрытие, которое инициирует пользователь, должно происходить очень быстро.
Общее практическое правило заключается в следующем:
- Для анимаций пользовательского интерфейса, запускаемых взаимодействием пользователя, например, при переходе между видами или показе элемента, необходимо иметь быстрое вступление (короткую продолжительность), но медленное завершение (более продолжительное).
- Для анимаций пользовательского интерфейса, запускаемых вашим кодом, таких как ошибки или модальные представления, используйте более медленное вступление (более продолжительное), но быстрое завершение (короткое).