대칭을 파괴하면 프로젝트의 대비가 뚜렷하고 매력적입니다. 이를 프로젝트에 언제 어떻게 적용해야 하는지 알아봅니다.
비대칭 애니메이션 타이밍은 개성을 표현하면서 동시에 사용자 상호작용에 빠르게 응답할 수 있도록 하여 사용자 환경을 개선합니다. 또한 대비감을 제공하여 인터페이스를 시각적으로 더 매력적으로 만듭니다.
- 비대칭 애니메이션 타이밍을 사용하여 작업에 개성과 대비를 추가합니다.
- 항상 사용자의 상호작용을 선호합니다. 탭이나 클릭에 응답할 때는 더 짧은 시간을 사용하고, 그렇지 않은 경우에는 더 긴 시간을 예약합니다.
대부분의 애니메이션 '규칙'과 마찬가지로 애플리케이션에 적합한 방법을 찾기 위해 실험해야 하지만, 사용자 경험의 경우 사용자는 참을성이 없습니다. 일반적으로 사용자 상호작용에 항상 빠르게 응답하는 것이 좋습니다. 하지만 대부분의 경우 사용자 동작은 비대칭이므로 애니메이션도 비대칭이 될 수 있습니다.
예를 들어, 사용자가 사이드바 탐색을 표시하기 위해 탭하는 경우 약 100ms의 시간 동안 가능한 한 빨리 사이드바 탐색을 표시해야 합니다. 그러나 사용자가 메뉴를 닫는 경우 좀 더 느리게(예: 약 300ms 표시) 뷰에 애니메이션을 적용할 수 있습니다.
반대로 모달 뷰를 가져올 때는 일반적으로 오류 또는 다른 중요한 메시지를 표시합니다. 이 경우 뷰를 조금 더 느리게(다시 약 300ms) 가져오는 것이 좋지만 사용자가 트리거하는 해제는 매우 빠르게 발생해야 합니다.
이 경우 일반적인 규칙은 다음과 같습니다.
- 뷰 전환 또는 요소 표시와 같은 사용자 상호작용으로 트리거되는 UI 애니메이션의 경우 빠른 인트로 (짧은 지속 시간)와 느린 아우트로 (긴 기간)를 사용합니다.
- 오류 또는 모달 뷰와 같이 코드로 트리거되는 UI 애니메이션의 경우 느린 인트로 (긴 기간)와 빠른 아우트로 (짧은 지속 시간)를 설정합니다.