좋은 UI 애니메이션에서 더 좋은 UI 애니메이션으로 만드는 팁 (Good to great UI animation tips)

UI micro-interactions을 향상시키는 실용적인 제안.

UI 애니메이션의 좋은(Good) 예부터 더 좋은(Great) 것까지 몇 가지 예를 살펴보겠습니다. 여기저기서 조금만 조정하면 애니메이션으로 UI 패턴을 더 좋게 만들 수 있습니다.
나열된 상호 작용(Interactions)들은 상태 사이의 연속성을 보여 주고, 공유 요소 사이의 관계를 나타내며, 사용자의 주의를 그들이 주목하고 조치를 취해야 하는 어떤 것으로 환기시킵니다.
이런 애니메이션을 만들기 위해, 저는 Material Motion, IBM의 Animation Principles, 그리고 The UX in Motion Manifesto의 지침을 따랐습니다.
모든 상호 작용은 InVision Studio의 초기 액세스 버전을 사용하여 이루어졌습니다. 여기에서 원본 파일을 다운로드할 수 있습니다.

탭의 콘텐츠를 슬라이드로 만듭니다.

presentation
[왼쪽] 콘텐츠가 페이드인 및 페이드아웃합니다. [오른쪽] 탭이 콘텐츠와 함께 움직입니다.
  • 좋은(Good) 애니메이션은 콘텐츠를 한 상태에서 다른 상태로 페이드인 및 페이드아웃합니다.
  • 더 좋은(Great) 애니메이션은 콘텐츠를 상태 간 사이를 이동하게 함으로써 전환의 연속성을 보여줍니다.
탭이나 플라이아웃 메뉴와 같은 상호 작용(Interactions)을 디자인할 때 열리는 액션과 관련하여 콘텐츠의 위치를 지정하십시오. 이 방법을 사용하면 이렇게 하면 콘텐츠의 가시성뿐 아니라 위치도 애니메이션으로 만들 수 있습니다. 그리고 그것을 하는 동안, 한 콘텐츠에서 다른 콘텐츠로 당신을 데려가는 제스처(swipe gesture)를 추가하십시오.

카드의 공유 요소를 연결합니다.

presentation
[왼쪽] 위로 움직이는 새로운 화면을 엽니다. [오른쪽] 카드가 펼쳐져 화면을 가득 채 웁니다.
  • 좋은(Good) 애니메이션은 왼쪽 푸시(push left) 또는 슬라이드 업(slide up)과 같은 전환을 사용하여 세부 정보 화면에 콘텐츠를 표시합니다.
  • 더 좋은(Great) 애니메이션은 공유 된 콘텐츠를 애니메이션화하여 두 상태를 연결합니다.
서로 다른 상태의 사이를 애니메이션으로 만들 때 애니메이션 요소 사이에 공유 요소가 있는지 확인하고 연결합니다. InVision Studio를 사용하면 두 개의 연결된 스크린 사이에서 반복되는 구성 요소가 모션 전환을 만들 때 자동으로 연결됩니다. 이것은 프로토 타이핑 애니메이션을 산들바람처럼 부드럽게 만듭니다.
여러분이 적용할 수 있는 애니메이션의 종류를 보려면 Motion Manifesto를 확인하십시오. 위의 예에서는 Masking, Transformation, ParentingEasing principles의 조합을 사용합니다.

콘텐츠에 떨어지는 효과(cascading effect)를 사용하십시오.

presentation
[왼쪽] 카드는 슬라이딩 및 페이드인(Fading in)하여 나타납니다. [오른쪽] 카드는 동일한 애니메이션을 특징으로 하지만 각 카드는 약간의 지연이 있습니다.
  • 좋은(Good) 애니메이션은 소재가 화면에 들어갈 때 소재의 위치와 불투명도를 변경합니다.
  • 더 좋은(Great) 애니메이션은 각 그룹이나 요소의 모양을 신속하게 비틀어 버립니다.
폭포 효과를 얻으려면 각 조각이나 내용 그룹에 지연(delay)을 적용해보십시오. 동일한 완화 및 지속 시간을 유지하므로 일관성이 있습니다. 각 작은 요소를 계단식(cascade)으로 배열하지 마십시오. 콘텐츠 그룹을 애니메이션으로 만듭니다. 애니메이션을 빠르고 부드럽게 유지하십시오. 20ms 간격으로 각 요소를 시작하는 것이 좋습니다. choreography principle in Material Motion를 확인하면 더 많은 예제를 볼 수 있습니다.

콘텐츠가 다른 요소를 밀어내도록 합니다.

presentation
[왼쪽] 애니메이션은 다른 내용 위에 애니메이션으로 나타납니다. [오른쪽] 애니메이션은 콘텐츠가 커지면서 밀어냅니다.
  • 좋은(Good) 애니메이션은 상황에 따라 요소를 이동하고 표시합니다.
  • 더 좋은(Great) 애니메이션은 변화할 때 주위 환경에 영향을 주는 요소를 보여줍니다.
콘텐츠의 요소가 주변을 인식하도록 합니다. 이것은 콘텐츠를 끌어들이거나 둘러싼 요소를 격퇴하는 것을 의미합니다. 더 많은 예제는 Material Design에서 Aware motion principle를 확인하십시오.

메뉴를 컨텍스트로 나타나게 합니다.

presentation
[왼쪽] 메뉴가 아래에서부터 옵니다. [오른쪽] 메뉴는 메뉴를 만든 동작에서 확장됩니다.
  • 좋은(Good) 애니메이션 메뉴는 버튼을 연 상태에서 표시되는 내용을 보여줍니다.
  • 더 좋은(Great) 애니메이션 메뉴는 터치의 시점에서 나타납니다, 그들이 만든 액션에서 나옵니다.

버튼을 사용하여 다른 상태를 표시하십시오.

presentation
[왼쪽] 버튼은 상태를 나타내는 텍스트를 표시합니다. [오른쪽] 버튼은 컨테이너를 사용하여 다른 이벤트를 표시합니다.
  • 좋은(Good) 상호 작용(Interactions)은 버튼 옆에 이벤트를 표시합니다.
  • 더 좋은(Great) 상호 작용(Interactions)은 버튼 자체를 사용하여 여러 상태를 표시합니다.
상태의 시각적 피드백을 제공하기 위해 버튼 컨테이너를 사용해보십시오. 예를 들어 CTA 외 Spinner 또는 로딩 애니메이션(loading animation)으로 바꿀 수 있습니다. 진행 상황을 보여주는 배경에 애니메이션을 추가할 수 있습니다. 해결책은 당신에게 달려 있습니다. 아이디어는 사용자가 이미 상호 작용(interacting) 하고 있는 공간을 사용하는 것입니다. 보너스 포인트는 버튼 색상과 사본을 사용하여 성공 상태를 확인하는 경우입니다.

중요한 곳에 주의를 기울여 주십시오.

presentation
[왼쪽] 예는 색상과 위치를 사용하여 요소를 돋보이게 만듭니다. [오른쪽] 미묘한 애니메이션을 사용하여 사용자의 주의를 환기시킵니다.
  • 좋은(Good) 디자인은 색상, 크기 및 위치를 사용하여 사용자가 주의하거나 행동해야 하는 중요한 동작을 강조 표시합니다.
  • 더 좋은(Great) 디자인은 애니메이션을 사용하여 중요한 작업을 방해하지 않고 주의를 끌기 위한 것입니다.
사용자가 중요한 행동할 필요가 있을 때 애니메이션으로 만들어 사용자의 관심을 끌도록 하십시오. 미묘한 애니메이션으로 시작하여 액션의 중요성과 관련하여 강도 (크기, 색상 및 속도 변경)를 높입니다. 중요한 액션에만 이 기능을 사용하십시오. 이 효과를 많이 사용할수록 영향력이 적어지고 사용자가 점점 더 짜증을 냅니다.

결론

이 예제들이 상호 작용에 애니메이션을 추가 할 때 더 나은 결정을 내리는 데 도움이되기를 바랍니다. InVision의 Studio와 같은 새로운 애니메이션 및 프로토 타이핑 툴을 통해 우리는 곧 창의적인 상호 작용의 르네상스를 보게 될 것으로 예상합니다. 책임감있게 새로운 슈퍼 파워를 사용하는 것을 잊지 마십시오.
애니메이션을 적용하여 상태의 변화를 설명하고, 필요한 액션에주의를 기울이고, 요소 간의 관계를 결정하고, 재미와 캐릭터를 우리 제품에 추가해 봅시다. 이 원칙을 따르면 우리는 애니메이션을 좋은 것에서 더 좋은 것으로 바꿀 것입니다.
행복한 애니메이션!

presentation
안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.

번역 글 추천(신청) 받습니다.
안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일 정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다. 원본 링크입니다.