L'interfaccia utente (UI) della conferma protetta è costituita da sei elementi obbligatori. Puoi personalizzare alcuni elementi, ma devono soddisfare alcuni requisiti. Segui queste indicazioni quando personalizzi la UI e assicurati che i requisiti siano soddisfatti. Se un elemento è contrassegnato con Requisito:, deve utilizzare la proprietà elencata.
Le seguenti linee guida utilizzano la famiglia di caratteri Roboto, che puoi scaricare da Google Fonts.
UI con pulsanti hardware
Android Protected Confirmation può utilizzare i tasti hardware del dispositivo per confermare e annullare l'input.
Figura 1. Layout del design.
Icone
Questa sezione descrive le icone utilizzate nell'interfaccia utente.
Icona di uno scudo
| Icona |  |
|---|---|
| Scarica | Scudo di sicurezza |
| Dimensioni icona | 32dp |
Icona a forma di freccia
| Icona |  |
|---|---|
| Scarica | Freccia destra della tastiera |
| Dimensioni icona | 24dp |
| Raggio d'angolo del contenitore | 4dp |
Messaggi di input
In Conferma protetta vengono utilizzati due tipi di input: conferma e annulla.
Stringa di conferma
Il messaggio deve indicare quale pulsante viene utilizzato come conferma.
| Messaggio | Premi due volte (pulsante) per confermare |
|---|---|
| Lunghezza massima | Requisito: il messaggio di conferma non può occupare più di due righe. |
| Colore | #000000 87% |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 14sp |
| Altezza riga | Requisito: 20 dp |
Annulla stringa
Il messaggio di annullamento deve essere chiaramente visibile e facilmente distinguibile dal pulsante di conferma. Utilizza le seguenti proprietà insieme alla parola singola Cancel:
| Messaggio | Annulla |
|---|---|
| Colore | #000000 87% |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 14sp |
| Altezza riga | Requisito: 20 dp |
Testo intestazione
Includi il testo dell'intestazione Android Protected Confirmation nell'interfaccia utente attendibile per identificare la funzionalità. Utilizza le seguenti proprietà per il testo dell'intestazione:
| Messaggio | Requisito: Android Protected Confirmation |
|---|---|
| Colore | #000000 87% |
| Tipo di font | Roboto-Regular |
| Dimensione carattere | Requisito: 22sp |
| Altezza riga | Requisito: 28 dp |
Corpo del testo
Utilizza le seguenti proprietà quando implementi l'elemento del corpo del testo. Il messaggio effettivo viene scritto dallo sviluppatore dell'API (sviluppatore di app).
| Messaggio | Il corpo del testo è fornito dallo sviluppatore di app che chiama Protected Confirmation. |
|---|---|
| Colore | #000000 87% |
| Tipo di font | Roboto-Regular |
| Dimensione carattere | Requisito: 16sp |
| Altezza riga | Requisito: 24 dp |
Testo sottotitolo
Utilizza il testo del sottotitolo per spiegare perché l'utente visualizza la schermata di conferma protetta. Posiziona questo testo nella parte inferiore dello schermo e utilizza le seguenti proprietà:
| Messaggio | Requisito: questa conferma fornisce un ulteriore livello di sicurezza per l'azione che stai per intraprendere. |
|---|---|
| Lunghezza massima | Requisito: il messaggio di conferma non deve superare le quattro righe. |
| Colore | #000000 87% |
| Tipo di font | Roboto-Regular |
| Dimensione carattere | Requisito: 14sp |
| Altezza riga | Requisito: 20 dp |
UI con pulsanti software
Android Protected Confirmation può utilizzare i pulsanti software per confermare e annullare l'input. Le seguenti linee guida descrivono la UI utilizzando i pulsanti software:
Figura 2. Layout di progettazione del software dell'interfaccia utente di conferma.
Icona di uno scudo
Scarica l'asset dell'icona da Android Protected Confirmation Shield Icon. Posiziona l'icona nella parte superiore dello schermo.
Figura 3. Icona a forma di scudo.
L'icona a forma di scudo di conferma protetta è un elemento obbligatorio. Puoi personalizzare il colore dello scudo, ma deve essere chiaramente visibile.
Input
Figura 4. Dimensioni dei pulsanti software.
Utilizza la forma di un pulsante principale e secondario per gli input di conferma e annullamento.
| Etichetta pulsante | Utilizza la maiuscola iniziale per le etichette dei pulsanti. |
|---|---|
| Raggio del pulsante | 4dp |
| Colore intenso | #1a73e8 |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 14sp |
Testo intestazione
Includi il testo dell'intestazione Android Protected Confirmation nell'interfaccia utente attendibile per identificare la funzionalità. Utilizza le seguenti proprietà per il testo dell'intestazione:
| Messaggio | Requisito: Android Protected Confirmation |
|---|---|
| Colore | #000000 87% |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 24sp |
| Altezza riga | Requisito: 20 dp |
Corpo del testo
Utilizza le seguenti proprietà quando implementi l'elemento del corpo del testo. Il messaggio effettivo è scritto dallo sviluppatore di app.
| Messaggio | Il corpo del testo è fornito dallo sviluppatore di app che chiama la conferma protetta. |
|---|---|
| Colore | #000000 87% |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 16sp |
| Altezza riga | Requisito: 24 dp |
Testo sottotitolo
Utilizza il testo del sottotitolo per spiegare perché l'utente visualizza la schermata di conferma protetta. Posiziona questo testo nella parte inferiore dello schermo e utilizza le seguenti proprietà:
| Messaggio | Requisito: questa conferma fornisce un ulteriore livello di sicurezza per l'azione che stai per intraprendere. |
|---|---|
| Lunghezza massima | Requisito: il messaggio di conferma non deve superare le quattro righe. |
| Colore | #000000 54% |
| Tipo di font | Roboto-Medium |
| Dimensione carattere | Requisito: 14sp |
| Altezza riga | Requisito: 20 dp |
Localizzazione
Puoi trovare le localizzazioni per i componenti descritti in un'implementazione C autonoma di una tabella di ricerca nell'ambito di AOSP.