동작

동작을 사용하여 앱에 아름다움, 에너지 및 개성을 추가할 수 있습니다. 동작은 상태 간에 유연한 전환을 제공하여 사용자가 수행 중인 작업을 쉽게 이해할 수 있도록 해야 합니다. 효율적이고 성능이 뛰어난 애니메이션을 만들어 "빠르고 유연함" 원칙을 준수합니다. 앱은 매끄럽고 지속적인 응답으로 사용자 입력에 반응해야 합니다.

Windows의 동작

Windows는 진정한 의미의 디지털이며 실제 개체나 동작을 따르거나 모방하지 않습니다. Windows는 동작 흐림이나 과장된 튀는 효과 및 확대 같은 허위 규칙을 사용하지 않습니다. Windows의 동작은 명확하고 용도에 맞으며 개체가 거의 마찰 없이 쉽게 이동합니다.

사용자가 이동 및 스크롤만으로 콘텐츠를 탐색할 수 있지만, 시맨틱 줌을 사용하여 사용자에게 강력한 탐색 및 구성 기능을 제공할 수도 있습니다. 시맨틱 줌은 대량의 콘텐츠를 탐색할 때 장거리를 이동한다는 느낌을 줄여주며 콘텐츠 내의 위치에 빠르고 쉽게 액세스할 수 있도록 합니다.

동작 사용 방법

정적 레이아웃과 마찬가지로 애니메이션에도 시각적 계층 구조가 있습니다. 레이아웃의 모든 부분에 의미가 있는 것은 아닙니다. 가장 중요한 부분을 식별하고 애니메이션을 적절하게 적용합니다.

Great British Chefs는 자연스러운 페이지 전환 형태의 동작으로 생동감 있게 표시됩니다. 이 앱의 시맨틱 줌은 쉬운 탐색 기능을 제공하며 탐색 모음을 보완합니다.

조리법 섹션에는 특별한 주의가 필요합니다. 타일을 가리키면 페이지가 넘어가서 요리 이름과 요리사 이름을 표시합니다. 이 예기치 않은 요소는 사용자에게 즐거움을 주고 이 앱의 풍부한 콘텐츠를 더 탐색하도록 유도합니다.

동작을 사용하여 앱의 개성과 브랜드를 전달할 수도 있습니다. 이 Netflix 앱 시작 화면의 애니메이션은 정교하면서도 아름답게 구현되어 애니메이션이 성공하는 데 주의가 필요하지 않음을 보여 줍니다. 앱 로드 시 로고가 가운데 화면으로 이동할 때까지 배경 빨간색이 어두워져 진행률 원을 표시합니다.

관련 항목

UI 애니메이션(JavaScript)

UI 애니메이션(C#/VB/C++)

갤러리