[iOS] Human Interface Guidelines - Visual Design - Animation 정리

안녕하세요 Hani입니다.

이번에는 HIG의 Visual Design - Animation에 대하여 다뤄볼 거예용.

 

 

일단 아래 링크에서 애니메이션을 한 번 구경하고 가실게요. 🥰

요기 링크 🦀

 

아주 자연스러운 애니메이션이죠?

그런데 애니메이션 사용할 때는 몇 가지 주의사항들이 있습니다. 🚨

 

Use animation and motion effects judiciously.

애니메이션과 모션 효과는 신중히 사용해야 한다고 하네요. 🥺

게임은 몰입형 경험을 제공할 필요가 있지만

그런 경우가 아닐 때도 과도한 애니메이션을 사용하는 것은 산만함을 느끼게 합니다.

 

또한 iOS는  깊이에 대한 인식을 만들기 위해 시차 효과와 같은 모션 효과를 이용하는데,

이런 모션효과도 과하게 사용하면 인식을 혼란하게 하거나 제어하기 어렵다고 느끼게 합니다.

 

만약 모션효과를 사용할거라면 모션효과가 제대로 작동하는지 항상 테스트를 해야합니다.

 

 

Strive for realism and credibility.

애니메이션의 움직임이 물리법칙에 위배되지 않도록 만들어야 해요.

ex) 위에서 아래로 슬라이드해서 뷰를 열면, 아래서 위로 슬라이드해서 뷰를 닫을 수 있도록 ☺️

 

 

Use consistent animation.

일관된 애니메이션을 사용해야 해요.

몰입형 경험을 줄 필요가 없다면 커스텀 애니메이션은 iOS가 기본적으로 제공하는 애니메이션과 비슷해야 합니다.

 

 

Make animations optional.

애니메이션은 선택할 수 있도록 남겨놔야 해요.

설정 - 손쉬운 사용 - 시각 지원 - 동작  으로 들어가서 동작 줄이기(Reduce Motion)를 활성화하면

애플리케이션은 애니메이션을 최소화하거나 제거할 수 있어야 합니다.

 

좌) 동작 줄이기 활성화 / 우) 동작 줄이기 비활성화

차이가 느껴지시나요? ☺️

 

 

---

References

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/