iPhone Duo: dove vanno le barre della tua app

Lo schermo esterno di iPhone Duo è più largo e meno alto di quello di un iPhone. Apple ne ha ricavato una regola semplice: la barra di navigazione, la TabBar e i pulsanti lasciano la parte alta e la parte bassa dello schermo per una colonna sul lato, insieme alla barra di stato e alla fotocamera. L'altezza torna al contenuto, e i controlli restano a portata di mano. Apple chiama questa colonna «vertical controls».

Il sistema, però, sposta solo le proprie barre. Quelle di un'app GoodBarber nascono dal suo design system, e il sistema le lascia dove l'app le ha messe. La domanda era quindi prima di tutto di design: cosa diventa una TabBar quando passa da una riga a una colonna, e come resta riconoscibile un'app in una striscia così stretta? Il rail doveva restare l'app, non diventare una barra di Apple.

Prima scelta di design per le app GoodBarber: una sola larghezza per tutto ciò che entra nel rail di iPhone Duo, quella di una scorciatoia, con la sua icona al centro. Il tasto Indietro, la ricerca, i preferiti e ogni scheda della TabBar stanno nella stessa casella, e la colonna si legge in un colpo d'occhio. Il rail porta solo icone; i loro nomi non spariscono per questo, VoiceOver li legge. Su Eastside, l'app dimostrativa di una scuola di musica, la colonna resta calma e lascia in primo piano i colori degli avvisi.

Seconda scelta, quella di Apple: ciò che stava in alto resta in alto, ciò che stava in basso resta in basso. Il tasto Indietro e le scorciatoie aprono la colonna, la TabBar la chiude. Chi conosce l'app sul proprio telefono non deve imparare niente di nuovo: la sua mappa dell'app è la stessa, ha solo ruotato.

In un articolo, un'app GoodBarber su iPhone Duo tiene solo ciò che serve al testo. La TabBar si fa da parte, come sul telefono non appena uno schermo ha un tasto Indietro; quel tasto sale da solo in cima al rail, e una capsula in basso raccoglie gli strumenti del lettore: commentare, condividere, ingrandire il testo, salvare per dopo. Le azioni che vanno insieme condividono la capsula. All'apertura dell'articolo, le capsule del rail cambiano in dissolvenza, al ritmo della pagina che arriva: il rail segue la navigazione in un solo movimento.

La foto di testata, invece, sale fino in cima allo schermo e passa sotto il rail. Le icone di una barra trasparente sono spesso chiare, pensate per posarsi su un'immagine; senza sfondo, finirebbero bianche su una pagina bianca. Per questo ogni capsula mantiene uno sfondo, né bianco puro né nero puro, ma un tono attenuato, tinto del colore delle sue icone, con il contrasto che chiede l'accessibilità. Il contrasto giusto piuttosto che il più forte: uno sfondo sfumato è più curato.

In un'app GoodBarber, ogni barra è disegnata dall'app: porta i propri colori e la propria forma, e il rail li conserva. Ogni capsula prende lo sfondo della barra da cui proviene. La sua forma segue quella della tua TabBar, dagli angoli retti alla pillola, su tutti gli schermi dell'app, compresi quelli in cui la TabBar non compare. Uno accanto all'altro, i rail di Eastside, Tweed & Cheviot e The Current non parlano la stessa lingua visiva, ed è voluto.

Il motore di GoodBarber fa il resto. Chiede al sistema lo spazio di una barra su quel lato, che evita già la fotocamera, e vi posa le capsule nell'ordine dello schermo. Il rail segue il design che hai già, senza impostazioni da aggiungere.

Dal back office, ricompila la tua app iOS perché includa il rail; l'aggiornamento arriva ai tuoi utenti una volta pubblicato, dopo la revisione dell'App Store. Niente da ridisegnare, niente da impostare. La tua app Android, la tua PWA e la tua app per iPad restano come sono.

Per vedere il rail in movimento, apri e chiudi iPhone Duo sulla nostra pagina dedicata. Cosa cambia per la tua app, da uno schermo all'altro, lo trovi nel nostro articolo di lancio. Le regole di Apple e le loro fonti sono raccolte, in inglese, nelle schede Where the bars go e Custom bars di DuoApps. E se non hai ancora un'app, crea la tua.