Anfängerleitfaden zur iOS-Entwicklung Die Benutzeroberfläche - Teil I

Apple ist mit seiner iPhone- und iPad-Serie seit Jahren eine führende Branche in der mobilen Welt. Trotz des Hype, der mit jeder offiziellen Version erstellt werden kann, hält es auch einen großen Teil der Marktanteile der mobilen Plattform. Dies ist wahrscheinlich der Grund, dass die meisten Kunden wünschen, dass ihre App im App Store von Apple vorhanden ist. Dies wird zum Grund für Entwickler, die iPhone-App zu lernen und zu entwickeln.

Die gute Nachricht ist, dass die Entwicklung von iPhone-Anwendungen nicht so schwer ist, wie Sie vielleicht denken. Dieser Beitrag ist ein umfassender Leitfaden, der Sie durch den gesamten Prozess der Erstellung einer Anwendung für das iPhone führt.

Wir besprechen die Gründe, Phasen und Werkzeuge für die Entwicklung der App. Am Ende folgen Sie einem einfachen Tutorial, um die grundlegende iPhone-Anwendung mit Xcode zu entwerfen.

Egal, ob Sie geschäftlich lernen oder einfach nur eine erstaunliche App-Idee haben, die Sie zum Millionär machen könnte, lassen Sie uns mit der Erstellung Ihrer ersten iPhone-App beginnen!

Hinweis: Sie benötigen einen Computer mit Macintosh-Betriebssystem (Mac OS) für die Installation von Xcode, die Anwendungsentwicklung und das Einreichen von Apps. Sie können dies unter Windows nicht legal tun.

Warum für Apple entwickeln??

Ich sehe diese Frage häufig gestellt, deshalb möchte ich erklären, warum Sie sich für die iPhone-Entwicklung interessieren sollten. Genau wie ich in der Einführung festgestellt habe, ist das iPhone aktuell hält einen großen Anteil an Marktanteilen an der mobilen Plattform.

Ich denke, dieser Grund sollte ausreichen, um die Entwicklung der iPhone-Anwendung zu erlernen, unabhängig davon, ob Sie für sich selbst oder für Ihre Kunden entwickeln. Die meisten Menschen hoffen, dass ihre App für viele Menschen auf der Welt zugänglich ist.

Aus Sicht der Entwicklung, Apple mag die Dinge einfach, und das gilt für ihre Produkte und Frameworks. iOS ist das Betriebssystem, das alle mobilen Geräte von Apple mit Strom versorgt. Dazu gehören iPod Touch, iPhone und iPad. Denken Sie also daran, wenn Sie Apps für das iPhone entwickeln Entwicklung für alle anderen Geräte mit dem iOS!

Was das obige Merkmal noch größer macht, ist außerdem, wie viel Codierarbeit eingespart werden kann. Wenn Sie Code für die iPhone-Anwendung schreiben, sind Sie Verwenden der gleichen Programmiersprache für alle Computer von Apple. Das heißt, wenn Sie die iPhone-Anwendung entwickeln, kann die App später in iPad und sogar Mac integriert werden.

Ziel c ist die Kernprogrammiersprache, die alle ihre Frameworks unterstützt. Neben Objective-C entwickeln Sie auch die iPhone-App mit der Kakao-Touch, das Programmier-Framework, das die Benutzerinteraktion auf iOS steuert.

Dies sind alles Informationen, die Sie benötigen, um mit der iPhone-App-Entwicklung zu beginnen. Die Entwicklung ist ein ziemlich komplizierter Prozess, aber entspannen Sie sich, nehmen Sie es langsam. Die Gründe sind hier und die Entscheidung liegt bei Ihnen. Ob die Antwort ja ist oder nicht, Sie können immer direkt zum nächsten Thema springen: Apps für das iPhone entwerfen.

Planen Sie Ihre iPhone App-Struktur

In der Standardideologie der Erstellung einer iPhone-App sollten Sie dies tun Gehen Sie einige Phasen durch. Die erste Phase beinhaltet Planung und Skizzieren.

Zunächst müssen Sie eine Idee haben was deine App tun wird. Warum wollten die Leute es herunterladen?? Und Welche Funktionen möchten Sie einschließen?? Dies ist die wichtigste Phase, wenn Sie es richtig machen Sparen Sie viel Verwirrung und Probleme in der Codierungsphase.

Das Schlimmste ist, dass Sie wieder an das Zeichenbrett gelangen.

Empfehle ich skizzieren Sie einige grobe Ideen für einige Seiten (oder Ansichten) Ihrer Bewerbung. Zeichnen Sie einfach eine Rechteckform, vielleicht 5 oder 6 Formen, auf ein Blatt Papier und zeichnen Sie dann die gewünschten Features für jede Ansicht Ihrer App.

Sie können sich Ansichten wie verschiedene Seiten einer Website vorstellen. Jede Ansicht bietet unterschiedliche Funktionen, z. B. ein Anmeldeformular, eine Kontaktliste oder eine Datentabelle.

Im Folgenden habe ich eine kurze Sammlung der verschiedenen Elemente der Benutzeroberflächenleiste zusammengestellt:

Statusleiste - Zeigt den aktuellen Akkuladestand des Geräts, die 3G-Verbindung, Empfangsstäbe, Telefonträger und vieles mehr an. Es wird empfohlen, diese Elemente immer einzuschließen.
Navigationsleiste - Gibt Ihren Benutzern die Möglichkeit, zwischen Seitenhierarchien zu navigieren. Dazu gehört häufig eine Schaltfläche auf der linken Seite der Leiste, über die der Benutzer zur vorherigen App-Ansicht zurückkehren kann.
Werkzeugleiste - Wird am unteren Rand der iPhone-App angezeigt. Dies enthält einige Symbole, die mit einigen Funktionen verknüpft sind, wie z Aktie, Herunterladen, Löschen, usw.
Tab-Leiste - Sehr ähnlich der Symbolleiste, außer dass Sie jetzt mit Registerkarten arbeiten. Wenn ein Benutzer auf ein Registersymbol klickt, wird dieses automatisch hervorgehoben und zeigt einen glänzenden Hover-Status an. Diese Leiste wird verwendet, um zwischen Ansichten zu wechseln, anstatt direkte Funktionen anzubieten.

Diese Liste enthält nur die Symbolleisten, die Sie in den meisten Apps finden können. Es gibt einige andere Ansichten und Stile, die Sie berücksichtigen sollten. Diese finden Sie in den iOS-Richtlinien zur Benutzeroberfläche für iOS-Benutzeroberflächenelemente. Es wird dringend empfohlen, auf diese Dokumentation zu verweisen, wenn Sie Zweifel an den Oberflächenelementen des iPhone haben.

Im Interesse der Zeit werde ich nicht jedes Element der Benutzeroberfläche beschreiben. Es gibt zu viele Elemente, die Sie berücksichtigen müssen, und Sie werden nicht alle Elemente in Ihrer einzelnen App verwenden. Aber wenn Sie Ihre Ansichten skizzieren, können Sie dies tun Lassen Sie sich von den oben vorgeschlagenen Richtlinien und anderen iPhone-Apps inspirieren Sie haben es genossen, sie zu benutzen.

Photoshop-Modelle entwerfen

Ich gehe davon aus, dass die meisten von Ihnen ziemlich zufrieden mit Adobe Photoshop arbeiten. Es ist die erste Software zur Erstellung von Grafiken für Websites, Banner, Logos und mobile Modelle. Das Design von Grafiken für das Web ist ein recht einfacher Prozess, aber beim iPhone-App-Design ist es etwas komplizierter.

Wenn Sie nach einer App suchen, sollten Sie dies wirklich tun Erstellen Sie von Anfang an pixelgenaue Mockup-Designs.

Zu Beginn sollten wir die Photoshop-Einstellungen besprechen. Da wir für iPhone entwerfen, müssen wir zwei unterschiedliche Designstile berücksichtigen. Das Die normale iPhone-Anzeige ist 320 x 480 Pixel groß. Das iPhone 4 beinhaltet jedoch eine Retina-Display, das die Pixelanzahl bei gleicher Bildschirmgröße verdoppelt. Deshalb solltest du verdoppeln Sie die Auflösung auf 640 x 960 Pixel und gestalten Sie Ihre Layouts nach diesem Standard.

Dies bedeutet, dass Sie auch müssen Erstellen Sie 2 Icons-Sets für deine Modelle. Ursprünglich wären Ikonen auf 163ppi eingestellt aber du musst es tun füge Icons mit 326ppi für iPhone 4 hinzu. Die Symbole sind traditionell mit gekennzeichnet @ 2x am Ende des Dateinamens, wie z “[email protected]“.

Lassen Sie uns nun unsere neuen Dokumenteinstellungen optimieren. Zuerst müssen wir einige Einstellungen bearbeiten, also auf Photoshop> Bearbeiten> Einstellungen> zugreifen Hilfslinien, Raster und Scheiben. Wir werden Setzen Sie unsere Gridline alle 20px mit Unterteilung auf 2. Beim Design für die Retina-Anzeige 2px-Zeile zeigt 1 Punkt an auf dem Bildschirm. Dies ist eine wichtige Regel, die Sie beim Herunterskalieren Ihrer App beachten müssen.

Ich finde es einfacher, meine Designs mit einer höheren Auflösung zu erstellen, als sie zu verkleinern, aber Sie können es Probieren Sie beide Methoden aus und sehen Sie, was am besten zu Ihnen passt. Wir verwenden 640 x 960 Pixel bei 326ppi - speichern Sie diese als benutzerdefinierte Voreinstellung, wenn Sie denken, dass Sie sie häufig verwenden werden.

Gebäude mit Vorlagenelementen

Jetzt können Sie mit Photoshop selbst ein pixelgenaues Layout erstellen, was sich jedoch als sehr anstrengend und langwierig erweist.

Dies ist eine riesige Datei mit zu vielen Elementen. Zur Vereinfachung können Sie die Taste v drücken Werkzeug verschieben und klicken Sie auf die “Automatische Auswahl” Wählen Sie dann in der Optionsleiste die Option “Schicht” eher, als “Gruppe”. Mit den Einstellungen können Sie auf ein beliebiges Element klicken und Photoshop bringt Sie zur entsprechenden Ebene!

Fühlen Sie sich frei, mit dem Modell herumzuspielen, oder Sie können sogar den Prototyp Ihrer Anwendung aus dem Mockup erstellen. Abhängig von Ihrer App können Sie eine Reihe von Funktionen in den Kernbereich integrieren, von denen Sie viele in dieser PSD-Datei finden können. Es ist auch möglich, die Ebenen dieser Elemente aufzurufen und die Schriftarten, Farbverläufe und andere Designstile zu bearbeiten. Gerade Stellen Sie sicher, dass Sie die Größe nicht ändern da alle Balken und Oberflächenelemente auf Standard-Standardgrößen eingestellt sind.

Apps in Xcode entwickeln

Das Entwicklertool für die iOS- und Mac OS X-Programmierung wird als Xcode bezeichnet. Wenn Sie OS X Lion verwenden, finden Sie Xcode und alle anwendbaren Pakete kostenlos im Mac App Store.

Starten Sie nach Abschluss der Installation den Xcode und der Begrüßungsbildschirm sollte angezeigt werden. Von hier aus können Sie ein älteres Projekt laden oder ein neues erstellen. Für jetzt müssen Sie klicken “Erstellen Sie ein neues Xcode-Projekt“, dann wird das Vorlagenfenster mit einigen Optionen angezeigt. Klicken Sie unter iOS> Anwendung auf “Einzelansicht-Anwendung” und schlagen “Nächster”. Sie können Gib der neuen App einen Namen, sowie Prüfung (vorzugsweise keine Leerzeichen), dann auf der Firmenbezeichnung, Geben Sie ein beliebiges Wort wie meine Firma, und schließlich ein Verzeichnis auswählen und drücken “sparen”.

Xcode erstellt das Dateiverzeichnis und sendet Sie in ein neues Fenster zum Arbeiten. Sie sollten viele Dateioptionen sehen, aber die Ordner, der nach Ihrer Anwendung benannt ist ist der Hauptfokus.

Mit Xcode haben Sie zwei Möglichkeiten, Front-End-Elemente zu gestalten. Der Klassiker Xib / Feder Das Format ist Standard für Mac OS X- und iOS-Apps. Daher müssen Sie jedes Mal eine neue Seitenansicht erstellen. Wenn Sie jedoch mehr Ansichten in einer einzigen App erstellen, kann die Anzahl der Nib-Dateien viel zu überwältigend werden, so eine neue Storyboard Datei enthält alle Ihre Nib-Ansichten in einem einzigen Editorfenster. Von hier aus können Sie Benutzeroberflächenelemente und -funktionen problemlos entfernen und hinzufügen.

Außerdem wirst du stoßen .h und .m Dateien in derselben Ordnergruppe. Dies sind kurze Dateinamen für Header und Implementierung Code. In diesen Dateien schreiben Sie alle Objective-C-Funktionen und -Variablen, die für die Ausführung Ihrer App erforderlich sind. Es empfiehlt sich, zu erklären, wie Xcode funktioniert MVC (Modell, Ansicht, Controller), Aus diesem Grund benötigen wir 2 Dateien für jeden Controller.

MVC-Programmierhierarchie

Um zu verstehen, wie die App funktioniert, müssen Sie ihre Programmierarchitektur verstehen. Mit Model, View, Controller (MVC) als Grundlage, Xcode kann alle Ihre Anzeigen und Schnittstellencodes von Ihren Logik- und Verarbeitungsfunktionen trennen, und es gibt keine andere Wahl. MVC mag auf den ersten Blick verwirrend erscheinen, aber wenn Sie versucht haben, es zu verstehen und einige grundlegende Apps zu erstellen, werden Sie die Struktur lieben.

Zum besseren Verständnis habe ich jedes Objekt in der folgenden Liste dargestellt:

Modell - Enthält alle Ihre Logik- und Kerndaten. Dazu gehören Variablen, Verbindungen zu externen RSS-Feeds oder Bildern, detaillierte Funktionen und Zahlenverarbeitung. Diese Ebene ist vollständig von Ihren Ansichten getrennt, sodass Sie die Ansichten problemlos ändern können und trotzdem dieselben Daten verwenden können.
Aussicht - Ein Bildschirm oder Anzeigestil in Ihrer Anwendung. Eine Tabellenliste, Profilseite, Artikelzusammenfassungsseite, Audioplayer, Videoplayer, dies sind alles Beispiele für Ansichten. Sie können ihre Stile ändern und Elemente entfernen, aber Sie arbeiten immer noch mit den gleichen Daten in Ihrem Modell.
Regler - Fungiert als Vermittler zwischen den beiden anderen. Sie verbinden Objekte in Ihrer Ansicht mit einem ViewController, der die Informationen an und von Ihrem Modell weitergibt. Auf diese Weise ist es möglich, dass ein Benutzer auf eine Schaltfläche tippt und diese in Ihrem Modell registriert. Führen Sie dann eine Abmeldefunktion aus und übergeben Sie über dieselbe Steuerung eine Nachricht “erfolgreich abgemeldet!”.

Also im Grunde deine Das Modell enthält alle Informationen und Funktionen dass Sie irgendwo auf dem Bildschirm angezeigt werden müssen. Aber Modelle können nicht mit dem Bildschirm interagieren, nur Ansichten können. Bei Ansichten handelt es sich meistens nur um visuelle Darstellungen, und es können nur Daten über einen ViewController abgerufen werden. Das Controller ist eigentlich eine viel raffiniertere Methode, um Ihre Back-End-Daten vor dem Front-End-Design zu verbergen. Auf diese Weise können Sie das Design mehrmals renovieren und dabei keine Funktionalität verlieren.

Mit diesem Wissen sollte es nicht schwer sein, die ersten Apps zu entwickeln. Wie bereits erwähnt, Ziel c ist die Kernprogrammiersprache, mit der Sie die App entwickeln. Es basiert auf der C-Sprache mit aktualisierter Syntax und einigen zusätzlichen Paradigmen. Sie benötigen viel Zeit, um sich mit der Sprache vertraut zu machen, aber für die Anfänger-Stunde empfehle ich die Tutorialserie von Mobiletuts+.

Designansicht mit Storyboards

Nun, da wir uns mit den technischen Aspekten einer Anwendung befasst haben, sollten wir ein wenig Zeit damit verbringen, die Schnittstelle zu entwerfen. Ich gehe davon aus, dass Sie das behalten haben “Storyboard” Möglichkeit Beim Erstellen des Projekts geprüft, können Sie ein einzelnes Projekt finden MainStoryboard_iPhone.storyboard Datei irgendwo in der Ordnergruppe auf der linken Seite des Fensters. Klicken Sie auf die Datei, um sie auszuwählen, und öffnen Sie die Ansicht.

Eine neue Seitenleiste sollte direkt rechts von der Ordnergruppe angezeigt werden. Dies nennt man das Dokument Gliederung und es ist eine Art schnelle Vorschau-Methode zum Überprüfen aller verfügbaren Ansichten in diesem Storyboard.

Wir möchten zunächst einige Seitenelemente in unseren View-Controller einfügen. Wir brauchen zwei verschiedene Elemente: a Navigationsleiste und ein Tab-Leiste. Bevor wir sie packen, greifen wir auf die Attribute-Inspektor Klicken Sie auf der rechten Seite des Fensters auf "Ansicht"> "Hilfsprogramme"> "Attribute anzeigen". Suchen Sie dann nach Statusleiste Etikette. Standardmäßig ist es eingestellt Gefolgert welche die standard iPhone Statusfarbe verwendet, Sie können aber auch wählen Schwarz oder Durchscheinendes Schwarz Wenn Ihr App-Design besser zur Farbe passt.

Die Objektbibliothek

Wenn die Dienstprogramme Das Fenster auf der rechten Seite des Fensters ist nicht sichtbar. Sie können es aktivieren, indem Sie auf Ansicht> Dienstprogramme> Dienstprogramme anzeigen klicken. Suchen Sie im Bereich "Dienstprogramme" im unteren Bereich nach einem Panel mit dem Namen Objektbibliothek. Es wurde ein Dropdown-Menü mit der “Objekte” als erstes Element der Liste. Wenn Sie es nicht finden konnten, können Sie Ansicht> Dienstprogramme> Objektbibliothek anzeigen auswählen.

Suchen und wählen Sie im Dropdown-Menü der Objektbibliothek Windows & Bars. Klicken Sie nun auf die Navigationsleiste, Ziehen Sie es in das Ansichtsfenster und positionieren Sie es direkt unter dem Schwarzen Statusleiste (mit einem Akkusymbol). Wir können die Titelbeschreibung der Leiste jetzt anpassen. Doppelklicken Sie auf den aktuell gelesenen Text “Titel“, und Sie sehen ein Label mit dem Namen “Titel” im Bereich Dienstprogramme, in den Sie die Titelbeschreibung ändern können “Prüfung” von dort. Schlagen “Eingeben” die Veränderung miterleben.

Scrollen Sie im Fenster & Leisten-Fenster erneut nach unten, um das Fenster zu finden Tab-Leiste, Ziehen Sie es dann in das Ansichtsfenster und platzieren Sie es ganz unten in Ihrer App. Standardmäßig sehen diese 2 Elemente fantastisch aus.

Vielleicht möchten Sie, dass der Verlauf der Navigationsleiste mit der Registerkartenleiste am unteren Rand übereinstimmt. Klicken Sie dazu auf die Navigationsleiste und schauen Sie nach rechts Attribute Bedienfeld im Bereich Dienstprogramme. Die allererste Option wird aufgerufen Stil, welche auf Default gesetzt ist. Ändern Sie den Stil von Standard zu Schwarz undurchsichtig und wir haben einen passenden Farbsatz!

Fügen Sie in der unteren Leiste der App auch eine weitere Schaltfläche hinzu. Bewegen Sie den Mauszeiger erneut zum Fenster- & Balkenfenster und scrollen Sie nach unten zu Tab-Leistenelement, direkt unter der Tab-Leiste. Ziehen Sie dies in Ihr App-Fenster und platzieren Sie es in der Mitte der 2 vorhandenen Schaltflächen der Tab-Leiste. Wenn Sie auf diese neue Schaltfläche doppelklicken, werden im Bereich "Dienstprogramme" einige zusätzliche Optionen angezeigt. Sie ändern die Elemente des Elements Bild und Titel von dort. Zum Beispiel habe ich den Titel in geändert “Lesezeichen” für das neu hinzugefügte Element der Registerkartenleiste.

Dies ist also eine kurze Anleitung zum Entwerfen von Ansichten in Xcode. Es ist kein besonders schwieriger Prozess, aber es dauert etwas mehr Zeit, um sich an das Interface zu gewöhnen. Spielen Sie mit ein paar weiteren Elementen, wenn Sie sich wohl fühlen, und Sie können auch die iOS-Entwicklungsressourcen von Apple besuchen, um mehr Lernressourcen zu erhalten. Es ist nie schlecht, noch mehr zu entdecken!

Bleiben Sie dran für Teil II

Damit ist unser erster Teil des Leitfadens für das Design und die Entwicklung von iPhone-Apps abgeschlossen. Im nächsten Teil werden wir uns eingehender mit Objective-C und Cocoa Touch beschäftigen, und Sie werden letztendlich lernen, eine funktionierende iPhone-App zu erstellen, bleiben Sie dran!

iOS Design Gallery

Für Designer hoffe ich, dass ich Ihnen auch ein wenig Inspiration gebe. Daher habe ich unten eine Liste mit fantastischen iPhone-App-Ansichten hinzugefügt. Die Liste enthält eine Vielzahl an inspirierenden App-Elementen, die Sie wahrscheinlich noch nie gesehen haben. Teilen Sie Ihre Ideen, App-Ansichten oder Fragen im Kommentarbereich weiter unten mit. Vielen Dank!

Race Splitter

Zufriedenheit Remote

Tweetbot für iPhone

Reeder

Foursquare

MailChimp

Instagram

Joystiq

Piictu

Dunkelheit