Share
Es gibt eine Menge „Prozesse“, die für das Design mobiler Geräte erforderlich sind, aber manchmal möchten Sie einfach reinspringen und sich die Hände schmutzig machen! In diesem Beitrag erhalten Sie die Tools, die Sie benötigen, sowie die grundlegenden Design- und technischen Voraussetzungen, damit Sie schnell einsatzbereit sind.
Wenn Sie die Apple Interface-Richtlinien für iPhone und iPad noch nicht gelesen haben, sollten Sie dies tun. Es gibt viele Informationen, aber es ist die Zeit wert, um zu verstehen, wie Apple über das Anwendungsdesign denkt. Diese Handbücher enthalten auch detaillierte Angaben zu Bildschirmgröße, Symbolgröße und Auflösung. Als nächstes werde ich einige häufig gestellte Fragen ansprechen und diese Spezifikationen in einem leicht verständlichen Format zusammenfassen!
Der iPhone-Retina-Bildschirm ist eine spektakuläre Sache. Wenn Sie den neuen und den alten Bildschirm nebeneinander anzeigen, ist es offensichtlich, dass Änderungen in dieser Anzeige Auswirkungen auf das Design Ihrer App haben. Sehen Sie sich dieses Video zum Vergleich des Bildschirms nebeneinander an.
Beim Vergleich der beiden Geräte sehen Sie, dass die Bildschirmabmessungen für das iPhone 4 gegenüber dem Vorgängermodell unverändert sind. Sowohl die Bildschirmgröße des iPhone 4 als auch die Pixeldichte des Bildschirms sind jedoch DOPPELT, was eine Bildschirmgröße von 640 x 960 Pixel (im Vergleich zur vorherigen Größe von 320 x 480 Pixel) und satte 326 Pixel pro Zoll (im Vergleich zu vorherigen 163 ppi) ergibt. Dieser neue Bildschirm quetscht 4 Pixel, wo vorher einer war - deshalb sehen die Bilder so scharf und lecker aus!
Wenn Sie über die Bildschirmauflösung lesen, können Sie schnell verwirrt werden. Tatsache ist, dass der endgültig exportierte Dateityp auf dem iPhone normalerweise .png ist und Xcode den ppi-Wert beim Rendern von Bildern nicht berücksichtigt. Wenn Sie den unten angegebenen Abmessungen folgen, sind Sie in gutem Zustand!
| iPhone 3.0 Bildschirmauflösung: 72 ppi Bildschirmgröße: 320 x 480 px Symbolgröße: 57 x 57 px Datei Format: PNG-24 | iPhone 4.0 Bildschirmauflösung: 72 ppi Leinwandgröße: 640 x 960 px Symbolgröße: 114 x 114 px Datei Format: PNG-24 | iPad Bildschirmauflösung: 72 ppi Leinwandgröße: 768 x 1024 px Symbolgröße: 72 x 72 px Datei Format: PNG-24 |
Symbol: 512 x 512 px (.tif, .jpg oder .png, 72 dpi, RGB)
iPhone Screenshots: 320 x 480 px oder 640 x 860 px (.tif, .jpg oder .png, 72 dpi, RGB)
iPad Screenshots: 1024 x 768 px (.tif, .jpg oder .png, 72dpi, RGB)
Während wir über Bildschirmgrößen sprechen, ist es wichtig, über die Zukunft digitaler Geräte allgemein zu sprechen. Ich bin kein Wahrsager, aber allein im vergangenen Jahr vermehren sich keine geheimen Touchscreen-Geräte aller Art wie Kaninchen und sie produzieren Nachkommen mit unterschiedlichen Bildschirmgrößen. Ja! Als Entwickler bedeutet dies, dass wir darauf vorbereitet sein müssen, wie Designs auf mehrere Geräte und Betriebssysteme übersetzt werden können.
Ein App-Lebenszyklus kann eine von vielen Kursen ausführen. Einige Apps leben ausschließlich auf einer Plattform, andere verzweigen sich zu anderen mobilen Geräten oder sogar zu einer webbasierten Präsenz. Die Erstellung skalierbarer Grafiken erspart Ihnen die Mühe, die Grafiken für jede Plattform neu zu erstellen. Die Verwendung von Formebenen oder intelligenten Vektorobjekten ist der beste Weg, um mit der Verbreitung von Bildschirmgrößen und Betriebssystemen fertig zu werden.
Das Entwerfen von Symbolen für das iPhone war meine erste Einführung in die Entscheidung, "klein anfangen und skalieren" oder "groß beginnen und verkleinern". Für mich wurde nach einigen Ausführungen deutlich, dass das Entwerfen für die Bildschirmgröße 320 x 480 Pixel und dann die Größenanpassung von Bedeutung war bis zu 640 x 960px ist die bessere Option. Durch das Design für die kleinste Bildschirmgröße wird die Enttäuschung vermieden, dass Details verloren gehen, wenn ein Design später verkleinert werden muss.
Angenommen, Sie haben eine App für ein 3.0-iPhone entwickelt und möchten diese App für das iPhone 4-Retina-Display vorbereiten. Wie geht's? Nur die Größe von 320 x 480 auf 640 x 960 erhöhen? Ja. Das Problem ist, wenn Sie nicht alle Grafiken mit Form-Layern oder intelligenten Vektorobjekten erstellt haben, werden Ihre Bilder pixelig und körnig aussehen.
Sowohl für das iPhone als auch für das iPad empfiehlt Apple eine minimale Größe des Zielbereichs von 44 x 44 Pixeln. Überlassen Sie es Apple, die durchschnittliche Fingerspitzengröße des Menschen zu bestimmen. :) Wenn Sie kleiner werden möchten, stellen Sie sicher, dass die Abstandsbereiche ausreichend Platz haben, um Fehlanschläge zu vermeiden.
Das „Testen“ eines Designs mag seltsam klingen, aber das Design eines mobilen Geräts auf einem Laptop oder Desktop-Monitor kann schwierig sein. Auch wenn Sie den Standardrichtlinien wie der 44 x 44px-Tippregel entsprechen, können Proportionen und Größen auf dem Gerät erheblich anders aussehen als auf dem Computerbildschirm.
Der einfachste Weg, um Ihr Design zu testen, besteht darin, jedes Bildschirmdesign im .png-Format zu speichern und mit iPhoto mit Ihrem Telefon zu synchronisieren. Sobald die Bilder synchronisiert sind, können Sie durchblättern und simulieren, wie die eigentliche App aussehen wird. Dies ist auch eine großartige Möglichkeit, Modelle mit Kunden zu teilen, um ihnen eine echte Vorschau der App zu geben.
Jetzt, da Sie einige Grundlagen haben, können Sie mit dem Design beginnen! Glücklicherweise stehen Ihnen zahlreiche Ressourcen zur Verfügung, mit denen Sie die verschiedenen Elemente der iPhone- und iPad-Benutzeroberfläche kennen lernen können. Auch wenn Ihr Ziel darin besteht, vollständig angepasste Schnittstellen zu erstellen, sind diese Vorlagen hilfreich, um ein Grundlinienraster oder Dimensionen von Bildschirmelementen zu erhalten, die richtig proportioniert sind.
iPhone GUI PSD von Teehan + Lax
iPhone GUI PSD Retina von Teehan + Lax
iPhone-Schablone für OmniGraffle von Patrick Crowley
Vektorelemente von iPhone für die Benutzeroberfläche von Mercury Intermedia
iPad-Schablone für OmniGraffle von Information Architects
iPad GUI PSD von Teehan + Lax
iPad Vector GUI aus der Icon Library
Alle grafischen Elemente, die zum Erstellen einer App verwendet werden, werden im Format Portable Network Graphics (.png) exportiert. Technisch kann das iPhone auch andere Dateiformate anzeigen, PNG-Dateien werden jedoch vom iOS-SDK automatisch optimiert und sollten daher das bevorzugte Format sein.
Dies gilt für alle Elemente (Navigationsschaltflächen, Balken usw.) und alle anderen Bilder, die in der App angezeigt werden. Angenommen, Ihre App ist ein Portfolio für Fotografen. Die präsentierten Fotos würden auch im .png-Format exportiert.
Die Einstellung zum Exportieren des PNG-Formats in Photoshop (Datei> Speichern für Web und Geräte) sieht folgendermaßen aus:
Bevor Sie Ihre Dateien einem Entwickler übergeben, ist es wichtig, dass Sie deren Fähigkeiten bezüglich des Aufteilens und Zerteilens Ihrer Datei kennen. Wenn Ihr Entwickler Erfahrung im Bereich Slicing und Export hat, kann es sehr viel Zeit sparen, diese Aufgabe zu übernehmen. Ich persönlich ziehe es vor, alle meine Dateien aufzuschneiden, um sicherzustellen, dass alle Bilder richtig ausgeschnitten werden.
Versuchen Sie beim Speichern der endgültigen Bilder, intuitive Dateinamenskonventionen zu verwenden, die es den Entwicklern erleichtern, die richtigen Bilddateien zu finden und darauf zu verweisen. Hier sind einige Beispiel-Präfixe und Suffixe, die ich verwende:
Ein anderes Tool, das ich zur Kommunikation mit Entwicklern verwende, ist eine PDF-Datei, die alle Bildschirme sowie Hinweise zum Design enthält. Ich definiere die Schriftarten, die Größe, den Zeilenabstand und alle anderen Formatierungen. Es gibt also eine einfache Referenz, die der Entwickler verwenden kann, ohne Photoshop öffnen zu müssen. Eine weitere Ressource, die ich bereitstelle, insbesondere wenn ich mit Off-Site-Entwicklern arbeite, ist ein Screencast (ScreenFlow und iShowU sind meine Favoriten) der App, der sie durch alle Aspekte des Designs führt. Dies ist besonders hilfreich, wenn die App Animationen und / oder Übergänge enthält, die in einem Video besser dargestellt werden.
Technische Spezifikationen sind nicht sexy, aber sie sind wichtig. Übertragen Sie diese Details in den Speicher, und Sie sparen sich eine Menge Kopfschmerzen!
Accentsconagua