Ti trovi di fronte alla sfida di creare un Prototyping accattivante per un Mobility-App. Non si tratta solo del design; è importante progettare l'esperienza utente in modo efficace sin dall'inizio, affinché aiuti l'utente a navigare intuitivamente nell'app. In questo tutorial, verrai guidato passo dopo passo nel processo di creazione di un prototipo in Sketch. Iniziamo questo entusiasmante viaggio nel mondo del design!
Risultati chiave
- Il prototyping è un passaggio fondamentale nello sviluppo dell'app.
- In Sketch puoi iniziare con forme e design semplici.
- Una chiara struttura e guida per l'utente sono essenziali per il successo della tua app.
Guida passo-passo
Inizia creando la struttura di base della tua app in Sketch. Puoi utilizzare lo strumento pennello per disegnare i tuoi primi elementi di design. Vai semplicemente sullo strumento pennello o premi il tasto "P" per selezionarlo.
Crea un rettangolo che rappresenti lo schermo della tua app. Tieni premuto il tasto "Alt" mentre trascini un rettangolo con il mouse. Questo assicura che il rettangolo rimanga proporzionale. Già così sembra abbastanza buono.
Adesso è il momento di progettare la prima pagina dell'app. Inizia con la barra delle schede in basso. Utilizza di nuovo lo strumento pennello e trascina una linea retta tenendo premuto il tasto Shift per assicurarti di ottenere una linea dritta.
Dopo aver progettato la barra delle schede, inserisci tre icone che rappresentino le principali funzioni dell'app. Utilizzando il tasto ALT puoi duplicare facilmente le figure mentre le sposti nella posizione corretta.
Adesso ci occupiamo della barra di navigazione superiore. Tieni di nuovo premuto il tasto ALT mentre trascini un altro rettangolo per la barra di navigazione.
Le chat-bubble sono la parte successiva della tua app che vogliamo progettare. Usa lo strumento pennello per disegnare una chat-bubble. Questa verrà visualizzata all'utente come messaggio di benvenuto. Aggiungi un breve testo che saluti l'utente, ad esempio: "Ciao e benvenuto nell'app Mobility!"
Per assicurarti che il tutto abbia un aspetto accattivante, puoi copiare e adattare le bubble. Seleziona le bubble e trascinale verso il basso tenendo premuto il tasto ALT per aggiungere un ulteriore messaggio di benvenuto, come "Inizia la tua prima sessione di Mobility".
Il passo successivo è inserire il pulsante per visualizzare i video, che permetterà agli utenti di riprodurre le loro lezioni. Disegna un pulsante rotondo con lo strumento pennello e combinane uno con un triangolo per rendere chiara la funzionalità.
Ora copia tutti gli elementi UI chiave - come le barre di navigazione superiore e inferiore - sulla pagina successiva per garantire coerenza nel design. Puoi semplicemente fare uno screenshot tenendo premuto il tasto ALT per duplicare gli elementi sulla pagina successiva.
In questa nuova schermata che hai creato, progetta le opzioni per i corsi. Dovresti creare una semplice panoramica dei corsi disponibili che l'utente può selezionare.
Nella vista profilo, puoi creare uno spazio per l'immagine del profilo, il nome utente e il numero di ore di corso completate. È importante presentare le informazioni in modo chiaro e leggibile.
Concludendo il design della selezione dei corsi e delle lezioni, crea una panoramica delle lezioni e aggiungi un pulsante di chiusura, così l'utente può chiudere la selezione in qualsiasi momento.
Con questo, il prototipo di base per la tua app Mobility è completato. Hai ora un design accattivante che struttura chiaramente la guida per l'utente e ti aiuta come designer a visualizzare chiaramente la visione dell'app.
Riepilogo – Prototipazione di una Mobility App in Sketch
Nel corso di questo tutorial, hai imparato passo dopo passo come prototipare un'app Mobility in Sketch. Dalla prima idea fino agli ultimi elementi di design, hai potuto ampliare le tue conoscenze e creare uno strumento utile per lo sviluppo futuro della tua app.
Domande frequenti
Come inizio a progettare in Sketch?Seleziona lo strumento pennello (P) e inizia a creare i primi elementi.
Come posso duplicare gli elementi in modo efficiente?Tieni premuto il tasto ALT mentre trascini l'elemento con il mouse.
Cosa fare se non sono soddisfatto del design?Puoi modificare o riprogettare gli elementi esistenti in qualsiasi momento per ottenere il risultato desiderato.
Come posso assicurarmi che la guida per l'utente sia chiara?Assicurati che tutte le funzioni siano disposte logicamente e che l'utente possa navigare intuitivamente.
Posso designare in Sketch anche per dispositivi mobili?Sì, puoi adattare il tipo e la dimensione degli elementi secondo le dimensioni dello schermo dei dispositivi mobili.
