Ghidul începătorului pentru dezvoltarea iOS Interfața - partea I

Apple a fost o industrie de lider în lumea de telefonie mobilă de ani de zile cu seria de iPhone și iPad. În ciuda hype poate crea cu fiecare versiunile oficiale, este care deține, de asemenea, o mare parte a cotelor de piață în platforma de telefonie mobilă, iar acest lucru este, probabil, motivul pentru care majoritatea clienților vor dori aplicația lor să existe în App Store Apple a lui; devenind astfel motivul pentru dezvoltatorii de a învăța și a construi aplicația pentru iPhone.

Vestea bună este că dezvoltarea de aplicații pentru iPhone nu este la fel de greu de crezut, iar acest post există ca un ghid cuprinzător care vă poate ajuta să vă uitați prin procesul complet de construire a unei aplicații pentru iPhone.

Vom discuta motivele, fazele și instrumentele pentru dezvoltarea aplicației și, în cele din urmă, veți urma un tutorial simplu pentru a proiecta aplicația de bază iPhone folosind Xcode.

Deci, indiferent dacă învățați pentru afaceri sau pur și simplu aveți o idee uimitoare despre aplicații care ar putea să vă facă un milionar, să începem să vă construim prima aplicație iPhone!

Notă: veți avea nevoie de un computer cu sistem de operare Macintosh (Mac OS) pentru instalarea Xcode, dezvoltarea de aplicații și depunerea aplicațiilor, nu puteți face acest lucru pe Windows legal.

De ce să dezvolte pentru Apple?

Văd această întrebare întrebată frecvent, așa că vreau să vă explic de ce ar trebui să fiți interesat de dezvoltarea iPhone-ului. Asa cum am spus in introducere, iPhone in prezent deține o mare parte a cotelor de piață în platforma mobilă.

Cred că acest motiv ar trebui să fie suficient pentru ca tu să înveți să dezvolți aplicația pentru iPhone, indiferent dacă te dezvolți pentru tine sau pentru clienți, majoritatea probabil că sperăm că aplicația lor poate fi accesată de mulți oameni din lume.

Din punctul de vedere al dezvoltării, Apple îi place lucrurile simplu, și aceasta se aplică produselor și cadrelor lor. iOS este sistemul de operare care permite toate dispozitivele mobile Apple. Acestea includ iPod Touch, iPhone și iPad. Așa că țineți minte atunci când dezvoltați aplicații pentru iPhone, ați putea fi în curs de dezvoltare pentru toate celelalte dispozitive cu iOS!

În plus, ceea ce face ca această caracteristică să fie mai mare este cât de mult poate fi salvată lucrarea de codificare. Când scrieți codul pentru aplicația iPhone pe care o faceți folosind același limbaj de programare pentru toate dispozitivele de calcul Apple. Aceasta înseamnă că atunci când dezvoltați aplicația iPhone, aplicația poate fi ulterior integrată în iPad și chiar în Mac.

Obiectiv-C este limbajul de programare de bază, alimentând toate cadrele lor. Împreună cu Obiectiv-C, veți dezvolta, de asemenea, iPhone app cu Cocoa Touch, cadrul de programare care determină interacțiunea utilizatorilor pe iOS.

Acest lucru este doar un pic de informații pentru a obține ați început pe dezvoltarea de aplicații pentru iPhone. Dezvoltarea este un proces destul de complicat, dar relaxați-vă, luați-o încet. Deci, motivele sunt aici, iar decizia este a ta. Dacă răspunsul este da sau nu, puteți oricând să treceți la următorul subiect: proiectarea aplicațiilor pentru iPhone.

Planificarea structurii iPhone App

În ideologia standard de a crea o aplicație pentru iPhone, veți dori să treceți prin câteva faze. Prima fază include planificare și schițare.

Mai întâi de toate trebuie să aveți o idee ceea ce va face aplicația dvs.. De ce ar vrea oamenii să o descarce? Și ce caracteristici doriți să includeți? Aceasta este faza cea mai importantă, de parcă ai face bine, o să o faci salvați o mulțime de confuzie și probleme în faza de codificare.

Cel mai rău, te întoarce la tablă.

Vă recomand să schițați câteva idei brute pentru câteva pagini (sau vizualizări) din cererea dumneavoastră. Desenați doar o formă de dreptunghi, poate 5 sau 6 forme pe o foaie de hârtie, apoi trageți caracteristicile pe care le doriți în fiecare vizualizare a aplicației dvs..

Vă puteți gândi la vizionări precum diferite pagini de pe un site Web. Fiecare vizualizare va oferi funcții diferite, cum ar fi un formular de autentificare, o listă de contacte sau un tabel de date.

Mai jos am construit o scurtă colecție a diferitelor elemente ale barei UI:

• Bara de stare - Afișează nivelul curent al bateriei, conexiunea 3G, barele de recepție, telefonul mobil și multe altele. Se recomandă să includeți întotdeauna aceste elemente.
• Bară de navigare - Oferă utilizatorilor opțiunea de a naviga între ierarhiile paginilor. Aceasta include adesea un buton din partea stângă a barei pentru a permite utilizatorului să revină la vizualizarea anterioară a aplicației.
• Bara de instrumente - Apare în partea de jos a aplicației iPhone. Aceasta va conține câteva icoane legate de anumite funcții, cum ar fi Acțiune, Descarca, Șterge, etc.
• Bara Tab - Foarte similar cu bara de instrumente, cu excepția faptului că acum lucrați cu file. Când un utilizator dă clic pe o pictogramă de file, va fi automat evidențiat și va afișa o stare lucioasă. Această bara este utilizată pentru a comuta între vizualizări în loc să ofere funcționalități directe.

Această listă conține doar barele de instrumente pe care le puteți găsi în majoritatea aplicațiilor. Există și alte vederi și stiluri pe care le puteți găsi, pe care le puteți găsi în Ghidul de utilizare a elementelor UI ale Apple iOS. Vă recomandăm să consultați această documentație atunci când aveți îndoieli cu privire la elementele de interfață ale iPhone-ului.

În interesul timpului nu voi descrie fiecare element UI. Există prea multe elemente pe care să le luați în considerare și nu veți ajunge să le folosiți pe toate în aplicația dvs. unică. Dar, pe măsură ce schițezi opiniile tale, poți inspirați din liniile directoare sugerate mai sus și alte aplicații iPhone te-ai bucurat să le folosești.

Proiectarea Photoshop Mockups

Presupun că majoritatea dintre dvs. sunteți destul de confortabil de lucru cu Adobe Photoshop. Este software-ul premieră pentru crearea de grafice pentru site-ul web, bannere, logo-uri și machete mobile. Proiectarea grafică pentru web este un proces destul de simplu, dar este un pic mai complicat când vine vorba de designul iPhone app.

Dacă doriți să construiți o aplicație, trebuie să o faceți creați modele de machete de tip pixel de la început.

Pentru început, ar trebui să discutăm setările Photoshop. Deoarece proiectăm pentru iPhone, trebuie să luăm în considerare 2 stiluri de design diferite. display-ul obișnuit al iPhone-ului este de 320 x 480 pixeli. Cu toate acestea, iPhone 4 include un a retina care dublează numărul de pixeli în aceeași dimensiune a ecranului. Deci ar trebui dublați rezoluția la 640 x 960 pixeli și proiectați aspectul dvs. la acest standard.

Acest lucru înseamnă că va trebui, de asemenea creați 2 seturi de icoane pentru machetele tale. Inițial ar fi icoane setat la 163ppi dar va trebui include icoane cu 326ppi pentru iPhone 4. Icoanele sunt marcate în mod tradițional cu @ 2x la sfârșitul numelui fișierului lor, cum ar fi “[email protected]“.

Acum, să optimizăm setările noilor documente. Mai întâi trebuie să editați câteva preferințe, deci accesați Photoshop> Editare> Preferințe> Ghiduri, grilă și felii. Sa fie bine setarea Gridline noastre la fiecare 20px cu subdiviziuni la 2. Când proiectați pentru afișarea retinei Linia de 2px va afișa 1 punct pe ecran. Aceasta este o regulă importantă pe care trebuie să o țineți minte pentru a micșora aplicația.

Am tendința să găsesc mai ușor să construiesc desenele mele cu o rezoluție mai mare, apoi să le scot în jos, dar poți încercați ambele metode și vedeți ce vă potrivește cel mai bine. Utilizăm 640 x 960 pixeli la 326ppi - salvați-o ca presetare personalizată dacă credeți că o veți utiliza frecvent.

Clădire cu elemente de șablon

Acum puteți folosi Photoshop-ul pentru a crea un aspect pixel-perfect pe cont propriu, dar acest lucru se dovedește a fi o muncă foarte obositoare și plictisitoare.

Acesta este un fișier imens cu prea multe elemente. Pentru a face lucrurile mai ușoare, puteți apăsa v activa Mutați instrumentul și faceți clic pe “Selectare automată” pe bara de opțiuni, apoi selectați “Strat” Decat “grup”. Cu setările, puteți face clic pe orice element și Photoshop vă va aduce la stratul corespunzător!

Simțiți-vă liber să jucați cu macheta, sau chiar puteți crea prototipul aplicației de la mockup. În funcție de aplicația dvs., puteți include o mulțime de funcții în zona de bază, multe dintre acestea fiind disponibile în acest fișier PSD. De asemenea, este posibil să mergeți la straturile acestor elemente și să editați fonturile, culorile gradientului și alte stiluri de design. Doar asigurați-vă că nu redimensionați nimic deoarece toate barele și elementele UI sunt setate la dimensiunile standard implicite.

Dezvoltarea de aplicații în Xcode

Instrumentul pentru dezvoltatori pentru programarea pentru iOS și Mac OS X este denumit Xcode. Dacă utilizați OS X Lion puteți găsi Xcode și toate pachetele aplicabile gratuit în Mac App Store.

După terminarea instalării, lansați Xcode-ul și trebuie să apară ecranul de întâmpinare. De aici puteți încărca un proiect mai vechi sau alegeți să creați unul nou. Pentru moment, trebuie să faceți clic pe “Creați un nou proiect Xcode“, atunci fereastra șablonului va veni cu câteva opțiuni. Sub iOS> Aplicație, faceți clic pe “Vizualizare individuală” și lovit “Următor →”. Poti dați-i noului nume un nume, precum Test (de preferință fără spații), apoi pe Identificatorul companiei, tastați în orice cuvânt, cum ar fi compania mea, și în cele din urmă alege un director și lovit “Salvați”.

Xcode va construi directorul de fișiere și vă va trimite într-o fereastră nouă pentru lucru. Ar trebui să vedeți o mulțime de opțiuni de fișier listate, dar care este numit după cererea dvs. este accentul principal.

Cu Xcode aveți două opțiuni pentru proiectarea elementelor frontale. Clasicul XIb / peniță format este standard pentru aplicațiile Mac OS X și iOS, care vă impune să creați o nouă vizualizare de pagină de fiecare dată. Cu toate acestea, pe măsură ce creați mai multe vizualizări într-o singură aplicație, cantitatea de fișiere periferice poate deveni prea copleșitoare, astfel încât o nouă storyboard fișierul conține toate vizualizările dvs. de nib într-un singur panou de editor. De aici puteți să eliminați ușor și să adăugați elementele și funcțiile UI.

În plus, veți întâlni .h și .m fișiere din același grup de directoare. Acestea sunt nume de fișiere scurte pentru antet și punerea în aplicare cod. Aceste fișiere sunt în cazul în care scrieți toate funcțiile și variabilele Obiectiv-C necesare pentru ca aplicația dvs. să ruleze. Ar putea fi o idee bună să explicați cum funcționează Xcode-ul MVC (model, vizualizare, controler), care este motivul pentru care avem nevoie de 2 fișiere pentru fiecare controler.

MVC Ierarhia de programare

Pentru a înțelege modul în care funcționează aplicația, trebuie să înțelegeți arhitectura programării. Cu Model, View, Controller (MVC) ca fundație, Xcode poate separa toate afișajele și codul de interfață de funcțiile logice și de procesare și nu există altă opțiune de alegere. MVC poate părea confuz la început, dar dacă ați încercat să o înțelegeți și să începeți să construiți câteva aplicații de bază, veți ajunge să vă iubiți structura.

Pentru a fi mai ușor de înțeles, am prezentat fiecare obiect din lista de mai jos:

• Model - Ține toate datele logice și de bază. Acestea includ variabilele, conexiunile la feed-uri RSS externe sau imagini, funcții detaliate și criza numărului. Acest strat este complet detașat de vizionările dvs., astfel încât să puteți schimba cu ușurință opiniile și să aveți în același timp aceleași date de lucru.
• Vedere - Un ecran sau un stil de afișare în aplicația dvs. O listă de tabele, o pagină de profil, o pagină de rezumat a articolelor, un player audio, un player video, toate acestea reprezintă exemple de vizualizări. Puteți să schimbați stilurile și să eliminați elementele, dar veți continua să lucrați cu aceleași date din modelul dvs..
• Controlor - Acționează ca un intermediar între celelalte două. Conectați obiectele aflate în vizualizarea dvs. la un ViewController care transmite informația către și din modelul dvs. Prin urmare, în acest fel este posibil ca un utilizator să apese pe un buton și să înregistreze acest lucru în modelul dvs. Apoi rulați o funcție de deconectare și prin același controler treceți un mesaj “cu succes logat!”.

Deci, în principiu modelul deține toate informațiile și funcțiile că va trebui să afișați undeva pe ecran. Dar modelele nu pot interacționa cu ecranul, numai vizualizările pot. Viziunile sunt în mare parte toate imaginile vizuale și pot trage numai date printr-un ViewController. Controlerul este de fapt un mod mult mai rafinat de a vă ascunde datele din capătul din spate de designul din față. În acest fel puteți renova designul de mai multe ori, fără a pierde nici o funcție.

Cu aceste cunoștințe nu ar trebui să fie greu să începeți să vă construiți primele câteva aplicații. Ca menționat mai devreme, Obiectiv-C este limba de programare de bază pe care o veți utiliza pentru a dezvolta aplicația. Este construit pe limba C cu o sintaxă actualizată și câteva paradigme suplimentare. Veți avea nevoie de mult timp pentru a vă familiariza cu limba, dar pentru lecția de început vă recomandăm seria tutorial de la Mobiletuts+.

Vizualizați designul cu Storyboards

Acum că am analizat aspectele tehnice ale unei aplicații, ar trebui să petrecem puțin timp proiectând interfața. Presupun că l-ai păstrat “storyboard” opțiune verificați la crearea proiectului, ceea ce înseamnă că puteți găsi un singur MainStoryboard_iPhone.storyboard fișier undeva în grupul de directoare din partea stângă a ferestrei. Faceți clic pe fișier pentru ao selecta și pentru a deschide vizualizarea.

O nouă bara laterală ar trebui să apară direct în partea dreaptă a grupului de directoare. Aceasta se numește Schița documentelor și este un fel de metode de previzualizare rapidă pentru a verifica toate opiniile disponibile în acest tablou de bord.

Vrem să începem adăugând doar câteva elemente de pagină în controlerul nostru de vizualizare. Avem nevoie de două elemente diferite: a Bară de navigare și a Bara Tab. Înainte de a le prinde, accesul la Atribuții Inspector (Vizualizați> Utilities> Show Attributes Inspector) din partea dreaptă a ferestrei, apoi căutați Bara de stare eticheta. Implicit este setat la dedusa care utilizează culoarea standard a iPhone-ului, dar puteți, de asemenea, alege Negru sau Translucent Negru dacă designul aplicației dvs. se potrivește mai bine cu culoarea.

Biblioteca obiectelor

În cazul în care Utilități panoul din partea dreaptă a ferestrei nu este vizibil, îl puteți activa prin accesarea funcției Vizualizare> Utilitare> Afișați utilitățile. În panoul Utilities, uita-te în partea de jos pentru un panou numit Biblioteca de obiecte. Ea are un meniu drop-down cu “Obiecte” ca prim element al listei. Dacă nu ați găsit-o, puteți selecta Vizualizare> Utilitare> Afișare bibliotecă de obiecte.

Din meniul derulant al Bibliotecii de obiecte, găsiți și selectați Ferestre și bare. Acum faceți clic pe Bară de navigare, trageți-l în fereastra de vizualizare și poziționați-l direct sub negru Bara de stare (cu o pictogramă a bateriei). Putem personaliza acum descrierea titlului bara. Faceți dublu clic pe textul care citește în prezent “Titlu“, și veți vedea o etichetă numită “Titlu” în panoul Utilities, pe care îl puteți modifica descrierea titlurilor “Test” de acolo. Lovit “introduce” pentru a asista la schimbare.

Din nou, în panoul Windows & Baruri, derulați în jos pentru a găsi Bara Tab, apoi glisați-o în fereastra de vizualizare și plasați-o în partea de jos a aplicației. Implicit aceste 2 elemente arata fantastic.

Acum, poate doriți ca gradientul barei de navigație să se potrivească cu bara de tab-uri din partea de jos și pentru a face acest lucru puteți face clic pe bara de navigare și vă uitați la dreapta atribute din panoul Utilities. Prima opțiune este numită Stil, care este setat la Implicit. Modificați stilul de la valoarea implicită la Negru opac și vom avea un set de culori potrivite!

Să adăugăm, de asemenea, un alt buton de fila în bara inferioară a aplicației. Mutați cursorul mouse-ului pe panoul Windows & Baruri din nou și derulați în jos până la Elementul barei de bara, direct sub bara Tab. Glisați-l în fereastra aplicației și plasați-l în mijlocul celor 2 butoane din bara de fișiere existente. Dacă faceți dublu clic pe acest nou buton, puteți vedea unele opțiuni suplimentare în panoul Utilities, modificați elementul imagine și titlu de acolo. De exemplu, am schimbat titlul “semn de carte” pentru noul element Adăugat în bara Tab.

Deci, acesta este un scurt tutorial despre proiectarea vederilor în Xcode. Nu este un proces teribil de dificil, dar va fi nevoie de un pic mai mult timp pentru a vă obișnui cu interfața. Joacă-te cu câteva elemente suplimentare dacă te simți confortabil, de asemenea, te poți îndrepta spre resursele de dezvoltare iOS ale Apple pentru mai multe resurse de învățare, nu e niciodată rău să descoperi mai mult!

Rămâi acordat pentru partea a II-a

Aceasta incheie prima parte a ghidului pentru designul si dezvoltarea aplicatiilor iPhone. În următoarea parte vom explora un pic mai adânc în Obiectiv-C și Cocoa Touch, și în cele din urmă veți învăța să construiți o aplicație iPhone funcțională, stați la dispoziție!

iOS Design Gallery

Pentru designeri, sper să vă aducă și ceva inspirație, așa că am inclus o listă de vizualizări minunate pentru aplicațiile iPhone de mai jos. Lista conține o mare varietate de elemente de aplicație pe care probabil nu le-ați observat niciodată înainte. Simțiți-vă liber să vă împărtășiți ideile, punctele de vedere sau întrebările din secțiunea de comentarii de mai jos, vă mulțumesc!

Race Splitter

Satisfacția de la distanță

Tweetbot pentru iPhone

Reeder

pătrat

MailChimp

Instagram

Joystiq

Piictu

Întuneric