Nybörjarens guide till IOS-utveckling Gränssnittet - Del I
Apple har varit en ledande bransch i mobilvärlden i flera år med sin iPhone- och iPad-serie. Trots den hype som den kan skapa med alla officiella utgåvor, har den också en stor del av marknadsandelarna i mobilplattformen, och det är förmodligen anledningen till att de flesta kunder vill att deras app ska finnas i Apples App Store. så att bli orsaken till utvecklare att lära och bygga iPhone-appen.
Den goda nyheten är att iPhone applikationsutveckling inte är så svår som du kanske tror, och det här inlägget finns som en omfattande guide för att gå igenom hela processen att bygga en applikation för iPhone.
Vi diskuterar orsakerna, faser och verktyg för att utveckla appen, och i slutändan följer du en enkel handledning för att designa den grundläggande iPhone-applikationen med hjälp av Xcode.
Så om du lär dig för företag eller om du bara har en fantastisk appidé som kan göra dig till en miljonär, låt oss börja om att bygga din första iPhone-app!
Obs! Du behöver en dator med Macintosh-operativsystem (Mac OS) för installation av Xcode, applikationsutveckling och appinsändning. Det finns inget sätt att göra det på Windows juridiskt.
Varför utveckla för Apple?
Jag ser den här frågan ofta, så jag vill förklara varför du borde vara intresserad av iPhone-utveckling. Precis som jag har sagt i introduktionen, iPhone för närvarande innehar en stor andel marknadsandelar i mobilplattformen.
Jag tycker att denna anledning bör räcka för att du ska lära dig att utveckla iPhone-applikationen som om du utvecklar dig själv eller klienter, de flesta hoppas troligen att deras app kan nås av många människor i världen.
Ur utvecklingssynpunkt, Apple gillar saker enkelt, och detta gäller deras produkter och ramar. iOS är operativsystemet som driver alla Apples mobila enheter. Dessa inkluderar iPod Touch, iPhone och iPad. Så kom ihåg när du utvecklar appar för iPhone, kan du vara utvecklar för alla andra enheter med iOS!
Dessutom gör det som gör ovanstående funktion ännu större, hur mycket det kodande arbetet kan sparas. När du skriver kod för iPhone-applikation är du använder samma programmeringsspråk för alla Apples datorer. Det innebär att när du utvecklar iPhone-applikationen kan appen integreras senare i iPad och till och med Mac.
Objective-C är kärnprogrammeringsspråket som driver alla sina ramar. Tillsammans med Objective-C kommer du också att utveckla iPhone app med Kakao Touch, Programmeringsramen kör användarinteraktion på IOS.
Det här är bara lite information för att komma igång med iPhone apputveckling. Utvecklingen är ganska komplicerad, men slappna av, ta det långsamt. Så skälen är här, och beslutet är ditt. Oavsett om svaret är ja eller inte, kan du alltid hoppa direkt in i nästa ämne: utforma appar för iPhone.
Planerar din iPhone App Structure
I den vanliga ideologin att skapa en iPhone-app vill du gå igenom några faser. Den första fasen inkluderar planering och skissering.
Först och främst behöver du ha en idé för vad din app ska göra. Varför skulle folk vilja ladda ner det? Och vilka funktioner vill du inkludera? Detta är den viktigaste fasen som om du gör det rätt, det gör du spara mycket förvirring och problem i kodningsfasen.
Värst, det tar dig tillbaka till ritbordet.
Jag rekommenderar till skissa några grova idéer för några sidor (eller synpunkter) av din ansökan. Bara rita en rektangelform, kanske 5 eller 6 former på ett pappersark och dra sedan de funktioner du vill ha på varje bild av din app.
Du kan tänka på åsikter som olika sidor på en webbplats. Varje vy kommer att erbjuda olika funktioner, till exempel ett inloggningsformulär, en lista med kontakter eller en tabell med data.
Nedan har jag byggt en kort samling av de olika UI-barelementen:
- Statusfältet - Visar enhetens nuvarande batterinivå, 3G-anslutning, mottagningsfält, telefonbärare och mycket mer. Det rekommenderas att du alltid innehåller dessa element.
- Navigeringsfält - Ger dina användare möjlighet att navigera mellan sidhierarkier. Detta inkluderar ofta en knapp på vänster sida av fältet för att göra det möjligt för användaren att återgå till föregående appvy.
- Toolbar - Visas längst ner i iPhone-appen. Detta kommer att hålla några ikoner knutna till vissa funktioner som Dela med sig, Ladda ner, Radera, etc.
- Fliken - Mycket liknar verktygsfältet, förutom nu jobbar du med flikar. När en användare klickar på en flikikon kommer den automatiskt att markeras och det kommer att visa ett blankt svävarläge. Den här fältet används för att växla mellan visningar istället för att erbjuda direktfunktion.
Den här listan innehåller bara verktygsfält som du kan hitta i de flesta appar. Det finns några andra synpunkter och stilar att överväga, som du kan hitta dem i Apples riktlinjer för användaranvändning för användarvänlighet för iOS. Jag rekommenderar starkt att du hänvisar till den här dokumentationen när du är osäker på iPhone: s användargränssnitt.
I tidens intresse kommer jag inte att beskriva varje användargränssnitt. Det finns för många element att överväga, och du kommer inte sluta använda dem alla i din enda app. Men när du skisserar dina åsikter kan du dra inspiration från de ovan angivna riktlinjerna och andra iPhone-appar du har haft det med att använda dem.
Designa Photoshop Mockups
Jag antar att de flesta av er är ganska bekväma att arbeta med Adobe Photoshop. Det är premiärprogramvaran för att skapa grafik för webbsidor, banners, logotyper och mobilmockups. Att designa grafik för webben är en ganska enkel process, men det är lite mer komplicerat när det gäller iPhone appdesign.
Om du vill bygga en app du verkligen borde skapa pixel-perfekt mockup design från början.
Till att börja med bör vi diskutera Photoshop-inställningar. Eftersom vi designar för iPhone måste vi överväga 2 olika designstilar. De vanlig iPhone-skärm är 320 x 480 pixlar. Men iPhone 4 innehåller en näthinnan som dubblerar mängden pixlar inom samma skärmstorlek. Så du borde dubbel upplösningen till 640 x 960 pixlar och designa dina layouter enligt denna standard.
Det betyder att du också behöver skapa 2 uppsättningar ikoner för dina mockups. Ursprungligen skulle ikoner vara inställd till 163ppi men du måste Inkludera ikoner med 326ppi för iPhone 4. Ikonerna är traditionellt märkta med @ 2x i slutet av filens namn, t.ex. “[email protected]“.
Låt oss nu optimera våra nya dokumentinställningar. Först måste vi redigera några inställningar, så tillgång till Photoshop> Redigera> Inställningar> Guider, galler och skivor. Väl vara ställer in vår Gridline varje 20px med indelningar på 2. Vid design för näthinnan 2px linjen kommer att visa 1 poäng på skärmen. Det här är en viktig regel som du måste tänka på för att skala ner din app.
Jag tenderar att hitta det lättare att bygga mina mönster med högre upplösning och sedan skala ner dem, men du kan prova båda metoderna och se vad som passar dig bäst. Vi använder 640 x 960 pixlar vid 326ppi - spara det som en anpassad förinställning om du tror att du använder den ofta.
Byggnad med mallelement
Nu kan du använda Photoshop för att skapa en pixel-perfekt layout på egen hand, men det visar sig vara ett mycket ansträngande och tråkigt arbete.
Det här är en stor fil med bara för många element. För att göra saker lättare kan du trycka v v aktivera Flytta verktyget och klicka på “Välj automatiskt” På dess alternativfält, välj sedan “Lager” hellre än “Grupp”. Med inställningarna kan du klicka på något element och Photoshop tar dig till dess motsvarande lager!
Känn dig fri att leka med mockupen, eller du kan till och med skapa din applikations prototyp från mockupen. Beroende på din app kan du inkludera en rad funktioner inom kärnområdet, varav många du kan hitta i den här PSD-filen. Det är också möjligt att gå till dessa elementers lager och redigera teckensnitt, gradientfärger och andra design stilar också. Bara Se till att du inte ändrar storleken på något eftersom alla staplar och UI-element är inställda på standardstandardstorlekar.
Utveckla Apps i Xcode
Utvecklarverktyget för iOS och Mac OS X programmering heter Xcode. Om du kör OS X Lion kan du hitta Xcode och alla tillämpliga paket gratis i Mac App Store.
När installationen är klar, starta Xcode och dess välkomstskärm bör komma upp. Härifrån kan du ladda ett äldre projekt eller välja att skapa en ny. För nu behöver du klicka “Skapa ett nytt Xcode-projekt“, då kommer mallfönstret att komma upp med några alternativ. Under IOS> Program klickar du på “Enkel visningsprogram” och träffa “Nästa”. Du kan ge den nya app ett namn, som Testa (helst inga mellanslag), sedan på Företagsidentifierare, skriv in vilket som helst ord som mitt företag, och äntligen välja en katalog och träffa “Spara”.
Xcode kommer att bygga filkatalogen och skicka dig till ett nytt fönster för att arbeta. Du bör se många filalternativ som listas, men mapp som namnges efter din ansökan är det primära fokuset.
Med Xcode har du två alternativ för att designa frontendelement. Klassikern XIb / nib formatet är standard för Mac OS X och iOS-appar, vilket kräver att du utformar en ny sidvy varje gång. Men eftersom du skapar fler visningar i en enda app kan antalet nib-filer bli alltför överväldigande, så en ny storyboard filen rymmer alla dina nib-vyer i en enda redigeringspanel. Härifrån kan du enkelt och enkelt lägga till UI-element och funktioner.
Dessutom kommer du att stöta på .h och .m filer i samma mappgrupp. Dessa är korta filnamn för rubrik och genomförande koda. Dessa filer är där du skriver alla objektiv-C-funktioner och variabler som krävs för att din app ska kunna köras. Det kan vara en bra idé att förklara hur Xcode fungerar med MVC (modell, vy, kontroller), vilket är anledningen till att vi behöver 2 filer för varje kontroller.
MVC Programmerings Hierarki
För att förstå hur appen fungerar måste du förstå programmeringsarkitekturen. Med Model, View, Controller (MVC) som grund, Xcode kan separera alla dina skärmar och gränssnittskoder från dina logik- och bearbetningsfunktioner, och det finns inte ett annat alternativ att välja. MVC kan verka förvirrande först men om du försökte förstå det och börja bygga några grundläggande appar kommer du att älska strukturen.
För att göra det enklare att förstå, har jag presenterat varje objekt i listan nedan:
- Modell - Håller alla dina logiska och kärndata. Detta inkluderar variabler, anslutningar till externa RSS-flöden eller bilder, detaljerade funktioner och nummerkrypning. Det här skiktet är helt avskilt från dina synpunkter så att du enkelt kan ändra vyer och fortfarande ha samma data som fungerar.
- Se - En skärm eller visningsstil i din ansökan. En tabelllista, profilsida, artikelns sammanfattningssida, ljudspelare, videospelare, det här är alla exempel på visningar. Du kan ändra sina stilar och ta bort element men du arbetar fortfarande med samma data i din modell.
- Kontrollant - Agerar som mellanhand mellan de andra två Du kopplar objekt till din ViewController som skickar informationen till och från din modell. På så sätt är det möjligt att få en användare att trycka på en knapp och registrera detta i din modell. Kör sedan en utloggningsfunktion och skicka ett meddelande via samma kontroller “framgångsrikt utloggad!”.
Så i princip din Modellen innehåller all information och funktioner att du måste visa någonstans på skärmen. Men modeller kan inte interagera med skärmen, endast vyer kan. Visningar är mestadels alla visuella, och det kan bara dra data genom en ViewController. De Controller är faktiskt ett mycket mer raffinerat sätt att dölja din back-end-data från frontendesignen. På detta sätt kan du renovera designen flera gånger över och inte förlora någon funktionalitet.
Med denna kunskap bör det inte vara svårt att börja bygga dina första appar. Som tidigare nämnts, Objective-C är kärnprogrammeringsspråket du ska använda för att utveckla appen. Det är byggt på C-språket med uppdaterad syntax och några ytterligare paradigmer. Du behöver mycket tid för att bli bekant med språket, men för nybörjarläsan rekommenderar jag handledningsserien från Mobiletuts+.
Designvy med Storyboards
Nu när vi har tittat på de tekniska aspekterna av en ansökan, borde vi spendera lite tid på att utforma gränssnittet. Jag antar att du har behållit “Storyboard” alternativ kontrolleras när du skapar projektet, vilket innebär att du kan hitta en enda MainStoryboard_iPhone.storyboard filen någonstans i mappgruppen som ligger på vänstra sidan av fönstret. Klicka på filen för att välja den och öppna vyn.
Ett nytt sidofält bör visas direkt till höger om mappgruppen. Detta kallas Dokumentbeskrivning och det är en slags snabb förhandsgranskning metod för att kontrollera alla tillgängliga vyer i denna storyboard.
Vi vill börja med att bara lägga till några sidelement i vår kontroller. Vi behöver två olika element: a Navigeringsfält och a Fliken. Innan vi tar tag i dem, tillgång till Attribut Inspector (Visa> Verktyg> Visa attribut inspektör) på höger sida av fönstret, leta efter Statusfältet märka. Som standard är den inställd på antagen som använder standardstatus för iPhone status, men du kan också välja Svart eller Genomskinlig Svart om din appdesign passar färgen bättre.
Objektets bibliotek
Om verktyg rutan till höger om fönstret är inte synlig, du kan aktivera den genom att öppna Visa> Verktyg> Visa verktyg. I rutan Verktyg ser du på botten för en panel som heter Objektbibliotek. Det har en rullgardinsmeny med “Objekt” som första objekt i listan. Om du inte kunde hitta den kan du välja Visa> Verktyg> Visa objektbibliotek.
I rullgardinsmenyn i Objektbiblioteket hittar du och väljer Windows och barer. Klicka nu på Navigeringsfält, dra det in i fönstret och placera det direkt under svarta Statusfältet (med en batteriikon). Vi kan nu anpassa barens titelbeskrivning. Dubbelklicka på texten som för närvarande läser “Titel“, och du kommer att se en etikett som heter “Titel” i rutan Verktyg, som du kan ändra titelbeskrivningen till “Testa” därifrån. Träffa “Stiga på” att bevittna förändringen.
Återigen i panelen Windows & Bars, bläddra ner för att hitta Fliken, dra sedan det i fönstret och placera det längst ner på din app. Som standard ser dessa 2 element fantastiska ut.
Nu kanske du vill att navigeringsfältets gradient matchar flikfältet längst ner, och för att göra det kan du klicka på navigeringsfältet och se till höger vid attribut panelen i verktygsfönstret. Det allra första alternativet heter Stil, som är inställt på Standard. Ändra stilen från standard till Svart Opak och vi kommer att ha en matchande färguppsättning!
Låt oss också lägga till en annan flikknapp i bottenfältet på appen. Flytta muspekaren till panelen Windows & Bars igen och bläddra ner till Tab Bar-objekt, direkt under Tab Bar. Dra det här till ditt appfönster och placera det i mitten av de 2 befintliga knapparna i fältet. Om du dubbelklickar på den här nya knappen kan du se några ytterligare alternativ i rutan Verktyg, du ändrar objektets bild och titel därifrån. Till exempel har jag ändrat titeln till “Bokmärke” för det nyligen tillagda Tab Bar-objektet.
Så här är en kort handledning om att utforma visningar inom Xcode. Det är inte en väldigt svår process, men det kommer att kräva lite mer tid för att vänja sig vid gränssnittet. Spela med några fler element om du känner dig bekväm, du kan också gå till Apples iOS Development Resources för mer inlärningsresurser, det är aldrig en dålig sak att upptäcka mer!
Stanna tätt för del II
Detta avslutar vår första del av guiden för iPhone app design och utveckling. I nästa del dyker vi lite djupare in i Objective-C och Cocoa Touch, och du lär dig slutligen bygga en fungerande iPhone app, håll dig stillad!
iOS Design Gallery
För designers där ute hoppas jag också få dig lite inspiration, så jag har tagit med en lista med fantastiska iPhone-appvyer nedan. Listan innehåller en mängd olika inspirerande appelement som du förmodligen aldrig har märkt tidigare. Gärna dela dina idéer, appvyer eller frågor i kommentarfältet nedan, tack!
Race Splitter
Nöjdhet Remote
Tweetbot för iPhone
reeder
Foursquare
MailChimp
Joystiq
Piictu
Mörker
