예측 뒤로는 사용자가 완전히 완료하기 전에 뒤로 스와이프하여 뒤로 동작의 대상을 미리 보는 동작 탐색 작업의 결과입니다. 이를 통해 사용자는 계속(즉, 뒤로 동작을 '커밋'할지 아니면 현재 뷰에 머무를지) 결정할 수 있습니다.
뒤로 탐색 예측은 동작 탐색을 사용하는 동안 더 부드럽고 직관적인 탐색 환경을 제공합니다. 기본 제공 애니메이션을 활용하여 사용자에게 작업으로 이어지는 위치를 알려 예기치 않은 결과를 줄입니다.
앱 디자인에서 중요한 순간에 맞춤 전환 및 애니메이션을 위해 뒤로 탐색을 제공해야 하는 경우 이 페이지의 디자인 안내를 사용하세요. 내장된 뒤로 탐색 예측 애니메이션이 사용자가 이동할 위치를 보여주므로 대부분의 앱에서 맞춤 뒤로 탐색을 구현할 필요가 없습니다.
뒤로 탐색 예측 지원
기본 또는 맞춤 뒤로 탐색을 사용하든 뒤로 탐색 예측을 지원할 수 있습니다. 기본 뒤로 탐색을 사용하는 경우 이 기능을 쉽게 사용 설정할 수 있습니다. 뒤로 탐색 예측 지원 자세히 알아보기
이 옵션을 선택하면 앱에 홈으로 돌아가기, 교차 활동, 교차 작업과 같은 애니메이션이 내장되어 있습니다.
Material 구성요소 종속 항목을 MDC Android 1.10.0-alpha02 이상으로 업그레이드하여 다음 Material 구성요소 애니메이션을 받을 수도 있습니다.
동작 탐색을 위한 디자인
앱이 더 넓은 화면을 지원하는지 확인
사용자를 지원하기 위해 뒤로 탐색 예측은 더 넓은 화면 기능에 정의된 동작 인셋을 준수합니다. 이러한 동작 영역 아래에 터치 동작이나 드래그 대상을 추가하지 마세요.
전체 화면 표시 경로
앱이 전체 화면 노출 영역의 맞춤 인앱 전환을 만드는 경우 이 디자인 안내를 사용하세요.
사용자가 전체 화면 노출 영역에서 뒤로 동작을 하면 뒤로 미리보기 중에 노출 영역이 화면 가장자리에서 완전히 분리되며 사용자는 노출 영역을 직접 조작할 수 있습니다. 그러나 디자인에서는 뒤로 동작을 완료하면 뒤로 동작 방향으로 항목을 닫는다고 사용자에게 시각적으로 암시해서는 안 됩니다.
예를 들어 세부정보 화면을 다시 세로 목록으로 닫을 때 전체 화면 노출 영역 전환을 사용하여 이전 작업을 실행취소하고 있음을 사용자에게 시각적으로 나타낼 수 있습니다. 동영상 1에서 캘린더 이벤트를 일별 뷰로 다시 닫습니다. 촉각을 개선하기 위해 이 디자인은 동작 중에 쌓이는 스프링 장력을 일부 흡수하기 위해 미묘한 오버슈트를 추가합니다.
뒤로 미리보기
사용자에게 예측 애니메이션을 제공할 때 앱이 유지하는 커밋 전 상태는 사용자가 더 넓은 화면 뒤로 동작을 실행했지만 손을 떼는 방식으로 커밋하지 않은 경우를 측정합니다. 이 커밋 전 상태에 적용되는 매개변수를 제공해야 합니다.
움직임이 표시되는 정도는 사용자가 동작이 시작된 위치에서부터 사용자가 이동할 수 있는 최대 거리를 기준으로 합니다.
모션 사양
전체 화면 노출 영역은 동작 시작 부분의 x 및 y 이동에 직접적인 영향을 받습니다. 이 섹션에서는 화면 피드백에 사용되는 메커니즘을 지배하는 사양과 값을 설명합니다.
다음 그림은 표면 애니메이션의 권장 모션 사양을 보여줍니다.
1 여백: 양쪽 너비의 5%(3에 설명된 표면적 관련)
2 기간을 중앙으로 조정하는 경우 이동을 계산합니다. 필요한 8dp 여백 계산: ((화면 너비 / 20) - 8)dp
3 표면이 90% 크기로 조정되고 10% 에 여백이 사용됩니다 (1 참고).
4 화면 가장자리에서 8dp 간격을 남겨 둡니다.
일관된 환경을 위해 나열된 매개변수를 유지하는 것이 좋지만 사양을 변경하여 맞춤 애니메이션을 만들 수도 있습니다.
위 그림에서 화면 너비는 1280이며 x 시프트는 56dp입니다. 이를 위한 공식은 다음과 같습니다.
((1280/20)-8)= 56dp x-시프트
1 y 시프트에 사용할 수 있는 가장자리와 기기 여백 사이의 간격
2 표면이 화면에서 벗어나면 표면을 50% 이하로 조정합니다.
2 표면이 세로 방향으로 가운데에 놓이고 시작하며 y 시프트는 다음과 같이 정의됩니다.
- 표면이 8dp 화면 여백을 넘지 않도록 y시프트 제한
- 표면이 갑자기 멈추지 않도록 하려면 감속 보간기를 사용하고 y-변속 한계에 매핑합니다.
3 표면이 충분히 짧으면 8dp 여백을 유지합니다.
맞춤 애니메이션의 경우 다음 매개변수를 모두 정의해야 합니다.
매개변수 |
값 |
관련 정보 |
|---|---|---|
X Shift |
((화면 너비 / 20) - 8) dp |
최대 이동, 여백 8dp 남음 |
Y 시프트 |
((사용 가능한 화면 높이 / 20) -8) dp |
최대 이동, 여백 8dp 남음 |
배율 |
90% |
창 크기의 최소 배율 |
예측 뒤로 진행률 API를 사용하여 맞춤 애니메이션을 구현하는 개발자는 이러한 매개변수를 사용합니다.
행동 취하기
사용자가 동작이 커밋 지점을 지나 해제되면 작업 완료를 확인하는 애니메이션이 표시됩니다.
사용자가 동작을 빠르게 실행하면 일반적으로 플링으로 해석됩니다. 이러한 종류의 상호작용은 화면 내 요소에 고속으로 적용될 수 있으므로, 뒤로 미리보기의 컨텍스트에서 시스템은 커밋 애니메이션을 실행하기 전에 노출 영역을 최대 미리보기 상태로 잠시 애니메이션하여 이러한 속도를 흡수합니다.
플링의 강도는 커밋 애니메이션을 실행하기 전에 표시되는 미리보기 애니메이션의 양을 결정합니다. 표시되는 애니메이션의 종류는 동영상 2와 같이 닫는 콘텐츠에 따라 다릅니다.
작업 취소
동영상 4에서는 사용자가 기준점 전에 해제했을 때 작업이 취소되었음을 확인하는 애니메이션을 표시하는 예를 보여줍니다. 전체 화면 노출 영역의 경우 동작이 시작되기 전에 창이 빠르게 이동하여 원래 더 넓은 화면으로 축소됩니다.