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