Design, Wireframing und Prototyping einer Android-App: Teil 2

In Teil eins dieser zweiteiligen Serie habe ich Ihnen gezeigt, wie Sie eine erste Idee für eine Android-App in einen detaillierten Plan umwandeln können - bis hin zur Zuordnung der einzelnen Bildschirme, aus denen Ihre fertige App besteht.

Am Beispiel einer Reise-App, mit der Benutzer ein unterhaltsames Sommerabenteuer mit all ihren Freunden planen und buchen können, haben wir unsere Zielgruppe identifiziert, indem wir eine Benutzerpersönlichkeit erstellt haben (erinnern Sie sich an unsere Freundin Sasha?) Und anschließend eine Liste mit Funktionen erstellt Das wäre perfekt für Version 1.0 unserer App (und perfekt für Sasha). Schließlich haben wir eine Bildschirmliste und eine Karte erstellt, die genau zeigen, wie all diese Bildschirme zusammenpassen.

Wir haben im ersten Teil viel unternommen, aber bis jetzt war unsere gesamte Planung ein wenig hochrangig und abstrakt. In Teil 2 werden wir die einzelnen Bildschirme, aus denen unsere App besteht, per Drahtmodell und Prototyping aus nächster Nähe betrachten.

Am Ende dieses Tutorials haben Sie einen digitalen Prototyp erstellt, den Sie auf Ihrem eigenen Android-Smartphone oder -Tablet installieren und testen können.

Lassen Sie uns gleich eintauchen und mit dem Erstellen von Drahtgittern beginnen!

Was ist Wireframing?

Beim Wireframing skizzieren Sie alle wichtigen UI-Komponenten, die Sie auf einem bestimmten Bildschirm platzieren möchten. Der Zweck von Wireframing besteht darin, die Struktur eines Bildschirms zu skizzieren. Es geht nicht um die feineren Details des Aussehens eines Bildschirms. Versuchen Sie also, sich nicht in die Besonderheiten des Grafikdesigns hineinziehen zu lassen. Im Moment reicht es zu wissen, dass Sie ein Menü auf Bildschirm A platzieren werden. Sie müssen sich keine Gedanken darüber machen, welche Farbe dieses Menü haben wird oder wie Sie den Text des Menüs gestalten werden.

Weitere Informationen zu Wireframing finden Sie in den folgenden Ressourcen:

• 
  Wireframing
  Ein Leitfaden für Anfänger zum Wireframing
  Winnie Lim
• 
  UX
  Ein Leitfaden für Anfänger zum Wireframing in Omnigraffle
  Justin Smith
• 
  UX
  10 Tipps zum Erstellen von Drahtgittern mit Illustrator
  Ian Yates
• 
  Wireframing
  Wireframing mit Skizze
  Adi Purdila

Wireframes täuschen ziemlich - sie sehen vielleicht wie schnelle, grobe und fertige Skizzen aus, aber sie sind tatsächlich ein leistungsstarkes Tool zum Erkunden, Definieren und Verfeinern der Benutzeroberfläche Ihrer App. Sie können Ihnen auch dabei helfen, Fehler bei Ihren anfänglichen Bildschirmdesigns zu identifizieren, bevor Sie zu viel Zeit in die Perfektionierung dieser Designs investieren.

Es ist viel einfacher, ein großes Kreuz durch ein Drahtmodell zu ziehen, die Seite in Ihrem Notizbuch umzublättern und erneut zu beginnen, als Code, an dem Sie bereits stundenlang gearbeitet haben, vollständig neu zu schreiben.

Also habe ich das Lob des Drahtgitters lange genug gesungen! Wie erstellen Sie ein Drahtmodell?

Sie haben einige Möglichkeiten:

• Skizzieren Sie Ihre Drahtgitter mit Bleistift und Papier.

• Erstellen Sie digitale Drahtmodelle mit professioneller Bildbearbeitungssoftware wie Adobe Photoshop oder einem speziellen Drahtmodellprogramm wie Pidoco, Axure, InDesign, Sketch, Omnigraffle oder Balsamiq Mockups.

Aber warum sollten Sie sich auf ein Tool beschränken, wenn Sie die Vorteile beider nutzen können? Papier- und digitale Drahtgitter haben jeweils ihre eigenen Stärken und Schwächen. Digitales Wireframing eignet sich perfekt zum Erstellen polierter und präziser Wireframes. Das Navigieren in mehreren Menüs ist jedoch nicht immer der beste Weg, um diese Ideen zum Fließen zu bringen - und es ist sicherlich nicht ideal, wenn Sie schnell mehrere verschiedene Ideen testen möchten! Auf der anderen Seite eignen sich Papier-Drahtgitter hervorragend für ein schnelles Brainstorming. Sie können jedoch Schwierigkeiten haben, Papier-Drahtgitter zu erstellen, die genau und detailliert genug sind, um als Blaupausen für die Art von Bildschirmen zu dienen, die Sie erstellen möchten.

Ich empfehle, Ihre ersten Entwürfe mit Kugelschreiber und Bleistift zu erstellen (ideal, um diese kreativen Säfte zum Fließen zu bringen). Sobald Sie einen Satz Papierdrahtrahmen haben, mit denen Sie zufrieden sind, können Sie einige Zeit damit verbringen, diese Entwürfe mit digitaler Drahtgitter-Software zu verfeinern .

Das ist der Ansatz, den ich in diesem Tutorial verwenden werde. Beachten Sie jedoch, dass Wireframing eine kreative Übung ist. Daher gibt es hier keine festen Regeln. Verwenden Sie die Methode, die für Sie am besten geeignet ist.

Erstellen Sie Ihr erstes Drahtmodell

Um Ihnen den bestmöglichen Überblick über den Wireframing- und Prototyping-Prozess zu geben, werde ich einen Bildschirm aus meiner Reise-App auswählen und im weiteren Verlauf dieses Artikels daran arbeiten. Der Bildschirm, den ich als mein Meerschweinchen auswählen werde, ist die Checkliste, da ich denke, dass dieser spezielle Bildschirm einige herausfordernde Elemente der Benutzeroberfläche enthält, die ein interessantes Beispiel darstellen.

Um Ihr Gedächtnis aufzufrischen, habe ich im ersten Teil die folgende Beschreibung geschrieben, wie ich mir den fertigen Checklistenbildschirm vorgestellt habe:

Im Standardzustand zeigt dieser Bildschirm eine Checkliste aller Aufgaben an, die der Benutzer ausführen muss, um eine erfolgreiche Reise zu planen. Durch Tippen auf eine beliebige Aufgabe gelangt der Benutzer zu einem Bildschirm, auf dem er diese Aufgabe ausführen kann. Immer wenn der Benutzer eine Aufgabe erledigt, wird dieses Element von seiner Checkliste gestrichen.

Um ein erstes Drahtmodell zu erstellen, nehmen Sie Papier und das Schreibgerät Ihrer Wahl und zeichnen Sie dann den rechteckigen Umriss eines typischen Smartphones oder Tablets.

Zunächst füge ich meinem Drahtmodell alle Navigationselemente hinzu. Wenn ich auf meine Bildschirmkarte schaue, sehe ich, dass der Benutzer in der Lage sein muss, drei Bildschirme aus der Checkliste zu erreichen:

• eine Stadt wählen.
• Transport buchen.
• Hotel buchen.

Diese Bildschirme repräsentieren zwei verschiedene Arten der Navigation: Rückwärtsnavigation und Vorwärtsnavigation.

"Stadt auswählen" ist der vorherige Bildschirm im Ablauf meiner Anwendung. Er stellt also den Benutzer dar, der sich rückwärts durch den Anwendungsverlauf bewegt. Android übernimmt diese Art der Rückwärtsnavigation automatisch (normalerweise über den Softkey "Zurück" des Smartphones oder Tablets), sodass Sie Ihrer Benutzeroberfläche keine explizite "Stadt audwählen"-Navigation hinzufügen müssen.

Die beiden anderen Bildschirme unterscheiden sich etwas, da sie den Benutzer darstellen, der sich in unserer Anwendung weiterentwickelt. Das System verarbeitet die Vorwärtsnavigation nicht automatisch. Daher liegt es in unserer Verantwortung, dem Benutzer alles zur Verfügung zu stellen, was er benötigt, um zu diesen Bildschirmen navigieren zu können.

Diese Navigationselemente werden die Form von zwei TextViews haben, die ich im Stil einer Checkliste anordnen werde (okay, zwei Elemente sind also keine große Liste, aber wenn ich weiter an diesem Projekt arbeite, werde ich Fügen Sie dieser Liste eventuell weitere Aufgaben hinzu. In ihrem Standardzustand erinnert jede TextView den Benutzer daran, dass er diese Aufgabe ausführen muss, z. B. "Sie müssen noch ein Hotel buchen!" Wenn der Benutzer auf TextView tippt, wird er zum Bildschirm "Transport transportieren" oder "Hotel buchen" weitergeleitet, damit er diese Aufgabe ausführen kann.

Wenn der Benutzer eine Aufgabe erledigt hat, wird die entsprechende TextView aktualisiert, um Informationen über das Hotel des Benutzers oder seine Transportvereinbarungen anzuzeigen (ich werde diese Informationen vorerst nicht zu unserem Drahtmodell hinzufügen, aber es ist etwas zu beachten).

Um einen Checklisteneffekt zu erstellen, erstelle ich für jede TextView eine entsprechende ImageView. Im Standardzustand zeigt jede ImageView ein rotes Kreuz an. Sobald der Benutzer eine Aufgabe erledigt hat, wird diese durch ein grünes Häkchen ersetzt.

Abschließend werde ich einen Titel TextView hinzufügen, in dem angezeigt wird, was auch immer der Benutzer ausgewählt hat, um diese bestimmte Reise aufzurufen.

Während Sie Ihr Drahtmodell erstellen, können Sie auf UI-Elemente stoßen, die an zahlreichen Positionen und in verschiedenen Größen funktionieren können. Das Erstellen eines Papierdrahtrahmens nimmt so gut wie keine Zeit in Anspruch. Wenn Sie also andere Ideen haben, nehmen Sie sich einen Moment Zeit, um sie zu verdrahten. In der Tat sollten Sie versuchen, für jeden Bildschirm einige Alternativen zu skizzieren, damit Sie entscheiden können, welche Idee das größte Potenzial hat.

Spülen und wiederholen Sie den Vorgang für jeden Bildschirm, aus dem Ihre App besteht, bis Sie einen vollständigen Satz Papierdrahtrahmen haben. Der nächste Schritt besteht darin, diese ersten Entwürfe in poliertere digitale Drahtgitter umzuwandeln.

Es gibt eine Vielzahl von Software, die speziell für Wireframing entwickelt wurde. Es lohnt sich also, einige Zeit damit zu verbringen, Ihre Optionen bei Google zu recherchieren. Wenn Sie es jedoch vorziehen, können Sie stattdessen Ihre bevorzugte Bildbearbeitungssoftware wie Adobe Photoshop verwenden.

Persönlich bin ich ein Fan von Balsamiq Mockups!

Verbringen Sie einige Zeit damit, Ihr Design in der Software Ihrer Wahl zu erstellen und zu perfektionieren, und halten Sie Ausschau nach Möglichkeiten, Ihr Drahtmodell zu optimieren und zu verfeinern. Die Arbeit mit einem neuen Tool kann auch einige neue Ideen hervorbringen. Wenn Sie also plötzlich von einem Inspirationsblitz darüber beeindruckt sind, wie Sie Ihr Design verbessern können, greifen Sie zu Papier und rahmen Sie diese Ideen ein. Wenn sie der Prüfung von Papierdrahtrahmen standhalten, falten Sie diese Änderungen in Ihr digitales Drahtgitter.

Spülen Sie erneut und wiederholen Sie den Vorgang für den Rest Ihrer Bildschirme.

Prototyping Ihres Projekts

Zeit, Ihre Entwürfe zu testen, indem Sie einen digitalen Prototyp erstellen, der auf Ihren Drahtgittern basiert.

Mit Prototyping können Sie praktische Erfahrungen mit dem Aussehen und der Funktionsweise Ihres Designs auf einem echten Android-Gerät sammeln. Außerdem können Sie über Android Virtual Devices (AVDs) testen, wie sich Ihr Design über mehrere Bildschirmkonfigurationen hinweg übersetzt.

Wie erstellt man einen digitalen Prototyp?

Am einfachsten ist die Verwendung von Android Studio, das dank des in die IDE integrierten grafischen Layout-Editors gleichzeitig als leistungsstarkes digitales Prototyping-Tool fungiert. In diesem Abschnitt werde ich viele der neuen Funktionen verwenden, die in Android Studio 2.2 eingeführt wurden. Wenn Sie also mitmachen möchten, stellen Sie sicher, dass Sie Android Studio 2.2 Preview 1 oder höher ausführen.

Um unseren Prototyp zu erstellen, starten Sie Android Studio und erstellen Sie ein neues Projekt. Um die Dinge einfach zu halten, verwende ich die Vorlage "Leere Aktivität". Da Sie diesen Prototyp auf Ihrem eigenen Android-Gerät testen, stellen Sie sicher, dass Sie das Mindest-SDK Ihres Projekts auf etwas einstellen, das mit Ihrem Android-Smartphone oder -Tablet kompatibel ist.

Nachdem Android Studio Ihr Projekt erstellt hat, öffnen Sie die Datei activity_main.xml und löschen Sie die lästige TextView "Hello World", die Android Studio diesem Layout standardmäßig hinzufügt. Stellen Sie sicher, dass Sie die Registerkarte "Design" ausgewählt haben, damit Sie die Palette und den Arbeitsbereich von Android Studio sehen können.

Jetzt sind wir bereit, unser Drahtmodell zum Leben zu erwecken! Beginnen wir oben mit dem Titel des Bildschirms. Es ist ziemlich offensichtlich, dass dies eine TextView sein wird, aber was ist mit dem Inhalt? Wenn der Benutzer mit der Planung einer Reise beginnt, kann er diese Reise nach Belieben aufrufen. Woher wissen wir also, welchen Text wir in unserem Prototyp verwenden sollen?

Der Umgang mit variablem Text ist ein wiederkehrendes Thema in diesem Prototyp. Nehmen wir uns also einen Moment Zeit, um dieses Problem jetzt genauer zu untersuchen.

Prototypen sind ein leistungsstarkes Werkzeug im Arsenal des App-Entwicklers, aber lassen Sie sich nicht mitreißen. Wenn ein Bildschirm variable Elemente enthält, können Sie nicht jede einzelne Version dieses Bildschirms prototypisieren. Dies ist sicherlich bei unserer Checkliste der Fall, da der Benutzer seine Reise beliebig benennen kann, von der markigen Reise 1 bis zu den weitläufigen und übermäßig aufgeregten, unterhaltsamen, ultimativen Sommerferien der Träume und allem dazwischen.

Während es unmöglich ist, jeden denkbaren Titel zu testen, ist ein Prototyp die perfekte Gelegenheit, Ihr Design ernsthaft unter Druck zu setzen, indem Sie die seltsamsten und wunderbarsten Variablen testen, die Sie sich vorstellen können.

Für meinen Checklisten-Prototyp werde ich drei Zeichenfolgenressourcen erstellen: eine, die den "typischen" Titel darstellt, für den sich die meisten Benutzer entscheiden, eine ungewöhnlich kurze und eine sehr langwierige. Das Testen dieser Extreme ist eine der effektivsten Methoden, um potenzielle Probleme auszuspülen, die möglicherweise in Ihren Bildschirmdesigns lauern.

Nachdem Sie diese Zeichenfolgenressourcen erstellt haben, müssen Sie diesen Text irgendwo zum Leben geben. Nehmen Sie also eine TextView aus der Palette und legen Sie sie auf der Leinwand ab.

In Android Studio 2.2 wurden die Konzepte von Einschränkungen eingeführt, mit denen sich schnell digitale Prototypen (und Benutzeroberflächen im Allgemeinen) erstellen lassen. Sie können Einschränkungen manuell erstellen, aber warum sollten Sie sich all diese Mühe machen, wenn Android Studio die harte Arbeit für Sie erledigen kann?

Es gibt zwei Möglichkeiten, wie Android Studio Einschränkungen für Sie erstellen kann. Lassen Sie uns also beide untersuchen. Die erste Methode ist die Verwendung der automatischen Verbindung. Stellen Sie daher sicher, dass Sie diesen Modus aktiviert haben, indem Sie die Schaltfläche für die Autoconnect umschalten (wobei sich der Cursor im folgenden Screenshot befindet).

Ziehen Sie nun Ihre TextView an die Stelle, an der sie in Ihrem Layout angezeigt werden soll. Ich möchte, dass mein Titel zentriert ist, also ziehe ich die TextView in die Mitte der Leinwand und lasse sie los. Wenn Sie TextView freigeben, erstellt Android Studio alle Einschränkungen, die erforderlich sind, um diese TextView an Ort und Stelle zu halten.

Wenn zwei Einschränkungen ein Widget in entgegengesetzte Richtungen ziehen, werden diese Einschränkungen als gezackte Linien angezeigt, weshalb diese Einschränkungen sich von regulären Einschränkungen unterscheiden.

Wenn Sie sich nicht sicher sind, ob Ihre TextView perfekt zentriert ist, ziehen Sie sie leicht entlang der horizontalen Achse. Auf beiden Seiten des Widgets werden QuickInfos angezeigt, die die aktuelle Position entlang der horizontalen linken und rechten Achse anzeigen. Ziehen Sie die TextView, bis Sie eine gleichmäßige 50/50-Aufteilung erhalten.

Stellen Sie diese TextView so ein, dass eine der Zeichenfolgenressourcen angezeigt wird, die Sie für Ihren Titel erstellt haben. Es spielt keine Rolle, mit welcher Zeichenfolge Sie beginnen, da Sie sie sowieso alle testen werden.

Als nächstes erstellen wir unsere Checkliste. Ich werde zwei Bilder in meiner Checkliste verwenden: ein grünes Häkchen, das angezeigt wird, wenn der Benutzer eine Aufgabe abgeschlossen hat, und ein rotes Kreuz, um anzuzeigen, dass dieses Element immer noch fest in der Aufgabenliste des Benutzers enthalten ist. Erstellen Sie diese Bilder und fügen Sie sie dem drawable-Ordner Ihres Projekts hinzu.

Öffnen Sie als Nächstes Ihre Datei strings.xml und erstellen Sie die beiden Standardnachrichten:

• Sie müssen ein Hotel buchen!
• Sie müssen den Transport regeln!

Ziehen Sie zwei TextView aus der Palette und legen Sie sie auf der Leinwand ab. Machen Sie sich noch keine Sorgen, dass alles perfekt ausgerichtet ist. Stellen Sie diese TextView so ein, dass Ihre Standardzeichenfolgenressourcen angezeigt werden.

Nehmen Sie dann zwei ImageView aus der Palette und legen Sie sie auf der Leinwand ab. Wenn Sie jedes ImageView freigeben, werden Sie von Android Studio aufgefordert, ein Zeichen für die Anzeige auszuwählen. Wir beginnen mit dem Prototyping der Standardversion dieses Bildschirms. Wählen Sie daher das rote Kreuz für beide ImageViews aus.

Zu diesem Zeitpunkt haben wir alle erforderlichen UI-Elemente hinzugefügt. Da wir sie jedoch zufällig auf die Leinwand gelegt haben, hat Ihr Prototyp wahrscheinlich nicht viel Ähnlichkeit mit Ihrem Drahtmodell. Wieder einmal sind es Einschränkungen für die Rettung!

Die zweite Möglichkeit, mit der Android Studio automatisch Einschränkungen erstellen kann, ist die Inferenz-Engine. Verbringen Sie einige Zeit damit, Ihre TextView und ImageView an die perfekte Position auf der Leinwand zu ziehen, und klicken Sie dann auf die Schaltfläche Infer Constraints von Android Studio (wobei sich der Cursor im folgenden Screenshot befindet).

Wenn Sie auf diese Schaltfläche klicken, erstellt Android Studio automatisch alle Einschränkungen, die für die Bereitstellung Ihres aktuellen Layouts erforderlich sind.

Dies ist die Standardversion dieses Bildschirms, aber wir müssen auch testen, wie sich dieser Bildschirm anpasst, sobald der Benutzer beginnt, Aufgaben von seiner Aufgabenliste zu streichen. Letztendlich möchte ich, dass in diesen TextView einige grundlegende Informationen zu Hotelreservierungen und Reisearrangements des Benutzers angezeigt werden. Dies stellt uns gegen einen alten Feind: variablen Text.

Dieser Bildschirm muss flexibel genug sein, um Informationen über Hotels (und Flughäfen, Bahnhöfe usw.) mit sehr langen Namen anzuzeigen. Gleichzeitig sollte es nicht seltsam aussehen, wenn der Benutzer ein Hotel bucht, das so cool und trendy ist dass sein Name ein einzelner Buchstabe oder das Pi-Symbol ist (ja, es ist diese Art von Hotel).

Die Lösung besteht wiederum darin, mehrere Zeichenfolgen zu erstellen, die den umständlichsten Text darstellen, den Ihr Layout möglicherweise verarbeiten muss. Wenn Sie sich nicht sicher sind, wie extrem Sie mit Ihren String-Ressourcen umgehen sollen, können Sie sich jederzeit an Ihren Freund im Internet wenden. In diesem Szenario habe ich einige Zeit damit verbracht, nach Hotels und Flughäfen zu suchen, insbesondere nach Hotels mit langen, kurzen oder geradezu seltsamen Namen zu suchen, und dann die besten Beispiele in meinen String-Ressourcen verwendet.

Nachdem Sie alle Ressourcen erstellt haben, können Sie einige vorläufige Tests durchführen, indem Sie zwischen den verschiedenen Zeichenfolgenressourcen und Zeichnungsdaten wechseln und anschließend die Ausgabe im integrierten Layout-Editor von Android Studio überprüfen.

Dies bietet Ihnen zwar nicht den gleichen Einblick wie das Testen Ihrer App auf einem echten Android-Gerät oder AVD, ist jedoch viel schneller und bietet die perfekte Möglichkeit, um unmittelbare, offensichtliche Probleme mit Ihrem Layout zu erkennen.

Möglicherweise müssen Sie Ihre TextView und ImageView ein wenig mischen, um die perfekte Balance zwischen einem Layout, das eine große Textmenge anzeigen kann, und einem Layout zu finden, das nicht seltsam aussieht, wenn nur wenige angezeigt werden müssen Briefe.

Wenn Sie einige Änderungen vornehmen müssen (ich weiß, ich musste!), Greifen Sie einfach nach den Widgets auf der Leinwand und ziehen Sie sie an eine neue Position. Wenn Sie mit den Ergebnissen zufrieden sind, klicken Sie einfach erneut auf die Schaltfläche Infer constraints. Android Studio erstellt einen völlig neuen Satz von Einschränkungen für Sie.

Hier ist mein fertiger Prototyp.

Nicht schlecht, aber der eigentliche Test ist, wie gut sich dieses Layout auf Android-Smartphones, Tablets und AVDs mit unterschiedlichen Bildschirmkonfigurationen übersetzen lässt. Genau das werden wir als Nächstes tun.

Testen Ihres digitalen Prototyps

Es gibt keinen Ersatz dafür, praktische Erfahrungen mit dem Aussehen und der Funktionsweise Ihres Prototyps auf einem realen Gerät zu sammeln. Installieren Sie Ihr Projekt zunächst auf Ihrem eigenen Android-Smartphone oder -Tablet und verbringen Sie einige Zeit mit der Interaktion, um ein Gefühl dafür zu bekommen allgemeine Benutzererfahrung. Vergessen Sie nicht, Ihren Prototyp sowohl im Quer- als auch im Hochformat zu testen!

Wenn Sie Probleme oder Möglichkeiten zur Verbesserung Ihres Bildschirmdesigns feststellen, notieren Sie diese, damit Sie genau wissen, welche Änderungen Sie nach Abschluss des Tests Ihres Prototyps vornehmen müssen.

Wenn Ihre App allen Benutzern die beste Benutzererfahrung bieten soll, muss sie flexibel genug sein, um sich an eine Reihe von Bildschirmkonfigurationen anzupassen. Nachdem Sie Ihren Prototyp auf Ihrem eigenen Android-Gerät gründlich getestet haben, sollten Sie mehrere AVDs mit unterschiedlichen Bildschirmgrößen und -dichten erstellen und anschließend Ihren Prototyp über alle hinweg testen. Wenn Sie wieder etwas an Ihrem Prototyp bemerken oder eine Idee haben, wie Sie das Design verbessern können, notieren Sie sich diese Änderungen, damit Sie sie nicht vergessen.

Nachdem Sie die Standardversion Ihres Layouts gründlich getestet haben, müssen Sie testen, wie sich Ihr Prototyp anpasst, sobald der Benutzer beginnt, Aufgaben von seiner Checkliste zu streichen.

Aktualisieren Sie beide ImageView, um das grüne Häkchen anzuzeigen, und wechseln Sie den Standardtext für zwei der alternativen Zeichenfolgenressourcen. Da wir alle unsere Zeichenfolgenressourcen testen, spielt es keine Rolle, mit welchen beiden Sie beginnen.

Führen Sie diese neue Version Ihres Prototyps durch denselben intensiven Testprozess. Dies bedeutet, dass Sie ihn auf Ihrem Android-Gerät installieren, um praktische Erfahrungen zu sammeln, und ihn dann auf AVDs mit unterschiedlichen Bildschirmkonfigurationen testen. Notieren Sie sich wie immer Ihre Ergebnisse. Spülen und wiederholen Sie dann alle Zeichenfolgenressourcen, die Sie für Ihre Checkliste und Ihren Titel TextView erstellt haben.

Sobald Sie den Test abgeschlossen haben, sollten Sie Ihre Notizen überprüfen. Wenn Sie nur kleine Änderungen vornehmen müssen, können Sie diese Änderungen möglicherweise direkt auf Ihren Prototyp und Ihre digitalen Drahtmodelle anwenden. Wenn diese Änderungen jedoch dramatischer sind oder zu einer vollständigen Neugestaltung führen, sollten Sie zunächst einige Zeit damit verbringen, sie genauer zu untersuchen. Idealerweise sollten Sie Ihre neuen Ideen dem gleichen Wireframing-, Prototyping- und Testprozess wie Ihre ursprünglichen Ideen unterziehen, da dies immer noch die effektivste Methode ist, um Probleme mit Ihren Designs auszubügeln.

Sicher, es ist frustrierend, sich wieder in der Wireframing-Phase zu befinden, als es so aussah, als wären Sie fast mit dem gesamten Designprozess fertig, aber die Zeit, die Sie mit der Erforschung neuer Ideen verbringen, ist immer gut investierte Zeit.

Selbst wenn Sie diese Ideen zugunsten Ihres ursprünglichen Designs verwerfen, wissen Sie zumindest, dass Sie wirklich mit den besten Bildschirmdesigns arbeiten, die Sie sich vorstellen können. Es gibt nichts Schlimmeres, als eine Menge Zeit und Mühe in ein Projekt zu investieren, wenn Sie die ganze Zeit über einen nagenden Zweifel im Hinterkopf haben, dass Sie vielleicht, nur vielleicht, einen anderen Weg hätten gehen sollen.

Wenn das Prototyping neue Ideen hervorgebracht hat, ist es jetzt an der Zeit, sie zu erkunden!

Nachdem Sie alle Versionen Ihres Prototyps auf einer Reihe von AVDs getestet haben, müssen Sie nur noch einen Prototyp für jeden anderen Bildschirm in Ihrer Bildschirmkarte erstellen und jeden einzelnen Bildschirm derselben Prüfung unterziehen.

Abschluss

In dieser zweiteiligen Serie haben wir uns angesehen, wie man eine erste Idee in ein detailliertes Design umwandelt.

Dies mag nach viel Arbeit klingen (weil es ehrlich gesagt viel Arbeit ist), aber jeder Schritt in diesem Prozess hilft Ihnen dabei, Probleme mit Ihrem Design zu beseitigen und Möglichkeiten zur Verbesserung Ihrer App ausfindig zu machen.

Durch Planung, Wireframing und Prototyping können Sie auf lange Sicht Zeit sparen, indem Sie die Wahrscheinlichkeit verringern, dass Sie sich später mit größeren Problemen befassen müssen. Sobald Sie mit dem Schreiben von Code beginnen, wird das Beheben von Designproblemen viel schwieriger.

Wenn Sie jedoch letztendlich so viel Zeit und Energie in die Perfektionierung des zugrunde liegenden Designs Ihrer App investieren, können Sie Ihren Benutzern ein besseres Erlebnis bieten. Das bedeutet mehr Downloads, mehr positive Bewertungen und mehr Leute, die Ihre App ihren Freunden und ihrer Familie empfehlen - und wer möchte das nicht?