정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone의 애니메이션, 동작 및 출력

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

 

Windows Phone 앱은 동작, 소리 및 진동을 사용하여 앱 내에서 현실감을 만들어야 합니다. 이러한 효과와 출력은 터치를 늘리고 사용자가 진행 중인 작업에 대한 피드백을 얻을 수 있도록 도와줍니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

동작은 사물을 이동하는 것만이 아닙니다. Windows Phone에서 동작은 사용자가 살고 터치를 통해 조작하는 물리적 에코시스템을 만들기 위한 도구입니다. 환경의 품질은 앱이 사용자에게 얼마나 잘 응답하는지 및 UI가 어떤 종류의 개성을 전달하는지에 따라 좌우됩니다.

Windows Phone에는 다음 두 종류의 동작이 있습니다.

  • 전환: 사용자 동작에 의해 트리거되는 전환은 사용자가 UI를 탐색할 때 사용자의 정신적 이동 경로를 제공합니다. 다양한 전환은 사용자가 경로를 따라 이동하고 사용자의 현재 위치에 대한 확신을 제공하도록 작성되었습니다. 앱 간에 사용되는 전환 수는 많아지는 반면, 앱 내에서 탐색하는 데 사용되는 전환 수는 적어지고 있습니다.

  • 애니메이션: 특정 뷰의 로컬 요소로 한정된 시각적 피드백이며 사용자 작업의 결과가 아닐 수도 있습니다. 한 가지 예로 사용자에게 장치 잠금을 해제하는 방법을 알리는 잠금 화면 "홉" 동작이 있습니다.

동작이 앱의 용도에 맞는지 확인합니다. 최상의 Windows Phone 앱은 동작을 사용하여 UI에 생명을 불어넣습니다. 동작은 다음 기능을 해야 합니다.

  • 탭 없이 정보를 제공합니다.

  • 사용자 동작을 기준으로 피드백을 제공합니다.

  • 터치 대상과 상호 작용하는 방법을 사용자에게 설명합니다.

  • 이전 뷰나 이후 뷰를 탐색하는 방법을 나타냅니다.

동작의 한 가지 간단한 예는 Windows Phone의 편집 상자 동작에서 확인할 수 있습니다. 편집 상자는 확장 시 단순히 더 크게 스냅되지 않고 대신 애니메이션 효과가 적용되어 크기 조정을 나타냅니다.

동작에 의해 추가되는 사항

사용자가 앱에서 더 많은 시간을 보내거나 앱의 작업이 더 복잡해지면 고품질 동작이 점점 중요해집니다. 이 동작을 사용하여 사용자가 인식 로드와 앱이 사용하기 쉽다고 여기는 방식을 변경할 수 있습니다. 동작에는 다른 많은 직접적인 이점이 있습니다.

  • 동작은 사용자를 즐겁게 합니다. 애니메이션 및 기타 시각적 피드백은 놀랍고 직관적인 순간을 만듭니다. 즐거움은 사용자가 장치와 앱을 소중하게 여기는 계기가 되기도 합니다.

  • 동작은 상호 작용에 대한 힌트를 추가합니다. 동작에는 방향이 있습니다. 동작은 앞으로/뒤로 이동하며 콘텐츠로 들어가고 나가면서 사용자가 현재 뷰에 어떻게 도달했는지에 대한 최소한의 "이동 경로"를 남깁니다. 예를 들어 파노라마 진입 애니메이션은 앱이 열릴 때의 기본 탐색을 사용자가 주목하게 하여 Panorama 컨트롤의 작동 방법에 대한 단서를 사용자에게 제공합니다.

  • 동작은 성능 향상의 느낌을 제공합니다. 네트워크 속도가 지연되거나 시스템 작동이 일시 중단될 경우 애니메이션을 사용하면 사용자가 대기 시간을 더 짧다고 느낄 수 있습니다.

  • 동작은 개성을 추가합니다. 세심한 메트로 디자인에서는 동작을 사용하여 앱이 현재 진행 상황에 주의하고 있다는 인상을 만들며 사용자가 중첩된 계층에 파묻히는 느낌이 들지 않도록 합니다.

  • 동작은 일관성을 추가합니다. 전환은 사용자에게 이미 익숙한 작업으로 유추하여 새 응용프로그램의 작동 방법을 사용자가 쉽게 배울 수 있도록 도와줍니다.

  • 동작은 우아함을 추가합니다. 애니메이션을 사용하여 휴대폰이 처리 중이고 고정되지 않았으며 사용자가 관심을 가질 만한 새 정보를 적극적으로 표시할 수 있음을 사용자에게 알릴 수 있습니다.

동작 에코시스템의 규칙

  • 각 애니메이션은 시스템의 일부이며 다르게 두드러지는 애니메이션이 있으면 안 됩니다.

  • 각 애니메이션은 특정 용도로 사용되며 신속하게 지나갑니다.

  • 애니메이션은 3D가 아니라 2.5차원으로 표시되며 정교한 질감, 조명 또는 돌출을 사용하지 않습니다. 예를 들어 각도 조절 애니메이션은 터치 대상 뒤에 깊이를 표시하지 않으며 평면만 표시합니다. 이 경우 콘텐츠가 강조됩니다.

  • UI 요소가 다른 UI 요소를 이동할 수 있습니다. 예를 들면 다음과 같습니다. 페이지에서 개체가 확장되면 애니메이션 효과가 적용된 방식으로 페이지가 아래로 확장됩니다.

  • 동작은 하드웨어 및 소프트웨어 상호 작용으로 트리거될 수 있습니다. 전환은 모든 가능성을 인식하도록 디자인해야 합니다.

  • 작업 가능한 항목은 움직임이 사용자 상호 작용을 기반으로 합니다. 예를 들어 각도 조절 애니메이션이 활성화되어 터치 중인 개체를 표시합니다.

  • 사용자의 주의를 집중시키는 중요도 수준까지 항목이 업데이트되면 동작을 사용하여 사용자에게 알려야 합니다.

동작 방향

Windows Phone 장치는 전방 탐색과 하드웨어뒤로버튼을 사용하므로 전환과 애니메이션이 다음 그림의 매트릭스 표현과 같이 두 방향이나 네 방향으로 이동할 수 있습니다. 이 그림은 회전문 애니메이션을 예제로 사용하고 사용자가 앱에 진입할 수 있는 네 가지 방향을 보여 줍니다.

UX_Interactions_NavMatrix

탐색 매트릭스

특정 전방 및 후방 동작 2개나 4개를 사용하면 사용자가 지정된 작업 흐름에서 현재 위치를 인식하는 데 도움이 됩니다.

일반적으로 앱 디자인의 초기 단계부터 동작의 역할을 고려해야 합니다. 디자인 프로세스의 끝에 추가된 동작은 유기적 방식으로 통합되기 더 어려우며, 동작을 제대로 사용할 경우의 이점이 크기 때문에 신중하게 프로토타입을 작성할 가치가 있습니다.

감속/가속

감속/가속은 Windows Phone UI에 매우 중요합니다. 올바른 감속/가속은 말 그대로 멋진 경험과 비참한 실패의 차이를 의미할 수 있습니다. 많은 랩 연구에서 단순히 감속/가속이 올바르게 조정되지 않아 부정적인 결과가 나타났습니다. 다음은 Windows Phone에서 일반적으로 사용되는 두 가지 감속/가속 유형입니다.

  • 로그. 개체가 화면에 진입하는 경우 로그 감속/가속을 사용하여 멋지고 쉽게 중지됩니다.

  • 지수. 개체가 화면을 벗어나는 경우 긴장을 조성하고 개체를 신속하게 날려 보내는 지수 감속/가속을 사용합니다.

  • SCurve 로그 감속/가속이 너무 자연스럽지 않다고 생각되면 SCurve 감속/가속을 사용하여 화면에서 더 많이 이동할 수 있습니다.

감속/가속 동작 곡선은 동적이므로 테스트 결과, 사용자가 작업이 발생될 때까지 기다린 시간을 완벽하게 측정할 수 없습니다. 이 감속/가속은 인식되는 앱의 응답 속도를 늘립니다. 장치 전체에서 감속/가속 설정을 일관성 있게 사용하면 빠르고 간단한 환경이 일관성 있게 활성화됩니다.

사용자가 터치 대상을 탭하면 적절한 피드백을 사용자에게 제공해야 합니다. 작업 또는 활성화의 각 단계에 있는 컨트롤을 보여 주는 사용자 지정 컨트롤의 시각적 상태를 디자인합니다. 버튼을 누르거나 컨트롤을 전환하면 사용자가 이를 알아야 합니다.

참고참고:

Windows Phone에서 가장 기본적인 피드백 방법은 각도 절 효과입니다. 자세한 내용은 Windows Phone의 컨트롤 각도 조절 효과 사용 방법을 참조하세요.

  • 변경 사항을 즉시 제공합니다. 일부 설정은 예외지만 일반적으로 컨트롤은 경 사항을 즉시 적용하여 피드백을 표시해야 합니다.

  • Touch 컨트롤을 사용한 상호 작용에 대해 즉시 시각적 또는 청각 피드백을 제공합니다. 제스처가 발생한 후가 아니라 발생하는 동안 응답하여 모든 작업의 결과가 즉시 명확하게 표시되어야 합니다. 잘못된 디자인의 예로 사진을 터치하는 사용자가 있으며, 제스처가 완료된 후 움직임이 발생합니다.

  • 시간이 많이 걸리는 프로세스에 대해 피드백을 제공합니다. 작업이 진행되는 동안 수행 중인 작업이 있음을 사용자에게 표시해야 합니다. 콘텐츠를 사용하여 진행률을 표시하거나 최후의 방법으로 진행률 표시줄 또는 원시 알림을 사용할 수 있습니다.

  • 제스처에 대한 응답이 사진과 앱 전체에서 일관성이 있어야 합니다. Windows Phone SDK 의 터치 컨트롤을 사용하면 이 항목에 설명된 터치 제스처에 대한 기본 제공 지원이 있기 때문에 일관성 유지에 도움이 됩니다. 사용자 지정 터치 컨트롤을 만드는 경우 유사한 방식으로 제스처에 응답해야 합니다.

Windows Phone 앱에는 다음 네 가지 출력 방법이 있습니다.

  • 디스플레이

  • 오디오 출력 잭

  • 내장 스피커

  • 진동

앱을 디자인할 때 네 가지 출력을 모두 고려해야 합니다.

소리 및 진동

Windows Phone은 소리 및 진동을 사용하여 사용자 환경을 보완합니다. 오디오를 사용자의 작업을 유도하는 경고음이 아니라 앱의 사운드트랙으로 생각하세요. 앱용 오디오를 디자인할 대 미니멀리즘의 근본 원리를 적용하여 성가시거나 불필요한 오디오를 피하세요. 최상의 Windows Phone 앱은 오디오를 사용하여 시각적 디자인 스토리를 보완하고 지원합니다.

오디오에 대한 지침은 다음과 같습니다.

  • 불필요한 오디오를 사용하지 않습니다.

  • 일반적인 사운드 효과를 사용하지 않습니다.

  • 사용자의 불안을 초래할 수 있는 거친 경고음을 사용하지 않습니다.

참고참고:

사용자가 벨소리 및 알림 기본 설정에서 진동을 켜거나 끌 수 있으며 이 설정은 재정의할 수 없습니다. 이 설정은 재정의할 수 있습니다.

가능한 경우 시스템 소리를 사용합니다. Windows Phone 라이브러리는 다음을 비롯한 여러 벨소리 종류를 제공합니다.

  • 시스템 일반 메시지

  • 느낌표

  • 경고

  • 토스트

시스템 소리가 적절하지 않은 경우 사운드 효과로 사용자 환경을 보완해야 합니다. 모든 오디오 자산은 소음이 적고, 적절한 편집 기능이 있고, 볼륨이 적당한 전문적 품질이어야 합니다.

표시: