안녕하세요 🌱 Lawn입니다 새롭게 바뀐 2022년 NEW HIG를 Study를 통해 공부하며 정리하는 중입니다.
🎈 HIG Study with
🌱 Motion
아름답고 부드러운 모션은 모든 플랫폼에서 인터페이스를 생동감 있게 하며, 상태를 전달하고, 피드백 및 지시를 제공하며, 시각적 경험을 풍부하게 만듭니다.
시스템 컴포넌트들은 자동적으로 모션이 포함되어 앱이나 게임 전반에 걸쳐 친숙하고 일관된 경험을 제공합니다. 커스텀 모션을 디자인할 때는 사람들의 방향성을 유지하는 의도적인 애니메이션에 초점을 맞추고, 유저의 행동에 대한 명확한 피드백을 제공하여 그들이 압도당하지 않고 인터페이스를 학습하도록 도우십시오.
🍀 Best Practices
Use motion to communicate. 커뮤니케이션을 위해 모션을 사용하십시오. 모션은 상황이 어떻게 변화하는지, 사람들이 행동을 할 때 어떤 일이 일어날지, 다음에 어떤 일을 할 수 있는지 보여줌으로써 피드백과 이해를 향상시키는 좋은 방법이 될 수 있습니다. 예를 들어, macOS에서 창을 최소화하면 창이 데스크탑에서 Dock으로 부드럽게 이동하기 때문에 사용자가 정확히 어디로 갔는지 알 수 있습니다. 사람들이 Face ID를 설정할 때 시스템은 어떤 일을 해야 하는지 간략하게 설명하고 얼굴을 둘러싼 눈금 표시들을 시각적으로 변경시켜서 스캔 시 도움을 줍니다.
Add motion purposefully, supporting the experience without overshadowing it. 목적을 가지고 모션을 추가해서 경험을 방해하지 말고 서포트하십시오. 모션을 추가하기 위해 모션을 추가하지 마십시오. 불필요하거나 과도한 애니메이션은 몰입형(immersive) 경험을 제공하지 않는 앱에서 사람들의 주의를 흐리거나 단절감을 줄 수 있습니다.
Make motion optional. 모션을 옵션으로 하십시오. 사람들이 온스크린 애니메이션을 볼 수 없는 데는 여러 가지 이유가 있으므로 중요한 정보를 전달하는 유일한 방법으로 애니메이션을 사용하지 않는 것이 필수입니다. 예를 들어 동작 줄이기 접근성 설정이 켜져 있는 경우 애니메이션을 최소화하거나 제거해야 합니다. 가이드는 Color and effects를 참조하십시오.
Strive for realism and credibility. 현실성과 신뢰성을 위해 노력하십시오. 정확하고 사실적인 모션은 사람들이 어떻게 그것이 동작하는지 이해하는 데 도움이 되지만, 이치에 맞지 않거나 물리 법칙을 무시하는 것처럼 보이는 동작은 사용자를 혼란에 빠질 수 있게 합니다. 예를 들어 화면 상단에서 아래로 슬라이드해 뷰를 표시하는 경우, 해당 뷰를 옆으로 슬라이드하여 닫을 것이라고 생각하지 않습니다.
Prefer quick, precise animations. 빠르고 정확한 애니메이션이 좋습니다. 짧고 정확한 애니메이션은 더 가볍고 덜 신경쓰이는 경향이 있으며, 대부분 정보를 더 효과적으로 전달합니다. 예를 들어 사람들은 iPhone의 날씨 앱에서 목록 버튼을 탭하면 현재 도시의 전체 화면 뷰가 목록 뷰로 빠르게 전환되어서 목록에서 도시의 위치를 정확히 파악합니다.
In general, avoid adding motion to interactions that occur frequently. 일반적으로 자주 발생하는 상호 작용에 모션을 추가하지 마십시오. 시스템은 이미 표준 인터페이스 요소와의 상호 작용을 위한 작은 애니메이션을 제공합니다. 사람들이 무언가와 상호 작용할 때마다 불필요한 모션을 보는 데 시간을 낭비하게 하지 마십시오.
📱 Platform considerations
No additional considerations for iOS, iPadOS, macOS, or tvOS.
watchOS
SwiftUI는 앱에 모션을 추가하는 강력하고 효율적인 방법을 제공합니다. 레이아웃 및 형태 변경에 애니메이션 효과를 주거나 애니메이션 이미지 시퀀스를 생성하기 위해 WatchKit을 사용해야 하는 경우 다음 지침을 따르십시오.
📝 Note : 모든 레이아웃 및 어피어런스 기반 애니메이션들은 애니메이션의 시작과 끝 부분에 재생되는 기본 제공 easing(Easy-in, Easy-out)이 자동으로 포함됩니다. 이를 끄거나 커스텀할 수 없습니다.
WatchKit을 사용하여 앱 UI 요소의 다음 속성에 대한 변화를 애니메이션으로 만들 수 있습니다.
- 정렬 (Alignment)
- 배경 색상 (Background color)
- 그룹 인셋 (Group insets)
- 높이 (Height)
- 투명도 (Opacity)
- 강조 색상 (Accent color)
- 너비 (Width)
또한 WatchKit을 사용하면 애니메이션 이미지 시퀀스(animated image sequence)를 만들 수 있습니다. 애니메이션 이미지 시퀀스는 시간에 따라 순차적으로 표시되는 두 개 이상의 개별 이미지로 구성됩니다. 시퀀스의 각 이미지는 애니메이션의 단일 프레임을 구성하며 실행 시 재생 동작을 변경하지 않는 한 애니메이션 전체가 루프 상태로 실행됩니다.애니메이션 이미지 시퀀스는 주로 인터페이스의 이미지, 그룹 및 버튼 요소에 설치합니다.
영상 및 그룹 요소에 대한 애니메이션 시퀀스의 재생 속도, 방향 및 프레임 속도를 프로그래밍 방식으로 제어할 수 있습니다. 그 외의 인터페이스 요소에서는, 전 체ㅊ니메이션이 무한 루프에 표시됩니다.
Store images in your watchOS app bundle when possible. 가능하면 watchOS 앱 번들에 이미지를 저장하십시오. watchOS 앱 번들에 이미지를 저장하면 해당 이미지를 로드하고 실행 시 애니메이션을 표시하는 데 걸리는 지연을 최소화할 수 있습니다. 앱 디자인의 일부인 애니메이션에 이 기술을 사용하십시오.
Optimize all images in your image sequences. 이미지 시퀀스의 모든 이미지들을 최적화(optimize)합니다. 최적화된 이미지는 저장공간을 덜 차지하며 상황에 따라 더 빠르게 로딩됩니다.
Use the same image sequence for forward and reverse animations. 정방향 및 역방향 애니메이션에 동일한 이미지 시퀀스를 사용합니다. 실행 시 이미지 시퀀스를 반대 방향으로 애니메이션할 수 있으므로 중복 이미지 세트를 역순으로 제공할 필요가 없습니다. 이 기술을 사용하면 앱의 크기가 줄어듭니다.
📚 Resources
Related
Feedback
Accessibility
Developer documentation
Animating views and transitions
📀 Videos
