Zunächst einige Hintergrundinformationen: Alle Smartphones haben heutzutage ein sogenanntes „Device Pixel Ratio“ . Im Wesentlichen bedeutet dies, dass ein Webbrowser auf einem Smartphone die Bildschirmauflösung anders interpretiert als die tatsächliche, physikalische Auflösung des Geräts. Beispielsweise hat ein iPhone 6 eine physikalische Auflösung von 750 x 1334Pixeln mit einem Gerätepixelverhältnis von 2. Dies bedeutet, dass Browser auf dem iPhone 6 die Auflösung als interpretieren 375 x 667. Weitere Hintergrundinformationen zum Pixelverhältnis von Geräten, Retina-Bildschirmen und dppx finden Sie unter dem obigen Link oder beim Googeln.
Die Frage: Wenn man (in Photoshop oder was auch immer) ein Design für ein mobiles Layout (z. B. eine mobile Webseite) entwirft, sollte das Dokument / die Leinwand / die Zeichenfläche (am Beispiel des iPhone 6) 750 x 1334(die physische Auflösung) oder 375 x 667( die logische Auflösung)?
Dinge, die man beachten muss:
750 x 1334Dokument erstellt, wobei das Pixelverhältnis des Geräts vollständig ignoriert wird.Welches ist der richtige Ansatz? Was ist für den Designer am einfachsten zu erstellen? Womit kann der Entwickler am einfachsten arbeiten? Gibt es einen Mittelweg?
Gibt es einen Mittelweg?
Hoffentlich nein. Oder wir müssen an 3 Auflösungen n_n arbeiten.
Das bedeutet, dass Browser auf dem iPhone 6 die Auflösung als 375 x 667 interpretieren.
Die Browser interpretieren die Auflösung nicht. Sie verwenden die vom Gerät "deklarierte" Auflösung.
Im Allgemeinen ist dies die Auflösung, die Sie verwenden müssen. Dies sind die "Bremspunkte" einiger Frameworks im Allgemeinen. Wenn ein CSS eine Größe von 375 x 667 Pixel findet, werden die richtigen Medienabfragen für ein mobiles Gerät verwendet.
Die zusätzliche Auflösung muss für Sonderfälle berücksichtigt werden, insbesondere für Bilder, die besonders scharf sein müssen, und sie werden mit den 2x-Medienabfragen angegeben, siehe beispielsweise: https://css-tricks.com/snippets /css/retina-display-media-query/
Bei Texten beispielsweise wird die zusätzliche Auflösung intern vom Gerät gehandhabt. Sie verwenden beispielsweise 16 "Standard"-Pixel für die Größe und verwenden die zusätzlichen Pixel auf dem Bildschirm, um einen schärferen Text zu erstellen.
Einige Leute entwerfen auf einem Bitmap-Bild mit hoher Auflösung. Ich mag nicht viel der Fall. Für eine Vorschau auf einem mobilen Gerät selbst ist es in Ordnung, aber die Abmessungen des Bildes als Referenz sind falsch.
Es ist also besser, ein Asset mit der doppelten Auflösung zu exportieren (deshalb ist es wichtig, mit Vektoren zu arbeiten), als das gesamte Design auf 1/2x zu übersetzen.
Es hängt sehr davon ab, was genau Sie tun, was Ihre Erwartungen sind und wie Ihr spezifischer Arbeitsablauf aussieht.
Wenn ich in Photoshop für mobile Geräte (oder Desktop) entwerfe, sei es für eine Website oder eine native App, ist es immer ein Mockup. Ich exportiere keine Assets aus diesem Layout. Das gesamte Layout wird im Code neu erstellt und alle spezifischen Assets werden als intelligente Objekte aus einer externen Datei in Photoshop platziert und entweder als Vektor oder in der richtigen Größe erstellt.
Wenn Sie ein Layout in Photoshop entwerfen, dieses Layout dann in Scheiben schneiden und Assets direkt aus dieser PSD extrahieren, sollten Sie auf jeden Fall mit tatsächlichen Pixelgrößen arbeiten. Aber wie Sie sagten, müssen Schriftgrößen, Ränder usw. alle neu berechnet werden, wenn sie im Code implementiert werden, was eine zusätzliche Arbeitsschicht (und die Möglichkeit von Fehlern) hinzufügt. Wenn Ihre PSD wie ich nur ein Mockup oder eine Anleitung ist und Ihre Assets separat erstellt werden, ist es einfacher, mit virtuellen Pixelgrößen zu arbeiten, aber Sie müssen bedenken, dass Sie im Grunde an einem Mockup mit niedrigerer Auflösung arbeiten.
Ich mache meistens das gesamte Design und die Entwicklung selbst, also muss ich mir keine Gedanken darüber machen, dies einem Entwickler mitzuteilen, aber das Gleiche gilt, wenn Sie Ihre Dateien an einen Entwickler übergeben, jeder muss sich nur über den Arbeitsablauf im Klaren sein, bevor Sie beginnen ( oder zumindest vor der Übergabe von Dateien).
Der empfohlene Ansatz wäre das Entwerfen mit der logischen Auflösung, da es einfacher ist, auf unterschiedliche Größen skalierte Assets zu exportieren, wenn Sie mit 1x beginnen.
Hier ist ein Video, das erklärt, warum: https://vimeo.com/169809377
Jorik