Farb- und HiDPI-Baseline für einen entfernten Mac

Nach der Verbindung mit einem entfernten Mac wirken Grautöne im Design plötzlich bläulich, und die Schriftkanten im Simulator erscheinen unschärfer als auf dem lokalen Gerät. Ändern Sie in diesem Fall nicht vorschnell Farbwerte oder Bilddateien. Die Remotedesktop-Ansicht zeigt ein Endergebnis, bei dem das Rendering der Anwendung zunächst übertragen und anschließend auf dem lokalen Bildschirm dargestellt wird. In jeder dieser Stufen können Skalierung, Komprimierung oder Farbumwandlungen auftreten. Sichern Sie deshalb zuerst das auf dem entfernten Mac erzeugte Original und grenzen Sie die Abweichung anschließend Schicht für Schicht ein.

Die drei Einflussbereiche getrennt betrachten

Eine visuelle Prüfung über eine Remoteverbindung umfasst mindestens drei Ebenen:

1. Die Pixel, die der entfernte Mac tatsächlich erzeugt, einschließlich Anwendungsfenstern, Simulator-Screenshots und exportierten Dateien.
2. Skalierung, Farbtiefenumwandlung und Komprimierung durch die Remoteverbindung.
3. Anzeigeskalierung, Farbprofile und Größe des Clientfensters auf dem lokalen Gerät.

Wenn lediglich ein Screenshot der Remoteansicht erstellt wird, fließen die zweite und dritte Ebene gemeinsam in den Nachweis ein. Im Nachhinein lässt sich dann nicht mehr feststellen, wo die Abweichung entstanden ist. Legen Sie für jede Prüfung ein eigenes Verzeichnis an, in dem Systeminformationen, unveränderte Screenshots vom entfernten Mac und lokale Beobachtungen getrennt gespeichert werden.

mkdir -p "$HOME/visual-baseline"/{system,source,notes}
system_profiler SPDisplaysDataType \
  > "$HOME/visual-baseline/system/displays.txt"
system_profiler SPColorSyncDataType \
  > "$HOME/visual-baseline/system/colorsync.txt"
sw_vers > "$HOME/visual-baseline/system/macos.txt"

Diese Dateien dienen nicht zum Leistungsvergleich. Sie beantworten drei grundlegende Fragen: Welche Systemversion wurde verwendet, welche Desktopauflösung wurde ausgegeben und welche Farbkonfigurationen hat das System erkannt?

Ein Remotedesktop eignet sich für die Bedienung und eine schnelle Kontrolle. Der visuelle Eindruck der Remoteansicht kann jedoch nicht die auf dem entfernten Mac erzeugte Originaldatei ersetzen.

Auflösung und Skalierungsverhältnis festlegen

Die häufigste Ursache für Unschärfe ist nicht eine zu geringe Auflösung der Ressourcen, sondern ein nicht ganzzahliges Skalierungsverhältnis zwischen logischer Größe, physischen Pixeln und Clientfenster. Wählen Sie zunächst in den Anzeigeeinstellungen eine feste Auflösungsstufe aus, notieren Sie die unter „Sieht aus wie“ angegebene logische Größe und prüfen Sie anschließend im Systembericht die tatsächliche Pixelausgabe. Wechseln Sie während der Prüfung nicht wiederholt die Auflösung.

Auf dem Client sollte möglichst eine Darstellung im Maßstab 1:1 verwendet werden. Falls der Fensterinhalt nicht vollständig sichtbar ist, kann zur Bedienung vorübergehend skaliert werden. Bevor Belege erfasst werden, muss jedoch wieder das ursprüngliche Größenverhältnis eingestellt sein. Bietet der Client sowohl „An Fenster anpassen“ als auch „Auf Fenstergröße strecken“ an, sind diese Modi klar zu unterscheiden: Die erste Option erhält üblicherweise das Seitenverhältnis, während die zweite Kreise, Schrift und Pixelraster verformen kann.

Eine wiederverwendbare Referenzansicht vorbereiten

Die Referenzansicht sollte kleine Schriftgrößen, Ein-Pixel-Linien, abgerundete Ecken, transparente Schatten, Graustufen und kontinuierliche Verläufe enthalten. Verwenden Sie nicht nur eine farbintensive Startseite, da große, kontrastreiche Farbflächen Skalierungsfehler nur schwer erkennen lassen. Inhalt und Fenstergröße der Testansicht müssen festgelegt werden; außerdem ist die Commit-Version zu dokumentieren, mit der sie erzeugt wurde.

Bei einer iOS-Oberfläche sollte der Original-Screenshot möglichst direkt aus dem laufenden Simulator exportiert werden:

mkdir -p "$HOME/visual-baseline/source"
xcrun simctl io booted screenshot \
  "$HOME/visual-baseline/source/simulator.png"
sips -g pixelWidth -g pixelHeight -g profile \
  "$HOME/visual-baseline/source/simulator.png"
shasum -a 256 "$HOME/visual-baseline/source/simulator.png"

Der Hash bestätigt, dass alle Teammitglieder dieselbe Datei verwenden. Er bedeutet nicht, dass zwei visuell identische Bilder zwingend denselben Hash besitzen müssen: Beim erneuten Speichern können sich Metadaten oder die Kodierung ändern.

Mit dem Original-Screenshot die betroffene Ebene bestimmen

Laden Sie zunächst die auf dem entfernten Mac erzeugte Datei simulator.png lokal herunter, ohne sie zuvor über die Vorschau eines Messengers zu öffnen oder erneut kodieren zu lassen. Prüfen Sie Schriftkanten, feine Linien und Verläufe mit einer Anzeige, die das Bild pixelgenau im Maßstab 1:1 darstellen kann.

Ist die Originaldatei scharf, während die Remotedesktop-Ansicht unscharf erscheint, muss die Anwendung nicht geändert werden. Die Ursache liegt dann in der Übertragung oder der Skalierung des Clients. Ist auch die Originaldatei unscharf, prüfen Sie als Nächstes die Skalierungsfaktoren der Bildressourcen, nicht ganzzahlige Pixelpositionen im Layout, die Rasterung des Textes und das für den Screenshot ausgewählte Zielgerät. Tritt eine Farbverschiebung ausschließlich auf einem bestimmten lokalen Monitor auf, sollten das Farbprofil der Datei und die lokalen Anzeigeeinstellungen verglichen werden, statt unmittelbar die Farbwerte des Designs zu ändern.

Die Dateien können in folgender Reihenfolge archiviert werden:

01-source.png        云端工具直接生成的原始图
02-remote-view.png   远程客户端看到的画面
03-local-view.txt    本地屏幕、缩放和客户端设置
04-system.txt        云端显示与色彩环境

Ändern Sie bei einem Vergleich immer nur eine Variable. Lassen Sie beispielsweise zunächst die Auflösung des entfernten Macs unverändert und wechseln Sie ausschließlich die Skalierung des Clients. Erst nachdem das Ergebnis bestätigt wurde, sollten Sie eine andere Farbtiefe oder Komprimierungsstufe testen. Werden mehrere Einstellungen gleichzeitig geändert, ist das Ergebnis nicht mehr reproduzierbar.

Farbverschiebungen beheben, ohne die System-Baseline zu verändern

Bei Farbabweichungen ist zuerst zu prüfen, ob die Datei Profilinformationen enthält. Mit sips -g profile lässt sich das zugeordnete Profil schnell anzeigen; dies beweist jedoch nicht, dass die gesamte Übertragungskette korrekt arbeitet. Wenn das Exportwerkzeug die Angabe eines Ausgabefarbraums unterstützt, sollte dieser in den Projektrichtlinien verbindlich festgelegt werden. Automatisierte Prozesse und manuelle Exporte müssen dabei dieselben Regeln verwenden.

Ersetzen Sie nicht ohne Weiteres das standardmäßige Anzeigeprofil des entfernten Systems, nur damit die Remotevorschau der lokalen Darstellung ähnlicher sieht. Dadurch kann die Ansicht auf einem Client zwar korrekt wirken, gleichzeitig können jedoch Screenshots, Videoexporte oder die Sitzung eines anderen Teammitglieds beeinträchtigt werden. Zuverlässiger ist es, die Baseline des entfernten Macs unverändert zu lassen, den lokalen Anzeigemodus des Clients zu dokumentieren und die endgültige Bewertung stets anhand des Originalergebnisses vorzunehmen.

Bei halbtransparenten Schatten und dunklen Verläufen ist außerdem auf Farbstreifen durch die Remote-Komprimierung zu achten. Vergrößern Sie dazu die Originaldatei: Ist der Verlauf dort gleichmäßig, während die Remoteansicht sichtbare Abstufungen zeigt, muss der Verlauf in der Anwendung nicht angepasst werden. Sind die Abstufungen bereits in der Originaldatei vorhanden, sollten Farbtiefe der Ressourcen, Exportparameter und Rendering-Ablauf untersucht werden.

Den Prüfablauf in die Übergabe-Checkliste aufnehmen

Ein Team sollte die visuelle Baseline mit der jeweiligen Codeversion verknüpfen, statt sich darauf zu verlassen, dass einzelne Mitglieder die Client-Einstellungen im Gedächtnis behalten. Nach jedem Wechsel der Systemversion, des Remoteclients, der Anzeigeauflösung oder des Zielgeräts für Screenshots ist ein neuer Satz Referenzdateien zu erzeugen.

Vor der Übergabe muss mindestens Folgendes bestätigt werden:

• Die Systemversion und der Anzeig Bericht des entfernten Macs wurden gespeichert.
• Der Remotedesktop verwendet eine feste Auflösung, und der Client führt keine nichtproportionale Streckung aus.
• Der Simulator oder die Anwendung hat einen Original-Screenshot direkt erzeugt.
• Pixelabmessungen, Farbprofil und Hash der Originaldatei wurden dokumentiert.
• Vor der Bewertung von Unschärfe oder Farbverschiebungen wurden Original-Rendering, Übertragungsbild und lokale Anzeige getrennt geprüft.
• Der Fehlerbericht enthält Commit-Version, Zielgerät, Client-Einstellungen und minimale Reproduktionsschritte.
• Alle temporären Testdateien wurden aus dem Verzeichnis der Projektartefakte entfernt, damit sie nicht in die offizielle Archivierung gelangen.

Auch bei diesem Ablauf auf einem entfernten Mac von VMOak müssen Verbindungserlebnis und Prüfung der erzeugten Dateien getrennt betrachtet werden: Beim ersten Punkt geht es um eine flüssige Bedienung, beim zweiten darum, ob die auf dem entfernten Mac erzeugten Dateien die Vorgaben erfüllen. Solange die Beweiskette immer beim Originalartefakt beginnt, werden Remote-Komprimierung, HiDPI-Skalierung und tatsächliche Renderingfehler nicht zu einem einzigen Problem vermischt.

Häufig gestellte Fragen