Questi layout canonici sono layout di app collaudati e versatili che offrono un'esperienza utente ottimale su dispositivi con schermi di dimensioni maggiori.
Riquadri
I riquadri consentono di accedere rapidamente alle informazioni e alle azioni di cui gli utenti hanno bisogno per portare a termine le attività. Scorri dal quadrante per vedere i progressi verso i propri obiettivi di fitness, controllare il meteo e molto altro. Avvia un'app o svolgi attività essenziali rapidamente dai riquadri.
Personalizzazione tramite l'uso dei nostri componenti e dello stile
Puoi applicare lo stile del tuo brand a determinati componenti. Sono inclusi il colore principale, l'icona dell'app, il carattere, le icone e qualsiasi asset visivo applicabile all'esperienza del tuo riquadro.
Crea layout adattabili (schermate ad altezza fissa e margini percentuali)
Per adattare il nostro codice e i layout di progettazione a schermi di dimensioni maggiori, abbiamo aggiornato questi elementi in modo da avere un comportamento reattivo incorporato, inclusi margini e spaziatura interna basati sulla percentuale. Se utilizzi i nostri modelli, puoi ereditare questi aggiornamenti automaticamente tramite l'API Tiles e fornire i layout solo 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 uno schermo di dimensioni maggiori, visualizza le nostre indicazioni sui riquadri.
Tutti i modelli sono creati con i due punti di interruzione predefiniti per le dimensioni dello schermo: 192 dp e 225 dp. I margini sono stati impostati su valori percentuali, in base alle dimensioni dello schermo, in modo che le righe riempiano lo spazio disponibile, ma non si estendono troppo lontano e vengano ritagliate dallo schermo curvo nella parte superiore e inferiore. I riquadri hanno un'altezza fissa dello schermo, quindi abbiamo regolato la spaziatura interna per massimizzare lo spazio limitato sullo schermo senza creare ritagli indesiderati.
I due modelli principali, Layout principale e Layout dei contenuti perimetrali (con un anello di avanzamento), hanno margini diversi, ma tutti i layout di progettazione sono progettati per mappare uno di questi. Ci sono tre sezioni principali per ogni riquadro e slot assegnati a ciascuno di questi. In alcuni casi potrebbero essere presenti margini e spaziatura interna aggiuntivi integrati per consentire ai contenuti di riempire lo spazio disponibile, mantenendo al contempo un design bilanciato e di facile consultazione.
Crea esperienze differenziate
La presenza di quattro layout canonici principali, con oltre 80 permutazioni integrate, consente una personalizzazione praticamente senza limiti. I riquadri sono basati su un sistema basato su slot, pertanto puoi sostituire un'area annuncio dal layout canonico con un contenuto a tua scelta. In questo caso, mantieni un comportamento reattivo e segui i nostri suggerimenti di progettazione.
Queste personalizzazioni devono essere limitate e non devono interrompere la struttura del modello di riquadro. per garantire la coerenza quando gli utenti scorrono il carosello di riquadri sui propri dispositivi Wear OS.
Aggiungi un valore dopo il punto di interruzione delle dimensioni su schermi di dimensioni maggiori
Per utilizzare al meglio lo spazio aggiuntivo su schermi di dimensioni maggiori, aggiungi un punto di interruzione delle dimensioni a 225 dp. Questo punto di interruzione consente di mostrare contenuti aggiuntivi, includere più pulsanti o dati o modificare il layout per adattarlo meglio allo schermo più grande.
Layout app a scorrimento e senza scorrimento
Durante la progettazione dei layout adattivi su uno schermo rotondo, le visualizzazioni a scorrimento e senza scorrimento hanno requisiti unici per la scalabilità degli elementi UI e il mantenimento di un layout e di una composizione bilanciati.
Layout app senza scorrimento
Layout canonici e componenti a schermo intero (inclusi contenuti multimediali e fitness)
I layout di visualizzazione dell'app senza scorrimento includono player multimediali, finestre di dialogo di conferma, selettori, utenti passati e schermate speciali di fitness o di monitoraggio che utilizzano indicatori di avanzamento. Puoi limitare l'altezza di qualsiasi schermata per assicurarti che l'utente sia concentrato su un'attività o su un insieme di controlli, anziché dover sfogliare un elenco di opzioni. Per adattarsi ai dispositivi con schermi di dimensioni ridotte, progetta tenendo conto delle dimensioni limitate, garantendo una maggiore leggibilità e adottando lo schermo circolare laddove opportuno.
Linee guida per la reattività (margini percentuali)
Definisci tutti i margini in percentuale e definisci vincoli verticali in modo che i contenuti principali al centro possano allungarsi per riempire l'area di visualizzazione disponibile.
Durante la progettazione è meglio suddividere lo schermo non a scorrimento in una sezione superiore, centrale e inferiore. In questo modo, puoi aggiungere margini interni alla sezione superiore e inferiore per evitare tagli, ma fai in modo che la sezione centrale utilizzi l'intera larghezza dello schermo. Prendi in considerazione l'utilizzo del pulsante rotante di scorrimento per controllare gli elementi dello schermo quando le sue dimensioni sono limitate, dal momento che il solo tocco delle interazioni potrebbe non offrire un'esperienza ottimale.
Crea esperienze differenziate
I layout senza scorrimento sono personalizzabili, ma sono più limitati nella quantità di contenuti che possono essere aggiunti allo schermo e nel tipo di componenti che funzionano meglio. L'uso di IconButtons al posto dei Chip sfrutta al meglio lo spazio limitato e immagini visive come i ProgressIndicators e i punti dati di grandi dimensioni aiutano a comunicare le informazioni chiave sotto forma di grafico.
Tutti gli elementi che abbracciano la cornice dello schermo aumentano automaticamente di conseguenza, aumentandone l'impatto.
Come aggiungere valore dopo il punto di interruzione su schermi più grandi
Quando si crea un design adattabile per schermi di dimensioni maggiori, i layout delle app senza scorrimento ottengono il massimo dallo spazio aggiuntivo sullo schermo. Gli elementi esistenti possono crescere per riempire lo spazio aggiuntivo, migliorando l'usabilità e i componenti e i contenuti possono essere visualizzati dopo un punto di interruzione delle dimensioni dello schermo.
Di seguito sono riportati alcuni esempi di questo comportamento:
- I lettori multimediali possono disporre di pulsanti aggiuntivi o controlli più grandi.
- Le finestre di dialogo di conferma possono visualizzare un'illustrazione o ulteriori informazioni.
- Le schermate di fitness possono ottenere metriche aggiuntive e le dimensioni degli elementi possono aumentare.
Layout delle app a scorrimento
Layout canonici
I layout delle viste dell'app a scorrimento includono elenchi (ScalingLazyColumn) e finestre di dialogo. Questi layout costituiscono la maggior parte delle schermate dell'app e rappresentano una raccolta di componenti che devono adattarsi a schermi di dimensioni maggiori.
Verifica che i componenti siano adattabili, ovvero che riempiano la larghezza disponibile e adotti le regolazioni di ScalingLazyColumn quando è disponibile una quota maggiore dello schermo. Questi layout sono già stati creati in modo reattivo e abbiamo alcuni suggerimenti aggiuntivi per sfruttare ulteriormente i vantaggi dell'inventario ampliato.
Linee guida per la reattività (margini percentuali)
Tutti i margini superiore, inferiore e laterale devono essere definiti in percentuale per evitare tagli e fornire una scalabilità proporzionale degli elementi. Tieni presente che PositionIndicator appare quando l'utente scorre sullo schermo e abbraccia automaticamente la cornice dello schermo a prescindere dalle sue dimensioni.
Crea esperienze differenziate
Le visualizzazioni a scorrimento sono altamente personalizzabili, con la possibilità di aggiungere qualsiasi combinazione di componenti in qualsiasi ordine.
I margini superiore e inferiore possono variare a seconda dei componenti che si trovano nella parte superiore e inferiore. Questo serve a evitare che i contenuti vengano ritagliati dalla curva crescente dello schermo.
Aggiungere un valore dopo il punto di interruzione sugli schermi di grandi dimensioni
Poiché i layout a scorrimento mostrano automaticamente più contenuti che in precedenza erano nascosti below the screen fold, non c'è molto da fare per aggiungere valore. Ogni componente riempie la larghezza disponibile e, in alcuni casi, un componente potrebbe acquisire ulteriori righe di testo (ad esempio schede) oppure allungarsi per riempire la larghezza disponibile (ad esempio i pulsanti delle icone).