Sistema di messa a fuoco

A differenza delle interfacce touch, la TV si basa principalmente su diversi stati principali (predefinito, attivo, premuto) per attirare l'attenzione dell'utente sull'elemento attivo. Questo è il punto di partenza per la navigazione.

In evidenza

• Un sistema di messa a fuoco è composto da sezioni di elementi attivabili.
• Gli indicatori di messa a fuoco sono dispositivi visivi che mettono in evidenza gli elementi attivi.
• L'indicazione della scala regola un elemento in base al fattore x quando viene selezionato o selezionato.
• Mentre il colore di sfondo è statico, il colore della superficie può cambiare quando viene messo a fuoco.

Fulcro del video

Il focus è la definizione dello stato chiave per la progettazione di un televisore. La navigazione è limitata alle interazioni con il D-Pad disponibili sul telecomando. Gli utenti possono usare i tasti freccia per spostarsi, il pulsante centrale per selezionare e il tasto Indietro per tornare indietro. Il telecomando consente agli utenti di spostarsi attraverso un'interazione alla volta. Il cambiamento di stato di un elemento è rappresentato tramite indicatori di interesse per aiutare l'utente nella visualizzazione.

Elementi e gruppi attivabili

Gli "elementi attivabili" sono parte integrante dell'interfaccia TV. Gli "Elementi su cui è possibile impostare lo stato attivo" possono essere qualsiasi componente come pulsanti, schede, elementi di elenco o una superficie definita da un personalizzato. In un dato momento, gli utenti devono poter concentrarsi su un solo elemento attivabile.

I "gruppi attivabili", invece, contengono uno o più "elementi attivabili". Ci possono essere tutti i "gruppi attivabili" nidificati. I gruppi attivabili vengono utilizzati per raggruppare logicamente diversi elementi attivabili per una navigazione facile da usare.

Indicatori di interesse

Gli indicatori di stato attivo sono una visualizzazione distinta di un elemento attivo. Quando viene selezionato, un elemento entra nello stato "premuto" fino a quando non viene rilasciato il pulsante del telecomando.

Ogni stato di un elemento attivabile viene configurato regolando le seguenti proprietà:

• Scala: modifica le dimensioni di un elemento attivo.
• Bordo: disegna un contorno intorno all'elemento.
• Incandescenza: crea un'ombra sotto l'elemento (comunemente utilizzata sulle schede).
• Colori: modifica il colore dello sfondo e dei contenuti dell'elemento.

Indicazione della scala

Ridimensiona l'elemento quando viene selezionato. I valori di scalabilità predefiniti sono: 1,025, 1,05 e 1,1x. Utilizza questa indicazione per un feedback chiara sulla navigazione. I valori di scala per i diversi elementi possono variare in base alle loro dimensioni.

Indicazione luminescenza

Aggiunge una luce o un'ombra diffusa intorno all'elemento. L'indicazione incandescenza prevede i seguenti parametri:

1. Livello di incandescenza: suggerisce l'elevazione dell'elemento, che va da 2 dp a 32 dp
2. Colore brillante: può essere specificato in base al colore dell'immagine o del brand

Indicazione dei contorni

Aggiunge un contorno intorno all'elemento indipendente dal bordo. L'indicazione dei contorni utilizza i seguenti parametri:

1. Larghezza contorno: moduli esterni all'elemento
2. Riquadro contorno: spaziatura tra l'elemento e il relativo contorno
3. Colore dei contorni: può essere specificato in base al colore dell'immagine o del brand \

Indicazione colore

Gli elementi possono cambiare stato adattandosi ai colori. L'indicazione del colore utilizza i seguenti parametri:

1. Colore sfondo: cambia il colore della superficie di un elemento.
2. Colore dei contenuti: cambia il colore dei contenuti su una superficie.

Elevazione tonale

Anche se il colore di sfondo è statico, il colore della superficie può cambiare. Le superfici ai livelli di altitudine da +1 a +5 vengono colorate tramite overlay di colori in base al colore principale. Questo introduce una variazione tonale nella base della superficie.

Le superfici tonali offrono molti vantaggi:

• Crea l'effetto di elevazione per differenziare i vari elementi e testi
• Stabilisci un contrasto per i vantaggi dell'accessibilità
• Crea coinvolgimento visivo e attenua le transizioni tra gli elementi interattivi

Estensione disattivata

In stato disattivato, il colore di sfondo e l'opacità mostrano un'evidenza minore per indicare che l'oggetto non è cliccabile.

casi d'uso

Un elemento attivabile ha i 3 stati principali: predefinito, attivo e premuto, con stati aggiuntivi: abilitato, disabilitato e selezionato in forma di matrice.

Schede

	Predefinito	Concentrazione	Premuti
Attivato

Pulsanti

	Predefinito	Concentrazione	Premuti
Attivato
Estensione disattivata

Chip

	Predefinito	Concentrazione	Premuti
Attivato
Attivate + Selezionate
Estensione disattivata
Disattivato + selezionato