Denken Sie in Vorlagen

Die Chancen stehen gut, dass Sie keine 90 völlig einzigartigen Seiten haben (wenn Sie dies tun, haben Sie wahrscheinlich ein anderes Problem an Ihren Händen). Für die meisten Apps (oder Websites) haben Sie eine Handvoll Vorlagen, die in der Lage sind, die zentralen Elemente der Schnittstelle.

Beginnen Sie mit den Ansichten

Sie haben eine Menge Arbeit in die Erstellung dieser 90 Ansichten gesteckt, daher kennen Sie die Vorlagen wahrscheinlich ziemlich gut. Gehen Sie zurück und identifizieren Sie die 6–12 Schlüsselansichten, die die kritischen Bedenken bezüglich der UI-Struktur beantworten (das scheint meiner Erfahrung nach der Sweet Spot zu sein). Sie suchen nach denen, die als UI-Standards für alles andere dienen können.

Dann werten Sie die Geräte aus

Es gibt viele Geräte da draußen, aber sie sind nicht so unterschiedlich. Da Sie mit iOS7 und einem iPhone 5 aus dem Tor gegangen sind, gehe ich davon aus, dass dies der Großteil Ihrer Zielgruppe ist. Das sollte Ihre iOS-Strategie ziemlich klar darstellen. Werden Sie wirklich viele Benutzer auf dem iPhone 3s sehen? Unwahrscheinlich. Sie könnten angeben, was die reduzierte Bildschirmfläche in einigen Schlüsselansichten bewirkt, und es dabei belassen.

Jetzt müssen Sie sich fragen, ob Sie einen vollständig nativen Android-UI-Skin erstellen werden? Sieht Ihr aktuelles Design sehr nach iOS aus? Wenn ja, möchten Sie vielleicht ein wenig Material Design einstreuen, die praktische dauerhafte Zurück-Schaltfläche berücksichtigen und diese Schlüsselbildschirme neu gestalten. Nicht 90, nur die Handvoll, die Sie im letzten Schritt identifiziert haben.

Schließlich müssen Sie an Tablets und das gefürchtete Phablet (dummes Galaxy Note!) denken. Wirst du sie auch aufnehmen? Zumindest ist es eine gute Idee, ein paar Ansichten für Tablets zu erstellen. Wenn es sich um einen großen Anwendungsfall handelt, erstellen Sie alle Ihre Hauptvorlagenseiten für jedes Betriebssystem.

Management-Realitätscheck

Jetzt gehst du zurück zum Management und zeigst ihnen all diese großartige Arbeit.

„Schaut mal rein, Jungs. Ich habe an alles gedacht.“

Sie weisen darauf hin, dass Sie alles für das primäre Zielgerät gelöst haben . Darüber hinaus sind Sie zurückgegangen und haben jeden anderen wichtigen Gerätekontext angesprochen. Auf dieser Grundlage können die Ingenieure das MVP entwickeln und an allen möglichen Orten testen. Von nun an sind Sie agil und können spezifische Herausforderungen angehen, sobald sie auftreten. Es ist alles gut, ich habe an alles gedacht.

Zukunftsbezug

Skizze verwenden. Sie werden glücklicher sein.

Wie Sie angemerkt haben, ist es zu schwierig, Designs für alle Geräte und Auflösungen zu erstellen, insbesondere in Photoshop. Vielleicht möchten Sie die gängigsten Geräte auswerten, die mit den von Ihnen entworfenen Apps verwendet werden.

Oder lassen Sie die Flexibilität in Ihren Designs zu. Android-Geräte verwenden dpi, sodass Sie abhängig von Ihren Zielbenutzern möglicherweise für niedrig (ldpi), mittel (mdpi), hoch (hdpi), xhdpi, xxhdpi usw. entwerfen. iOS verwendet ein punktbasiertes System auf ähnliche Weise wie gebe dir 1x, 2x und 3x. Wenn Sie also vorsichtig sind, könnten Sie möglicherweise damit durchkommen, für nur 4/5-Bildschirmpixeldichten zu entwerfen. In Anbetracht dessen würde es für Software in Zukunft vielleicht helfen, Illustrator oder Sketch zu verwenden.

Was Ihr aktuelles Problem betrifft, so kann es schließlich auch gut sein, einen Prototyp zu erstellen, der einigermaßen gut skalieren würde. Pixate, Invision, Marvel, Framer leisten alle hervorragende Arbeit bei der Erfüllung unterschiedlicher Prototyping-Anforderungen.

Dies hängt ein wenig davon ab, wofür diese Visuals gedacht sind, aber wenn sie für die Überprüfung durch den Kunden bestimmt sind, sollte diese Methode gut funktionieren und die Dinge beschleunigen.

1. Importieren (platzieren) Sie jede Photoshop-PSD in Indesign und behalten Sie die Ebenen bei.
2. Erstellen Sie „Alternative Layouts“ für jede neue Spezifikation/Gerät.

Dies erfordert einige Anpassungen (wenn das flüssige Layout gut funktioniert, ist das ein Bonus), aber der Arbeitsablauf sollte viel schneller sein als eine Photoshop-Überarbeitung.

Es gibt ein paar Nachteile, aber jeder gute Entwickler sollte in der Lage sein, damit zu arbeiten, insbesondere mit den soliden Mastern, die Sie bereits erstellt haben.

T

Sie verwenden Photoshop, also haben Sie wahrscheinlich Adobe Creative Cloud abonniert und haben daher Zugriff auf Edge Reflow CC . Edge Reflow wurde für Designer von adaptiven/responsiven Websites entwickelt und ist im Grunde ein Tool zum Ändern der Größe von Web-Mockups aus Photoshop. Jedes Design erfordert etwas Arbeit in Edge Reflow, aber sobald Sie dort sind, sollten Sie in der Lage sein, jede einzelne Gerätegröße mit nur einer PSD zu erreichen!

Ich empfehle das verwendete Seitenverhältnis (Suche Wiki), passe Mockups ein anfängliches Verhältnis an und generiere alle Mockups aus einer Liste von Seitenverhältnissen wie Apple IOS Seitenverhältnis und verwende für Android-Seitenverhältnis tatsächliche Größen "wie" als: 2: * „klein“ , 4:* „normal“, 7:* „groß“ ,10:* „xgroß“ (Empfehlung für Skalierungsverhältnis 3:4:6:8:12:16)