La scorsa settimana, in occasione del The Android Show | I/O Edition, abbiamo avuto modo di conoscere ufficialmente il Material 3 Expressive, la rinnovata filosofia di design targata Google che nei prossimi mesi raggiungerà il sistema operativo Android e le app, a partire da quelle del colosso di Mountain View.
In generale, abbiamo già parlato delle peculiarità della nuova filosofia di design. Oggi, invece, andiamo a concentrarci in particolare su uno degli elementi che sono stati rinnovati e arricchiranno le app: parliamo delle barre degli strumenti, agganciate o flottanti.
Material 3 Expressive: al debutto le barre degli strumenti flottanti
Ci sono voluti anni di ricerca e sviluppo ma, alla fine, Google ha “partorito” il Material 3 Expressive, la nuova filosofia di design “audace” e studiata nei minimi dettagli con il chiaro obiettivo di dare una bella svecchiata all’estetica delle app per Android (e del sistema operativo stesso).
Animazioni più pastose e armoniose, giochi con le sfocature, colori più “vibranti” dove (e quando) è necessario, più alternative in ambito font (con l’aggiunta del nuovo Google Sans Flex), barre di ricerca più grandi e, come anticipato, barre degli strumenti, vero focus di questo contenuto: si tratta di un componente che mostra “le azioni più frequenti relative alla pagina corrente“.
Abbiamo due tipologie di barre degli strumenti: le (più) classiche barre degli strumenti agganciate, che si estendono per l’intera larghezza della finestra e sono pensate per quelle app dove le azioni a disposizione degli utenti rimangono sempre le stesse in tutte le pagine dell’app, e le nuove barre degli strumenti flottanti, che si posizionano sopra al testo e sono pensate per quelle azioni che cambiano in base al contesto della pagina specifica.
All’interno delle app, una barra degli strumenti flottante può essere abbinata a un FAB (Floating Action Button), il pulsante che consente di avviare un’azione specifica o aprire un menù con maggiori funzioni.
Le barre degli strumenti flottanti, inoltre, potranno essere sfruttate in altre situazioni:
- la “navigazione” in quelle app che, ad esempio, mostrano dati basati sul tempo, consentendo agli utenti di spostarsi tra visualizzazione per giorno, per settimana, per mese o per anno;
- come espediente per liberare spazio dalla schermata, mostrando tasti funzione (condivisione/modifica) strettamente collegati al contenuto visualizzato (ad esempio, qualcosa del genere dovrebbe essere aggiunto a Google Foto nella visualizzazione per album).
Le barre degli strumenti flottanti possono poi essere posizionate anche in verticale, aspetto utile soprattutto quando lo schermo è ruotato in posizione landscape o abbiamo a che fare con un dispositivo dal grande schermo (vedi i tablet o gli smartphone pieghevoli), e sono pensate per non risultare molto larghe (a prescindere dalla larghezza dello schermo): Big G, infatti, consiglia di affidarsi a un menù di overlow (i tre puntini) per le azioni meno importanti.
Oltre a una serie di misure pensate sul fronte dell’accessibilità, c’è poi molta enfasi sul discorso colore. Gli sviluppatori possono optare per uno schema di colori “standard”, pensato per far sì che l’attenzione degli utenti si focalizzi sul contenuto presente sulla pagina, o per uno schema di colori “vibrante“, pensato per attirare l’attenzione degli utenti proprio sui controlli della barra degli strumenti.
E le care e vecchie barre di navigazione?
Scorrendo la documentazione del Material 3 Expressive, scopriamo che Google sconsiglia fortemente di abbinare una barra degli strumenti flottante a una barra di navigazione (ovvero la barra inferiore) nella stessa pagina.
Il team suggerisce di sfruttare la seconda nella pagina iniziale delle app e la prima nelle pagine successive, quelle in cui gli utenti devono effettuare azioni legate al contenuto presente a schermo. La seguente immagine, ad esempio, mostra il “giusto utilizzo” delle due componenti in una ipotetica app per la posta elettronica.
Scorrendo la documentazione del Material 3 Expressive, scopriamo che non è stato rinnovato (almeno finora) il componente barra di navigazione. Le uniche indicazioni su come possa apparire questo componente con la nuova filosofia di design le troviamo nell’app di Google Chat e in un concept diffuso da Google (un’app per lo streaming musicale) nel blogpost relativo proprio alla nuova filosofia di design.
È chiaro che nel tempo, come già avvenuto per il Material 3, il parco componenti messi a disposizione dal team di design verrà ampliato e, probabilmente, anche la barra di navigazione verrà effettivamente re-inventata. Intanto, aspettiamo il debutto ufficiale, più avanti nel corso dell’anno, con Android 16.
Qualora siate interessati a maggiori informazioni e dettagli tecnici, vi rimandiamo alla documentazione ufficiale sulle barre degli strumenti sul portale dedicato al Material 3. In alternativa, potete visitare l’intera sezione dedicata al Material 3 Expressive sullo stesso portale.