동작은 인터페이스가 애니메이션처럼 움직이고 사용자 상호 작용에 응답할 수 있는 방식에 대하여 설명합니다. Windows 동작은 직접적으로 반응하며 상황에 맞게 구현됩니다. 사용자 입력에 대한 피드백을 제공하고 길 찾기를 지원하는 공간 패러다임을 강화합니다.
팁
이 문서에서는 Fluent 디자인 언어가 Windows 앱에 적용되는 방법을 설명합니다. 자세한 내용은 Fluent 디자인 - 동작을 참조 하세요.
동작 원칙
이러한 원칙은 Windows의 동작 사용을 안내합니다.
연결됨: 작업 요소가 원활하게 연결됩니다.
위치와 크기를 변경하는 요소는 내부에서 연결되지 않은 경우에도 한 상태에서 다른 상태로 시각적으로 연결되어야 합니다. 사용자는 점 간을 이동하는 요소를 따라 정적 상태 변경의 인지 부하를 낮추도록 안내됩니다.
예제:: 창이 부동, 고정 및 최대화 간에 전환되면 항상 동일한 창처럼 보입니다.
팁
접근성 및 가독성을 개선하기 위해 이 페이지는 여전히 기본 보기에서 이미지를 사용합니다. 이미지를 클릭하여 애니메이션 버전을 볼 수 있습니다.
일관성: 진입점을 공유할 때 요소는 비슷한 방식으로 동작해야 합니다.
동일한 UI 진입점을 공유하는 화면은 일관된 상호 작용을 위해 동일한 방식으로 호출하고 해제해야 합니다. 각 전환은 화면이 일관되게 느껴지도록 다른 요소의 타이밍, 감속 및 방향을 따라야 합니다.
예제: 모든 작업 표시줄 플라이아웃은 호출될 때 위로 펴지고, 해제될 때 아래로 펴집니다.
이미지를 클릭하여 애니메이션 효과를 확인하세요.
반응형: 시스템이 반응하고 사용자 입력 및 선택에 맞게 조정됩니다.
명확한 표시기에 시스템이 다양한 입력, 상황 및 방향에 맞게 정상적으로 인식하고 그에 따라 조정되는 것으로 나타납니다. 앱은 반응하고 활성화되고 입력 방법에 따라 사용을 지원하기 위해 OS 동작을 기준으로 작동해야 합니다.
예제: 키보드가 분리되면 작업 표시줄 아이콘이 분산됩니다. 창 가장자리는 커서 또는 터치 입력에 따라 다른 시각적 개체를 호출합니다.
이미지를 클릭하여 애니메이션 효과를 확인하세요.
만족: 목적을 달성할 때 예상치 못했던 만족스러운 순간
동작은 간단한 작업을 만족스러운 순간으로 변환하기 위해 환경에 개성과 활력을 더합니다. 0이러한 순간은 항상 짧고 간결하며 사용자 작업을 강화하는 데 도움이 될 수 있습니다.
예제: 창을 최소화하면 앱 아이콘이 아래로 튕기지만 복원하면 앱 아이콘이 위로 튕깁니다.
이미지를 클릭하여 애니메이션 효과를 확인하세요.
풍부함: 가능한 경우 기존 컨트롤을 활용하여 일관성 유지
가능한 경우 사용자 지정 애니메이션을 사용하지 않습니다. 페이지 전환, 페이지 내 포커스 및 미세한 상호 작용에 대한 WinUI 컨트롤과 같은 애니메이션 리소스를 사용합니다. WinUI 컨트롤을 사용할 수 없는 경우 앱 진입점이 있는 위치에 따라 기존 OS 동작을 모방합니다.
The app user experience often defines the success of your app. This learning path will focus on how to provide the best app navigation, and build the best UI using themes, icons, images, personalization, different form factors, and controls.