터치 인터페이스와 달리 TV는 다양한 기본 상태(기본값, 포커스가 설정됨, 누름)에 크게 의존하여 포커스가 맞춰진 요소에 사용자의 관심을 유도합니다. 이 링크는 탐색의 시작 지점 역할을 합니다.
하이라이트
- 포커스 시스템은 포커스 가능 요소의 섹션으로 구성됩니다.
- 포커스 표시기는 포커스가 맞춰진 요소를 강조하는 시각적 장치입니다.
- 배율 표시는 포커스를 받거나 선택했을 때 x 배율로 요소를 조정합니다.
- 배경 색상은 정적이지만 초점을 맞추면 표면 색상이 변경될 수 있습니다.
초점
초점은 TV 디자인의 주요 상태 정의입니다. 탐색은 리모컨에서 사용할 수 있는 D패드 상호작용으로 제한됩니다. 사용자는 화살표 키를 사용하여 이동하고, 가운데 버튼을 사용하여 선택하고, 뒤로 키를 사용하여 돌아갈 수 있습니다. 리모컨을 사용하면 사용자가 한 번에 하나의 상호작용으로 이동할 수 있습니다. 요소의 상태 변경은 포커스 표시기를 사용하여 표시되어 사용자의 시각화를 돕습니다.
포커스 가능 요소 및 그룹
'포커스 가능 요소'는 TV 인터페이스의 필수 요소입니다. '포커스 가능 요소'는 버튼, 카드, 목록 항목, 맞춤 정의된 노출 영역 등 모든 구성요소가 될 수 있습니다. 사용자는 언제든지 포커스 가능한 하나의 요소에만 포커스를 둘 수 있어야 합니다.
반면 '포커스 가능 그룹'에는 '포커스 가능 요소'가 하나 이상 포함됩니다. 중첩된 '포커스 가능 그룹'은 여러 개 있을 수 있습니다. 포커스 가능 그룹은 사용자 친화적인 탐색을 위해 다양한 포커스 가능 요소를 논리적으로 그룹화하는 데 사용됩니다.
포커스 표시기
포커스 표시기는 포커스된 요소를 시각적으로 명확하게 보여줍니다. 요소가 선택되면 원격 버튼이 놓일 때까지 '눌림' 상태가 됩니다.
포커스 가능 요소의 각 상태는 다음 속성을 조정하여 구성됩니다.
- 배율 — 포커스가 맞춰진 요소의 크기 변경
- 테두리: 요소 주위에 윤곽선을 그립니다.
- 발광 효과: 요소 아래에 그림자를 만듭니다 (일반적으로 카드에 사용됨).
- 색상: 요소 배경 및 콘텐츠 색상을 변경합니다.
축척 표시
포커스를 두거나 선택하면 요소의 크기를 조정합니다. 기본 배율은 1.025, 1.05, 1.1x입니다. 탐색에 관한 명확한 의견을 제공하려면 이 표시를 사용하세요. 여러 요소의 배율 값은 크기에 따라 달라질 수 있습니다.
발광 표시
요소 주위에 확산된 발광 효과 또는 그림자를 추가합니다. 발광 표시에는 다음과 같은 매개변수가 사용됩니다.
- 발광 수준: 요소의 고도 제안(2dp~32dp)
- 발광 색상: 이미지 또는 브랜드 색상에 따라 지정할 수 있습니다.
윤곽선 표시
테두리와는 별개로 요소 주위에 윤곽선을 추가합니다. 윤곽선 표시는 다음 매개변수를 사용합니다.
- 윤곽선 너비: 요소 외부의 양식
- 윤곽선 인셋: 요소와 요소 윤곽선 사이의 간격
- 윤곽선 색상: 이미지 또는 브랜드 색상 \에 따라 지정할 수 있습니다.
색상 표시
요소는 색상에 적응하여 상태를 변경할 수 있습니다. 색상 표시에는 다음 매개변수가 사용됩니다.
- 배경 색상: 요소의 표면 색상을 변경합니다.
- 콘텐츠 색상: 노출 영역의 콘텐츠 색상을 변경합니다.
색조 고도
배경 색상은 정적이지만 표면 색상은 변경될 수 있습니다. 고도 수준이 +1~+5인 표면은 기본 색상을 기반으로 한 색상 오버레이를 통해 색조가 조정됩니다. 그러면 표면 기준에 색조 변화가 발생합니다.
색조 표면은 다음과 같은 많은 이점을 제공합니다.
- 고도 효과를 만들어 다양한 요소와 텍스트를 차별화합니다
- 접근성 이점에 대한 대비 설정
- 시각적 몰입도를 높이고 상호작용 요소 간의 전환을 부드럽게 만듭니다.
사용 중지됨
사용 중지 상태에서는 객체를 클릭할 수 없음을 나타내기 위해 배경 색상과 불투명도가 더 낮은 가시도로 표시됩니다.
사용 사례
포커스 가능 요소에는 기본값, 포커스가 있음, 누름 등 3가지 기본 상태가 있으며, 추가 상태(사용 설정됨, 사용 중지됨, 선택됨)가 매트릭스를 형성합니다.
카드
| 기본 계정 | 집중력이 높아진 | 누름 | |
|---|---|---|---|
| 사용 설정 완료 |
|
|
|
버튼
| 기본 계정 | 집중력이 높아진 | 누름 | |
|---|---|---|---|
| 사용 설정 완료 |
|
|
|
| 사용 중지됨 |
|
|
|
칩
| 기본 계정 | 집중력이 높아진 | 누름 | |
|---|---|---|---|
| 사용 설정 완료 |
|
|
|
| 사용 설정됨 + 선택됨 |
|
|
|
| 사용 중지됨 |
|
|
|
| 사용 중지됨 + 선택됨 |
|
|
|