I riquadri consentono l'accesso rapido alle informazioni e alle azioni di cui gli utenti hanno bisogno per svolgere le attività. Con uno scorrimento dal quadrante orologio, un utente può vedere i progressi verso i suoi obiettivi di fitness, controllare il meteo e altro ancora. Avvia un'app o svolgi rapidamente le attività essenziali dai riquadri.
Crea design adattabili e ottimizzati
Per aiutarti ad adattare i layout di progettazione alle dimensioni dello schermo più grandi, abbiamo aggiornato il comportamento dei nostri layout e componenti in modo che abbiano un comportamento adattabile integrato, inclusi margini e spaziatura interna basati sulla percentuale.
Se utilizzi i nostri modelli ProtoLayout, puoi ereditare automaticamente questi aggiornamenti tramite l'ultima release beta della libreria Jetpack Wear ProtoLayout. Inoltre, devi fornire solo i layout in cui hai aggiunto contenuti o componenti aggiuntivi dopo un punto di interruzione delle dimensioni dello schermo. Per indicazioni e consigli completi su come sfruttare le dimensioni dello schermo più grandi, consulta le nostre indicazioni sui riquadri. I riquadri hanno un'altezza dello schermo fissa, quindi abbiamo regolato la spaziatura interna per massimizzare lo spazio sullo schermo limitato senza creare ritagli indesiderati.
Verifica che i componenti riempiano la larghezza disponibile
Tutti i componenti devono essere creati in modo adattabile. Se imposti l'altezza e la larghezza su "espandi", riempiono lo spazio disponibile. Includi i margini necessari per evitare che i contenuti vengano ritagliati dallo schermo arrotondato.
Crea design adattivi e differenziati
Per sfruttare al meglio lo spazio aggiuntivo sulle dimensioni dello schermo più grandi, aggiungi un punto di interruzione delle dimensioni a 225 dp. Questo punto di interruzione ti consente di mostrare contenuti aggiuntivi, includere più pulsanti o dati oppure modificare il layout per adattarlo meglio allo schermo più grande.
Per ogni punto di interruzione è necessario un design diverso. Il design dello schermo più grande (225+ dp) potrebbe includere i seguenti elementi aggiuntivi:
Mostra lo slot del titolo precedentemente nascosto
Questa opzione è consigliata per i layout con due righe prima del punto di interruzione, in cui lo slot del titolo deve essere rimosso per garantire il target di tocco minimo di 48 dp.
Aumenta le dimensioni o modifica lo stato dei componenti esistenti
Questa operazione può essere eseguita per mostrare maggiori dettagli o rendere i contenuti più visibili a colpo d'occhio.
Aggiungi slot di componenti all'interno del layout corrente
Aggiungendo componenti, il layout offre più opzioni o dettagli aggiuntivi. Assicurati che i contenuti rimangano visibili a colpo d'occhio.
Aggiungi altri contenuti nella parte inferiore
In alcuni casi, è più logico aggiungere pulsanti di azione o contenuti nella sezione inferiore anziché aggiungere componenti nello slot principale.
Attenzione: una dimensione del display più grande non deve mai mostrare meno informazioni di quelle più piccole. Questo è particolarmente importante per i comportamenti personalizzati aggiunti al punto di interruzione.
Un esempio comune è quando le dimensioni dei componenti o del testo vengono aumentate oltre il punto di interruzione e finiscono per mostrare meno informazioni sugli schermi più grandi. Gli schermi devono sempre mostrare più valore con l'aumentare delle dimensioni.
Comportamento adattabile
Il comportamento adattabile dipende dai tre slot (sezioni) del layout.
Slot del titolo e dell'icona dell'app
Non viene apportata alcuna modifica al comportamento dell'icona dell'app fornita dal sistema. Lo slot del titolo si adatta automaticamente alle dimensioni dello schermo più grandi, mostrando caratteri aggiuntivi. Nella sezione superiore sono presenti margini interni proporzionali (percentuali) per evitare ritagli quando le dimensioni dello schermo aumentano.
Slot principale (componenti)
Tutti i componenti all'interno dello slot principale devono impostare la larghezza e l'altezza su "espandi" in modo che si adattino automaticamente alle dimensioni dello schermo più grandi. Nello slot principale e in ogni riga all'interno di questo slot in alcuni casi sono presenti margini interni proporzionali (percentuali) per evitare ritagli quando le dimensioni dello schermo aumentano. Se utilizzi una combinazione di raggio dell'angolo e layout, lo slot principale potrebbe richiedere margini più grandi.
Slot inferiore
Non viene apportata alcuna modifica al comportamento del pulsante o del testo nella parte inferiore, ma la larghezza del pulsante e delle caselle di testo si adatta automaticamente alle dimensioni dello schermo più grandi e acquisisce caratteri. Nello slot inferiore sono presenti margini interni proporzionali (percentuali) per evitare ritagli quando le dimensioni dello schermo aumentano. Quando non è presente uno slot inferiore, viene aggiunto automaticamente un margine predefinito.
Crea esperienze differenziate
Un layout completamente personalizzabile, con 60 o più permutazioni integrate, consente una personalizzazione praticamente illimitata. I riquadri sono basati su un sistema a slot, quindi puoi sostituire uno slot del layout canonico con qualsiasi contenuto o componente e impostare il componente su una delle numerose varianti e combinazioni di colori. In questo caso, mantieni il comportamento adattabile e segui i nostri consigli di progettazione.
Queste personalizzazioni devono essere limitate e non devono discostarsi dal modello di riquadro. In questo modo si mantiene la coerenza quando gli utenti scorrono il carosello dei riquadri sui propri dispositivi Wear OS.