Android TV에서 클라우드 게임 플랫폼 설계 — UI / UX 설계 사례 연구

클라이언트가 Android TV에 설계 할 새 프로젝트를 만들 때까지 월요일이 정례였습니다. 우리는 웹, 모바일, 태블릿 및 POS 시스템을위한 다양한 UI 레이아웃을 설계 한 경험이 많았지 만 이번이 처음으로 스마트 텔레비전 용으로 디자인해야했습니다. 우리는 새로운 것을 디자인하고 싶어서 입찰을했습니다.

"항상 처음이 있습니다"

우리 사이에 처음으로 이와 같은 것을 창조하게 된 것에 대한 흥분이있었습니다. 우리는 도구를 준비했으며 동시에 첫 번째 Android TV 응용 프로그램을 설계하는 데 필요한 영감과 데이터를 수집하기 시작했습니다.

프로젝트 정보

고객이 요구 사항을 알려주었습니다. 앱은 Cloud Gaming Platform에 관한 것입니다. 정말 시원하게 들리고 일하게되어 정말 기뻤습니다. 우리는 응용 프로그램의 사용자와 기능 및 Android TV에서 어떻게 나타낼 수 있는지 연구했습니다. 고려해야 할 가장 중요한 것은 안드로이드 TV 레이아웃이 일반 웹 및 모바일 레이아웃과는 다르다는 것입니다.

Google 자료 가이드 라인을 통해 디자인을 시작할 수있었습니다.

안드로이드 TV 네비게이션

안드로이드 TV 레이아웃 및 리모컨

가장 먼저 할 일은 사용자가 응용 프로그램을 사용할 장치를 이해하는 것이 었습니다. 우리는 사용자가 사용할 입력 장치가 다르다는 것을 이해했습니다. 그러나이 경우 사용자는 대부분 Android Remote 또는 GamePad를 사용하여 탐색합니다. 탐색은 사용자가 최소한의 단계를 탐색하기를 원했고 인터페이스를 사용하는 데 복잡함을 느끼지 않아야했기 때문에 심각하게 수행했습니다.

이미지 크레딧 Google 디자인

우리는 사용자에게 친숙하고 탐색하기가 훨씬 쉬운 표준 소재 레이아웃을 따랐습니다. 가로 스크롤 (X 축)이있는 섹션을 만들고 사용자가 세로 스크롤 (Y 축)로 섹션을 변경할 수 있습니다. 사용자가 설정을 변경하고 카테고리 및 기타 보조 기능을 탐색하기로 선택한 경우 서랍이 보관되었습니다.

Android TV 용 대지 디자인 구조

연구

우리는 Vortex와 같은 최신 게임 플랫폼을 조사했으며 Xbox 및 Play Station과 같은 게임 콘솔에서도 참조했습니다. 이러한 레이아웃을 통해 게임 인터페이스와 텔레비전에서 데이터가 표시되는 방식을 이해할 수있었습니다. 또한 다양한 레이아웃 패턴과 유용성 참조를 위해 Netflix 및 Youtube와 같은 Android TV의 인기있는 인터페이스를 간략하게 살펴 보았습니다.

이미지 크레딧 Windows Central

우리가 본 모든 참조 응용 프로그램에는 배너가 주요 초점이되었으며 사용자가 4 방향 탐색 패드를 쉽게 탐색 할 수 있도록 설계되었습니다. 우리는 사용자에게 친숙하고 직관적 인 영화 적 경험을 제공하기 위해 글꼴을 가능한 한 적게 유지하기로 결론을 내 렸습니다. 또한 사용자가 텔레비전에서 5 ~ 10 피트 떨어진 곳에 앉아 있기 때문에 글꼴 크기를 크고 크게 유지해야했습니다.

색상 선택

그림 물감

우리는 항상 공백을 좋아했고 응용 프로그램을 최소한으로 보았지만이 경우 흰색은 사용자가 큰 화면에서보고 싶은 색이 아닙니다. 따라서 사용자가 눈에 띄지 않는 어둡고 매트 색상을 사용하기로 결정했습니다. 또한 어두운 배경은 게임 배너를 강조하고 직관적으로 보이게했습니다.

응용 프로그램은 게임용이므로 사용자에게 시차 경험을 제공하기 위해 배경에 다각형 벡터를 유지하려고했습니다. 색상이 어두워서 사용자가 응용 프로그램의 내용에 집중할 수있었습니다.

사용자 리서치

우리는 사용자 조사를 수행하고 사용자를 위해 2 가지 범주를 분류했습니다.

사용자 분류

John은 새로운 게임을 좋아하지만 Smith는 같은 게임을 오랫동안 계속하고 싶어합니다. 이러한 결과를 바탕으로 John의 권장 사항 및 Smith의 최근 재생 게임과 같은 기능이 제공되었습니다. 또한 레이아웃은 단순하게 유지되었으므로 두 가지 모두 쉽게 탐색하고 아무런 노력없이 게임을 즐길 수 있습니다.

카드 레이아웃

카드 레이아웃은 사용자에게 영화 같은 경험을 제공하기에 완벽했습니다. 선택한 카드는 재료 디자인에 따라 강조 표시 및 상승합니다. 텍스트 정보없이 게임 배너 만 포함하는 맨 위에 무한 스크롤을 유지했습니다. 또한 그 아래에 머티리얼 레이아웃과 가로 스크롤로 최근에 플레이 한 게임을 유지했습니다.

카드 디자인

Netflix, Youtube 및 기타 애플리케이션과 같은 앱이 제공하는 것과 동일한 영화 경험을 사용자에게 제공하는 것이 중요했습니다. 또한 사용자는 화면과 섹션을 원활하게 탐색 할 수있었습니다.

최종 결과

마침내 겨울이 왔고 이제 행동의 시간이되었습니다. 우리는 모든 측면을 분석하고 시각적으로 표현하려고 노력했습니다. 마인드 매핑 및 와이어 프레이밍이 완료되고 사용자 인터페이스가 바뀌 었습니다. 우리는 우리가 필요로하는 모든 것을 가지고 있었고 그것을 처형해야했습니다.

응용 프로그램 구조

우리는 화려한 배너와 함께 게임 취향을 가진 디자인의 결과를 얻었습니다. 긍정적 인 피드백을받은 인터페이스를 제출했습니다. 또한 Android TV에서 테스트했으며 예상 한 결과가있었습니다.

최종 UI

여행은 모험심이 많았으며 많은 교훈을 얻었습니다. Android TV는 다시 디자인하고 싶었던 것입니다. 이 디자인은 우리에게 장치의 다양성과 다양한 경험을 가르쳐주었습니다.

읽어 주셔서 감사합니다!