뒤로 탐색 예측은 사용자가 동작을 완전히 완료하기 전에 뒤로 스와이프하여 뒤로 동작의 대상을 미리 보는 동작 탐색 작업의 결과입니다. 이를 통해 사용자는 계속(즉, 뒤로 동작을 '커밋'할지 아니면 현재 뷰에 머무를지) 결정할 수 있습니다.
뒤로 탐색 예측은 동작 탐색을 사용하는 동안 더 원활하고 직관적인 탐색 환경을 제공합니다. 기본 제공 애니메이션을 활용하여 사용자에게 작업이 실행되는 위치를 알려 예기치 않은 결과를 줄입니다.
앱 디자인에서 맞춤 전환 및 중요한 순간에 대한 애니메이션을 위해 뒤로 탐색을 제공해야 하는 경우 이 페이지의 디자인 안내를 사용하세요. 내장된 뒤로 탐색 예측 애니메이션이 사용자가 이동하는 위치를 보여주므로 대부분의 앱에서는 맞춤 뒤로 탐색을 구현할 필요가 없습니다.
뒤로 탐색 예측 지원
기본 또는 맞춤 뒤로 탐색을 사용하든 뒤로 탐색 예측을 지원할 수 있습니다. 기본 뒤로 탐색을 사용하는 경우 이 기능을 쉽게 사용 설정할 수 있습니다. 뒤로 탐색 예측 지원 자세히 알아보기
선택하면 앱에 홈으로 돌아가기, 교차 활동, 교차 작업과 같은 애니메이션이 내장되어 있습니다.
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-Shift에 사용할 수 있습니다.
2 표면이 화면에서 벗어나면 표면을 50% 이하로 축소합니다.
2 표면이 세로 방향으로 중앙에 위치하며 y 시프트는 다음과 같이 정의됩니다.
- 표면이 8dp 화면 여백을 통과하지 않도록 y 시프트 제한
- 표면이 갑자기 멈추지 않도록 하려면 감속 보간기를 사용하고 y 시프트 제한에 매핑합니다.
3 표면이 충분히 짧으면 8dp 여백을 유지합니다.
맞춤 애니메이션의 경우 다음 매개변수를 모두 정의해야 합니다.
매개변수 |
값 |
맥락 |
|---|---|---|
X 시프트 |
((화면 너비 / 20) - 8)dp |
최대 이동, 8dp 여백 남음 |
Y 시프트 |
((사용 가능한 화면 높이 / 20) -8) dp |
최대 이동, 8dp 여백 남음 |
배율 |
90% |
창 크기의 최소 배율 |
뒤로 탐색 예측 진행률 API를 사용하여 맞춤 애니메이션을 구현하는 개발자는 이러한 매개변수를 사용합니다.
동작 진행 상황 보간
선형 진행률 값은 사용자의 동작에서 파생될 수 있지만 미리보기 애니메이션에 직접 사용하면 안 됩니다. 대신 뒤로 작업 중에 사용자에게 도움이 되는 사항에 맞게 피드백이 제공되어야 합니다. STANDARD_DECELERATE 토큰 또는 PathInterpolator(0f, 0f, 0f, 1f)를 진행률 값에 제공하여 처음에 동작이 더 명확하게 표시됩니다. 이 피드백은 동작 시작 시 움직임 감지를 향상시키며 감속을 통해 시각적으로 보기 좋고 명확하게 피드백을 제어합니다.
행동하기
사용자가 동작으로 커밋 지점을 지나 해제되면 작업 완료를 확인하는 애니메이션이 표시됩니다.
사용자가 동작을 빠르게 실행하면 일반적으로 플링으로 해석됩니다. 이러한 종류의 상호작용은 화면상의 요소에 빠른 속도를 적용할 수 있으므로 뒤로 미리보기의 컨텍스트에서 시스템은 커밋 애니메이션을 실행하기 전에 최대 미리보기 상태에 맞춰 표면을 일시적으로 애니메이션 처리하여 이 속도를 흡수합니다.
플링의 강도는 커밋 애니메이션을 실행하기 전에 표시되는 미리보기 애니메이션의 양을 결정합니다. 표시되는 애니메이션의 종류는 동영상 2와 같이 닫을 콘텐츠에 따라 다릅니다.
작업 취소
동영상 4는 사용자가 기준점 전에 손을 떼면 어떤 일이 발생하는지 보여주는 예로 작업이 취소되었음을 확인하는 애니메이션을 표시합니다. 전체 화면 노출 영역의 경우 동작이 시작되기 전에 창이 빠르게 이동하여 원래 더 넓은 화면으로 다시 축소됩니다.