Windows 앱의 동작

Fluent 움직임은 앱에서 목적에 맞게 작동합니다. 사용자의 동작을 기반으로 인텔리전트 피드백을 제공하고, UI를 살아있는 느낌이 들도록 유지하고, 사용자의 앱 탐색을 안내합니다. Fluent 움직임은 사용자와 디지털 환경 간의 정신적 연결을 끌어냅니다. 사용자가 실제 세계에서 이미 이해하고 있는 자연의 움직임을 기반으로 빌드하고, 거기에서 시스템을 확장합니다.

예

WinUI 2 갤러리 앱이 설치된 경우 여기를 클릭하여 앱을 열고 작동 중인 모션을 확인합니다. WinUI 2 갤러리 앱 받기(Microsoft Store) 소스 코드 가져오기(GitHub)

Fluent 움직임 원칙

물리적

동작하는 개체는 실제 세계에서 개체의 동작을 나타냅니다. 유연하고 반응형 동작은 자연스러운 환경을 만들어 감정 연결을 만들고 개성을 더합니다.

터치를 통해 UI와 상호 작용할 때 UI의 움직임은 상호 작용의 속도와 직접적인 관련이 있습니다. 이 터치는 직접적인 조작이므로 상호 작용하는 개체는 주위의 개체에 영향을 미칩니다.

기능

움직임은 목적을 수행하며 그 안에는 신념이 담겨 있습니다. 움직임은 복잡성을 통해 사용자를 안내하고 계층 설정을 도와줍니다. 움직임은 성능이 향상된 느낌을 주고, 인지되는 대기 시간을 숨겨 사용자 환경을 최적화합니다.

페이지 전환은 특별한 목적을 위해 구현되었습니다. 페이지 전환은 페이지가 서로 어떻게 관련되었는지에 대한 힌트를 제공합니다. 성능이 최적화되지 않은 경우에도 빠르다고 인식되는 방식으로 움직입니다.

연속

지점과 지점의 유동적 움직임은 자연스럽게 시선을 끌고 사용자를 안내합니다. 사용자의 작업을 자연스럽게 연결하여 더 사용 가능하고 친숙한 느낌을 줍니다.

개체는 장면 사이를 이동하거나 장면 내에서 모핑되어 연속성을 제공하고 사용자 컨텍스트 유지를 도와줍니다.

상황에 맞는

인텔리전트한 움직임은 사용자의 UI 조작 방식에 맞는 방법으로 사용자에게 피드백을 제공합니다. 상호 작용은 사용자를 중심으로 합니다. 움직임은 폼 팩터에 적합하며 시나리오를 중심으로 설계되었습니다. 각 사용자에게 편리해야 합니다.

애니메이션은 사용자 상호 작용에 다시 연결해야 합니다. 상황에 맞는 메뉴는 사용자가 활성화한 지점에서 배포됩니다.

움직임 문서

타이밍 및 감속

타이밍 및 감속은 UI 내에서 개체가 출입하거나 이동하는 움직임이 자연스럽게 느껴지도록 만드는 중요한 요소입니다.

방향 및 무게

방향 신호는 환경 전반에서 사용자에게 구체적인 멘탈 모델을 제공하는 데 도움이 됩니다. 방향 이동에는 이동의 자연스러운 느낌을 강화하는 중력 같은 힘이 강제로 적용됩니다.

페이지 전환

페이지 전환은 앱 페이지 사이에서 사용자를 탐색하면서 페이지 사이의 관계에 대한 피드백을 제공합니다. 사용자가 탐색 계층 구조상의 위치를 이해하는 데 도움이 됩니다.

연결된 애니메이션

연결된 애니메이션을 사용하면 두 가지 보기 간에 전환되는 동작에 애니메이션 효과를 적용하여 역동적이고 매력적인 탐색 환경을 만들 수 있습니다.