Sistem fokus

Tidak seperti antarmuka sentuh, TV sangat bergantung pada berbagai status utama (default, terfokus, ditekan) untuk menarik perhatian pengguna ke elemen yang difokuskan. Ini berfungsi sebagai titik awal untuk navigasi.

Sorotan

  • Sistem fokus terdiri dari bagian-bagian elemen yang dapat difokuskan.
  • Indikator fokus adalah perangkat visual yang menekankan elemen yang difokuskan.
  • Indikasi skala menyesuaikan elemen dengan faktor x saat difokuskan atau dipilih.
  • Jika warna latar belakang bersifat statis, warna permukaan dapat berubah saat difokuskan.

Fokus

Fokus adalah definisi status utama untuk desain TV. Navigasi dibatasi pada interaksi D-Pad yang tersedia di remote control. Pengguna dapat menggunakan tombol panah untuk berpindah, tombol tengah untuk memilih, dan tombol kembali untuk kembali. Remote memungkinkan pengguna untuk melakukan interaksi satu per satu. Perubahan status elemen direpresentasikan menggunakan indikator fokus untuk membantu pengguna dalam visualisasi.

Elemen dan grup yang dapat difokuskan

"Elemen yang dapat difokuskan" adalah bagian integral dari antarmuka TV. "Elemen yang dapat difokuskan" dapat berupa komponen apa pun seperti tombol, kartu, item daftar, atau platform yang ditentukan secara khusus. Pada waktu tertentu, pengguna harus dapat berfokus pada satu elemen yang dapat difokuskan saja.

Di sisi lain, "Grup yang dapat difokuskan", berisi satu atau beberapa "elemen yang dapat difokuskan". Anda bisa memiliki sejumlah "grup yang dapat difokuskan" bersarang. Grup yang dapat difokuskan digunakan untuk mengelompokkan berbagai elemen yang dapat difokuskan secara logis untuk navigasi yang mudah digunakan.

Anatomi Fokus

Indikator fokus

Indikator fokus adalah visualisasi berbeda dari elemen yang difokuskan. Saat dipilih, elemen akan memasuki status "ditekan" hingga tombol jarak jauh dilepaskan.

Setiap status elemen yang dapat difokuskan dikonfigurasi dengan menyesuaikan properti berikut:

  • Skala — Mengubah ukuran elemen yang difokuskan
  • Batas — Menggambar garis batas di sekitar elemen
  • Glow — Membuat bayangan pada elemen (biasa digunakan pada kartu)
  • Warna — Mengubah latar belakang elemen dan warna konten

Jenis Fokus

Indikasi skala

Menskalakan elemen saat difokuskan atau dipilih. Nilai penskalaan default adalah 1.025, 1.05, dan 1.1x. Gunakan indikasi ini untuk masukan yang jelas tentang navigasi. Nilai penskalaan untuk berbagai elemen dapat bervariasi berdasarkan ukurannya.

Skala fokus

Indikasi kilau

Menambahkan glow atau bayangan yang tersebar di sekitar elemen. Indikator glow menggunakan parameter berikut:

  1. Glow level: menyarankan elevasi elemen, mulai dari 2dp - 32dp
  2. Glow color: dapat ditentukan sesuai dengan gambar atau warna merek

Fokus bercahaya

Indikasi garis besar

Menambahkan garis batas di sekitar elemen yang independen dari batas. Indikasi outline menggunakan parameter berikut:

  1. Lebar garis batas: bentuk di luar elemen
  2. Inset garis batas: jarak antara elemen dan garis luarnya
  3. Warna garis batas: dapat ditentukan sesuai dengan gambar atau warna merek \

Struktur fokus

Indikasi warna

Elemen dapat mengubah status dengan beradaptasi dengan warna. Indikasi warna menggunakan parameter berikut:

  1. Warna latar belakang: Mengubah warna permukaan elemen
  2. Warna konten: Mengubah warna konten di atas permukaan

Warna fokus

Elevasi tonal

Jika warna latar belakang bersifat statis, warna permukaan dapat berubah. Permukaan pada tingkat elevasi +1 hingga +5 diberi warna melalui overlay warna berdasarkan warna primer. Hal ini memperkenalkan variasi tonal ke dasar pengukuran permukaan.

Permukaan tonal memberikan banyak manfaat:

  • Membuat efek elevasi untuk membedakan berbagai elemen dan teks
  • Menetapkan kontras untuk manfaat aksesibilitas
  • Menciptakan interaksi visual, dan memperhalus transisi antara elemen interaktif

Nonaktif

Dalam status dinonaktifkan, warna dan opasitas latar belakang menampilkan penjelasan yang lebih rendah untuk menyatakan bahwa objek tidak dapat diklik.

Kasus penggunaan

Elemen yang dapat difokuskan memiliki 3 status utama: default, difokuskan, dan ditekan, dengan status tambahan: diaktifkan, dinonaktifkan, dan dipilih yang membentuk matriks.

Kartu

Default Fokus Ditekan
Aktif Penyitaan kartu Fokus pada kartu Kartu ditekan

Tombol

Default Fokus Ditekan
Aktif Tombol Diaktifkan Secara Default Tombol Diaktifkan Difokus Tombol Aktif Ditekan
Nonaktif Tombol dinonaktifkan secara default Tombol dinonaktifkan dengan fokus Tombol dinonaktifkan ditekan

Chip

Default Fokus Ditekan
Aktif Chip yang diaktifkan default Chip yang diaktifkan difokuskan Chip yang diaktifkan ditekan
Diaktifkan + Dipilih Chip diaktifkan default yang dipilih Chip yang dipilih dan difokuskan Chip yang diaktifkan dipilih ditekan
Nonaktif Chip dinonaktifkan secara default Chip dinonaktifkan dengan fokus Chip yang dinonaktifkan ditekan
Dinonaktifkan + dipilih Chip dinonaktifkan secara default yang dipilih Chip dinonaktifkan untuk difokuskan Chip yang dinonaktifkan dipilih ditekan