Un’interfaccia utente ancora più reattiva
Le lezioni imparate dalle precedenti versioni di Android, dal Web mobile e dagli ambienti desktop valgono ancora per Android N. Progettare un’
interfaccia utente reattiva rappresenta ancora un primo passo importante verso la realizzazione di un’esperienza multi-window straordinaria.
L’interfaccia utente reattiva è quella che si adatta alle dimensioni fornite, scegliendo la migliore rappresentazione del contenuto e gli
schemi di navigazione adatti ad offrire un’incredibile esperienza utente su qualsiasi dispositivo. Per ulteriori informazioni su come progettare e compilare un’efficace interfaccia utente reattiva ti segnaliamo il
blog post Building a Responsive UI.
Adeguamento del layout
Dal momento che il layout che stai progettando deve funzionare su schermi di tutte le dimensioni, da quelli più grandi a quelli più piccoli, è importante rendere il ridimensionamento una transizione il più semplice e omogenea possibile come indicato nelle
linee guida sul layout per gli schermi divisi. Se disponi già di un layout del genere per il passaggio tra i dispositivi mobili e i tablet, scoprirai che molto del lavoro è già fatto.
Tuttavia, se i tuoi layout per i dispositivi mobili e i tablet sono molto diversi e se non è possibile realizzare il passaggio tra i due in modo semplice, non è opportuno effettuare la transizione tra di essi durante il ridimensionamento. Al contrario, è consigliabile concentrarsi su una riduzione proporzionale dell’interfaccia utente dei tablet usando gli stessi schemi di UI reattiva. In questo modo gli utenti non devono riapprendere l’interfaccia utente quando che ridimensionano la tua app.
Tieni presente che gli
attributi di layout minimalHeight e minimalWidth ti consentono di impostare una dimensione minima che desideri sia segnalata alla tua Attività, ma non significa che l’utente possa ridurre ulteriormente le dimensioni della tua attività, in realtà significa che l’attività verrà tagliata alle dimensioni richieste dall’utente, spostando potenzialmente gli elementi della tua interfaccia utente all’esterno dello schermo. Sforzati di supportare fino a una dimensione minima 220x220 dp.
Configurazioni di progettazione da prendere in considerazione
Benché molte delle dimensioni e delle proporzioni possibili in multi-window siano simili a quelle deii dispositivi esistenti (un terzo dello schermo di un tablet in orizzontale ha dimensioni simili a quelle dello schermo di un cellulare), vi sono alcune configurazioni molto più diffuse quando si contempla il multi-window.
Il primo è un layout da 16x9 sui dispositivi mobili in orientamento verticale. In questo caso lo spazio verticale è estremamente limitato. Se hai determinati elementi fissi impilati uno sull’altro (una barra degli strumenti, contenuto scorrevole e una barra di navigazione in basso), potresti scoprire che non è rimasto effettivamente spazio per il contenuto scorrevole, la parte più importante!
Il secondo caso da valutare è il layout al 34,15% sui tablet. Le proporzioni “molto larghe” in orientamento dispositivo verticale o “molto lunghe” in orientamento dispositivo orizzontale sono più estreme rispetto a quanto si rileva sui dispositivi esistenti. Prendi in considerazione la possibilità di usare i tuoi layout mobili come punto di partenza per questa configurazione.
Schemi da evitare
Quando si parla di multi-window, vi sono alcuni schemi che è preferibile evitare.
Il primo riguarda le interazioni dell’interfaccia utente che fanno affidamento sullo scorrimento dal bordo dello schermo. Questo si è già rivelato un problema nel caso della barra di navigazione su schermo predominante su numerosi dispositivi (come i dispositivi Nexus), ma lo è ancora di più in split-screen mode. Dal momento che non vi è (intenzionalmente) alcun modo per determinare se l’attività si trova in alto o in basso, a sinistra o a destra evita che lo scorrimento dal bordo sia l’unico modo per accedere alle funzionalità nella tua app. Ciò non significa che devi evitarlo del tutto, accertati solo che vi sia un’alternativa. Un buon esempio di questo caso è il
pulsante di azione mobile temporaneo: un movimento di scorrimento dal bordo apre il pulsante, ma questo è accessibile anche premendo l’icona hamburger nella barra degli strumenti.
La seconda possibilità è quella di disabilitare completamente il multi-window. Sebbene in alcuni casi questo approccio abbia sicuramente senso (ad esempio, nel caso di un’esperienza fondamentalmente immersiva come un gioco), vi sono anche dei casi in cui la tua attività e qualsiasi altra attività da essa lanciata siano forzate a supportare il multi-window. Come indicato nel
blog post Preparing for Multi-Window, quando supporti app esterne che lanciano la tua attività, questa eredita le proprietà multi-window dell’attività chiamante.
Progettare per Multi-Window significa progettare per tutti i dispositivi
Creare un’interfaccia utente reattiva in grado di adattarsi allo spazio disponibile è essenziale per ricavare un’ottima esperienza multi-window ma è anche qualcosa di cui possono beneficiare tutti i tuoi utenti, indipendentemente dal dispositivo Android che utilizzano tra tutti quelli a disposizione.
È per questo che ti invitiamo a sfruttare questa opportunità per partecipare a #BuildBetterApps
Per ulteriori informazioni segui la
Android Development Patterns Collection.
