Le visualizzazioni non scorrevoli si concentrano su informazioni rapide e offrono valore agli utenti con poca o nessuna interazione. Per questo motivo, può essere difficile integrare il comportamento reattivo in questi layout.
Componenti di layout non scorrevoli preimpostati
Finestra di dialogo
Una finestra di dialogo è una sovrapposizione temporanea che occupa l'intero schermo. Consente agli utenti di eseguire una singola azione.
- Le finestre di dialogo ti aiutano a verificare che i contenuti siano stati presi in considerazione.
- Le finestre di dialogo devono comunicare le informazioni in modo diretto e devono essere dedicate al completamento di un'attività.
- Le finestre di dialogo devono essere visualizzate in risposta a un'attività o un'azione dell'utente, con informazioni pertinenti o contestuali.
Overlay di conferma
La sovrapposizione di conferma mostra un messaggio di conferma all'utente per un breve periodo. Utilizza questo componente per attirare l'attenzione dell'utente dopo l'esecuzione di un'azione.
Apri su smartphone
L'overlay Apri sullo smartphone viene attivato quando l'utente sceglie di continuare il suo percorso su uno smartphone. L'overlay ha un indicatore di avanzamento e comunica all'utente quando controllare lo smartphone.
Stepper
Gli stepper offrono un'esperienza di controllo a schermo intero che consente agli utenti di effettuare una selezione da un intervallo di valori. Possono controllare l'interazione utilizzando i pulsanti o la corona e il livello specifico viene mostrato utilizzando un indicatore di livello curvo.
Selettore data/ora
I selettori consentono agli utenti di scegliere tra un numero finito di elementi in sezioni scorrevoli. Il selettore dell'ora ha fino a tre colonne, a seconda che i secondi siano disponibili o che l'orologio sia a 12 o 24 ore. Gli utenti interagiscono con ogni colonna alla volta, effettuando la selezione lasciando il numero in primo piano prima di continuare.
Selettore della data
I selettori consentono agli utenti di scegliere tra un numero finito di elementi in sezioni scorrevoli. Il selettore della data ha fino a tre colonne, con un ordine intercambiabile tra data, ora e anno, a seconda del caso d'uso. I selettori di date richiedono stringhe di contenuti più lunghe, quindi viene visualizzata una sola colonna alla volta, dando un'idea di cosa si trova a sinistra o a destra. Gli utenti interagiscono con ogni colonna alla volta, effettuando la selezione lasciando il numero in evidenza prima di continuare.
Esempi di layout personalizzati non scorrevoli
Le schermate delle app non scorrevoli non sono limitate ai componenti impostati. Puoi combinare una serie di elementi per creare il layout che preferisci.
Devi tenere presente lo spazio limitato su una schermata non scorrevole e l'utilizzo di margini e spaziatura interna reattivi (percentuali) per utilizzare lo spazio disponibile sullo schermo. Puoi anche prendere in considerazione l'applicazione di un punto di interruzione a 225 dp per introdurre contenuti aggiuntivi o rendere più visibili i contenuti esistenti su schermi più grandi.
Maps
Overlay di emergenza
Avviso di emergenza
Comportamento reattivo e adattivo
Tutti i componenti della libreria Compose si adattano automaticamente alle dimensioni dello schermo più ampie e aumentano in larghezza e altezza. Per queste visualizzazioni in particolare, l'utilizzo dei breakpoint può offrire un'esperienza particolarmente ricca e preziosa per tutti gli utenti.
Per molti pulsanti, schede e margini della UI, allunga e riempi lo spazio per le diverse dimensioni dello schermo per sfruttare lo spazio disponibile nella UI e creare un layout ben bilanciato.
Utilizza il seguente elenco di controllo per verificare che i parametri adattabili siano definiti correttamente:
- Crea layout flessibili che abbiano un aspetto ragionevole su tutte le dimensioni dello schermo.
- Applica i margini superiore, inferiore e laterali consigliati.
- Definisci i margini in valori percentuali nei punti in cui i contenuti potrebbero altrimenti essere tagliati.
- Utilizza i vincoli di layout in modo che gli elementi sfruttino al meglio lo spazio all'interno dello schermo e mantengano l'equilibrio tra le diverse dimensioni dei dispositivi.
- Se utilizzato, adatta il testo con indicazione oraria, ma non sovrapporre la sezione superiore della pagina.
- Valuta la possibilità di utilizzare pulsanti che occupano tutto lo spazio disponibile per sfruttare al meglio lo spazio limitato.
- Valuta la possibilità di applicare un punto di interruzione a 225 dp per introdurre contenuti aggiuntivi o rendere più visibili i contenuti esistenti su schermi più grandi.
Più percorsi di pagine senza scorrimento che utilizzano la paginazione
Negli scenari in cui un'esperienza richiede più contenuti, ma vuole mantenere un layout senza scorrimento, valuta un layout multipagina con paginazione verticale o orizzontale.
