Dalla progettazione grafica alla realizzazione

Scritto il August 18, 2021  •  4 minuti  • 727 parole

Questo primo articolo vuole descrivere la metodologia e l’approccio da utilizzare per poter realizzare la meglio uno screen utilizzando il framework React Native. Cercheremo di percorrere insieme una serie di step metodici per poter al meglio costruire uno screen partendo un semplice mockup o schermata UI/UX finita. Questo post di difficile stesura ha un contributo puramente hobbistico (ed in primis personale ordine mentale ) :sarà sicuramente una prima versione e sarà per tanto aggiornato anche secondo i commenti da voi forniti.

Vocaboli utilizzati

Screen

Per screen come in letteratura si intende una schermata dell’app. In genere per comprendere il concetto di associa ad essa la pagina di un’applicazione, da cui appunto derivano le precedenti tecnologie SPA per il Web. Essa è composta da diversi Componenti che permettono l’interazione desiderata con l’utente.

Componente

Il componente (dal termine Component) è la unità base di una interfaccia grafica realizzata e che aggiunge informazione ad una semplice View (es. un Button, un Layout, List ecc.).

View

Il concetto più astratto di componente che racchiude in se una informazione grafica in React Native, sia essa un colore, una forma, una dimensione o altro. (DA RIVEDERE!!)

1 Step - Definire lo screeenshot dello screen

Partiremo da una semplice schermata (o più) dello stesso screen che mostrano all’interno di essa l’interazione. È interessante guardare una immagine fissa dello screen in quanto in essa è possible osservare delle aree ben note.

Analizzando infatti il corso dell’evoluzione della UI dal web verso il mondo delle app ci si può accorgere che il modo in cui essere sono realizzate è che gli obiettivi sono sempre gli stessi. Un esmepio palese è il dover orientare l’utente verso i principali casi d’uso: come per i siti web anche nelle app abbiamo un concetto di NavigationBar che in qualche modo orienta in maniera diretta sposta l’utente da uno screen all’altro verso la funzionalità desiderata.

Molti di questi componenti sono ben noti ed anche l’utente spesso è alla ricerca di essi per poter riuscire ad interagire, spesso senza di essi l’utente potrebbe addirittura sentirsi perso e spaesato.

Nominato l’esempio del NavigationBar, si propongono i seguenti esempi di screen di app note.

(mostrare 3 app in cui sono presenti NavigationBar, anche di diversa grafica!)

Come si può notare in questi esempi di screen, se pur con una grafica leggermente differente tra esse, entrame le app mostrano una barra nella quale con dei pulsanti è possibile spostarsi naviganto tra una schermata e l’altra (appunto navigation–bar)

Ebbene se pur il framework non definisce in maniera nota come costruire questi componenti (IL CHE é ASSOLUTAMENTE UN BENE!!) in letteratura esistono e sono ben noti, li scopriremo insieme. Uno di essi è chiaramente il NavigationBar analizzato in precedenza.

2 Step - Suddividere lo screen e come farlo

Fatta questa premessa, il primo step è quello di riusire a descrivere un modo che consenta di suddividere lo screen in componenti. L’approccio che si consiglia in questo step è di tipo Top-Down ossia partire dai componenti di dimensioni più grani fino a giungere a quelli di dimensioni più piccole.

Questo approccio nella maggior parte dei casi porterà a delineare macrocomponenti noti che con buona probabilità sono già stati sviluppati da altre persone come librerie/progetti esterni e che potranno essere configurati e personalizzati a piacimento (fatta ipotesi essi siano di buona qualità software…)

D’altronde, volendo dare uno sguardo architetturale, è proprio secondo il composite pattern con il quale sono realizzate le componenti grafiche (View complesse composte a loro volta da View complesse o meno a loro volta) quindi è naturale conseguenza suddividere per funzionalità/complessità e spesso tale suddivisione coincide proprio con la grandezza dell’area del componente.

Si propone quindi un primo approccio di suddivisione alle seguenti schermate.

(mostrare la suddivisione su 3 app, anche le stesse in cui sono presenti i NavigationBar)

Con l’ausilio di programmi grafici si presenta la suddivisione mediante aree rettangolari semitrasparenti sovrapposte. Al momento della scrittura del post si cercano altri strumenti di rappresentazione, magari con grafica 3D. Un esempio potrebbe essere il seguente proposto App UI/UX Template Analyzer

In questa prima suddivsione vengono definite 3 aree principali:

• una header bar che accompagna l’utente in tutti e tre gli screen, HeaderNavBar
• uno screen nel quale varia il contenuto della UI per l’interazione in base al caso d’uso (sostanzalmente uno screen stesso)
• una bottom bar che in maniera diretta porta l’utente verso gli altri screen, BottomNavBar