Indice
- UI Kit
- Wireframe Hi-Fi
- Indice Note
- Dettaglio Nota
- Creazione Nota
- Modifica Nota
- Estrapolazione dei componenti dell'applicazione
- Componenti globali
- Componenti di posizionamento
- Componenti di input
- Componenti di progetto
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2048%2024'%20style='enable-background:new%200%200%2048%2024;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23128E8F;}%20.st1{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M24,24c13.3,0,24-10.7,24-24H0C0,13.3,10.7,24,24,24z'/%3e%3cpath%20class='st1'%20d='M24,15.3L18.7,10L24,4.7l1,0.9l-3.7,3.7h8.1v1.3h-8.1l3.7,3.7L24,15.3z'/%3e%3c/svg%3e)
Progetta e migliora la tua app con la UX Design - PT 3
Visual Design e estrapolazione di risorse, asset e componenti.
9/29/2024
UI Kit
La fase di studio del Visual Design prevede la scelta dei colori, della tipografia e di tutti gli elementi visivi che faranno parte dell'applicazione. I deliverables che saranno generati nel processo serviranno sia dal punto di vista del design, per velocizzare e rendere scalabile il wireframe hi-fi e il prototipo.
Esempio di palette cromatica che gli sviluppatori potranno utilizzare per mappare i colori all'interno dei file di configurazione dell'applicazione. Esistono diversi tool per generare delle palette, ad esempio questo messo a disposizione da Adobe.
Un altro punto importante è la collezione di icone scelte, con la relativa nomenclatura per facilitare il collegamento della libreria scelta (in questo caso feather)
Wireframe Hi-Fi
Ripercorriamo le pagine del wireframe ad alta fedeltà dell'applicazione sulla falsariga di quanto fatto per quello lo-fi, mettendone in risalto le differenze, al netto degli elementi di stile basilari come i colori e i font.
Indice Note
Lista
La lista delle note è stata modificata dal punto di vista dello stile aggiungendo elevazione e bordi. Anche la searchbar ha subito una revisione andandosi a fondere con la navbar.
Caricamento
E' stato scelto di usare un componente skeleton per mostrare il caricamento degli elementi della lista invece del classico loader a centro pagina.
Nessun Elemento
Oltre alla modifica grafica del placeholder è stato inserita un'interazione con il relativo suggerimento per l'aggiunta di un nuovo elemento che permette di aprire al click la pagina di creazione.
Errore nel Recupero dei Dati
Vediamo qui un ulteriore stato che non avevamo descritto precedentemente, quello di errore nel fetch dei dati. Anche qui aggiungiamo un suggerimento e un'azione di ricarica della pagina.
Nessun Risultato di Ricerca
E' stato aggiunto al placeholder un suggerimento anche quando non ci sono risultati di ricerca.
Dettaglio Nota
Default
Il dettaglio della nota rimane pressochè invariato al netto dell'applicazione dello stile visivo.
Conferma Eliminazione Nota
Il flusso di eliminazione della nota ha subito modifiche solo dal punto di vista visivo.
Creazione Nota
Default
La pagina di creazione della nota e il flusso di creazione hanno subito modifiche solo dal punto di vista visivo.
Modifica Nota
Default
La pagina di modifica della nota e il flusso di creazione hanno subito modifiche solo dal punto di vista visivo.
Estrapolazione dei componenti dell'applicazione
Di seguito sulla base del wireframe hi-fi andremo ad analizzare i componenti principali ad alto livello dell'applicazione.
Componenti globali
NavBar
E' delegata alla navigazione dell'app e alle azioni di contesto sulla rotta attuale.
SearchBar
Consente la ricerca all'interno dell'index delle note.
PopupDialog
Mostra un dialog di attesa o di conferma.
SnackBar
Consente di visualizzare un feedback di notifica o di errore.
Componenti di posizionamento
MainLayout
Si occupa di renderizzare il layout di base dell'applicazione mantenendo gli elementi globali (in questo caso solo la navbar).
CardContainer
E' un semplice wrapper da utilizzare ad esempio negli elementi della lista, nella pagina di dettaglio o nel form delle note.
Componenti di input
TextArea
Campo di input alfanumerico per testi estesi.
DateInput
Consente di selezionare una data all'interno di un form.
TextInput
Campo di input alfanumerico per testi brevi.
Componenti di progetto
NoteList
Renderizza un elenco di elementi in formato lista.
NoteListItem
Renderizza una nota come elemento di una lista.
NoteForm
Si occupa di renderizzare il layout del form di un nodo.
NoteDetail
Si occupa di renderizzare il layout del dettaglio di un nodo.