Design come strumento per la rifinitura delle app: tutorial passo dopo passo

La progettazione di un'interfaccia utente può fare la differenza tra una buona e una grande App. In questo Tutorialci concentreremo su come puoi utilizzare il Designcome strumentoper rendere la tua app più coinvolgente. Affronteremo un nuovo schermo che si distingue visivamente dagli elementi esistenti e cattura l'utente con un design accattivante. Iniziamo subito.

Principali scoperte

• Colori e contrasti diversi aumentano l'attrattiva visiva.
• Strutture di layout chiare aiutano gli utenti a orientarsi meglio.
• Dimensioni e design dei caratteri coerenti promuovono un'esperienza utente piacevole.

Guida passo-passo

Aggiungi un nuovo controller

Per creare il nuovo schermo, iniziamo aggiungendo un nuovo controller. Vai al tuo builder dell'interfaccia, clicca su "Aggiungi controller" e posizionalo in modo che si adatti sotto gli schermi esistenti.

Impostazioni del controller

Dai al tuo nuovo controller il nome "Controller Corso" per facilitare l'assegnazione futura. Assicurati che il nome obsoleto "iPhone 8 copy" venga sostituito con "Controller Profili".

Adatta il colore di sfondo

Perl'attrattiva visiva dell'app, è importante scegliere un colore di sfondo dominante. Opta per un verde intenso, già utilizzato in altre parti della tua app. Questa strategia aumenta il contrasto con gli elementi bianchi e conferisce maggiore dinamicità.

Configura la barra di stato

Imposta la barra di stato su "Scura", affinché il testo su sfondo verde sia facilmente leggibile. Controlla la posizione e assicurati che sia perfettamente adattata.

Crea etichetta

Crea una nuova etichetta per la visualizzazione del corso. Inizia con un'intestazione che si estende su tutta la larghezza del controller. Scegli il font H4 e colora il testo di bianco.

Aggiungi etichette aggiuntive

Aggiungi un'altra etichetta per il titolo del corso. Usa la dimensione del carattere di 40 pixel e assicurati che sia posizionata correttamente - non dovrebbe avere spazio rispetto all'etichetta precedente.

Presenta ulteriori informazioni

Per fornire più informazioni agli utenti, aggiungi una terza etichetta. Usa un carattere più piccolo di 17 pixel, affinché il testo non risalti troppo fino a quando non è necessario.

Creazione della tabella

Aggiungi infine una tabella per presentare le lezioni in modo chiaro. Inizia con un semplice rettangolo che occupa tutta la larghezza e rendi lo sfondo un po' più scuro per poter lavorare con colori del testo bianchi.

Lezioni come celle

Crea una cella per la prima lezione dal titolo "Basics Part 1". Fai attenzione allo spazio appropriato e all'allineamento.

Inserisci un separatore

Per creare una chiara separazione tra le lezioni, aggiungi un separatore (una linea sottile). Questa linea dovrebbe essere posizionata tra le celle per ottenere una separazione visiva.

Crea un pulsante di annullamento

Per consentire agli utenti di lasciare questa vista, aggiungi un pulsante di annullamento sotto forma di "X". Assicurati che sia ben visibile al centro dello schermo.

Prospettive sui prossimi passi

Dopo che il nuovo Controller del Corso è stato creato con successo, il prossimo passosarà l'integrazione di un login. Questo consentirà agli utenti di salvare i loro progressi all'interno dell'app.

Riassunto – Design come strumento per il perfezionamento dell'app

In questo tutorial hai imparato come, attraverso un design efficace della tua app, puoi creare un'esperienza utente migliorata. Dall'aggiungere un nuovo controller, alla scelta dei colori appropriati fino all'integrazione di celle e pulsanti - hai seguito tutti i passaggi necessari per rendere la tua app visivamente accattivante.