Unschuld verlieren: über das Design seiner ersten App

wiederholte Augmented Post, jetzt in eigenem Namen.

Vor ungefähr zehn Jahren las ich ein sehr berühmtes Buch über Webdesign. Ohne die offensichtliche Tatsache, dass Website-Design und Interface-Design zwei verschiedene Dinge sind, erinnere ich mich an den Satz, wenn erfahrene Projektmanager „von Anfang an“ antworten, wenn sie gefragt werden, wo sie mit dem Website-Design beginnen sollen.

Vor zwei Monaten hat mir mein Kollege Andrei Vinogradov geraten, eine großartige Idee für eine neue Anwendung für den Apple Store umzusetzen. Vor einem Monat habe ich angefangen zu verkaufen, und ich möchte darüber sprechen, wie ich meine erste Anwendung in diesem Bereich von Grund auf neu starten kann. Das ist schwierig, aber furchtbar interessant, und einige von uns werden mit diesem angenehmen Alter Geld verdienen.

Die Aufgabe scheint trivial, aber für Peter ist die „Brückenkarte“ dieselbe wie für Moskau - eine U-Bahn-Karte, die Tema Lebedev einige Monate lang verfeinert hat. Die Aufgabe lautete: "Das würde fangen", und die Benutzeroberfläche würde intuitiv "im Apple-Stil" bleiben (obwohl wir uns weit von den Kanonen entfernen mussten). Dass es ein cooles Icon geben würde und dass alles genau dort wäre, wo der Benutzer es sehen wollte. Dass es kein bydlografiki geben würde, ein Übermaß an unnötigen Schaltflächen (wie es normalerweise bei einheimischen Programmierern der Fall ist) und dass alles an Ort und Stelle bleiben würde. Dass ich selbst neunundneunzig Cent für ein kleines Programm in der Tasche ausgeben möchte und mir der Rest egal ist.



Die Aufgabe bestand darin, ein Team für das Projekt zusammenzustellen, das Design und die Ikone zu bestimmen, die Anwendung zu testen und zu bewerben. Das Wichtigste zuerst: In diesem Beitrag werden wir darüber sprechen, wie Design von Grund auf neu entwickelt wurde.

Der Verweis wurde abrupt aus
dem AppStore bridges.spb www.iphones.ru/iNotes/29206 genommen,
und die Aufgabe bestand darin, die Benutzeroberfläche fertigzustellen . Das Programm löste das Problem, hinterließ aber den Eindruck, dass der Besitzer anstelle des iPhone-Bildschirms einen riesigen Monitor mitnimmt, auf den alles passen sollte, und das Retina-Display ein kleines lächerliches Missverständnis ist.

Es wurde beschlossen, die Palette zu ändern und die Farben von Asphalt und Fahrbahnmarkierungen zu belassen. Die erste Skizze der internen Symbole wird angezeigt. Die ausgezeichnete Seite „razvodkamostov.ru“ schlägt die Idee der Taschenplanung vor, dass selbst Lebedev in Ausdrücken nicht schüchtern ist.
Www.artlebedev.ru/kovodstvo/business-lynch/2010/07/12

Bild

Bild

Andrei deckt die Version mit einer dreistöckigen Matte ab, aber ich entscheide mich, die Dienste des Designers in Anspruch zu nehmen, der das Layout präsentiert hat. Gemeinsam versuchen wir, die Idee zu finden: Jedes Diagramm mit einer Brücke sollte kompakter werden, die Symbole sollten intuitiver sein und die Informationen selbst sollten bequemer dargestellt werden. Wir beschließen, die unteren Registerkarten aufzugeben, damit der Bildschirm beim Drehen des Geräts übereinander fließt. Der Programmierer bestätigt die Fähigkeit, die Aufgabe im Code zu implementieren, und jetzt fließen die lächerlichen Sortierschaltflächen aus der Kopfzeile in den Keller, wo sie ihr Gesicht finden. Während wir mit der Schrift spielen, entfernen wir die handschriftliche Schande aus der ersten Version, aber es ist noch weit von der endgültigen Entscheidung entfernt.

Bild

Bild

Etwas Ähnliches wie die Wahrheit, aber immer noch weit vom Ideal entfernt. Sie haben beschlossen, eine Schaltfläche für soziale Lesezeichen (oben links) hinzuzufügen, die bereits in MobileRSS implementiert ist. Wenn der Benutzer zufrieden ist, lassen Sie ihn uns bei der Werbung helfen und fügen Sie eine GPS-Schaltfläche (unten links) hinzu, um die Brücken je nach Standort des Besitzers zu sortieren. Wir denken darüber nach, ob der Autobesitzer Straßenkreuzungen benötigt (unten rechts), aber es scheint, dass wir uns auf der falschen Spur bewegen. Aber die Probleme mit dem horizontalen Bildschirm sind immer noch besser als beim letzten Mal, aber das ist es nicht, also wird die Frage für eine Weile beiseite gelegt. Zu diesem Zeitpunkt haben wir die Lösung „Zeit angeklickt - es hat sich in die Entfernung zur Brücke geändert - auf die Entfernung zur Brücke geklickt, es hat sich in die Zeit geändert“ eingebettet, was viel Platz auf dem Bildschirm spart. Razvodka ist etwas im Geiste der 90er Jahre, wir ändern die Schreibweise in kyrillisch.

Bild

Bild

Die Idee, ein Programm zweisprachig zu machen, kommt mir zufällig in den Sinn, nur ein wenig Platz bleibt für die Schaltfläche oben rechts. Gleichzeitig kämmen wir die Farben, erinnern uns an die Symbole in der Fußzeile, zeichnen die Schriften im russischen Logo neu. Wir stellen den Mechanismus der „Lieblingsbrücke“ vor, verzichten jedoch später auf ihn, um die Benutzeroberfläche zu vereinfachen.
Ab diesem Moment gibt es zwei Möglichkeiten für die Entwicklung des Programms: Es ist bereits im Code vorhanden und wird in der aktuellen Arbeit aktiv getestet: Jeder Tag bringt mehrere neue Ideen mit sich, die im Programmcode gezeichnet, diskutiert und erneut implementiert werden. Die im Apple Store veröffentlichte Version war der zehnte Build in Folge.

Bild

Wir denken über die bequemste Implementierung des Hilfebildschirms nach und machen die ersten Skizzen:

Bild

Bild

Die Idee ist frisch, aber "eine Idee zum Wohle einer Idee" ist es nicht wert - die ersten zehn Benutzer des Programms sagen, dass "alles klar ist". Vorgefertigte Bildschirme gehen an den Schrott. Sie nannten "unverständlich" nur eine Schaltfläche zum Sortieren nach Ort, und aus diesem Grund werden ein paar kleine ähnliche Symbole erstellt.

Bild

In diesem Stadium stellte sich heraus, dass ein „hartnäckiger Brückeninformer“ ein hartnäckiges Logo benötigt. Die vom Designer vorgeschlagene Option ist nur als Stummel gut, daher war ich in meiner Haut davon überzeugt, dass jeder sein eigenes Ding machen sollte. Alle möglichen Variationen zum Thema Brücken machen mich müde, und einige namhafte russische Firmen, die sich auf Logos spezialisiert haben (natürlich nicht Lebedev), nennen den Preis „ab tausend Euro“.

Bild

Bild

Ich muss noch einmal nach einem Workaround suchen: Der Designer aus Moskau hat die Idee „mit dem kleinen Mann-Einsteller“, und sein Kollege aus der Ukraine hat eine lakonische Grafiklösung (es scheint die sechste in Folge zu sein). Nach ein paar hundert ausländischen Ikonen im Monat (Anfänger können deviantart und freiberufliche empfehlen) fällt es mir immer noch schwer zu sagen, welche Bewertungskriterien bei der Auswahl zu beachten sind, außer vielleicht eines: Vertrauen Sie sich. Der Designer hat die ganze Nacht damit verbracht, die sechste Variante zu zeichnen, und als ich sie morgens sah, sagte ich mir: Oh, das war's!

Bild

Bild

Wir arbeiten weiter an dem Projekt und arbeiten an kleinen Elementen: Ein Fenster erscheint auf sozialen Lesezeichen, weil der Hof seit dem 21. Jahrhundert zehn Jahre alt ist. Vergessen Sie nicht, dass das Programm zweisprachig geworden ist - und sich die Arbeit am Zeichnen des Logos und an der Arbeit mit sozialen Netzwerken verdoppelt hat.

Bild

Bild

Die ersten Benutzer des Programms stellen fest, dass bei 3GS-Telefonen die Schaltfläche „Überbrückt“ nicht von der Schaltfläche „Überbrückt“ zu unterscheiden ist: Der Abstand zwischen den Bereichen ist zu gering, und daher wurde beschlossen, sie neu zu zeichnen. Wir überlegen uns den Rest der Buttons und verwandeln den Stern in ein Herz für das Favoritensymbol. Wir zeichnen noch einmal einzelne Buchstaben, fügen das Logo hinzu und ändern die horizontale Bildschirmimplementierung. Zufällig (wenn Sie Ihr Programm wie Ihr Kind behandeln, passieren solche Dinge unerwartet) entdecken wir einen anstößigen Fehler mit einem leeren Bildschirm - da tagsüber alle Brücken zusammengeführt werden, wenn Sie auf die Schaltfläche „Brücken“ klicken, wird nichts auf dem Bildschirm angezeigt. Das ist logisch, aber es sieht hässlich aus. Zu diesem Zeitpunkt wird das Symbol angezeigt, und einige kurze Ausdrücke lösen das Problem:

Bild

Bild

Es war von Anfang an klar, dass es sich lohnt, einen Bildschirm mit Google Meps in das Geolocation-Programm einzubetten, aber selbst eine so einfache Idee hatte zwei Probleme: Die Karte in das vorhandene Design einbetten und im Code implementieren, und ob das Problem nach ein paar Skizzen behoben wurde:

Bild

Bild

dann war der Code komplizierter. Zu diesem Zeitpunkt wurde mir klar, dass die Stecknadeln auf der Karte unterschiedliche Farben haben sollten, rot für geschiedene Personen, grün für offene Personen und orange für „offene letzte 15 Minuten“. Die Google-API hat meine Vorliebe für Orange nicht geteilt, und die Stifte mussten mit Stiften neu gestrichen werden, um sie in Form von Bitmap-Bildern in die Karte einzufügen. Natürlich wurde der endgültige Build um die Funktion "Zeigen Sie sich auf der Karte" erweitert, sodass mir als Benutzer die ersten beiden Bildschirme überflüssig erschienen: Nachts fahre ich im Kartenmodus durch die Stadt.

Bild

Eine separate Geschichte mit der Kodierung des Programms für fertige Bilder - es gibt Probleme beim Rendern, bei Schriftarten, bei der Interaktion mit sozialen Diensten und bei anderen anstößigen Problemen, deren Lösung viel Zeit in Anspruch nimmt. Das Datum der Berechnung im Appstore verschiebt sich um ein paar Wochen, und eines Abends bemerke ich, dass die Brücken bereits mit dem Start der Navigation gebaut werden und unser Wagen noch da ist. Eine Woche nach dem Start der Navigation wird die fertig gestellte App zur Genehmigung gesendet.

Zwei Monate Arbeit und wir bekommen die Umsetzung der Aufgabe:

Bild

Bild

Bild

Jetzt auch beliebt: