La grafica per il web è stata una tendenza popolare da secoli. E con l'invenzione dell'iPhone di Apple nel 2007, l'app store è cresciuta moltissimo. Ora abbiamo i progettisti e gli sviluppatori di app iOS che si uniscono per costruire nella realtà alcune idee davvero fantastiche.
Ma se non ti piace imparare Xcode e programmare Objective-C, Photoshop potrebbe avere più interesse. Di seguito presenterò alcuni dei suggerimenti che ho raccolto per la progettazione di prototipi di app killer iOS. E poiché ci sono sempre nuove tendenze emergenti, la comunità del design ridefinisce costantemente come creare app. Pensa a questo come a una guida alle risorse per principianti per la progettazione di dispositivi Apple.
Impostazioni documento corretto
Prima di considerare anche gli elementi nella pagina, dovresti capire come vengono creati i grafici dell'iPhone. Nel nuovo display retina su modelli iPhone 4 / 4S lo schermo è ancora fisicamente misurato nelle stesse dimensioni. Tuttavia, la visualizzazione in pixel è effettivamente raddoppiata rispetto all'originale, il che significa che usiamo il 640? 960 a una risoluzione di 326ppi.
Inoltre le icone di iPhone 3 / 3GS erano generalmente 57? 57 pixel. Le schermate di iPhone 4 e 4S utilizzano 114? 114 per impostazione predefinita (ma verranno ridimensionate per risoluzioni precedenti). Per fortuna il processo di progettazione delle icone è abbastanza distaccato dalla creazione di un layout dell'interfaccia utente. Ma come designer non fa mai male costruire entrambe le abilità.
Se si utilizzano molte di queste impostazioni, si consiglia di salvarle come dimensioni predefinite del documento. Nella finestra del nuovo documento per Photoshop vedrai un pulsante con l'etichetta "Salva preset"? ?. Dagli un nome e puoi selezionarlo dall'elenco a discesa ogni volta che crei un nuovo documento.
Invece di creare manualmente gli elementi dell'interfaccia utente di iPhone, un blog Teehan + Lax offre un download di kit dell'interfaccia utente gratuito appositamente per Photoshop. Questo include un rendering di iPhone 4, barre in alto, pulsanti, tastiere e tonnellate di altre cose utili. Afferra definitivamente questo e salvalo in una directory locale dove puoi accedere facilmente a questi elementi.
Personalizza le barre e i pulsanti
L'area superiore e quella inferiore della tua app probabilmente contengono barre dei menu. La parte superiore viene utilizzata per etichettare la vista corrente, insieme ai pulsanti indietro e modifica. Il fondo è in genere la navigazione e più comunemente utilizza schede per realizzare questo.
Teehan + Lax utilizza alcuni esempi veramente generici per questi. Ma sono molto più facili da personalizzare con i tuoi colori, le trame e qualsiasi altra cosa che ti piaccia. Quindi, ad esempio, prendiamo il livello di gruppo Barra (grigio-blu) e trascinalo in una nuova finestra del documento di dimensioni iPhone. Quindi fai clic sul piccolo triangolo a sinistra e apri un altro sottogruppo etichettato Bar Top. In fondo c'è un livello di sfondo con un effetto di sovrapposizione per il gradiente.
Apri FX su questo livello di sfondo e fai doppio clic sulla sovrapposizione del gradiente. Ho rimosso i colori predefiniti da Apple e ho impostato (da sinistra a destra) # 3478a7 in # 5eb0e7. Anche i due pulsanti dovranno perdere i loro gradienti - per questi ho usato i valori da 052b50 a # 044a8e per un ricco effetto scuro.
Divertimento con trame
Puoi capire semplicemente da queste piccole modifiche al gradiente che personalizzare la tua app è un compito abbastanza semplice. Per un po 'di dettagli possiamo aggiungere una texture o un motivo sopra l'area del gradiente della barra. Andremo con alcune strisce oblique per questo esempio dimostrativo.
Inizia creando un nuovo documento 7? 7 pixel con uno sfondo trasparente. Quindi imposta lo strumento matita alla scala più piccola (1 pixel per 1 pixel) e collegalo dall'angolo in alto a destra nell'angolo in basso a sinistra. Ho usato il nero HEX # 000000 ma non dovrebbe avere importanza dal momento che puoi sempre cambiare il colore in seguito. Guarda lo screenshot qui sotto se non segui:
Ora colpisci Modifica -> Definisci modello? e dargli un nome, quindi premere Salva. Sentiti libero di chiudere la finestra ora (senza salvare) poiché tutto ciò di cui avevamo bisogno era lo schema. Ora torna nel bar in alto gruppo crea un nuovo livello sopra lo sfondo. CMD + clic o CTRL + clic sulla maschera vettoriale che selezionerà tutta la barra del gradiente di sfondo.
Ma assicurati di fare nuovamente clic sul nuovo livello appena creato in modo che sia evidenziato in blu. Lo riempiremo con questo nuovo motivo, ma vogliamo vedere solo le strisce sopra il gradiente superiore della barra (e sotto i pulsanti). Nel menu in alto vai a Modifica -> Riempi e selezionare? Pattern? dal menu a discesa. Nella casella qui sotto devi selezionare l'ultimo modello punteggiato e premere OK.
Le linee sembrano inizialmente piuttosto rigide. Quindi negli strati il pallet rilascia il riempimento fino al valore del 20% circa. Inoltre potremmo cambiare la modalità di fusione in Sovrapposizione, in modo che le barre scorrano con i colori del gradiente. Zoom indietro al 100% e controlla l'effetto fantastico!
Puoi creare un'altra dolce texture impostando un documento 3px per 3px e inserendo un simbolo più. Ho aggiunto un esempio sopra di come questo cambia l'aspetto della nostra barra in alto in modo così drammatico. Puoi anche provare a cambiare il colore dal nero puro al bianco puro #FFFFFF.
Icone della barra delle linguette
I pulsanti di navigazione nella parte inferiore della tua app sono fondamentali per l'esperienza utente complessiva. Gli utenti devono capire dove modificare le impostazioni, come eseguire attività e cosa fare rapidamente nell'app. Altrimenti spesso diventano frustrati o annoiati e smettono di provarci. Quindi, come un altro suggerimento cerchiamo di abbellire l'area di navigazione nella barra in basso.
Utilizzando lo stesso iPhone 4 file GUI PSD individuare la barra delle? gruppo. Ricorda che puoi farlo con CMD / CTRL + facendo clic sul blocco in Photoshop. Simile alla barra in alto, possiamo modificare il gradiente FX dello sfondo per alcuni stili di corrispondenza. In alternativa, il gradiente predefinito nero si adatta bene alla maggior parte delle combinazioni di colori.
Per alcune icone consiglio vivamente il set retina di The Working Group, disponibile in 24px, 48px e 64px. Ciascuna delle icone della GUI PSD ha degli stili di livello FX applicati - fondamentalmente un'ombra leggera e una sfumatura di sovrapposizione.Questi piccoli dettagli aggiungono davvero un design eccezionale, quindi fai molta attenzione ai tuoi pixel. Prova a utilizzare questo designer di combinazioni di colori se hai problemi.
Dovresti pensare a come le etichette di testo influenzeranno l'esperienza dell'utente. Se ritieni che le icone delle schede siano sufficienti, il testo dell'etichetta potrebbe essere d'intralcio. Tuttavia è importante mantenere aperte le opzioni e giocare con alcune idee diverse. Cerca di ottenere le opinioni di amici e colleghi per vedere quale metodo è migliore per la tua app.
Un'altra tecnica abbastanza diffusa è che i progettisti di app creano un pulsante centrale che divide la barra delle schede in 5 slot. Ho visto un sacco di applicazioni davvero creative che utilizzano questo design per risparmiare spazio e aggiungere eleganza nella navigazione. Formspring è un esempio, ho aggiunto la schermata qui sotto.
Collegamenti utili
- Glyphish Icon Set
- Progetta un'app per iPhone Bank in Photoshop [Tutorial]
- Disegna le applicazioni per iPhone in Photoshop [PDF]
- Raccolta utile di strumenti e risorse per gli sviluppatori di app per iPhone / iPad
- Suggerimenti e risorse per l'usabilità iOS per le app per iPhone e iPad
- Come creare la tua prima applicazione per iPhone
Conclusione
Queste strategie per lavorare con le app iOS e Adobe Photoshop saranno utili man mano che sviluppi ulteriormente i tuoi sensi progettuali. Le applicazioni mobili sono un gioco completamente diverso rispetto ai siti Web e ai loghi. Tienilo a mente durante tutto il processo poiché imparerai costantemente nuove tecniche.
Insieme ai link aggiunti sopra, dovresti sentirti molto più a tuo agio con il design dell'interfaccia di app. I modelli di layout sono sempre difficili e richiedono tempo per costruire e studiare. Ma se hai abbastanza dedizione, il mercato della telefonia mobile è probabilmente l'area più prospera. Se hai ulteriori domande o commenti, faccelo sapere nell'area di discussione qui sotto.