Share
Questo design è stato utilizzato in combinazione con il nostro sito partner Mobiletuts +. Bart Jacobs, uno sviluppatore molto esperto, ha preso questa interfaccia utente e ne ha creato un'app funzionante e, soprattutto, puoi seguirla e imparare a crearne una tua! Puoi trovare le sue serie qui: Parte 1, Parte 2, Parte 3.
In questo tutorial vorrei mostrarti come creare un'interfaccia utente pronta per la retina per un'applicazione meteo. Useremo più tavole artistiche e tipografia per creare un'interfaccia molto minimale.
Scarica qui i font:
Quando si utilizzano i caratteri per le applicazioni o per qualsiasi motivo, accertarsi di controllare il Contratto di licenza. Poiché questo è solo un tutorial e l'app stessa non sarà disponibile per la vendita, possiamo usare i caratteri sopra citati. Tuttavia, se si prevede di crearne una propria e di ottenere una licenza commerciale, seguire le istruzioni del designer del tipo su come farlo.
Useremo più schede grafiche per le diverse visualizzazioni dell'app, quindi una volta deciso questo con l'aiuto del nostro sviluppatore, possiamo andare avanti e ottenere il nostro documento creato.
Per iniziare, dobbiamo creare un documento delle dimensioni del nostro dispositivo mobile. Dato che stiamo lavorando sulla piattaforma iOS, progetteremo per l'iPhone 5 che ha uno schermo più alto delle precedenti versioni di iPhone. Trovo che lavorare alle dimensioni più grandi è facile ridurlo in un secondo momento per altri dispositivi. Dal momento che il design complessivo è così minimale, sarà più facile rimuovere lo spazio in un secondo momento anziché tentare di scalarlo. A tal fine il nostro documento sarà 640 x 1136 punti (non pixel).
Durante il brainstorming con lo sviluppatore è stato deciso che ci sarà una schermata principale che scorrerà a sinistra oa destra per rivelare più informazioni. Con questo in mente, creeremo anche più schede artistiche in questo momento. Uno per ogni finestra che apparirà. Assicurati di controllare attentamente lo screenshot per le specifiche.
Una volta creato il documento, sarà necessario regolare il profilo del colore. Quindi vai Modifica> Assegna profilo e assicurati di disabilitare tutti i profili colore. Quando XCode prepara i tuoi asset da raggruppare con l'app, elimina completamente tutti i profili di colore associati alle risorse. Per questo motivo è meglio rimuovere semplicemente tutti i profili di colore dal tuo documento e testare regolarmente il tuo design su uno schermo mobile per garantire il corretto output dei colori.
Il nostro background è abbastanza semplice. Poiché lavoriamo con un design più o meno 'piatto' lavoreremo con colori a tinta unita e miscelazione per ottenere i nostri effetti.
Useremo la tavola della middle art per rappresentare la nostra pagina principale dell'app. Quello a sinistra sarà quello che succede quando selezioni la posizione. E quello a destra apparirà quando selezioni la data. Inizia disegnando un rettangolo con la stessa altezza e larghezza della tavola da disegno al centro e riempiendolo con il nostro colore di base
Quindi, crea un cerchio che è esattamente 30 x 30 pt e riempilo con il colore descritto di seguito.
Copia questo cerchio appena creato e incollalo dietro l'altro. Ora regola le dimensioni su 2300 x 2300pt e rilasciare il Opacità giù verso 0%.
Ora vai a Oggetto> Miscela> Opzioni di fusione ... e selezionare Passi specifici quindi impostarlo su 30. Quindi fai (Oggetto> Miscela> Crea) la miscela.
Con la fusione ancora selezionata, centrala orizzontalmente sulla tavola da disegno e quindi centra il cerchio nella parte superiore della tavola da disegno, come mostrato sotto.
Duplica il rettangolo di sfondo piatto e incollalo sopra la fusione appena creata. Ora seleziona sia il rettangolo che la fusione dalla tavolozza dei livelli e seleziona Oggetto> Maschera di ritaglio> Crea. In questo modo non dobbiamo preoccuparci della nostra miscela piuttosto grande che si riversa nelle nostre altre tavole artistiche.
Un'ottima funzionalità che pensavamo avrebbe aggiunto un tocco all'app sarebbe stata quella di cambiare lo sfondo in base alla temperatura. Quindi, mentre lo sfondo che abbiamo appena creato è per quando è "caldo", ora duplichiamo questi elementi e regoliamo il colore e la posizione per rappresentare un aspetto più "freddo".
Poiché il nostro effetto cerchio misto ha così tanti passaggi, potresti notare dei ritardi mentre continui a creare il tuo design dell'app. Poiché questo è solo per scopi estetici, possiamo andare avanti e disabilitare i livelli di fusione e lasciare il colore di sfondo piatto per ora. Assicurati di riattivare il livello di fusione durante il test sul tuo dispositivo mobile in modo da poter vedere come funziona il testo con lo sfondo.
Faremo affidamento sul tipo per ottenere informazioni sul tempo. Per questo motivo ho scelto alcuni font carini, puliti e facili da leggere che conferiscono una certa personalità all'app. Rimarrò con due famiglie di caratteri e utilizzando ampiezze diverse per creare gli elementi visti.
Per iniziare, dovremo mostrare una data di qualche tipo. Seleziona il Tipo Strumento (T) e inserire un giorno della settimana. Utilizzerò "Martedì" e il nostro font "Mission Gothic" con il peso impostato su "Sottile". Il testo stesso sarà bianco e aggiungeremo a Ombra esterna per aiutarlo a stare lontano dallo sfondo. Quindi lo posizioneremo in modo che sia centrato sulla lavagna e 20px dall'alto. Per fare ciò, è sufficiente allinearlo alla parte superiore in cui il riquadro di delimitazione tocca il bordo della tavola da disegno, quindi tenere premuto Cambio e premere il Giù freccia sulla tastiera due volte.
Seleziona il Tipo Strumento (T) di nuovo e creiamo il nostro misuratore di temperatura. Mi piace l'idea che i numeri siano centrati mentre il simbolo del "grado" si trova sulla destra. Quindi, piuttosto che centrare il tipo nel Paragrafo pannello l'ho mantenuto allineato a sinistra e ho digitato solo il numero che useremo per il segnaposto. Userò "86" e il carattere "Maven Pro" con le seguenti informazioni viste nello screenshot qui sotto.
Una volta creato, allinearlo al centro della tavola da disegno, quindi in alto. Una volta allineato verso l'alto, tasto destro il testo e Trasforma> Sposta ... giù 210pt. Ora seleziona il tipo e aggiungi il simbolo del grado.
Ora che abbiamo la temperatura, aggiungiamo una posizione. Scrivi la tua posizione, per me è "Nassau, BAH" sentiti libero di usare la tua. Per dare alla città e al Paese un certo contrasto useremo due pesi diversi. La città sarà "Mission Gothic" impostato su "Regular", e il Paese sarà "Mission Gothic" impostato su "Thin".
Per quanto riguarda il posizionamento, ho detto in precedenza che mi piace l'idea che la figura della temperatura sia centrata, ma per tutto il resto del testo voglio che sia allineato a sinistra in base alla larghezza della figura della temperatura. Quindi per ora inserirò manualmente questo indirizzo a sinistra della temperatura e lo posizionerò 20pt dal fondo. Sentiti libero di modificare questa distanza come meglio credi. Assicurati di controllare sempre gli elementi sul tuo dispositivo mobile.
Possiamo fermarci qui se vogliamo, ma lo sviluppatore vorrebbe includere alcune informazioni aggiuntive. Quindi creeremo tre righe di testo separate. Uno per il tempo corrente, uno per la velocità del vento e un altro per l'umidità. Assicurati di crearli separatamente poiché utilizzeremo dimensioni e pesi dei font diversi e questo può eliminare l'altezza della linea per questi elementi.
Mi piacciono i moduli numerici del nostro carattere "Maven Pro", quindi continuerò a utilizzare questo tipo di carattere per i numeri di questi elementi, ma useremo il peso "Medio" e li contrapponiamo con il carattere "Missione gotica" impostato su " Thin "e per questo carattere più sottile lo imposteremo anche su" Small Caps ". È possibile impostare i maiuscoletti evidenziando il carattere appropriato e facendo clic sull'icona del menu in alto a destra del Personaggio pannello quindi scegliendo Maiuscoletto.
La nostra tipografia trasmette il nostro messaggio abbastanza bene, ma dobbiamo ancora creare icone per rappresentare quali sono le diverse cifre e per specificare i menu nell'app. Mi sono innamorato della forma del simbolo dei gradi del nostro carattere "Maven Pro", quindi ho pensato di legare gli elementi dell'icona insieme al tipo riutilizzando questa forma per creare le icone.
Con il Tipo Strumento (T) abilitato digitare il simbolo del grado. Le dimensioni esatte non contano a questo punto poiché la regoleremo in base alle dimensioni delle nostre icone. Quindi fai clic con il pulsante destro e scegli "Crea contorni"per convertire il tipo in una forma modificabile. Ora abilita il Strumento di selezione diretta (A) e selezionare il percorso interno più piccolo e rimuoverlo. In seguito utilizzeremo un tratto per ottenere il widget appropriato per le nostre icone. Una volta che hai la forma quadrata curvata, assicurati di regolare il altezza larghezza in modo che siano esattamente gli stessi. Saranno leggermente fuori e abbiamo bisogno di assicurarci che siano precisi quando si aggiungono elementi in seguito.
Useremo e riutilizzeremo questa forma diverse volte, quindi assicurati di averne una copia nel caso in cui perdi l'originale mentre lavori. Per ora creeremo un'icona per rappresentare il menu della posizione.
Con la nostra forma quadrata arrotondata copiata, ridurla a 32 x 32pt, e aggiungi un interno Ictus di 3px
Abilita il Strumento rettangolo arrotondato e crea un rettangolo che è 3 x 12 pt e aumentare gli angoli arrotondati in modo che le estremità siano completamente rotonde. Ora duplica questa forma altre tre volte e ruotala in modo che formi una sorta di forma a croce, quindi raggruppa tutti gli oggetti insieme. Finalmente con il gruppo selezionato, aggiungi a Ombra esterna e posizionalo 30pt sia dalla parte superiore che da quella sinistra della tavola da disegno. Assicurati di controllare la spaziatura sul tuo dispositivo mobile e regolare di conseguenza.
Copiamo la nostra forma quadrata arrotondata dalla nostra icona Posizione poiché le altre icone si baseranno su questa stessa forma e dimensione. Regola la posizione del rettangolo arrotondato per essere accanto al nostro elemento Time. Proprio come il simbolo di grado effettivo dell'elemento di temperatura, voglio che le icone di questi dettagli aggiuntivi siano anche al di fuori della temperatura solo che questa volta sarà ovviamente a sinistra degli elementi.
Come puoi immaginare, per l'elemento Time verrà creata un'icona Orologio. La nostra forma quadrata arrotondata sarà il quadrante dell'orologio e ora dobbiamo fare le lancette dell'orologio. Seleziona il Strumento rettangolo arrotondato e crea un rettangolo che è 10 x 4 pt e allinearlo al centro del quadrante dell'orologio. Duplica questo processo solo questa volta 4 x 12 pt. Una volta che hai le lancette dell'orologio in un punto comodo raggruppa gli elementi insieme e aggiungi un Ombra esterna.
Duplica nuovamente il quadrato arrotondato dalla nostra icona precedente e allinealo accanto al nostro elemento Vento. Per questa icona cercheremo di ottenere un effetto piacevole in cui l'icona stessa aiuta a diffondere l'informazione del vento fornendo una freccia che indica la direzione in cui il vento soffia attualmente. Quindi, come puoi immaginare, creeremo una freccia al centro per questa particolare icona. Inizia creando un Rettangolo arrotondato questo è 4 x 9pt e centrandolo nel quadrato arrotondato. Quindi, crea un quadrato perfetto con il Strumento rettangolo arrotondato questo è 12 x 12 pt e rimuovere uno degli angoli. Ora chiudi quel percorso aperto e ruotalo in modo che crei il punto in alto della nostra freccia, quindi centralo sulla parte del gambo della freccia, assicurandoti di nascondere completamente gli angoli arrotondati superiori.
Con la nostra freccia completata, raggruppa lo stelo e il punto insieme, quindi crea altre sette copie. Ruota ciascuna di queste copie con incrementi di un quarto in modo da avere una punta verso l'alto, una rivolta verso l'alto a destra, l'altra verso destra e così via. Poiché la nostra forma principale non è un cerchio completo, semplicemente ruotando la forma con la freccia non funzionerà, quindi abbiamo bisogno di un'icona a forma di freccia per ogni direzione che il vento potrebbe soffiare. Una volta creati, è possibile nascondere le frecce non necessarie, quindi raggruppare le frecce e arrotondare il quadrato e applicare a Ombra esterna.
Incolla una copia della nostra forma quadrata arrotondata un'ultima volta e allineatela con il nostro elemento Umidità. Ora crea un cerchio che è 8 x 8pt e al centro allinearlo nella forma principale e metterlo più in basso. Abilita il Strumento di selezione diretta (A) e seleziona il punto di ancoraggio più alto dal cerchio e trascinalo verso l'alto per creare una forma simile a una goccia, inoltre inserisci un po 'le maniglie per fare un punto più fine al droplet. Duplica questa gocciolina ancora due volte e riduci le dimensioni e posizionale vicino alla parte superiore e su entrambi i lati del droplet più grande. Finalmente Gruppo (Control + G) gli elementi insieme e aggiungi a Ombra esterna.
Per l'ultima icona di questa sezione principale avremo bisogno di qualcosa che rappresenti la data. Abbiamo trovato un'icona del calendario che mostrerà anche la data del mese.
Per iniziare creare a Rettangolo arrotondato questo è 40 x 36pt e dargli un tratto interiore di 3pt. Ora vai a Oggetto> Espandi Aspetto per convertire il tratto in una forma reale. Con il Strumento di selezione diretta (A) abilitato, selezionare i punti di ancoraggio interni superiori e spostarli verso il basso 9px usando i tasti freccia sulla tastiera. Con il Strumento rettangolo arrotondato creare due forme di pillola arrotondate che sono 9pt largo e qualsiasi altezza desiderata, quindi posizionarli sopra il quadrato arrotondato più grande in modo che il fondo si trovi a metà strada tra la grande area bianca. Quindi meno queste nuove forme dalla forma quadrata usando il esploratore pannello. Crea altre due forme di pillola, questa volta saranno 3 x 8pt e allinearli all'interno delle sezioni tagliate. Infine aggiungeremo una data per il segnaposto con le seguenti impostazioni, quindi raggrupperemo questi elementi e aggiungeremo un Ombra esterna.
Quando è stato lanciato, lo sviluppatore voleva avere una serie di widget scorrevoli nella parte inferiore della pagina principale dell'app che mostrava le previsioni del tempo orario per quel particolare giorno. Quindi, per finire la nostra pagina principale dell'app, creiamo quelli ora.
Abilita il Strumento rettangolo arrotondato e creare un rettangolo bianco che sia 165 x 250 pt, centralo allineato con la tavola da disegno e posizionalo 40px dal fondo della tavola d'arte.
Duplica questo rettangolo e riempilo di nero. Duplicalo ancora e spostalo di nuovo 4px poi Fronte meno nel esploratore pannello. È quindi possibile rilasciare l'opacità su 15%.
Duplica nuovamente il nostro rettangolo bianco e riempi il nero ridotto 15% Opacità. Disegna un'altra forma rettangolare su questa che è 79pt alto e qualsiasi larghezza e allineare fino alla cima della forma rettangolare sottostante. Seleziona il suo nuovo rettangolo e il nero più grande riempito in basso quindi scegli intersecare dal esploratore pannello.
Abilita il Tipo Strumento (T) e inserisci una temperatura a tua scelta. Volevo essere sicuro di avere abbastanza spazio per espandermi, così ho scelto il numero "100". Per questo userò il font "Missing Gothic" nel peso di "Black". Il testo stesso sarà anche un nero piatto con il Opacità lasciato cadere a 15%. Lo allineeremo quindi vicino alla parte superiore della sezione bianca del nostro contenitore.
Dal momento che questo dovrebbe essere proiettato meteo non sarà così preciso, quindi includeremo anche il possibile "basso" e "alto". Con il Tipo Strumento (T) ancora una volta crea le tue stime e invece di usare il peso "Nero", useremo invece "Sottile". Allineare questo verso il basso, assicurandosi che ci sia abbastanza spazio per respirare.
La barra più scura in cima sarà il nostro indicatore del tempo. Copia l'icona dell'orologio creata in precedenza in questo tutorial e posizionala al centro e a sinistra di questa area della barra più scura. Puoi anche copiare il testo Time anche da prima. Assicurati di rimuovere il Ombra esterna da questi elementi in quanto non è necessario.
Infine, aggiungi un Ombra esterna al rettangolo bianco principale, quindi raggruppare questi elementi insieme. Ora puoi copiare questo raggruppamento e posizionarli 20px a parte su entrambi i lati degli elementi centrati assicurandosi di regolare il tempo per ogni nuova copia. Come bonus aggiuntivo ho preso il tempo di widget che vanno fuori dalla pagina e ne riducono le dimensioni 235pt alta. Se hai bloccato il vincolo durante il ridimensionamento dell'altezza, il widget seguirà l'esempio. Questo avrà un numero decimale dietro, quindi non è esatto. Poiché questi sono fuori dalla pagina, usa la maschera che abbiamo creato in precedenza per nascondere gli elementi fuori dallo schermo.
Con ciò la nostra pagina principale è completa. Assicurati di attivare la fusione di sfondo e prova per vedere come appare sul tuo dispositivo mobile.
Ora iniziamo a lavorare sui nostri menu. Ho trovato più facile copiare il livello con tutti gli elementi dalla pagina principale, quindi selezionare la scheda grafica a sinistra della pagina principale e incollare il livello duplicato. Posizionalo in modo tale che solo l'icona della posizione sia visibile sul lato destro della tavola. Ora crea una maschera delle stesse dimensioni della nostra tavola artistica e nascondi gli elementi fuori dalla pagina.
Dal momento che il nostro design complessivo è 'piatto' invece di un'ombra graduata per indicare che la pagina principale è sopra l'elemento del menu, useremo un rettangolo nero pieno riempito impostato su 10% di opacità questo è 4pt largo e all'altezza della nostra tavola d'arte.
In questo menu avremo bisogno di un'area per aggiungere una nuova posizione, oltre a elencare le posizioni e gli interruttori impostati per abilitare / disabilitare il rilevamento automatico della posizione e le Unità in cui viene visualizzata la temperatura. Iniziamo creando la nuova sezione di posizione.
Seleziona il Strumento rettangolo (M) e crea un rettangolo che è 640 x 100 pt e allinearlo alla parte superiore della scheda grafica quindi aggiungere un Ombra esterna.
Ora abilita il Strumento rettangolo arrotondato e crea un rettangolo che è 8 x 32pt e riempilo di nero. Duplica questo rettangolo e ruotalo in modo che intersechi la forma precedente formando un simbolo "+". Seleziona entrambi i rettangoli e Unire loro dal esploratore pannello. Riduci il Opacità a 25% e centrarlo verticalmente con l'elemento rettangolo che abbiamo creato con Ombra esterna da prima. Una volta centrato verticalmente, spingerlo verso l'alto in modo che sia all'incirca alla stessa distanza da sinistra e dai bordi superiore e inferiore.
Infine seleziona il Tipo Strumento (T) e inserisci la frase "Aggiungi nuova posizione ..." usando il carattere "Mission Gothic" inviato a "Sottile" e rilascia il Opacità a 15%.
Duplicare il rettangolo precedente e allinearlo al fondo del precedente, quindi regolare il Ombra esterna.
Copia sopra la nostra forma quadrata arrotondata che abbiamo usato per le nostre icone in precedenza e invece di un tratto riempilo con il nero piatto, quindi riduci il Opacità a 15%. Copia il simbolo "+" che abbiamo creato nel passaggio precedente e ruotalo in modo da formare una "X" e centrarlo all'interno della nostra forma quadrata arrotondata, quindi scegliere il Fronte meno opzione dal esploratore pannello.
Ora copia il testo dell'elemento Location dalla nostra pagina principale e rimuovi il Ombra esterna e impostare il colore del carattere su nero e ridurre il Opacità a 25%. Sentiti libero di aggiungere più istanze solo così possiamo vedere come verrà compilato l'elenco quando vengono aggiunti nuovi elementi.
Lavoriamo sull'elemento switch per questo menu. Questo elemento rimarrà nella parte inferiore di questo menu, indipendentemente dalla durata dell'elenco. Inizia creando un rettangolo che sia 640 x 200 pt e aggiungere un Ombra esterna.
Con il Tipo Strumento (T), scrivi le etichette per gli switch che stiamo per realizzare. Uno sarà per il rilevamento automatico della posizione e l'altro imposterà se la temperatura viene visualizzata in gradi Fahrenheit o Celsius. Poiché l'elemento principale in cui si trovano questi interruttori è 200pt alto spazio.
Aggiungiamo un separatore tra queste due etichette. Con il Strumento Segmento di linea (\), creare una linea che sia 476pt largo e dargli un colpo di 2pt. Questo tratto sarà nero con il Opacità ridotto a 10pt.
Per creare gli switch stessi, riutilizzeremo la forma quadrata arrotondata di prima. Copia questa forma e ridimensionala a 50pt e riempilo di nero. Clic destro questa forma e scegli Trasforma> Sposta ... quindi spostalo orizzontalmente 80PT e fare clic su "Copia", non su "OK". Ora dovresti avere due quadrati arrotondati uno accanto all'altro.
Seleziona il Strumento rettangolo (M) e disegna un rettangolo che è della stessa altezza dei nostri quadrati arrotondati e incontra ciascuno direttamente nel mezzo. Seleziona tutti e tre questi elementi e Unire loro nel esploratore pannello. Riduci il Opacità di questa forma a 15% e allinearlo correttamente accanto alla nostra etichetta.
Incolla ancora una volta il nostro quadrato arrotondato e riempilo di bianco e aggiusta la dimensione per essere 40 x 40 pt. Allinearlo sul lato sinistro o destro in modo che ci sia una distanza intorno ai pezzi del bordo. Ora puoi duplicare queste forme e girarle orizzontalmente per indicare lo stato opposto dell'interruttore. Quindi aggiungi il tuo testo per rappresentare lo stato dell'interruttore. Fallo sia per accendere che spegnere.
Finalmente puoi duplicare questo elemento anche per il selezionatore di unità. E con questo il nostro menu di posizione è completo. Passiamo al nostro menu Data.
Questo menu di data mostrerà il tempo per i prossimi giorni. Ripetiamo i primi passaggi dal menu Posizione e copiamo l'intero livello della pagina principale, quindi mascheriamo gli elementi che escono dalla pagina e aggiungiamo un rettangolo per rappresentare l'ombra del menu.
Ora crea un rettangolo che è 640 x 160 pt e allinearlo alla parte superiore di quella tavola artistica, quindi dargli un Ombra esterna.
Avremo bisogno di qualcosa per rappresentare il giorno e la data, così come prima creiamo l'icona di un calendario. Crea un rettangolo arrotondato che sia 120 x 120 pt e aggiungi un tratto interiore che è 8px. Ora vai a Oggetto> Espandi Aspetto per convertire il tratto in una forma reale. Con il Strumento di selezione diretta (A) abilitato, selezionare i punti di ancoraggio interni superiori e spostarli verso il basso 30px usando i tasti freccia sulla tastiera. Quindi ridurre il Opacità a 15%.
Ora aggiungi il tuo testo all'icona. Vogliamo che l'azione migliore sia il giorno della settimana. Questo sarà testo bianco. La data stessa sarà nera con il Opacità lasciato cadere a 15%. Entrambi utilizzano "Maven Pro" nel peso "Medio".
Infine aggiungi la temperatura prevista. Il carattere sarà "Mission Gothic" per i numeri e "Maven Pro" per il simbolo di grado. Aggiungeremo anche una selezione "alto / basso" in basso a destra dell'elemento.
Se lo desideri, puoi duplicare questo elemento e regolare il giorno / la data per il resto della settimana.
Assicurati di prendere nota della spaziatura tra gli elementi e qualsiasi posizione esatta che puoi immaginare per rendere più facile il lavoro degli sviluppatori. Più informazioni fornite più facile sarà per lo sviluppatore codificare il prodotto in modo che corrisponda al design. Inoltre non posso sottolineare abbastanza quanto sia importante testare sempre mentre si progetta in modo da sapere che il disegno verrà tradotto sullo schermo del cellulare. Buona fortuna con il design dell'app!
Accentsconagua