방향 및 무게Directionality and gravity

방향성 신호를 통해 사용자가 경험을 멘 탈 하는 경험의 모델을 구체화 하는 데 도움이 됩니다.Directional signals help to solidify the mental model of the journey a user takes across experiences. 모든 동작의 방향은 공간의 연속성 뿐만 아니라 공간에 있는 개체의 무결성을 모두 지원 해야 합니다.It is important that the direction of any motion support both the continuity of the space as well as the integrity of the objects in the space.

방향성 이동은 중력 처럼 강제로 적용 됩니다.Directional movement is subject to forces like gravity. 움직임에 강화를 적용 하면 동작의 자연 스러운 느낌을 받을 수 있습니다.Applying forces to movement reinforces the natural feel of the motion.

Examples

XAML controls gallery

XAML Controls Gallery 앱이 설치된 경우 여기를 클릭하여 앱을 열고 작동 중인 모션을 확인합니다.If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

이동 방향Direction of movement

이동 방향은 실제 동작에 해당 합니다.Direction of movement corresponds to physical motion. 본질적으로와 마찬가지로 개체는 모든 세계 축 (X, Y, Z)에서 이동할 수 있습니다.Just like in nature, objects can move in any world axis - X,Y,Z. 이는 화면에서 개체의 움직임을 생각 하는 방법입니다.This is how we think of the movement of objects on the screen. 개체를 이동 하는 경우에는 자연스럽 게 충돌이 발생 하지 않습니다.When you move objects, avoid unnatural collisions. 개체가 들어오고 이동 하는 위치를 염두에 두고, 스크롤 방향 또는 레이아웃 계층 구조와 같이 장면에서 사용할 수 있는 더 높은 수준의 구문을 항상 지원 합니다.Keep in mind where objects come from and go to, and alway support higher level constructs that may be used in the scene, such as scroll direction or layout hierarchy.

원을 보여 주는 짧은 비디오와 X 축, Y 축 및 Z 축이 추가 됩니다.

탐색 방향Direction of navigation

앱에서 장면 간의 탐색 방향은 개념적입니다.The direction of navigation between scenes in your app is conceptual. 사용자가 앞으로 및 뒤로 탐색 합니다.Users navigate forward and back. 장면을 뷰에서 이동 합니다.Scenes move in and out of view. 이러한 개념은 실제 이동과 결합 되어 사용자를 안내 합니다.These concepts combine with physical movement to guide the user.

탐색을 통해 개체가 이전 장면에서 새 장면으로 이동 하면 개체가 화면에서 간단한 A-B 이동을 수행 합니다.When navigation causes an object to travel from the previous scene to the new scene, the object makes a simple A-to-B move on the screen. 이동이 더 물리적인 지 확인 하기 위해 표준 감속 및 무게의 느낌이 추가 됩니다.To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

후방 탐색의 경우 이동이 반전 됩니다 (B-A).For back navigation, the move is reversed (B-to-A). 사용자가 다시 탐색할 때 가능한 한 빨리 이전 상태로 돌아갈 것으로 예상 됩니다.When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. 타이밍은 더 빠르고 직접적 이며 감속 감속/가속을 사용 합니다.The timing is quicker, more direct, and uses the decelerate easing.

여기서 이러한 원칙은 앞으로 및 뒤로 탐색 하는 동안 선택한 항목이 화면에 유지 되는 경우 적용 됩니다.Here, these principles are applied as the selected item stays on screen during forward and back navigation.

지속적인 움직임의 UI 예

탐색이 화면에 있는 항목을 대체 하는 경우 해당 항목은 종료 장면이 전환 된 위치와 새 장면이 들어오는 위치를 표시 하는 데 중요 합니다.When navigation causes items on the screen to be replaced, its important to show where the exiting scene went to, and where the new scene is coming from.

여기에는 여러 가지 이점이 있습니다.This has several benefits:

  • 사용자의 공간에 대 한 사용자의 멘 탈 모델을 solidifies 합니다.It solidifies the user's mental model of the space.
  • 종료 되는 장면의 기간은 들어오는 장면에 대해 애니메이션을 적용할 수 있도록 준비 하는 데 더 많은 시간을 제공 합니다.The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • 응용 프로그램의 인식 된 성능을 향상 시킵니다.It improves the perceived performance of the app.

고려해 야 할 탐색의 네 가지 지침이 있습니다.There are 4 discreet directions of navigation to consider.

전달 콘텐츠를 축 하 여 나가는 콘텐츠와 충돌 하지 않는 방식으로 장면을 입력 합니다.Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. 콘텐츠를 장면으로 감속 합니다.Content decelerates into the scene.

방향 앞으로

전달 콘텐츠가 신속 하 게 종료 됩니다.Forward-Out Content exits quickly. 개체가 화면에서 가속 됩니다.Objects accelerate off screen.

방향 전달

이전 버전 이후 버전과 동일 하지만 역방향입니다.Backward-In Same as Forward-In, but reversed.

프레임의 오른쪽에서 시작 하 여 프레임 중간에서 중지 하는 원을 보여 주는 짧은 비디오입니다.

뒤로 이동 정방향으로 진행 되는 것과 동일 합니다.Backward-Out Same as Forward-Out, but reversed.

방향 뒤로

중력Gravity

무게를 통해 환경을 보다 자연스럽 게 만들 수 있습니다.Gravity makes your experiences feel more natural. Z 축에서 이동 하 고 화면 affordance 장면에 고정 되지 않은 개체는 중력의 영향을 받을 가능성이 있습니다.Objects that move on the Z-axis and are not anchored to the scene by an onscreen affordance have the potential to be affected by gravity. 개체가 장면을 사용 하지 않으며 이스케이프 속도에 도달 하기 전에는 개체에서 구부리기를 설정 하 여 이동 하는 개체 궤적의 보다 자연 스러운 곡선을 만듭니다.As an object breaks free of the scene and before it reaches escape velocity, gravity pulls down on the object, creating a more natural curve of the object trajectory as it moves.

중력은 일반적으로 개체가 한 장면에서 다른 장면으로 이동 해야 하는 경우에 매니페스트 합니다.Gravity typically manifests when an object must jump from one scene to another. 따라서 연결 된 애니메이션은 중력 개념을 사용 합니다.Because of this, connected animation uses the concept of gravity.

여기에서 표의 맨 위 행에 있는 요소는 중력의 영향을 받으며, 위치를 떠나 앞으로 이동할 때 약간 삭제 됩니다.Here, an element in the top row of the grid is affected by gravity, causing it to drop slightly as it leaves its place and moves to the front.

모눈의 맨 위 행에 있는 사각형 요소를 보여 주는 짧은 비디오입니다.