Guida per principianti per lo sviluppo iOS L'interfaccia - Parte I
Apple è stata per anni un'industria leader nel mondo mobile con le sue serie di iPhone e iPad. Nonostante l'hype che può creare con tutte le versioni ufficiali, detiene anche una grande porzione di quote di mercato nella piattaforma mobile, e questo è probabilmente il motivo per cui la maggior parte dei clienti vorranno che la loro app esista nell'app store di Apple; diventando così la ragione per gli sviluppatori per imparare e costruire l'app per iPhone.
La buona notizia è che lo sviluppo di applicazioni per iPhone non è così difficile come si potrebbe pensare, e questo post esiste come guida completa per guidarti nel processo completo di creazione di un'applicazione per iPhone.
Discuteremo le ragioni, le fasi e gli strumenti per lo sviluppo dell'app e alla fine seguiremo un semplice tutorial per progettare l'applicazione base per iPhone utilizzando Xcode.
Quindi, che tu stia imparando per lavoro o hai solo un'incredibile idea di app che potrebbe renderti un milionario, iniziamo a creare la tua prima app per iPhone!
Nota: è necessario un computer con sistema operativo Macintosh (Mac OS) per l'installazione di Xcode, lo sviluppo di applicazioni e l'invio di app, in nessun modo è possibile eseguirlo su Windows legalmente.
Perché sviluppare per Apple?
Vedo questa domanda spesso, quindi voglio spiegare perché dovresti essere interessato allo sviluppo di iPhone. Proprio come ho affermato nell'introduzione, iPhone al momento detiene una grande quota di quote di mercato nella piattaforma mobile.
Penso che questa ragione dovrebbe essere sufficiente per imparare a sviluppare l'applicazione per iPhone come se stessimo sviluppando per te o per i tuoi clienti, molte persone probabilmente sperano che la loro app sia accessibile a molte persone nel mondo.
Dal punto di vista dello sviluppo, A Apple piacciono le cose semplici, e questo vale per i loro prodotti e strutture. iOS è il sistema operativo che alimenta tutti i dispositivi mobili di Apple. Questi includono iPod Touch, iPhone e iPad. Quindi tieni a mente quando sviluppi app per iPhone, potresti esserlo sviluppo per tutti gli altri dispositivi con iOS!
Inoltre, ciò che rende la funzionalità di cui sopra ancora più grande è quanto può essere salvato il lavoro di codifica. Quando scrivi il codice per l'applicazione iPhone sei utilizzando lo stesso linguaggio di programmazione per tutti i dispositivi informatici di Apple. Ciò significa che quando sviluppi l'applicazione per iPhone, l'app può essere successivamente integrata in iPad e persino in Mac.
Objective-C è il linguaggio di programmazione principale che alimenta tutti i loro framework. Insieme a Objective-C, svilupperai anche l'app per iPhone con Cocoa Touch, il framework di programmazione che guida l'interazione dell'utente su iOS.
Questo è solo un po 'di informazioni per iniziare lo sviluppo di app per iPhone. Lo sviluppo è un processo piuttosto complicato ma rilassati, prendilo lentamente. Quindi le ragioni sono qui, e la decisione è tua. Se la risposta è sì o no, puoi sempre saltare direttamente al prossimo argomento: progettazione di app per iPhone.
Pianificazione della struttura dell'app iPhone
Nell'ideologia standard della creazione di un'app per iPhone, ti consigliamo di farlo passare attraverso alcune fasi. La prima fase include pianificazione e sketch.
Prima di tutto è necessario avere un'idea per cosa farà la tua app. Perché la gente vorrebbe scaricarlo? E quali caratteristiche vuoi includere? Questa è la fase più importante, come se lo facessi nel modo giusto, lo farai risparmia molta confusione e problemi nella fase di codifica.
Peggio, ti riporta al tavolo da disegno.
Raccomando di tracciare alcune idee approssimative per alcune pagine (o viste) della tua domanda. Disegna una forma rettangolare, magari 5 o 6 forme su un foglio di carta, quindi disegna le funzioni desiderate su ogni vista della tua app.
Puoi pensare a visualizzazioni come pagine diverse in un sito web. Ogni vista offrirà diverse funzionalità come un modulo di accesso, un elenco di contatti o una tabella di dati.
Di seguito ho creato una breve raccolta dei diversi elementi della barra dell'interfaccia utente:
- Barra di stato - Visualizza il livello attuale della batteria del dispositivo, la connessione 3G, le barre di ricezione, il gestore telefonico e molto altro ancora. Si consiglia di includere sempre questi elementi.
- Barra di navigazione - Offre agli utenti la possibilità di navigare tra le gerarchie di pagina. Questo spesso include un pulsante sul lato sinistro della barra per consentire all'utente di tornare alla visualizzazione dell'app precedente.
- Toolbar - Appare nella parte inferiore dell'app per iPhone. Ciò manterrà alcune icone legate ad alcune funzioni come Condividere, Scaricare, Elimina, eccetera.
- Barra delle linguette - Molto simile alla barra degli strumenti, tranne che ora stai lavorando con le schede. Quando un utente fa clic sull'icona di una scheda, verrà automaticamente evidenziato e visualizzerà uno stato di passaggio del mouse lucido. Questa barra viene utilizzata per passare da una vista all'altra invece di offrire funzionalità diretta.
Questo elenco contiene solo le barre degli strumenti che è possibile trovare nella maggior parte delle app. Ci sono alcune altre viste e stili da considerare, che puoi trovare nelle linee guida sull'utilizzo degli elementi UI iOS di Apple. Consiglio vivamente di fare riferimento a questa documentazione in caso di dubbi sugli elementi dell'interfaccia utente di iPhone.
Nell'interesse del tempo, non descriverò ogni elemento dell'interfaccia utente. Ci sono troppi elementi da considerare e non finirai per usarli tutti nella tua singola app. Ma mentre descrivi le tue opinioni, puoi trai ispirazione dalle linee guida suggerite sopra e da altre app per iPhone ti è piaciuto usarli.
Progettare i mockup di Photoshop
Suppongo che molti di voi stiano abbastanza bene lavorando con Adobe Photoshop. È il software in anteprima per la creazione di grafica per sito Web, banner, loghi e modelli mobili. Progettare la grafica per il web è un processo abbastanza semplice, ma è un po 'più complicato quando si parla di design dell'app per iPhone.
Se stai cercando di creare un'applicazione, dovresti davvero crea modelli di mockup pixel perfetti sin dall'inizio.
Per iniziare, dovremmo discutere le impostazioni di Photoshop. Dal momento che stiamo progettando per iPhone, dobbiamo considerare 2 diversi stili di design. Il il normale display dell'iPhone è 320 x 480 pixel. Tuttavia l'iPhone 4 include a display retina che raddoppia la quantità di pixel all'interno delle stesse dimensioni dello schermo. Quindi dovresti raddoppia la risoluzione a 640 x 960 pixel e progetta i tuoi layout secondo questo standard.
Ciò significa che dovrai anche crea 2 set di icone per i tuoi modelli. Originariamente le icone sarebbero impostato su 163ppi ma dovrai farlo include icone con 326ppi per iPhone 4. Le icone sono tradizionalmente contrassegnate con @ 2x alla fine del nome del file, ad esempio “[email protected]“.
Ora ottimizziamo le nostre nuove impostazioni del documento. Per prima cosa dovremo modificare alcune preferenze, quindi accedi a Photoshop> Modifica> Preferenze> Guide, Grid and Slices. Bene essere impostando la griglia su 20px con suddivisioni a 2. Quando si progetta per display retina La linea 2px mostrerà 1 punto sullo schermo. Questa è una regola importante che devi tenere a mente per ridimensionare la tua app.
Tendo a trovare più facile costruire i miei progetti con una risoluzione più alta, quindi ridimensionarli, ma è possibile prova entrambi i metodi e vedi cosa ti sta meglio. Stiamo usando 640 x 960 pixel a 326ppi: salvalo come predefinito personalizzato se pensi di usarlo spesso.
Costruire con gli elementi del modello
Ora puoi usare Photoshop per creare un layout perfetto per i pixel, ma questo è un lavoro molto faticoso e noioso.
Questo è un file enorme con troppi elementi. Per semplificare le cose, puoi premere v attivare il Sposta strumento e fare clic sul “Auto selezione” sulla sua barra delle opzioni, quindi selezionare il “Strato” piuttosto che “Gruppo”. Con le impostazioni, puoi fare clic su qualsiasi elemento e Photoshop ti porterà al livello corrispondente!
Sentiti libero di giocare con il mockup, oppure puoi anche creare il prototipo dell'applicazione dal mockup. A seconda della tua app potresti includere un gran numero di funzioni all'interno dell'area principale, molte delle quali puoi trovare in questo file PSD. È anche possibile accedere ai livelli di questi elementi e modificare i caratteri, i colori sfumati e altri stili di progettazione. Appena assicurati di non ridimensionare nulla poiché tutte le barre e gli elementi dell'interfaccia utente sono impostati su dimensioni standard predefinite.
Sviluppo di app in Xcode
Lo strumento di sviluppo per la programmazione iOS e Mac OS X è denominato Xcode. Se esegui OS X Lion puoi trovare Xcode e tutti i pacchetti applicabili gratuitamente in Mac App Store.
Una volta completata l'installazione, avvia Xcode e dovrebbe apparire la sua schermata di benvenuto. Da qui puoi caricare un progetto precedente o scegliere di crearne uno nuovo. Per ora è necessario fare clic “Crea un nuovo progetto Xcode“, quindi la finestra del modello presenterà alcune opzioni. In iOS> Applicazione, fare clic su “Applicazione vista singola” e colpisci “Il prossimo”. Puoi dai un nome alla nuova app, ad esempio Test (preferibilmente senza spazi), quindi sul Identificativo della società, digitare una parola come la mia compagnia, e infine scegliere una directory e premere “Salvare”.
Xcode costruirà la directory dei file e ti invierà in una nuova finestra per lavorare. Dovresti vedere un sacco di opzioni di file elencate, ma il cartella che prende il nome dalla tua applicazione è l'obiettivo principale.
Con Xcode hai due opzioni per la progettazione di elementi front-end. Il classico XI ter / pennino il formato è standard per le app Mac OS X e iOS, che richiede di progettare ogni volta una nuova visualizzazione di pagina. Tuttavia, mentre crei più viste in una singola app, la quantità di file di pennini può diventare troppo travolgente, quindi una nuova storyboard il file contiene tutte le viste del pennino in un unico riquadro dell'editor. Da qui puoi rimuovere e aggiungere elementi e caratteristiche dell'interfaccia utente con facilità.
Inoltre ti imbatterai .h e .m file nello stesso gruppo di cartelle. Questi sono nomi di file brevi per intestazione e implementazione codice. Questi file sono dove scrivi tutte le funzioni e le variabili Objective-C necessarie per l'esecuzione della tua app. Potrebbe essere una buona idea spiegare come funziona Xcode MVC (Model, View, Controller), che è la ragione per cui abbiamo bisogno di 2 file per ogni controller.
Gerarchia di programmazione MVC
Per capire come funziona l'app dovrai capire la sua architettura di programmazione. Con Modello, Visualizza, Controller (MVC) come base, Xcode può separare tutti i tuoi display e il codice di interfaccia dalla tua logica e dalle funzioni di elaborazione, e non c'è davvero un'altra opzione da scegliere. All'inizio MVC può sembrare confuso, ma se hai provato a capirlo e inizi a creare alcune app di base, ti piacerà moltissimo.
Per semplificare la comprensione, ho presentato ogni oggetto nell'elenco seguente:
- Modello - Contiene tutti i dati logici e di base. Questo include variabili, connessioni a feed RSS esterni o immagini, funzioni dettagliate e numeri crunch. Questo livello è completamente separato dalle tue visualizzazioni, in modo che tu possa facilmente cambiare le viste e avere gli stessi dati funzionanti.
- vista - Una schermata o uno stile di visualizzazione nella tua applicazione. Un elenco di tabelle, una pagina di profilo, una pagina di riepilogo degli articoli, un lettore audio, un lettore video, questi sono tutti esempi di visualizzazioni. Puoi cambiare i loro stili e rimuovere elementi, ma continuerai a lavorare con gli stessi dati nel tuo Modello.
- controllore - Agisce come intermediario tra gli altri due. Connetti gli oggetti nella tua vista a un ViewController che trasmette le informazioni al e dal tuo Modello. In questo modo è possibile fare in modo che un utente tocchi un pulsante e registrarlo nel modello. Quindi eseguire una funzione di disconnessione e attraverso lo stesso controller passare un messaggio “disconnesso con successo!”.
Quindi fondamentalmente tuo il modello contiene tutte le informazioni e le funzioni che dovrai mostrare da qualche parte sullo schermo. Ma i modelli non possono interagire con lo schermo, solo le viste possono. Le viste sono per lo più tutte visive e possono solo estrarre dati attraverso un ViewController. Il Il controller è in realtà un modo molto più raffinato di nascondere i dati di back-end dal design del front-end. In questo modo è possibile rinnovare il design più volte senza perdere alcuna funzionalità.
Con questa conoscenza non dovrebbe essere difficile iniziare a costruire le tue prime app. Come menzionato prima, Objective-C è il linguaggio di programmazione principale che utilizzerai per sviluppare l'app. È costruito in linguaggio C con sintassi aggiornata e alcuni paradigmi aggiuntivi. Avrai bisogno di molto tempo per familiarizzare con la lingua, ma per la lezione per principianti ti consiglio la serie di tutorial di Mobiletuts+.
Design View con storyboard
Ora che abbiamo esaminato gli aspetti tecnici di un'applicazione, dovremmo dedicare un po 'di tempo a progettare l'interfaccia. Presumo che tu abbia mantenuto il “storyboard” opzione controllato durante la creazione del progetto, il che significa che puoi trovare un singolo MainStoryboard_iPhone.storyboard file da qualche parte nel gruppo di cartelle situato sul lato sinistro della finestra. Fare clic sul file per selezionarlo e aprire la vista.
Una nuova barra laterale dovrebbe apparire direttamente a destra del gruppo di cartelle. Questo è chiamato il Struttura del documento ed è una sorta di metodo di anteprima rapido per il controllo di tutte le visualizzazioni disponibili in questo storyboard.
Vogliamo iniziare aggiungendo solo alcuni elementi della pagina nel nostro controller di visualizzazione. Abbiamo bisogno di due elementi diversi: a Barra di navigazione e a Barra delle linguette. Prima di afferrarli, accedi a Ispettore degli attributi (Visualizza> Utilità> Mostra ispettore attributi) sul lato destro della finestra, quindi cerca il Barra di stato etichetta. Di default è impostato su dedotto che utilizza il colore di stato standard di iPhone, ma puoi anche scegliere Nero o Nero traslucido se il design della tua app si adatta meglio al colore.
La biblioteca degli oggetti
Se la Utilità il riquadro sul lato destro della finestra non è visibile, è possibile abilitarlo accedendo a Visualizza> Utilità> Mostra utilità. Nel pannello Utility, guarda in basso per un pannello chiamato Libreria di oggetti. Ha ottenuto un menu a discesa con il “Oggetti” come il primo elemento della lista. Se non riesci a trovarlo, puoi selezionare Visualizza> Utilità> Mostra libreria di oggetti.
Dal menu a discesa della Libreria oggetti, trova e seleziona Windows e barre. Ora fai clic sul Barra di navigazione, trascinalo nella finestra di visualizzazione e posizionalo direttamente sotto il nero Barra di stato (con l'icona della batteria). Ora possiamo personalizzare la descrizione del titolo della barra. Fare doppio clic sul testo che attualmente legge “Titolo“, e vedrai un'etichetta chiamata “Titolo” nel pannello Utilità, a cui è possibile modificare la descrizione del titolo “Test” da li. Colpire “accedere” per assistere al cambiamento.
Di nuovo nel pannello di Windows e barre, scorrere verso il basso per trovare il Barra delle linguette, quindi trascinalo nella finestra di visualizzazione e posizionalo nella parte inferiore della tua app. Di default questi 2 elementi sono fantastici.
Ora forse vuoi che il gradiente della barra di navigazione corrisponda alla barra delle schede in basso, e per farlo puoi cliccare sulla barra di navigazione e guardare a destra a attributi pannello nel pannello Utilità. La prima opzione è chiamata Stile, che è impostato su Predefinito. Cambia lo stile da predefinito a Nero opaco e avremo un set di colori corrispondente!
Aggiungiamo anche un altro tasto tab nella barra in basso dell'app. Sposta nuovamente il cursore del mouse sul pannello di Windows e barre e scorri verso il basso fino a Tab Bar Item, direttamente sotto Tab Bar. Trascina questo nella finestra dell'app e posizionalo nel mezzo dei 2 pulsanti esistenti della barra delle schede. Se fai doppio clic su questo nuovo pulsante puoi vedere alcune opzioni aggiuntive nel pannello Utility, puoi modificare l'elemento Immagine e titolo da li. Ad esempio, ho cambiato il titolo in “Segnalibro” per l'elemento Barra di Tab appena aggiunto.
Quindi questo è un breve tutorial sulla progettazione di viste all'interno di Xcode. Non è un processo terribilmente difficile, ma richiederà un po 'più di tempo per abituarsi all'interfaccia. Gioca con qualche altro elemento se ti senti a tuo agio, puoi anche andare alle risorse di sviluppo iOS di Apple per maggiori risorse di apprendimento, non è mai una brutta cosa scoprire di più!
Resta sintonizzato per la seconda parte
Questo conclude la nostra prima parte della guida per la progettazione e lo sviluppo di app per iPhone. Nella prossima parte approfondiremo un po 'più in profondità Objective-C e Cocoa Touch e alla fine impareremo a costruire un'app per iPhone funzionante, restate sintonizzati!
Galleria di design iOS
Per i progettisti, spero anche di darti qualche spunto, quindi di seguito ho incluso un elenco di fantastiche visualizzazioni delle app per iPhone. L'elenco presenta una grande varietà di elementi di app ispiratori che probabilmente non hai mai notato prima. Sentiti libero di condividere le tue idee, visualizzazioni di app o domande nella sezione commenti qui sotto, grazie!
Race Splitter
Telecomando di soddisfazione
Tweetbot per iPhone
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Buio
