사용 안내 UI 디자인에 대한 지침

Applies to Windows and Windows Phone

Windows 스토어 앱 작동 방법을 안내하는 사용 안내 UI(사용자 인터페이스)를 디자인합니다.

권장 사항 및 금지 사항

  • 사용 안내 UI를 사용하여 새 사용자에게 앱의 기능을 소개합니다.
  • 새로운 기능에 대한 팁이나 업데이트 후 앱이 어떻게 변경되었는지에 대한 구체적인 정보에 사용합니다.
  • 특정 작업과 사용 안내 UI를 통합합니다.
  • 응용 프로그램 UI 조작을 차단하지 않습니다.

추가 사용법 지침

앱의 UI 내에서 직접 안내하는 것이 사용자의 효과적인 Windows 스토어 앱 조작을 돕는 최상의 방법인 경우도 있습니다. 이러한 유형의 지침을 나타내기 위해 사용 안내 UI라는 용어를 사용합니다. 예를 들어 인라인 텍스트 또는 플라이아웃 같은 UI 요소를 사용하여 터치 조작을 통해 작업을 완료해야 하는 경우를 사용자에게 알릴 수 있습니다.

사용 안내 UI가 사용자를 위한 디자인을 대체하지는 않습니다. 너무 자주 사용하거나 컨텍스트에 맞지 않게 사용할 경우 앱의 흐름을 방해하고 효과가 감소할 수 있습니다. 사용 안내 UI를 추가하기 전에 사용자에게 앱을 소개하는 다른 방법을 탐색합니다. 레이아웃, 탐색 및 컨트롤에 대한 자세한 내용은 관련 항목을 참조하세요.

다음은 사용 안내 UI를 통해 사용자에게 정보를 제공할 수 있는 몇 가지 경우입니다.

  • 사용자의 터치 조작 검색 지원. 다음 스크린샷은 Cut the Rope 게임에서 터치 제스처를 사용하는 방법을 플레이어에게 설명하는 사용 안내 UI를 보여 줍니다.

    사용 안내 UI 메시지 "Slide acress to cut the rope"를 보여 주는 게임의 스크린샷

  • 좋은 첫인상 주기. 사용 안내 UI를 사용하여 새 사용자에게 앱의 기능을 소개하는 것이 좋습니다. 예를 들어 나만의 동영상을 처음 실행하면 사용 안내 UI에서 동영상 만들기를 시작하라는 메시지를 표시합니다.

    나만의 동영상 앱의 실행 화면

  • 사용자를 복잡한 작업의 다음 단계로 안내. Windows 메일 앱에서 받은 편지함의 맨 아래에 있는 힌트는 사용자에게 이전 메시지를 액세스하려면 설정으로 이동하도록 알려줍니다.

    사용 안내 UI 메시지를 보여 주는 Windows 메일 앱의 잘린 스크린샷

    사용자가 메시지를 클릭하면 앱의 설정 플라이아웃이 화면 오른쪽에 표시되어 사용자가 작업을 완료할 수 있게 합니다. 다음 스크린샷은 사용자가 사용 안내 UI 메시지를 클릭하기 전과 이후의 메일 앱을 보여 줍니다.

    이전이후
    Windows 메일 앱의 스크린샷설정 플라이아웃이 확장된 Windows 메일 앱의 스크린샷

     

  • UI 변경 내용 소개. 앱의 최신 버전에서 UI가 상당히 변경된 경우 새로운 기능이나 앱의 변경 내용에 대한 세부 정보를 제공하면 사용자에게 도움이 될 수 있습니다.

사용 안내 UI 디자인의 원칙

  • 단순하게 유지합니다. 한 번에 하나의 기본 개념을 소개하고 가능한 경우 이미지를 사용합니다. Windows 스토어 앱의 설정 플라이아웃에 도움말 섹션을 추가하여 복잡한 기능을 설명하는 것이 좋습니다.
  • 컨텍스트에서 설명합니다. 사용자가 완료할 수 있도록 지원되는 작업과 사용 안내 UI를 통합합니다. 가장 필요할 때 소개하면 사용자가 개념을 유지할 가능성이 더 큽니다.
  • 조작이 차단되지 않도록 합니다. 사용 안내 UI가 있는 동안에도 사용자가 계속 앱을 조작할 수 있도록 합니다. 사용 안내 UI는 사용자에게 도움이 되고 어떤 방식으로든 불편을 주면 안 됩니다.
  • 설명 후 사라집니다. 더 이상 관련이 없으면 즉시 사용 안내 UI를 제거하거나 사용자가 해제할 수 있도록 합니다. 또한 대부분의 경우 사용 안내 UI는 한 번만 사용자에게 표시하면 됩니다. 같은 사용 안내 UI를 반복해서 표시하지 마세요.
  • 가급적 사용하지 않습니다. 대체로 신중한 디자인과 도움말 섹션을 통해 앱을 활용하기 위해 알아야 할 사항을 모두 설명할 수 있습니다. 앱에 사용 안내 UI를 추가하기 전에 다양한 디자인 옵션을 고려하세요.

관련 항목

디자이너용
Microsoft 디자인 원칙
레이아웃
컨트롤
앱 도움말에 대한 지침
개발자용(HTML)
UI 만들기(JavaScript)
개발자용(XAML)
UI 만들기(C#/C++/VB)

 

 

표시:
© 2014 Microsoft