대칭을 깨면 프로젝트에 대비와 매력을 더할 수 있습니다. 프로젝트에 이를 적용해야 하는 경우와 방법을 알아보세요.
비대칭 애니메이션 타이밍은 개성을 표현하는 동시에 사용자 상호작용에 빠르게 반응하여 사용자 환경을 개선합니다. 또한 느낌에 대비를 제공하여 인터페이스를 시각적으로 더 매력적으로 만듭니다.
- 비대칭 애니메이션 타이밍을 사용하여 작품에 개성과 대비를 더하세요.
- 항상 사용자 상호작용에 우선순위를 둡니다. 탭이나 클릭에 응답할 때는 더 짧은 시간을 사용하고 상호작용이 없는 시간에는 더 긴 시간을 예약합니다.
애니메이션의 대부분의 '규칙'과 마찬가지로 애플리케이션에 적합한 방법을 찾기 위해 실험을 진행해야 하지만 사용자 환경의 경우 사용자는 참을성이 없는 것으로 악명이 높습니다. 일반적으로 항상 사용자 상호작용에 빠르게 응답하는 것이 좋습니다. 하지만 대부분의 경우 사용자의 작업은 비대칭이므로 애니메이션도 비대칭일 수 있습니다.
예를 들어 사용자가 탭하여 사이드바 탐색을 표시하면 최대한 빨리 표시해야 하며 표시 시간은 약 100ms여야 합니다. 하지만 사용자가 메뉴를 닫을 때는 뷰 애니메이션을 조금 더 느리게(예: 300ms 정도) 처리할 수 있습니다.
반면 모달 뷰를 표시하는 것은 일반적으로 오류나 기타 중요한 메시지를 표시하기 위함입니다. 이 경우 뷰를 약간 더 느리게, 다시 300ms 정도에 표시해야 하지만 사용자가 트리거하는 닫기는 매우 빠르게 이루어져야 합니다.
따라서 일반적인 규칙은 다음과 같습니다.
- 뷰 전환이나 요소 표시와 같이 사용자 상호작용에 의해 트리거되는 UI 애니메이션의 경우 인트로 (짧은 시간)는 빠르게, 아우트로 (긴 시간)는 느리게 표시합니다.
- 오류 또는 모달 뷰와 같이 코드에 의해 트리거되는 UI 애니메이션의 경우 인트로 (길이가 더 길음)는 느리게, 아우트로 (길이가 더 짧음)는 빠르게 표시합니다.