레이아웃은 레이아웃을 유지하기 위한 프레임워크를 제공하는 구조적 템플릿입니다. 시각적 일관성이 유지될 수 있습니다 시각적 그리드, 간격, 섹션, 레이아웃은 페이지의 일관되고 체계적인 구조를 정보 및 UI 요소의 표시 방법을 살펴보겠습니다.
하이라이트
- 웹이나 모바일과 달리 TV는 화면의 가로세로 비율이 16:9로 고정되어 있습니다.
- 사용하기 쉽도록 가로축과 세로축을 따라 레이아웃을 최적화합니다. 관리할 수 있습니다
원칙
TV 레이아웃을 디자인할 때 디자인을 결정하는 데 도움이 되는 가이드라인입니다.
대형 화면용으로 디자인하기
HDTV가 대중화된 이후, 가로세로 비율이 16:9인 직사각형 TV가 표준이 되었습니다. 이전에 텔레비전은 가로세로 비율이 4:3 또는 1.33:1인 정사각형 모양으로 제조되었습니다.
Android 플랫폼에서 디자인하기
디자인할 때 dp를 사용하여 다른 Android 지원 기기에서와 마찬가지로 다양한 밀도의 화면에 요소를 균일하게 표시합니다. 항상 MDPI 해상도(960px * 540px)로 디자인합니다.
MDPI 1px = 1dp
확장 소재의 목표는 1080p여야 합니다. 이렇게 하면 Android 시스템에서 필요한 경우 레이아웃 요소를 720p로 축소할 수 있습니다.
가시성 및 오버스캔 방지 보장
중요한 요소가 항상 사용자에게 표시되는지 확인 이렇게 하려면 레이아웃의 왼쪽과 오른쪽에 48dp의 여백 5%, 레이아웃의 상단과 하단에 27dp의 여백을 두고 요소를 배치합니다. 이렇게 하면 레이아웃의 화면 요소가 오버스캔 내에 있게 됩니다.
전체 화면 채우기
백그라운드 화면 요소를 오버스캔 방지 영역에 맞게 조정하거나 자르지 않습니다. 대신 오프스크린 요소의 부분 표시를 허용합니다. 이렇게 하면 모든 화면에 배경 및 화면 밖 요소가 올바르게 표시됩니다.
축을 사용하여 최적화
사람들이 TV에서 리모컨을 어떻게 사용하는지 생각해 보세요. 리모컨을 사용한 TV 인터페이스가 간단한지 확인합니다. 각 방향 (위, 아래, 왼쪽, 오른쪽)은 명확한 목적과 탐색 패턴이 있도록 설계하여 사용자가 대규모 옵션 그룹을 어떻게 이동하는지 이해할 수 있도록 합니다.
레이아웃
TV 화면 크기는 기기마다 다릅니다. 최신 TV에는 가로 세로 비율이 16:9일 때를 대비하여 앱을 디자인하는 것이 좋습니다. 960x540px 화면 크기입니다. 이렇게 하면 모든 요소가 HD 또는 4K 화면에 맞게 비례하여 크기가 조정됩니다
오버스캔 여백
오버스캔 여백은 콘텐츠와 화면의 왼쪽과 오른쪽 가장자리에
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
이러한 테두리 여백은 기본 요소를 잠재적인 오버스캔 문제로부터 보호합니다. 콘텐츠와 정보를 안전하게 유지하려면 5% 여백 레이아웃을 사용하세요. (측면 58dp, 상단 및 하단 가장자리 28dp)
기둥 및 거터
콘텐츠는 열과 여백이 있는 화면 영역에 배치됩니다. 그리드 시스템에는 열이 12개 있습니다. 홈통은 콘텐츠를 분할하는 데 도움이 되는 열입니다.
너비가 52dp이고 사이에 간격이 20dp인 열 12개를 사용합니다. 양쪽에 58dp의 여유 공간과 4dp의 세로 공간이 있어야 합니다. 줄 간격
레이아웃 패턴
원하는 목적에 따라 세 가지 레이아웃 패턴을 사용할 수 있습니다. 수평 스택 레이아웃, 세로 스택 레이아웃, 그리드 레이아웃입니다.
가로 스택 레이아웃
수평 스택 레이아웃은 구성요소를 가로로 정렬합니다. 크기, 비율, 형식이 다를 수 있습니다. 이 레이아웃은 콘텐츠 및 구성요소를 그룹화하는 데 사용됩니다.
세로 스택 레이아웃
세로 스택 레이아웃은 구성요소를 세로로 정렬하며, 크기, 비율, 형식을 유연하게 설정할 수 있습니다 일반적으로 다양한 유형의 텍스트, 대화형 구성요소, 사용할 수 있습니다.
그리드 레이아웃
그리드는 교차하는 열과 행의 모음, 그리고 그리드는 레이아웃에서 이 그리드에 콘텐츠를 표시합니다. 콘텐츠를 논리적이고 사용자가 손쉽게 탐색하고 탐색할 수 있습니다.
겹치지 않도록 하려면 셀 안쪽의 패딩을 고려해야 합니다. 항목 및 포커스 상태의 크기 증가를 지원합니다. 예를 들어 포커스가 있는 구성요소 (예: 카드)가 강조 표시됩니다. Google에서 추천하는 그리드 레이아웃 (52dp의 12열, 20dp의 여백), 구성요소 레이아웃과 미리보기를 확인하는 것이 좋습니다
레이아웃 구조
광고의 질을 높이는 데 도움이 되는 몇 가지 레이아웃 구조는 고려해야 할 사항이 많습니다. TV 화면을 가로로 나누면 다른 유형의 구성 요소를 분리하고 정보를 전달하는 데 계층 구조 및 탐색 로직을 구성할 수 있습니다 창은 여러 단위 열을 포함할 수 있습니다. 각 패널은 스택 레이아웃과 같은 다양한 레이아웃 패턴을 호스팅할 수 있음 그리드 레이아웃입니다.
단일 창 레이아웃
단일 창 레이아웃은 주요 콘텐츠에 대한 관심을 유도하는 데 도움이 될 수 있습니다. 콘텐츠 중심 경험과 중요한 정보 페이지에서 사용할 수 있습니다.
창이 두 개인 레이아웃
창이 두 개인 레이아웃은 페이지에 계층적 콘텐츠가 표시될 때 성능이 더 좋습니다. 작업 전달 환경에서 널리 사용됩니다.
인지 과부하
복잡하고 불분명한 콘텐츠는 혼란과 짜증을 유발하거나 참여를 유도할 수 있습니다. 눈에 잘 띄고 깔끔하게 정돈된 디자인을 사용하세요. 꼭 필요한 정보만 얻을 수 있습니다.
콘텐츠를 그룹화하는 데 너무 많은 패널을 사용하지 않도록 합니다. 이렇게 하면 계층 구조가 사용자에게 영향을 줄 수 있습니다
권장사항
금지사항
익스프레스 계층 구조 및 탐색
패널은 콘텐츠를 시각적으로 구분하고 정리합니다. 사용자를 안내하고 사용 환경을 개선하는 보다 직관적인 인터페이스를 만들 수 있습니다.
권장사항
금지사항
레이아웃 템플릿
레이아웃 템플릿은 순서, 일관성 및 친숙함을 촉진합니다. 설계 사용자가 광고를 볼 수 있는 위치를 명확하게 전달하는 편안한 UI 환경을 사용자가 어디로 갈 수 있는지에 대한 정보입니다.
찾아보기
미디어 콘텐츠 '클러스터'를 표시하는 브라우저 템플릿 또는 행을 포함할 수 있습니다. 사용자는 위아래로 탐색하여 행을 탐색하고, 좌우로 탐색하여 특정 행의 콘텐츠를 탐색할 수 있습니다.
왼쪽 오버레이
왼쪽 탐색 템플릿은 화면 왼쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드에서 콘텐츠와 관련하여 작업할 수 있는 탐색 메뉴나 항목이 표시됩니다.
오른쪽 오버레이
오른쪽 오버레이 템플릿은 화면 오른쪽에 오버레이 패널을 표시합니다. 일반적으로 백그라운드 콘텐츠와 독립적으로 작업한 항목이 표시됩니다.
중앙 오버레이
가운데 오버레이 템플릿은 기존 뷰 위에 오버레이되는 모달 요소를 표시합니다. 긴급한 정보를 전달하거나 결정을 내리는 데 사용됩니다.
하단 오버레이
하단 오버레이 템플릿은 일반적으로 하단 시트에 사용됩니다. 하단 시트는 화면 하단에 고정된 보완 콘텐츠를 포함하는 표면입니다. 이 템플릿을 사용하면 현재 페이지의 맥락을 유지하면서 미니 흐름을 만들 수 있습니다.
작업
작업 템플릿의 왼쪽에는 제목과 부제목이 표시되고 오른쪽에는 옵션 또는 작업이 표시됩니다. 사용자는 일반적으로 이 템플릿을 사용해 옵션을 선택하거나 작업을 수행하라는 요청을 받습니다.
콘텐츠 세부정보
콘텐츠 세부정보 템플릿은 가로 스택 레이아웃으로 콘텐츠를 표시합니다. 콘텐츠에는 일반적으로 제목, 메타데이터, 간단한 설명, 빠른 작업, 관련 정보 클러스터가 포함됩니다.
컴파일
편집 템플릿은 화면 왼쪽에 있는 항목(예: 팟캐스트)의 세부정보와 해당 요소(예: 에피소드)가 오른쪽 패널에 표시됩니다.
그리드
그리드 템플릿은 정리된 그리드에 콘텐츠 컬렉션을 표시합니다. 명확한 원격 탐색 로직과 최적의 탐색 환경을 갖춘 콘텐츠를 표시합니다.
주의
알림 템플릿은 전체 화면 메시지를 표시합니다. 일반적으로 알림을 차단 해제하고 이전 화면으로 돌아가려면 조치를 취해야 합니다.
카드 열
카드 레이아웃 1개
카드 너비 — 844dp
2카드 레이아웃
카드 너비 — 412dp
3 카드 레이아웃
카드 너비 — 268dp
4 카드 레이아웃
카드 너비 — 196dp
5 카드 레이아웃
카드 너비: 124dp
