Share
Cosa starai creandoIn questo tutorial, ti insegnerò come progettare un'applicazione di fitness iOS semplice e di facile utilizzo per monitorare la corsa all'aria aperta e il ciclismo. Oltre all'applicazione iOS, ti fornirò un esempio di design per l'interfaccia Apple Watch.
Alla fine di questo tutorial sarai in grado di progettare un'applicazione iOS con diverse schermate e visualizzazioni in Sketch. Utilizzeremo alcune tecniche di base e intermedie in Sketch, quindi iniziamo!
Avrai bisogno di queste risorse per seguire:
Prima di iniziare, vorrei sottolineare che questo concetto è interamente teorico. Nel caso di un progetto del mondo reale, richiederebbe un'analisi del mercato e degli utenti molto più approfondita prima che potessimo trasformarlo in un'applicazione mobile reale e utilizzabile. Ho corso e pedalato regolarmente per quattro anni, quindi ho creato questo concetto per mostrare come apparirà un'applicazione per il fitness mio prospettiva.
Stiamo usando Sketch, un'applicazione di progettazione creata originariamente per la progettazione di interfacce e al giorno d'oggi il modo più semplice e veloce di progettare per iOS.
Dopo aver aperto Sketch, selezioniamo il Tavola da disegno (A) opzione all'interno del Inserire menu.
Sul pannello laterale sinistro, ti consiglio di scegliere le dimensioni dell'iPhone 6, ma se hai un iPhone diverso, troverai che è meglio sceglierne uno. Questo è importante, perché con l'aiuto di Sketch Mirror possiamo immediatamente vedere il nostro lavoro, in tempo reale sul nostro dispositivo iOS, senza esportare o trasferire immagini. Sketch Mirror è una parte cruciale del mio flusso di lavoro di progettazione, perché mi consente di vedere e sentire il risultato finale del mio lavoro in pochi secondi.
Per attivare Sketch Mirror, devi scaricare l'app Sketch Mirror dall'App Store, quindi fare clic su Specchio icona all'interno di Sketch (assicurati che i tuoi dispositivi siano sulla stessa rete Wi-Fi o collegati tramite un cavo USB).
Dall'introduzione di iPhone 6 e 6 Plus, è quasi impossibile utilizzare il pulsante di navigazione nascosto nell'angolo in alto a sinistra, perché la maggior parte degli utenti non sarà in grado di raggiungerlo con una mano. Per questo motivo ho inserito la navigazione principale nella parte inferiore dello schermo; sempre visibile e facilmente raggiungibile.
Creiamo a 100px rettangolo alto, a tutta larghezza, nella parte inferiore dello schermo.
Ora dividiamo questo rettangolo in modo da avere cinque rettangoli uguali, in cui possiamo posizionare le icone di navigazione in un secondo momento. Vi consiglio di dare a ogni rettangolo un colore leggermente diverso per vedere chiaramente i bordi di ognuno.
Creiamo un altro 50x50px quadrato per le icone. Di seguito possiamo aggiungere le etichette per le diverse schermate: Attività, Sfide, GO, Amici e Profilo. Per queste etichette, ho impostato Avenir Next Regular con dimensione carattere 24px e altezza riga 24px.
Ora possiamo posizionare le nostre icone in questi piccoli quadrati. Assicurati che ogni icona sia alta 50px o 50px. Per la nostra icona del profilo, creiamo un cerchio 50x50px con il nostro Strumento ovale (O) e selezionare riempimento immagine sul Riempie il pannello.
Nascondere i rettangoli guida facendo clic sull'icona a forma di occhio vicino ai livelli.
Per lo sfondo della nostra barra delle schede ho scelto un bianco completo #FFFFFF colore con 70% opacità e 8px sfocatura dello sfondo. Ho anche aggiunto un 1px # B4B4B4 linea con il Strumento linea (L) come separatore visivo nella parte superiore della barra delle schede.
Per le icone e le etichette delle schede inattive, raccomando una sfumatura di grigio # 666666 invece di un semplice nero, e per la parte attiva, impostiamo un colore rosso vivo come # FF3B30.
La maggior parte dei nostri utenti aprirà l'applicazione poco prima che sia pronta per essere eseguita o in bicicletta, quindi la prima cosa che vorranno fare con l'app è iniziare a monitorare i loro allenamenti. Questo è il motivo per cui iniziamo a progettare la schermata GO prima, consentendo all'utente di iniziare immediatamente la formazione.
Prima di qualsiasi attività all'aria aperta, controllo sempre il tempo in anticipo, solo per sapere cosa dovrei aspettarmi, compresa la forza del vento e l'ora del tramonto. A mio avviso, questi dettagli sono veramente essenziali se si è all'aperto, quindi ho progettato una sezione meteo integrata nella schermata GO. In questo modo gli utenti non devono controllare un'applicazione meteo ogni volta prima di aprire la nostra app di fitness.
Innanzitutto, avremo bisogno di uno stato iOS bianco e una barra di navigazione dal modello di progettazione dell'interfaccia utente di Sketch iOS, che puoi trovare sotto File> Nuovo da modello> Progettazione interfaccia utente iOS.
Mancia: poiché il modello di progettazione dell'interfaccia utente iOS di Sketch ci fornisce risorse 1x, per convertirle in una risoluzione 2x. Questo può essere fatto facilmente con il Strumento di scala.
Per il colore di sfondo della nostra barra di navigazione ho voluto scegliere un colore vivido e vitale, che ispirerà gli utenti a muoversi e agire immediatamente. Quindi ho scelto un piatto, ma ancora rosso vivo, # FF3B30, che è destinato a catturare la tua attenzione la prima volta che lo vedi.
Per l'indicatore di intensità GPS ho usato un gradiente semplice da # 15FF00 a # 15FF00 in un rettangolo con angoli arrotondati.
Sul lato opposto, ho posizionato un'icona della bicicletta, per passare facilmente tra la modalità corsa e quella ciclistica.
Ora, creiamo le nostre previsioni del tempo nella parte superiore dello schermo. Poiché la maggior parte dei nostri allenamenti di solito non durerà più di tre ore, forniremo una previsione di tre ore con ulteriori informazioni sulla forza del vento e l'ora del tramonto. Raccomando un grigio chiaro come #ACACAC per questo tipo di informazioni, perché non vogliamo sottolineare troppo le previsioni del tempo.
Come separatore visivo tra diverse sezioni gentili dell'interfaccia, disegniamo a #ECECEC rettangolo, con altezza 54px e larghezza 100%.
Prima dell'inizio dell'allenamento, può essere la motivazione a stabilire un obiettivo. Questo può essere sotto forma di distanza, tempo o un nuovo record di velocità medio. Per visualizzare questi obiettivi creiamo due cerchi separati con le seguenti dimensioni: 270x270px e 230x230px.
Dopo aver posizionato i cerchi, trascina il primo e trascinalo nel secondo pannello del livello. Per creare una forma ad anello selezionare il 'Sottrarre' opzione.
Per il colore di sfondo di questo anello creiamo un gradiente lineare da # AAFFA9 a # 11FFBD e imposta l'opacità al 20%. Questo sarà lo stato inattivo del nostro anello.
Per la parte attiva, duplichiamo la forma di selezionare la forma sul pannello del livello> Fare clic con il tasto destro> Duplica (in alternativa possiamo duplicare con ⌘-C e ⌘-V, pure).
Ora avremo bisogno del Strumento vettoriale (V) per creare una maschera sulla nostra cerchia attiva.
Mancia: premendo verso il basso Cambio chiave mentre si utilizza il Vettore lo strumento ci aiuta a creare linee perfettamente diritte.
Spostiamo questo livello sotto il cerchio attivo, quindi impostalo come livello maschera. Non dimenticare di disattivare il riempimento del bordo della nostra forma vettoriale.
Per i dettagli precisi, aggiungiamo due cerchi extra 20x20px alla nostra forma di maschera, dandoci un bel bordo arrotondato alla fine dell'anello attivo.
Suggerimento pro: Per il testo al centro dell'anello, impostiamo una piccola quantità di ombra interna.
Ora, l'unica cosa che manca dalla nostra schermata GO è il pulsante GO, che sarà un rettangolo alto 120 px con # FF3B30 colore rosso.
Nella schermata delle attività possiamo sfogliare rapidamente gli allenamenti dai nostri amici o da noi stessi. Dopo aver toccato uno di questi allenamenti, possiamo ottenere un aspetto più dettagliato, incluso un grafico interattivo.
In fondo a questo sguardo dettagliato, mostreremo i risultati complessivi dell'allenamento selezionato, mentre nella parte superiore, puoi vedere i risultati specifici a seconda di dove tocchiamo il grafico (indicato con una barra verticale leggera).
Come prima, inizieremo con la barra di navigazione, aggiungendo un'icona 'più' extra per consentire all'utente di aggiungere manualmente gli allenamenti.
Per passare tra gli allenamenti dei nostri amici e il nostro, abbiamo bisogno di creare una barra di navigazione secondaria. Selezioniamo il Strumento rettangolo (R) e crea un rettangolo alto 90 px con un blu scuro # 1F2033 colore di riempimento.
Ora crea un altro quadrato 22x22 px e ruotalo di 45 gradi.
Possiamo raggruppare questi due livelli come abbiamo fatto con i nostri anelli obiettivo. Assicurati di utilizzare il Sottrarre opzione al posto di Unione.
Mancia: notare il leggero cambiamento in termini di opacità tra l'elemento di navigazione secondario attivo e inattivo.
Per l'aspetto dettagliato, creeremo un altro rettangolo con lo stesso sfondo blu scuro. Ma questa volta, l'altezza sarà 387px. Per le linee guida usiamo il Strumento linea (L).
Per visualizzare visivamente la differenza di altitudine durante l'allenamento, avremo bisogno di creare una forma personalizzata con il Strumento vettoriale (V). Non esiste una tecnica specifica per creare questo grafico, quindi modifichiamo la curva di Bézier fino a quando non la sentiremo corretta.
Oltre alla differenza di livello, possiamo anche visualizzare le variazioni di velocità durante l'allenamento con una curva colorata, dove le aree rossa e verde indicano il ritmo.
Il metodo è lo stesso di prima con il Vettore strumento e curve di Bézier. Per il colore di riempimento che ho usato # FF3B30 per il rosso e # 22EA05 per verde (verde significa più veloce del ritmo medio, rosso significa più lento).
Con l'aiuto del plugin Sketch di Content Generator, possiamo facilmente aggiungere diverse immagini del profilo alle nostre cerchie avatar.
Ora siamo pronti anche con la schermata delle attività!
Nella schermata delle sfide possiamo vedere le particolari sfide a cui partecipiamo. Durante la progettazione di questo schermo, ho combinato un design circolare ispirato a Apple Watch con un design di tipo a scheda, in modo che l'utente possa riorganizzare le sfide in base alla loro importanza.
Dopo aver progettato le schermate precedenti, sarà molto più facile crearne una, perché ne abbiamo già progettato la maggior parte. Per prima cosa, creiamo un nuovo Tavola da disegno (A) e copiare la barra di navigazione e la barra di navigazione secondaria dalla schermata Attività.
Per creare le carte, avremo bisogno di un 355x400px rettangolo.
Come colore di sfondo, ho usato un semplice bianco, ma per separare visivamente le carte dallo sfondo ho aggiunto un po 'di ombra nera con 20% di opacità.
Per essere coerenti e coerenti in tutta l'applicazione è importante mostrare agli utenti lo stesso tipo di informazioni allo stesso modo. Come forse ricorderai, abbiamo già progettato un piccolo anello per indicare gli obiettivi nella schermata GO, quindi ora possiamo usare la stessa tecnica qui.
Mancia: se desideri ottenere più ispirazione per i gradienti dell'interfaccia utente, ti consiglio di controllare uigradients.com.
L'ultimo elemento ancora mancante è la barra delle schede nella parte inferiore dello schermo, quindi copialo dalla schermata precedente e assicurati di modificare lo stato attivo della scheda.
Nella schermata Sfoglia le sfide, possiamo scorrere rapidamente le sfide più popolari e recenti, dove possiamo vedere quanti giorni sono rimasti per completare una particolare sfida e quanti membri vi partecipano.
Come sempre, possiamo duplicare gli elementi di progettazione familiari dalle schermate precedenti, ma non dimenticare di modificare la barra di navigazione secondaria.
Creiamo le informazioni di base su una sfida e aggiungiamo un badge personalizzato come motivazione. Questo sarà il premio quando qualcuno completa la sfida.
Nota: Per questo tutorial, ho creato solo un badge semplice, ma in un progetto del mondo reale avrei trascorso molto più tempo con la progettazione di badge diversi e molto lucidi.
Mancia: Notate le piccole differenze di dimensioni e colori del testo, aiutandoci a creare una chiara gerarchia.
Per visualizzare visivamente il tempo rimanente, creiamo una timeline. Questo bar avrà 40px angoli arrotondati e a # F5F5F5 colore di sfondo.
Per la parte attiva di questa barra, copia il nostro rettangolo precedente, rendilo un po 'più corto e imposta un gradiente lineare da # 44FF30 a # FFDA30.
Dopo aver duplicato questa sezione e copiato la barra delle schede dalla schermata precedente, siamo pronti con la sezione Sfoglia le sfide!
Ultimo, ma non meno importante, ho creato un'interfaccia Apple Watch per la nostra applicazione. Questo concetto di design è basato sulle linee guida di Apple Watch Human Interface. Queste linee guida sono fornite da Apple per sviluppatori e progettisti per avere una migliore comprensione delle possibilità di questa nuova piattaforma.
Ho creato quattro diverse interfacce orologio per la nostra applicazione fitness. Nel caso del primo concetto ho realizzato uno schermo altamente personalizzabile, in cui è possibile riorganizzare le informazioni in base ai propri interessi. Inoltre, il colore dei dati più importanti (i più grandi) cambia sempre in base alla distanza dal tuo obiettivo iniziale. In questo caso il colore verde significa che hai quasi raggiunto il tuo obiettivo di distanza.
Abbiamo completato la nostra progettazione di applicazioni per il fitness iOS. Dopo aver seguito questo tutorial, spero che tu sia più sicuro nell'usare Sketch per la progettazione di applicazioni mobili.
Sentiti libero di scaricare il file completo di Sketch, per avere un aspetto più dettagliato delle tecniche di progettazione che abbiamo utilizzato. Sono curioso di sapere come hai trovato il processo, quindi non esitare a lasciare feedback e domande nei commenti.
Accentsconagua