움직임

운전 맥락에서 모션은 드물게 나타나 요소 간의 개념, 브랜딩, 관계를 표현해야 합니다. 운전자의 주의가 분산되지 않고 운전자에게 정보를 제공하는 데만 사용해야 합니다.

한눈에 보기:

  • 불필요한 움직임으로 사용자의 주의를 분산시키지 않기
  • 모션을 사용하여 사용자의 이해를 높이고 숙련도를 높입니다.
  • 관련된 모든 하드웨어에 맞게 모션 언어를 유연하게 만듭니다.
  • 상황에 권장되는 모션 패턴을 사용하세요.

모션 패턴

모든 앱에서 일관된 사용자 환경을 지원하기 위해 특정 상호작용 패턴이 다음 상호작용에 적용됩니다.

  • 앱 간 전환하기
  • 동종 앱 보기 간 전환
  • 기존 작업 확장
  • 작업 최소화 및 확장
  • 작업 중단

이러한 모션 패턴은 머티리얼 디자인에 설명된 표준 이징을 기반으로 합니다. 여기서는 전환을 빠르게 완료하고 점진적으로 속도를 늦춰 전환을 마무리하는 데 중점을 둡니다.


앱 간 전환하기

앱 간에 전환할 때 크로스페이드 전환을 사용하면 한 요소가 시야에 페이드 인되고 다른 요소는 페이드 아웃됩니다. 이 전환은 현재 앱에서 나가면서 다른 앱으로 빠르게 이동하는 것을 보여줍니다.

앱 간에 빠르게 전환
크로스페이드 모션은 앱 간에 사용자를 빠르게 전환합니다.

앱 전환 예시
가벼운 크로스페이드로 사용자가 탐색 앱에서 미디어 앱으로 돌아온 후 다시 돌아오기

동종 앱 보기 간 전환

앱 바의 탭 또는 재생목록의 노래 등 앱에서 동일한 수준의 계층 구조로 뷰를 전환할 때는 (공유 동종 앱이라고도 함) 공유 축 전환을 사용하세요. 이러한 가로 방향의 좌우 전환은 앱 내에서 동일한 레벨에 머무르는 상태를 반영합니다.

동종 앱 전환 예
가벼운 크로스페이드를 통해 사용자가 탐색 앱에서 미디어 앱으로 다시 이동

미디어 앱에서 노래로 전환할 때 공유되는 축 모션 패턴은 두 노래가 동일한 재생목록에 있음을 강조합니다.

기존 작업 확장

사용자가 작업을 수행하거나 작업을 수행하다가 보조 액션과 관련된 보조 작업을 실행할 때 이 보조 작업은 수직 (위 또는 아래) 모션으로 도입되어야 합니다. 이 보조 작업은 전체 화면 오버레이에 스크림 배경과 함께 기본 작업 앞에 표시됩니다. 스크림을 통해 기본 작업이 수행되므로 사용자가 여전히 작업을 진행하는 중임을 나타냅니다.

그러면 보조 액션은 시작 모션의 반대 방향으로 닫힙니다. 이와 같은 역방향 모션은 동작이 완료되었기 때문에 원래 모션보다 시간이 적게 걸립니다.

보조 액션 오버레이
여기서 보조 액션은 오버레이의 기본 액션에서 발생하는 반면 기본 액션은 스크림 뒤에 부분적으로 표시됩니다.

Android Auto 작업 오버레이 예
미디어 컨트롤 바에서 더보기 버튼을 선택하면 스크림 배경의 오버레이에서 버튼이 세로로 펼쳐집니다.

작업 최소화 및 확장

진행 중인 작업은 더 작은 형식으로 최소화할 수 있습니다. 이 작은 형식을 통해 사용자는 진행 중인 작업이 백그라운드에서 실행되는 동안 멀티태스킹을 할 수 있습니다.

  • 확장: 사용자가 최소화된 작업을 탭하면 페이드 인 전환을 사용하여 크기가 확장되고 전체 화면을 채웁니다.

  • 최소화: 진행 중인 작업을 최소화할 때 모션의 역을 사용합니다. 사용자가 이 동작을 종료하므로 모션 최소화 최소화는 확장 모션보다 시간이 덜 걸립니다.

최소화된 화면 확장
현재 작업 위에 페이드 인하면서 최소화된 작업이 전체 화면으로 확장됩니다.

Android Auto 플로팅 작업 버튼 예
재생 FAB (플로팅 작업 버튼)가 전체 재생 뷰로 확장되면 아래쪽 화살표를 통해 축소됩니다.

작업 중단

진행 중인 작업 앞에 짧은 옵션 작업이 갑자기 나타나야 하는 경우 화면 가장자리에서 부분 스크림과 함께 (위 또는 아래로) 슬라이드해야 합니다. 아니면 화면 한가운데에서 화면 한가운데로 페이드 아웃되어야 합니다. 새 작업을 표시할 가장 가까운 위치에서 모션을 시작합니다.

짧은 작업 예시
방해가 되는 작업이 화면 상단에 나타나야 하는 경우 부분적인 스크림을 사용하여 화면 상단에서 슬라이딩합니다.

알림 예시
이 Android Auto 예에서는 예정된 회전에 관한 알림이 부분 스크림과 함께 화면 상단에서 아래로 슬라이드됩니다. 따라서 진행 중인 미디어 콘텐츠가 계속 표시됩니다.