비터치 수신기 앱

  수신기 UI

필수
  A   대부분의 UI 요소를 화면의 하단 1/4 내에 배치하고 다른 UX와 일관되게 유지합니다.
  B   요소를 대화형 컨트롤로 표시해서는 안 됩니다. 예를 들어 수신자 UI에서 발신자 UI를 재현하지 마세요.

권장사항

• 전환 (페이드), 투명도 및 뉘앙스를 사용하여 시각 효과를 부드럽게 합니다.
• 사용자가 최대한 많은 콘텐츠를 보고 싶어한다는 점을 고려하세요. 사용자는 검사 목적으로 콘텐츠를 일시중지하는 경우가 많으므로 가능하면 불필요한 UI는 삭제합니다.

  수신 앱이 유휴 상태임

수신기가 발신기에 연결되어 있지만 전송 중이지 않은 경우 유휴 화면이 수신기에 표시됩니다.

필수
  A   로드된 수신기 앱 확인

권장사항

• 유휴 화면을 사용하여 발신기 앱의 콘텐츠나 기능을 홍보합니다.
• 30~60초마다 콘텐츠를 변경하여 더 많이 표시하고 화면 번짐을 방지하세요.
• 수신기 앱의 연결을 해제하고 5분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다.

  수신기 앱 로드

사용자가 수신기에 연결되면 먼저 수신기 앱을 로드해야 앱 유휴 상태를 표시하거나 콘텐츠 재생을 시작할 수 있습니다.

필수
A 앱 로고를 표시하여 로드 중인 수신기 앱을 확인합니다.
B 애니메이션 로드 스피너를 표시하여 수신기 앱이 로드 중인지 확인합니다.

  수신자 콘텐츠 로드

수신기 앱이 로드되면 콘텐츠가 수신기로 스트리밍을 시작할 수 있습니다.

필수
A 콘텐츠 제목이나 아트워크를 표시하여 로드 중인 콘텐츠를 확인합니다.
B 애니메이션 로드 스피너를 표시하여 콘텐츠가 로드 중임을 확인합니다.

권장사항
일시중지된 콘텐츠를 다시 시작할 때, 발신기에서 수신자로 전환하는 동안 시청자가 놓치는 부분이 없도록 재생을 5~10초 되감습니다.

  리시버 재생

필수
A 콘텐츠 시작 시 재생 중인 항목 식별
B 위치가 조정될 때 재생 위치 식별
C 재생 위치가 변경되었지만 아직 재생되지 않을 때 수신기가 콘텐츠를 찾고 있는지 확인

  수신자가 일시중지됨

필수
A 일시중지된 아이콘과 재생 위치를 표시하여 콘텐츠가 일시중지되었음을 확인합니다.
B 콘텐츠 제목 또는 아트워크를 표시하여 일시중지할 콘텐츠를 확인합니다.
C 앱 로고를 표시하여 로드되는 수신기 앱을 확인합니다.

권장사항

• 사용자는 검토를 위해 콘텐츠를 일시중지하는 경우가 많으므로 몇 초 동안 일시중지되면 불필요한 UI가 사라지도록 일시중지 아이콘을 표시합니다.
• 재개 또는 대기열의 항목 건너뛰기와 같이 사용자가 재생을 시작하라는 명시적인 요청이 없는 한 수신기 앱에서 콘텐츠 재생을 계속하면 안 됩니다.
• 수신기 앱에서 연결을 해제하고 20분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다. 사용자가 나중에 해당 지점에서 재생을 다시 시작할 수 있도록 일시중지된 위치를 저장합니다.

  수신자 버퍼링

네트워크 지연 시간 또는 기타 요인으로 인해 재생이 지연되는 경우 수신기의 버퍼링이 발생합니다.

필수
  A   버퍼링 스피너를 표시하여 수신기가 몇 초 후 버퍼링 중인지 확인합니다. 버퍼링이 있음을 나타내기 위해 몇 초 동안 기다리면 네트워크 상태가 좋지 않을 때 버퍼링 스피너가 너무 자주 표시되지 않습니다.

권장사항
5초 후에도 버퍼링이 계속되는 경우 어떤 콘텐츠가 버퍼링되는지 확인합니다.

  수신자가 전송을 중지함

재생이 중지되거나 타임아웃되면 수신기 UI가 발신기 앱에서 사용할 수 있는 다른 콘텐츠나 기능을 홍보해야 합니다.

필수
  A   앱 로고를 표시하여 로드되었거나 유휴 상태인 수신기 앱을 식별합니다.

권장사항

• 재생 후 유휴 화면을 사용하여 방금 전송된 콘텐츠를 기반으로 발신기 앱의 콘텐츠나 기능을 추천합니다.
• 화면 번짐을 방지하기 위해 유휴 화면의 콘텐츠를 30~60초마다 변경합니다.
• 수신기 앱의 연결을 해제하고 5분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다.

 

이 디자인 가이드에 사용된 이미지는 저작권 또는 크리에이티브 커먼즈 라이선스에 따라 공유된 Blender Foundation에서 제공한 것입니다.

• Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
• Sintel: (c) copyright Blender Foundation | www.sintel.org
• Tears of Steel: (CC) Blender Foundation | mango.blender.org
• Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org