Die Schriftgröße auf iOS7 sieht auch bei gleicher Auflösung anders aus als Photoshop

Ich stehe hier vor einem seltsamen Problem.

Ich habe in Photoshop ein Mockup für iPhone 5 + iOS7 erstellt, und da Photoshop die Schriftgröße in Punkten verarbeitet, habe ich all diese Informationen mit der Mockup-Datei an das Entwicklerteam weitergegeben. (z. B.: Kopfzeile A ist 32 pt, Haupttext ist 20 pt usw.)

Es scheint jedoch, dass die Schriftgröße enorm aussieht, wenn diese Schriftgrößenwerte in der App und auf dem iPhone-Gerät angewendet werden!

Gibt es etwas, das ich hier vermisse? Vielleicht berechnen mobile Geräte Schriftgrößen anders? Ich dachte, eine 32-Punkt-Schriftart würde überall wie eine 32-Punkt-Schriftart aussehen, vielleicht ein paar Pixel geben oder nehmen, aber nicht so einen großen Unterschied.

Irgendeine Einsicht?

Antworten (5)

Damit Punkte in Photoshop mit Punkten für die native iOS- und OS X-Entwicklung übereinstimmen, benötigen Sie die DPI des Dokuments wie folgt:

  • Verwenden Sie für ein 1×-Dokument (nicht Retina) 72DPI.
  • Verwenden Sie für ein 2×-Dokument (Retina) 144DPI.
  • Verwenden Sie für ein 3×-Dokument (Retina HD) 216DPI.

Die Dokument-DPI spielt normalerweise keine Rolle (es sind die Pixelabmessungen, auf die es ankommt), außer wenn es um Punkte geht. Punkte können an vielen Stellen verwendet werden, einschließlich Textgröße und Strichgröße.

Photoshop verwendet 72 DPI als 1:1-Pixel-zu-Punkt-Konvertierung. Bei einem Dokument mit 144 DPI beträgt das Konvertierungsverhältnis 2:1 für Pixel in Punkte. Wenn Sie mit einer Retina-Dichte entwerfen, dann ist das genau das, was Sie wollen.

Wenn Sie für ein iPhone 6 entwerfen, sollte Ihr Dokument wie folgt eingerichtet sein:

Geben Sie hier die Bildbeschreibung ein

Das setzt voraus, dass Sie mit der vollen iPhone 6 Retina-Auflösung arbeiten möchten. ( Normalerweise arbeite ich viel mit der 1× Nicht-Retina-Auflösung.)

Damit Ihre Textwiedergabe so nah wie möglich an die Textwiedergabe von iOS herankommt, sollten Sie auch die MacTextwiedergabeeinstellung verwenden.

Geben Sie hier die Bildbeschreibung ein

Und das sollte es sein! Ihre Mockups sollten in Größe und Rendering fast identisch mit iOS sein, und Sie können Punkte in Photoshop verwenden, da Sie wissen, dass sie mit Punkten in iOS identisch sind.

Die iPhone 5-Spezifikationen sind 1.136 x 640 und Sie müssen sicherstellen, dass Ihr PPI auf 326 eingestellt ist. Über die Punktgröße (pt): Schriftarten sind vektorbasiert und die Größe ist relativ zu Ihrem Monitor PPI (72), nicht zu dem Dokument, das Sie sind in. Wenn Sie Ihr iPhone mit 72 ppi nachahmen, sollten Ihre Schriftarten so aussehen, wie sie auf dem echten Gerät aussehen würden.

PPI ist hier meistens irrelevant.
DPI ist für den Druck PPI ist für den Bildschirm. Es kommt also darauf an, wie das Mock-up erstellt wurde.
Außerdem werden Schriftgrößen in Apps wie Photoshop normalerweise anhand des Dokuments berechnet.
PPI ist eine Möglichkeit, die Pixeldichte eines Bildschirms zu beschreiben, ist jedoch für die PPI-Einstellung in Photoshop beim Erstellen von Bildschirmgrafiken nicht relevant. Wichtig sind nur die Pixelmaße.
Die Dokument-DPI spielt tatsächlich eine Rolle, wenn Sie Punkte verwenden, da Photoshop DPI verwendet, um Punkte in Pixel umzuwandeln. Und aus diesem Grund sollte ein Retina-Mockup für ein iPhone 5-Design 144 DPI haben. Ein Modell ohne Retina sollte 72 DPI haben.
@MarcEdwards, aber auch hier spielt es keine Rolle. Das ist nur die Verwendung einiger PSD-Einstellungen, um die Mathematik für Sie zu erledigen. Es ist sicher praktisch, aber nicht anders, als es einfach bei 72 DPI zu belassen und die Punktgröße zu verdoppeln. Am Ende des Tages erhalten Sie genau das gleiche Bild.

Zunächst einmal werden Ihre Photoshop-Dateien niemals mit Ihrer tatsächlichen Website/App übereinstimmen. Photoshop wird den Typ einfach etwas anders rendern als ein Browser. An diesem Thema führt kein Weg vorbei.

Zweitens: Entwerfen Sie Ihre PSD-Dateien mit Standard-Pixelabmessungen oder Retina-Abmessungen? Beachten Sie bei Retina, dass Photoshop nicht weiß , dass Sie die Pixel verdoppeln. Wenn Sie also 12pt auf dem tatsächlichen Telefon möchten, müssen Sie es in Photoshop auf 24pt einstellen, um die doppelte Dichte zu emulieren (iPhone 6 pro hat eigentlich dreifache Dichte).

Wenn Sie mit Retina entwerfen, sollten Sie sich außerdem darüber im Klaren sein, dass Sie es wahrscheinlich in Photoshop mit 50 % anzeigen müssen, um ein Gefühl für die tatsächliche Größe auf dem Telefon zu bekommen. Und selbst dann hat Ihr Desktop-Monitor wahrscheinlich einen viel niedrigeren PPI-Wert als Ihr iPhone, sodass er möglicherweise immer noch größer wirkt, als er tatsächlich auf dem physischen iPhone sein wird.

Verwenden Sie schließlich in Photoshop genau dieselbe Schriftart wie das Gerät in der App/im Web? Beachten Sie, dass die Größe der Zeichen in verschiedenen Schriftarten stark variieren kann, selbst wenn die Punktgröße gleich eingestellt ist.

Das sind natürlich alles Vermutungen. Es wäre wirklich hilfreich, wenn Sie uns das tatsächliche PSD-Bild im Vergleich dazu zeigen könnten, wie es auf dem Gerät aussieht.

Hallo DA01, aufgrund eines NDA-Vertrags kann ich die PSDs nicht hochladen, aber ich habe den PSD- und iOS-Screenshot nachverfolgt: i.gyazo.com/c9983434ee839b5bd9eff77d7b54f54a.png
Wie Sie sehen können, ist die Beispieltextgröße auf dem iOS viel größer. Der ursprüngliche Mockup-Text ist 32 pt groß und wird unter iOS zu etwa 60 pt (nicht 64). Das Modell wird mit 72 dpi, 640 x 1136 Pixel erstellt.
Wenn Sie etwas wie 32pt sehen möchten, teilen Sie Ihrem Entwicklerteam mit, dass es 16pt verwenden soll. Sie entwerfen für ein 2x-Gerät, also müssen Sie alles halbieren.
@Xeon es sieht so aus, als würden Sie in Retina-Dimensionen entwerfen, aber vergessen, dass Sie Ihre Schriftgröße in der App halbieren müssen. Wenn Sie Ihren Typ in Photoshop auf 36pt einstellen, sind das tatsächlich 18pt auf dem Gerät. Das Gerät führt die automatische Verdopplung von Pixeln durch, während Photoshop dies nicht tut. Mit anderen Worten, obwohl das iPhone 640 horizontale Pixel hat, misst es immer noch Schrift, als ob es 320 Pixel hätte.

Dies ist eine Frage, die eigentlich eher auf der CSS-Seite von SE stehen sollte, aber ich werde die Antwort trotzdem posten.

Schriftarten auf mobilen Geräten werden anders gerendert als Schriftarten auf Desktops.

Die Rendering-Engines verwenden unterschiedliche Metriken, um die Größe der Schriftart zu berechnen. Dies ist so, dass Telefone veraltete Inhalte (5 Jahre alte Webseite) nehmen und versuchen können, sie für einen Benutzer auf einem iPad/iPhone halbwegs lesbar zu machen.

Also ... um dieselbe Schriftgröße zu erhalten, müssen Sie dieses CSS verwenden:

body {
    -webkit-text-size-adjust: 100%;
}

Quelle: https://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment

Als zusätzlicher Hinweis sollten Sie versuchen, Ihren Entwicklern Größen nach Möglichkeit in EMs zu senden. Definieren Sie eine Schriftgröße als Ihre Basis (16pt = 1EM) und definieren Sie dann alle Ihre anderen Stile von der Basis.

Hier ist eine sehr detaillierte Erklärung: http://www.hongkiat.com/blog/css-units/

Grundsätzlich müssen Ihre Schriftarten am Ende des Tages reaktionsfähig sein. Sie unabhängig vom Kontext als "32px" zu setzen, ist eine schlechte Designpraxis.

1 CSS px = 1 iOS-Punkt = 1 Photoshop-Punkt (wenn die Dokument-DPI korrekt eingerichtet ist).

Es klappt . Ich hatte ein großes Problem mit dem unterschiedlichen Renderprozess für xCode, aber als ich 72/144/216 PPI für 1x, 2x und 3x verwendete, löste es das Problem.

Hallo! Könnten Sie Ihrer Antwort bitte weitere Einzelheiten hinzufügen? Ich persönlich bin etwas verwirrt, was das alles bedeutet. Danke!
Die Schriftgröße auf iOS7 sieht auch bei gleicher Auflösung anders aus als Photoshop
AntwortenHierDatenschutz-Bestimmungen1y, 0v