Wie viele Schnittstellendesigns müssen Sie wirklich für das iPhone 4, 5, 6 und 6+ zeichnen?

Die Ausgabe der Smartphones iPhone 6 und 6+ führte zu einer gewissen Desorientierung bei Designern und Programmierern, da Sie früher nur ein Layout für das iPhone 5 zeichnen und es proportional um das Zweifache reduzieren konnten, wenn Sie es für frühere Geräte markiert haben. Aber jetzt hat sich die Situation ein wenig geändert: Pioniere beklagen sich, dass das für das iPhone 6 schön gezeichnete und gestaltete Layout auf dem iPhone 5 völlig unattraktiv, unleserlich und unrentabel aussieht, weil es einfach proportional reduziert wurde wie zuvor. IOS HIG enthält diesbezüglich keine spezifischen Ratschläge. Daher ist die Frage für Designer jetzt besonders aktuell, wie viele Schnittstellendesigns tatsächlich gezeichnet werden müssen, um die gesamte aktuelle Linie von iPhone-Geräten abzudecken. Lass es uns richtig machen.


Nicht viele Leute berücksichtigen dies, aber iOS verwendet neben Pixeln auch universelle Einheiten - Punkte (pt, point) und das Layout sollte an diese angehängt werden. Bisher wurde dieses Problem für Designer von Programmierern gelöst: Sie nahmen das vom Designer für iPhone 5 gesendete .psd-Layout, teilten alle Pixelwerte durch 2 und beschrieben sie im Code mit denselben Punkten (im besten Fall, wenn sie nicht streng an Pixel gebunden waren). Jetzt ist diese handwerkliche Methode jedoch für Designer nicht besonders geeignet, da Sie Grafiken in der maximalen Auflösung zeichnen müssen. Dies bedeutet, dass jeder Bildschirm eine Größe von 1500 bis 2000 Pixel hat, was eine enorme Menge an Computerressourcen erfordert, insbesondere, wenn der Designer alle Bildschirme in einer Quelle verwaltet . Daher ist es heute mehr denn je relevant, den Android-Pfad in Bezug auf eine einzige Maßeinheit zu verfolgen, nämlich genau den Punkt zu verwenden.

Tatsächlich kann die Arbeit des Designers auf das Folgende reduziert werden: Wir zeichnen Bildschirme im Verhältnis 1 px = 1 pt (Punkt), d. H. 1 Pixel = 1 Punkt Wir nehmen eine Leinwand mit einer Größe von 320x568 px (was dem Anteil von iPhone 5 640x1136 px entspricht) und zeichnen ein Design, wobei die Kompatibilität mit iPhone 4 sorgfältig überwacht wird (in unserer Version beträgt die Höhe 480 px). Aber was ist mit der Grafik? Es sollte groß sein, viel größer als die Basis 320x 568 px! Genau! Und hier hilft Adobe Illustrator. Illustrator ist ein Vektorgrafiken-Editor, dh, alle darin gezeichneten Grafiken können ohne Qualitätsverlust an jede Größe angepasst werden. Sie können dies tun: Wir zeichnen das Layout in der obigen Auflösung in Adobe Illustrator und exportieren es bei Bedarf in Photoshop .psd mit einer Dichte, die höher ist als die Basis 72, nämlich 216. Alle Vektorebenen werden in Raster konvertiert (Sie werden nicht weiter kommen), dies reicht jedoch aus, um die Grafiken in alle erforderlichen Bildschirmdichten zu exportieren. Aber wie kann der Kunde die Designschritte zeigen? Immerhin ist 320x568 px eine zu niedrige Auflösung, um die Qualität des Layouts beurteilen zu können! Und auch hier hilft Adobe Illustrator: Wir exportieren das Layout für den Kunden nach ... pdf. Häufig wiegt eine solche Datei zehnmal weniger als herkömmliche Rasterlayouts und ist mit Apple-Geräten voll kompatibel. Alle Bildschirme oder nur das, was Sie möchten, werden in einer Datei zusammengefasst, und auf ersten Wunsch des Kunden können Sie ihm einfach und schnell den aktuellen Arbeitsstand demonstrieren. Aber wie kann der Kunde die Designschritte zeigen? Immerhin ist 320x568 px eine zu niedrige Auflösung, um die Qualität des Layouts beurteilen zu können! Und auch hier hilft Adobe Illustrator: Wir exportieren das Layout für den Kunden nach ... pdf. Häufig wiegt eine solche Datei zehnmal weniger als herkömmliche Rasterlayouts und ist mit Apple-Geräten voll kompatibel. Alle Bildschirme oder nur das, was Sie möchten, werden in einer Datei zusammengefasst, und auf ersten Wunsch des Kunden können Sie ihm einfach und schnell den aktuellen Arbeitsstand demonstrieren. Aber wie kann der Kunde die Designschritte zeigen? Immerhin ist 320x568 px eine zu niedrige Auflösung, um die Qualität des Layouts beurteilen zu können! Und auch hier hilft Adobe Illustrator: Wir exportieren das Layout für den Kunden nach ... pdf. Häufig wiegt eine solche Datei zehnmal weniger als herkömmliche Rasterlayouts und ist mit Apple-Geräten voll kompatibel. Alle Bildschirme oder nur das, was Sie möchten, werden in einer Datei zusammengefasst, und auf ersten Wunsch des Kunden können Sie ihm einfach und schnell den aktuellen Arbeitsstand demonstrieren.

Insgesamt: Es ist rationaler, ein einzelnes Anwendungsdesign-Modell sofort in Adobe Illustrator zu zeichnen, um die niedrigste iPhone-Bildschirmdichte zu erzielen, und Größen für Programmierer in pt anzugeben. Sie können ein Design in Photoshop zeichnen, diese Option ist jedoch weniger anpassungsfähig, selbst wenn Sie intelligente Objekte berücksichtigen. Unabhängig davon, welchen Grafikeditor Sie bevorzugen, ist es in jedem Fall ausreichend, auf die Möglichkeit zu achten, die Grafiken für iPhone 6 Plus (@ 3x) und Layout-Layouts in pt zu verdreifachen.

Und für diejenigen, die es noch nicht ausprobiert haben, aber an der Arbeit mit Designs in Adobe Illustrator interessiert sind, empfehle ich dringend, diese Seiten im Habré aufzurufen: "UI-Ai: Wir zeichnen eine Schnittstelle in Adobe Illustrator" und "Integration des Designs von Mobilanwendungen". Teil 2: iOS, Windows Phone . "

Jetzt auch beliebt: