Mobile UI Neugestaltung der Spendometer-iPhone-App (Teil 1)

In dieser Tutorialserie werden alle Schritte beschrieben, die für die Neugestaltung einer iPhone-Anwendung mit Photoshop erforderlich sind. Sie werden viele der einzigartigen Überlegungen und Entwurfsmuster kennenlernen, die beim Erstellen herausragender App-Schnittstellen verwendet werden. Dieses Tutorial wird in zwei Teilen in Zusammenarbeit mit Mobiletuts + präsentiert, in dem Sie zukünftig immer mehr Tutorials zum Thema mobiles Design finden können. Lesen Sie den zweiten Teil dieser Serie und laden Sie die Schnittstelle PSD auf Mobiletuts herunter+.


Die Spendometer-Anwendung

Willkommen zum ersten Teil unserer Tutorialserie zur Neugestaltung der Spendometer iPhone-Anwendung! Die Anwendung ist eine großartige kleine App, mit der Sie Ihr Budget einhalten können. Wie aus der Apple-Website hervorgeht, macht dies das Spendometer:

Wenn Sie versuchen, an einem Budget festzuhalten, ist es eine gute Idee, alle Ausgaben aufzuzeichnen, aber es ist harte Arbeit, alles in ein Notizbuch zu schreiben. Das Moneybasics Spendometer ist eine Anwendung, die die tägliche Budgetierung einfach und praktisch macht. Mit dem Spendometer können Sie sich ein Budget festlegen, Ihre Ausgaben protokollieren und Ihre Ausgabenberichte anzeigen, um zu sehen, wo und wie viel Geld bisher in einer Woche oder einem Monat bisher ausgegeben wurde. Es hat auch eine Funktion, mit der Sie Ihre Ausgaben für eine Nacht im Auge behalten können.

Jedes Mal, wenn Sie etwas kaufen, geben Sie es einfach in das Spendometer Ihres Handys ein, und es wird eine Aufzeichnung für Sie führen. Sie können Ihre eigenen Ausgabenlimits festlegen und festlegen, wie Ihre Ausgaben wöchentlich oder monatlich angezeigt werden.

Mit dem Moneybasics-Spendometer erhalten Sie das unverzichtbare Werkzeug, um sicherzustellen, dass Sie Ihre Finanzen im Griff haben.

Es ist wirklich eine schöne kleine Anwendung, die ihren Zweck gut erfüllt, aber um ehrlich zu sein, könnte es aus Designsicht mit ein wenig TLC auskommen. Unten sehen Sie das Anwendungssymbol und mehrere Screenshots der Anwendung. Die Screenshots wurden mit einem iPhone 4 aufgenommen - wie Sie sehen, sind einige Bereiche pixeliert, was bedeutet, dass sie ihre Anwendung noch mit hochauflösenden Grafiken aktualisieren müssen.


Icon Design


Startbildschirm


Spendometer-Bildschirm


Bildschirm "Berichte"


Berichtsbildschirm


Einstellungsfenster


Budgets einstellen


Lesestoff bevor wir beginnen…

Es ist ratsam, ein wenig über das Entwerfen für das iPhone zu wissen, bevor wir mit diesem Tutorial fortfahren. Im Idealfall sollten Sie die iPhone Human Interface Guidelines von der offiziellen Apple-Entwickler-Website lesen.


Das Tutorial

Wie bei allen wichtigen Entwürfen sollten Sie als erstes eine ungefähre Vorstellung davon bekommen, wie Ihr Entwurf aussehen soll. Der beste Weg, dies zu tun, ist natürlich das Skizzieren. Für große Anwendungen zeichnen viele UI-Designer Seiten und Seiten mit Ideen, Anmerkungen und Brainstorms. Da wir bereits über eine Struktur für die Anwendung verfügen, die wir umgestalten, können wir uns schnell damit fortbewegen.

Im Folgenden sind einige Skizzen aufgeführt, die ich zusammengestellt habe - diese sind sehr grob und nur allgemeine Drahtgitter-Ideen, die ich in meinem Kopf habe, wie das Design aussehen soll. Farben und Stile können warten, bis wir später auf diese Stufe gelangen!

Das Bild, das ich im Kopf habe, ist eine sehr einfach zu verwendende, schlanke, moderne und strukturierte Oberfläche. Etwas, das die Leute dazu bringen wird, "wow" zu gehen. Ich möchte auch, dass es sehr minimal ist - die App ist sehr einfach und daher auch das Design. Es ist keine unnötige Unordnung erforderlich.

Denken Sie daran, dass Sie diesem Tutorial nicht Wort für Wort folgen müssen - experimentieren Sie mit verschiedenen Dingen und stellen Sie Ihre eigene Kreativität hinter die verwendeten Techniken. Wir würden uns sehr freuen, Ihre Ergebnisse zu sehen. Teilen Sie Ihren Fortschritt also im Kommentarbereich mit.

Noch etwas, bevor wir anfangen: Ich schreibe dieses Tutorial während des Entwurfs, nicht nach dem Abschluss des Entwurfs. Ich denke, es ist wichtig, den kreativen Prozess hinter einem Design zu zeigen. Die meisten Tutorials werden geschrieben, nachdem die Entwürfe fertiggestellt wurden. Sie sehen daher nicht die Fehler des Designers oder wie viele Versuche es unternommen hat, um etwas richtig zu machen. Jeder Designer macht das wie jeder andere Job - Menschen machen Fehler, lernen aus diesen Fehlern und verbessern nur die Dinge. Wenn Sie also sehen, dass Sie sich beim Lesen dieses Tutorials möglicherweise selbst weiterentwickeln, liegt dies daran, dass ich entschieden habe, dass sich etwas ändern muss! Lass uns anfangen!


Schritt 1

Der erste Schritt ist das Einrichten Ihres Dokuments. Wir werden für das neue hochauflösende Retina-Display des iPhone 4 designt, was bedeutet, dass die Auflösung mit einer viel höheren Auflösung als mit dem iPhone 3GS gestaltet wird.

Öffnen Sie Photoshop und gehen Sie zu Datei> Neu… . Benennen Sie Ihr neues Dokument mit einem geeigneten Namen, z. B. "Spendometer Redesign". Geben Sie Ihre eigenen Abmessungen ein (für Photoshop gibt es keine Voreinstellung für das neue Display) für das iPhone 4 Retina-Display. Wir verwenden 640 x 960 Pixel mit einer Auflösung von 326 ppi (Pixel pro Zoll), dem neuen Standard. Sie können meine Einstellungen unten sehen.

Der nächste Schritt besteht darin, einige Dummy-Shapes für die Statusleiste (die Leiste mit den Telefoninformationen und die Uhrzeit), die Navigationsleiste (die Leiste unter der Statusleiste) und die Symbolleiste (die Leiste am unteren Bildschirmrand) zu platzieren..

Am besten fügen Sie dazu einfach einen bereits vorhandenen Screenshot einer Anwendung ein Datei> Platzieren.

Sie können jetzt die Rechteckiges Laufschriftwerkzeug Wählen Sie Ihre verschiedenen Bereiche des Designs aus und ersetzen Sie sie durch feste Formen. Ich werde jetzt erst Schwarz verwenden. Füllen Sie diese in neuen Ebenen aus und benennen Sie Ihre Ebenen in geeignete Elemente wie "Navigationsleiste" und "Symbolleiste" um. Wir werden grundlegende Formen erstellen und ihnen später Farbe und Details hinzufügen. Sie können auch den Großteil des Screenshots löschen, den wir eingefügt haben. Das einzige, was ich aufbewahre, ist die Statusleiste (siehe unten).

Wir haben jetzt eine leere iPhone-Leinwand, die mit dem Entwurf beginnen kann. Als nächstes möchten wir einige neue Ordner in unserem Ebenenfenster erstellen. Wir benötigen mehrere Ordner für verschiedene Bildschirme:

  1. Startbildschirm
  2. Spendometer-Bildschirm
  3. Bildschirm "Berichte"
  4. Berichtsbildschirm
  5. Einstellungsfenster
  6. Budgets einstellen

Die Anwendung selbst hat zwar ein paar mehr Bildschirme als diese, aber meiner Meinung nach werden viele von ihnen nicht benötigt, also werden wir das drastisch reduzieren und mehr Inhalt auf den gleichen Bildschirm bringen. Wir werden auch ein paar Bildschirme verpassen, die andere Bildschirme ziemlich replizieren - der einzige Unterschied sind die Titel!

Erstellen Sie für jedes der oben aufgeführten Bildschirme im Ebenenfenster einen neuen Ebenenordner. Klicken Sie dazu im Ebenenfenster auf das kleine Ordnersymbol. Wir müssen noch nichts in diese Ordner legen.


Schritt 2

Ich möchte ein schlankes und modernes Design mit einem Hauch von Textur kombinieren. Die Textur der Wahl wird Holz sein, um genau zu sein (lohnt die 2-4 Dollar). Nachdem Sie einige Texturen heruntergeladen haben, fügen Sie sie in Ihr Dokument ein, indem Sie auf gehen Datei> Ort… . Skalieren Sie Ihre Textur so, dass sie gut in Ihr UI-Design passt, und fügen Sie sie mit Ihrer Hintergrundebene zusammen.

Wir möchten unsere Textur ein wenig aufhellen, da wir nicht wollen, dass sie so kühn ist. Erstellen Sie eine neue Ebene direkt über Ihrem hölzernen Texturhintergrund und füllen Sie sie mit Weiß mit Farbeimer Werkzeug. Verringern Sie die Deckkraft der Ebene auf 35%, um Ihrem Hintergrund eine weiße Wäsche zu verleihen, und fügen Sie sie dann zusammen, indem Sie auf klicken Befehl + E (Strg + E) Kombination, um die Wäsche auf unseren Hintergrund anzuwenden.


Schritt 3

Wir werden auch eine Holzstruktur für unsere Navigationsleiste und Symbolleiste verwenden. Wählen Sie aus demselben Paket aus GraphicRiver eine der anderen Texturen aus und platzieren Sie sie in Ihrem Dokument. Verändern Sie die Größe und platzieren Sie sie über Ihrer Navigationsleiste.

Wenn Sie mit einer bestimmten Position zufrieden sind, klicken Sie in der Miniaturansicht der Navigationsleistenebenen bei gedrückter Taste Cmd-Key um die Ebeneninhalte auszuwählen. Klicken Sie erneut auf Ihre neue Holzstrukturschicht und gehen Sie zu Bearbeiten> Kopieren um Ihre Auswahl zu kopieren. Löschen Sie die Texturebene und fügen Sie Ihre Auswahl in eine neue Ebene ein.

Es ist jetzt an der Zeit, der Navigationsleiste ein wenig Stil hinzuzufügen. Klicken Sie mit der rechten Maustaste auf Ihre neue Navigationsleistenebene und wählen Sie aus Fülloptionen um das Ebenenstil-Fenster zu öffnen. Wir möchten unserer Navigationsleiste ein paar einfache Stile hinzufügen, die das Erscheinungsbild unserer Bar dramatisch verbessern.

Zunächst fügen wir einen Schlagschatten hinzu. Ich habe einen 90-Grad-Winkel mit einer Deckkraft von 25% verwendet - alle anderen Optionen sind auf Standard gesetzt.

Um unserer Navigationsleiste ein wenig mehr Tiefe zu verleihen, wenden wir einen Abschrägungs- und Reliefstil an. Dieser Stil hat aufgrund von Missbrauch einen sehr schlechten Namen, ist aber wirklich ein großartiges und sehr leistungsfähiges Werkzeug, das Ihnen viel Zeit spart. Wenden Sie eine glatte Innenfase mit einer Tiefe von 100%, einer Größe von 196 Pixeln und einer Weichzeichnung von 16 Pixeln auf Ihre Ebene an. Reduzieren Sie die Deckkraft der Markierungsmodi auf 20% und die Deckkraft der Schattenmodi auf 55%..

Wenn Sie diese beiden einfachen Stile anwenden, bleibt etwas übrig, was ziemlich klug aussieht!

Zoomen Sie direkt in Ihre Navigationsleiste, da es Zeit ist, der Unterseite einen schönen 1px-Strich hinzuzufügen, um die Aufmerksamkeit für die Detailebenen zu erhöhen. Erstellen Sie eine neue Ebene über Ihrer Navigationsleiste und erstellen Sie dann eine Auswahl mit der Breite 1px Einreihiges Laufschrift-Werkzeug. Füllen Sie Ihre Auswahl mit Weiß.

Ändern Sie den Ebenenüberblendungsmodus in Überlagerung und verringern Sie die Deckkraft auf 70%, um das folgende Ergebnis zu erhalten.

Im Moment ist unsere Navigationsleiste fertig - wir werden später darauf zurückkommen, um die Typografie-Stile für Header zu erstellen.


Schritt 4

Ich habe entschieden, dass eine andere hölzerne Symbolleiste am unteren Rand der App zu "holzlastig" sein würde. Stattdessen verdunkeln wir die Unterseite ein wenig und platzieren stattdessen unsere Navigationssymbole dort.

Wählen Sie den Inhalt der Symbolleistenebenen aus und wählen Sie dann die Option Radiergummi. Wählen Sie bei 100px einen weichen Radierer aus und löschen Sie den oberen Bereich der schwarzen Symbolleiste, während Sie die Umschalttaste gedrückt halten. Wenn Sie dabei die Umschalttaste gedrückt halten, können Sie Inhalte in einer geraden Linie löschen, anstatt die volle Kontrolle darüber zu haben, was Sie löschen können.

Ändern Sie den Überblendungsmodus der Ebenen der Werkzeugleiste, und verringern Sie die Deckkraft auf 60%. Dies gibt ihm ein leicht verbranntes Aussehen und gibt uns einen schönen Hintergrund, auf dem unsere Icons platziert werden können (sobald wir sie entworfen haben). Jetzt ist es an der Zeit, unsere Navigationsleisten- und Symbolleistenebenen in separaten Ebenenordnern unterzubringen.


Schritt 5

Wir sind also bereit, weiterzumachen. Wir werden jetzt unseren Startbildschirm gestalten, der der einfachste Bildschirm in der Anwendung ist, da er keine Navigation oder Symbolleisten enthält. Blenden Sie die Ordner der Navigationsleiste und der Symbolleistenebene aus und erstellen Sie eine neue (transparente) Ebene in Ihrem Startbildschirmordner, und nennen Sie sie "Schatten"..

Füllen Sie Ihre neue Ebene mit einer dunklen Volltonfarbe (ich verwende # 333333) mit Farbeimer Werkzeug. Wählen Sie den Inhalt Ihrer Statusleistenebene aus und klicken Sie dann auf Ihre neue Startansichtsebene und drücken Sie die Löschtaste, um einen kleinen Bereich der grauen Ebene zu entfernen, um die Statusleiste anzuzeigen.

Duplizieren Sie Ihre Ebene, sodass Sie zwei derselben Form haben. Gehen Sie auf der neuen Ebene zu Bearbeiten> Transformieren> Freie Transformation Um die Transformationsbox auf Ihrer neuen Form / Ebene aufzurufen. Skalieren Sie die Auswahl, während Sie gleichzeitig die Alt- und die Umschalttaste gedrückt halten. Wenn Sie die Umschalttaste gedrückt halten, wird die Form im Verhältnis zueinander gehalten. Wenn Sie die Alt-Taste gedrückt halten, ändert sich auch die Größe an den Kanten. Treffen Sie eine Auswahl Ihrer neuen Größe.

Löschen Sie Ihre neue Form (während Sie noch die Live-Auswahl haben) und löschen Sie dann die Auswahl aus Ihrer ursprünglichen Ebene. Am Ende sollte etwas aussehen, das dem folgenden Screenshot ähnelt.

Gehe zu Filter> Unschärfe> Gaußsche Unschärfe Verwenden Sie einen Radius von etwa 50 Pixeln, um Ihrem Schatten einen glatten und verwischten Effekt zu verleihen.

Wählen Sie mit der gleichen Technik, die wir zuvor verwendet haben, eine Auswahl der Statusleiste aus und entfernen Sie alle überlappenden Schatten aus unserer Schattenebene.

Dupliziere unsere Schattenebene noch einmal. Ändern Sie den Überblendungsmodus der unteren Schattenebenen in Überlagerung und den Deckkraftanteil in 100%. Ändern Sie den Überblendungsmodus der oberen Schattenebenen in Normal und den Deckungsprozentsatz in 25%..

Im nächsten Schritt wird unser typografisches Logo erstellt. Wir werden es so aussehen lassen, als ob der Typ mit einer Handvoll Ebenenstilen und -techniken in das Holz eingraviert wurde. Schnappen Sie sich Ihr Textwerkzeug und gestalten Sie Text. Verwenden Sie die Typeinstellungen, um Ihren Text gut auszurichten.

Spielen Sie mit verschiedenen Schriftarten herum, bis Sie das Gefühl haben, dass es gut aussieht. Ich habe mich für eine Kombination aus Stencil und Helvetica entschieden.

Jetzt ist es an der Zeit, unsere Typografie so aussehen zu lassen, als wäre sie in unseren Hintergrund eingraviert worden. Wir werden einen großen Teil unserer Typografie im gesamten Anwendungsdesign aussehen lassen, insbesondere die Symbole und Titel in der Navigationsleiste.

Diese Art von Effekt erfordert viele Ebenenstile. Als erstes müssen wir jedoch die Farbe unseres Typs ändern. Verwendung der Pipette Wählen Sie eine dunkle Farbe aus dem Hintergrund aus und wenden Sie diese Farbe dann auf Ihre Typografie an.

Verringern Sie die Deckkraft der Textebenen auf 50% und öffnen Sie dann die Fülloptionen für Textebenen. Der erste Stil, den wir anwenden werden, ist ein Inner Shadow, der folgende Einstellungen verwendet:

Der nächste Stil, den wir anwenden werden, ist ein sehr subtiler Schlagschatten, der folgende Einstellungen verwendet:

Zum Schluss fügen wir unserem Text einen Strich hinzu und verwenden dabei die folgenden Einstellungen (die Farbe, die ich verwendet habe, ist # E6D0B3).

Ändern Sie den Füllmodus für die Ebenen der Ebene in lineares Brennen.

Wir werden unseren inneren Schatten ein wenig stärker / mutiger machen. Duplizieren Sie die Textebene und ändern Sie den Füllmodus in Sättigung. Dadurch wird die Ebene fast transparent, wobei alle Ebenenstile weiterhin angezeigt werden können. Öffnen Sie das Ebenenstile-Fenster und entfernen Sie die Schatten- und Strichstile vollständig. Klicken Sie auf Ihre innere Schattenregisterkarte und ändern Sie die Einstellungen ähnlich wie unten gezeigt.

Wiederholen Sie den gleichen Schritt erneut, diesmal mit den folgenden Einstellungen:

Wie Sie sehen, haben wir einige weitere Schatten auf unsere Typografie angewendet, ohne dass die tatsächliche Farbe dadurch beeinflusst wird, dass der Mischmodus einfach auf Sättigung geändert wird. Der erste zusätzliche Schatten fügte einen gleichmäßigen weichen Schatten um jede der Kanten hinzu, während der zweite zusätzliche Schatten einen starken und scharfen Schatten nur auf die Oberseite unseres Typs ausübte.

Unser Startbildschirm sieht verdammt gut aus und wird auf dem hochauflösenden Retina-Display noch besser dargestellt!


Schritt 6

Unser nächster Schritt ist natürlich unser Spendometer-Bildschirm. Dies ist der erste Bildschirm, der nach dem Startbildschirm angezeigt wird. Richten Sie mithilfe von Effekten, die wir gerade im vorherigen Schritt verwendet haben, Ihre Typografie ein und wenden Sie ein paar schöne Ebenenstile auf Ihre Spendometer-Kopfzeile in der Navigationsleiste an. Es ist hier ideal, um Duplikate Ihrer Navigationsleiste zu erstellen. eine für jeden Bildschirm. Ich habe die Textebene auf 90% Deckkraft gesetzt, um die Textur ein wenig durchzulassen, und habe die folgenden Ebenenstile verwendet. Für diesen Typ müssen keine zusätzlichen Schatten erstellt werden, da er viel kleiner ist.

Ich habe beschlossen, dass die Navigationsleiste oben im Design ein wenig zu dunkel wirkt, entweder die oder die Typografie ist zu hell. Um dies zu beheben, werde ich die Navigationsleiste ein wenig aufhellen. Dies erreichen Sie am einfachsten, indem Sie Ihre Navigationsleistenebene auswählen und dann zu gehen Bild> Einstellungen> Helligkeit / Kontrast. Erhöhen Sie die Helligkeit auf 60 und den Kontrast auf 10.

Verringern Sie die Deckkraft unseres 1-Pixel-Strichs unterhalb unserer Navigationsleiste, um ihn mit der neuen, leichteren Navigationsleiste besser anzupassen. Ich habe es auf 40% gesenkt.

Damit die Textur unseres Kopfzeilentextes für die Navigation ein wenig klarer wird, ändere ich die Farbe unseres Typs in eine viel hellere Auswahl und setze dann den Ebenen-Überblendungsmodus auf Multiplikator. sehr) abhängig davon, welche Farbe Ihre Basisform hat.

Duplizieren Sie Ihre Textebene und verringern Sie die Deckkraft auf 40%. Dadurch wird unser Typ ein wenig dunkler, und zwar so, dass er wieder auf den vorherigen Wert zurückgesetzt wird, aber dennoch mehr Textur zeigt, ohne die Deckkraft zu verringern.

Sie können jetzt den Layer-Ordner der Registerkarte für die Navigationsregisterkarte in jeden Bildschirmordner kopieren und einfügen und so bearbeiten, dass er dem Titel jedes Bildschirms ähnelt (siehe unten):

Das sind die Überschriften fürs Erste - wir werden sie später noch einmal besuchen. Wie Sie vielleicht erkannt haben, hat das Entwerfen für mobile Geräte viel mit Versuch und Irrtum zu tun.


Schritt 7

Im nächsten Schritt müssen Sie einen weißen Hintergrund einrichten, um weitere Elemente darauf zu platzieren. Dies bedeutet, dass wir einen großen Teil unseres hölzernen Hintergrunds vertuschen werden. Im Allgemeinen ist es jedoch viel angenehmer, Dinge auf weißem und nicht strukturiertem Hintergrund zu betrachten.

Wähle aus Rechteckiges Laufschriftwerkzeug und wählen Sie eine feste Größe von 600x700px. Klicken Sie auf eine beliebige Stelle Ihrer Leinwand und zentrieren Sie Ihre Auswahl mithilfe der Pfeiltasten. Es sollte leicht zu arrangieren sein, da sich auf jeder Seite genau 20 Pixel zwischen den Seiten und der Auswahl befinden (links, oben und rechts)..

Erstellen Sie eine neue Ebene in Ihrem Spendometer-Ordner und nennen Sie diese als geeignet, z. B. "Weißer Hintergrund". Gehe zu Wählen Sie> Ändern> Glätten und glätten Sie Ihre Formen mit einem Radius von 5 Pixeln. Fülle es mit Weiß.

Wähle aus Elliptisches Laufschriftwerkzeug und ziehen Sie eine gleiche Auswahl heraus. Positionieren Sie ihn wie unten gezeigt unten und drücken Sie die Löschtaste, um eine kleine Auswahl unseres weißen Hintergrunds zu entfernen.

Öffnen Sie das Ebenenstile-Fenster. Wir werden eine Reihe von Effekten auf unseren weißen Hintergrund anwenden. Zuerst fügen wir einen Schlaganfall hinzu. Ich habe die folgenden Einstellungen mit der Farbe # 6C4C24 verwendet:

Als Nächstes wenden wir einen inneren Schatten an, um unserem Hintergrund ein wenig mehr Tiefe zu verleihen. Die Einstellungen, die ich verwendet habe, sind unten zu sehen:

Der letzte Ebenenstil, den wir anwenden werden, ist ein Schlagschatten. Verwenden Sie die folgenden Einstellungen, um den weißen Hintergrund etwas mehr vom gesamten Anwendungshintergrund abzuheben:

Verringern Sie die Deckkraft der gesamten weißen Hintergrundschicht auf etwa 75%, damit ein klein wenig der Holzmaserung durchscheint. Unser Endergebnis (unten) gibt uns eine schöne weiße Leinwand, auf der unsere Anwendungselemente platziert werden können, so dass es einfach zu lesen und dennoch schön anzusehen ist.

Wir fügen dem unteren Rand der Hauptinhaltsebene einen schwarzen Strich mit geringer Pixeldichte hinzu. Duplizieren Sie Ihre weiße Hintergrundebene und entfernen Sie alle Ebenenstile. Füllen Sie die Form mit Schwarz und bewegen Sie sie mit den Cursortasten um ein Pixel nach unten. Legen Sie es unter Ihre ursprüngliche weiße Hintergrundebene. Wählen Sie Ihre ursprüngliche weiße Hintergrundebene aus, klicken Sie dann auf Ihre neue duplizierte Ebene und drücken Sie die Löschtaste. Verringern Sie die Deckkraft auf ca. 40%. Sie sollten mit etwas Ähnlichem enden:


Das ist das Ende von Teil eins, Leute!

Damit ist der erste Teil des Tutorials beendet. Es wird empfohlen, dass Sie Ihre Datei von Zeit zu Zeit als hochauflösendes JPEG-Bild exportieren und auf dem Display Ihres iPhones anzeigen, um sicherzustellen, dass sie gut aussieht. So sieht mein Startbildschirm aus (wir testen die anderen Bildschirme im nächsten Tutorial!):

Teil zwei dieses Tutorials ist auf Mobiletuts + verfügbar und behandelt den Rest des Anwendungsdesigns. Springen Sie vorbei, um die Erstellung der Schnittstelle abzuschließen!


Weitere Mobiletuts + Design-Inhalte:

  • Arbeiten innerhalb der Einschränkungen des Mobile UI-Designs
  • iPad Magazine Interface Design
  • Mobile Design: Analyse der Amazon UK App

Möchten Sie für Mobiletuts schreiben+?

Wir suchen aktiv nach Designern, die ihre mobilen Designfähigkeiten in unsere Community einbringen können. Kontaktieren Sie uns noch heute, wenn Sie daran interessiert sind, kostenpflichtige Inhalte zu verfassen!