Interface-Polish (Oberflächenveredelung)
Machen Sie die Benutzeroberfläche lesbarer, zielgenauer und navigierbarer. Beginnen Sie mit dem bestehenden Produkt: seiner Schriftart, seinen Symbolen, Farben, Dichte, Komponenten und seinem Framework. Verbessern Sie die Beziehungen zwischen diesen Entscheidungen. Ändern Sie eine visuelle Konvention nur dann, wenn ein beobachtetes Problem oder die Aufgabenstellung des Nutzers dies rechtfertigt.
Die Reibung in der Nutzung finden
Verfolgen Sie eine repräsentative Aufgabe durch den tatsächlichen Bildschirm. Öffnen Sie ein Menü, wählen Sie eine Zeile aus, verengen Sie einen Bereich, wenden Sie einen Filter an und kehren Sie zum Inhalt zurück. Lesen Sie die Komponenten- und Token-Definitionen hinter den sichtbaren Problemen. Screenshots zeigen Hierarchie und Abstände; Interaktion zeigt abgeschnittenen Fokus, unerreichbare Steuerelemente und ruckartige Bewegungen.
Priorisieren Sie Fehler, die das Lesen oder Handeln blockieren, vor kosmetischen Inkonsistenzen. Verknüpfen Sie jede vorgeschlagene Änderung mit einem konkreten Symptom: Metadaten, die verschwinden, eine nachfolgende Aktion, die aus dem Blickfeld gedrängt wird, eine Zahl, die zittert, oder ein Menü, dessen Größe springt, während seine Deckkraft schwindet. Implementieren Sie bei einer breiten Anfrage einen kohärenten Durchgang. Führen Sie bei einer Nur-Überprüfungs-Anfrage eine Analyse mit Orten und Belegen durch.
Überprüfen Sie die Anweisungen des Repositorys, die unterstützte Toolchain und bestehende Prüfungen, bevor Sie Änderungen vornehmen. Lesen Sie die aktuelle Kaskade und alle überlappenden Änderungen. Eine Token-Substitution, die in einem Branch identisch aussieht, kann die Geometrie ändern, nachdem ein anderer Branch dieses Token aktualisiert hat.
Text und Symbole mit unterschiedlichen Aufgaben versehen
Legen Sie eine kleine Anzahl von Textrollen fest. Lassen Sie den Zeilentitel führen, die Metadaten erklären und die Aktion erkennbar bleiben. Eine dichte Desktop-Oberfläche könnte 14px/600 für Titel, 12px/400 für Metadaten und 16px für Abschnittsbeschriftungen verwenden. Behandeln Sie dies als Ausgangspunkte; eine leseintensive oder Touch-First-App benötigt möglicherweise größere Schrift. Behalten Sie die etablierte Schriftart bei, wenn sie die erforderlichen Strichstärken ausdrücken kann.
Verwenden Sie Abstände und Strichstärke, um Rollen zu trennen, bevor Sie weitere Boxen oder Farben hinzufügen. Halten Sie zusammengehörige Metadaten mit einem bewussten Abstand unter dem Titel. Verwenden Sie tabellarische Ziffern für sich ändernde Zählungen und reservieren Sie genügend Breite für den größten erwarteten Wert. Gleichen Sie kurze Überschriften aus oder verwenden Sie besseres Zeilenumbruchverhalten, wo dies unterstützt wird, ohne sich auf Umbruchregeln zu verlassen, um einen zu kleinen Bereich zu korrigieren.
Messen Sie sekundären Text vor seinem tatsächlichen Hintergrund in jedem unterstützten Thema. Gewöhnlicher Text benötigt mindestens 4,5:1 Kontrast. Deckkraft summiert sich mit Oberflächenfarben, daher sagt ein plausibler Token-Wert allein wenig aus. Bewahren Sie die Palette des Produkts und seine semantischen Farbrollen; keine bestimmte Schriftart, Akzentfarbe, Symbolbibliothek oder ein reines Neutralthema ist erforderlich.
Halten Sie Symbolgrößen und optisches Gewicht innerhalb einer Rolle konsistent. Überprüfen Sie die vorhandene Menge, bevor Sie die Strichstärke ändern, da Bibliotheken unterschiedliche Geometrien verwenden. Ein kleines Zeichen kann in einem größeren Button sitzen. Geben Sie Symbol-only-Steuerelementen zugängliche Namen und verstecken Sie dekorative Duplikate vor assistiven Technologien.
Die Geometrie die Aktion unterstützen lassen
Verwenden Sie die vorhandene Radius-Skala konsequent. Wenn die Skala selbst überarbeitet werden muss, ordnen Sie Größen Rollen wie kleinen Chips, Steuerelementen und schwebenden Panels zu, anstatt jede Ecke durch einen Radius zu ersetzen. Für verschachtelte Formen leiten Sie den inneren Radius vom äußeren Radius abzüglich des tatsächlichen Einzugs ab, einschließlich Rahmen und Padding. Begrenzen Sie ihn bei Bedarf auf Null.
Dimensionieren Sie das interaktive Ziel getrennt vom sichtbaren Symbol oder Text. Streben Sie bei kompakten Steuerelementen mindestens 24x24 CSS-Pixel an und großzügigere Touch-Ziele, wo der Platz es erlaubt. WCAG hat Abstands- und andere Ausnahmen; überprüfen Sie diese explizit, bevor Sie sich darauf verlassen. Bevorzugen Sie Button-Padding oder ein umschließendes Label. Unsichtbare Trefferflächen-Erweiterungen benötigen Überprüfungen auf Beschneidung, Überlappung und versehentliche Aktivierung benachbarter Steuerelemente.
Verwenden Sie Rahmen und Schatten für Gruppierung, Zustand oder Höhe, wenn sie helfen. Eine weitere Schattenebene ist selten die erste Lösung für eine schwache Hierarchie. Bewahren Sie sichtbaren Fokus innerhalb abgeschnittener Listen, verwenden Sie bei Bedarf eine Einlass-Behandlung. Halten Sie wesentliche Aktionen ohne Hover auffindbar, auch auf Touch-Geräten.
Auf den Raum reagieren, den die Komponente hat
Ein breites Fenster kann nach dem Öffnen einer Seitenleiste oder eines Inspektors einen schmalen Arbeitsbereich enthalten. Dimensionieren Sie wiederverwendbare Kopfzeilen, Zeilen und Editoren anhand ihrer verfügbaren Paneelbreite. Setzen Sie Container-Queries auf den relevanten Vorfahren und passen Sie dessen Nachkommen an; eine Größenabfrage kann ihren eigenen Query-Container nicht in der Größe verändern. Überprüfen Sie die Positionierung und das Stacking von Overlays nach der Einführung von Containment.
Entscheiden Sie, was zuerst weicht. Lassen Sie Labels mit min-width: 0 schrumpfen, reservieren Sie eine stabile Spur für die nachfolgende Aktion, stufen Sie dann sekundäre Elemente herab, bevor Sie die primäre Aufgabe komprimieren. Ein verstecktes Label benötigt dennoch einen zugänglichen Namen. Das Entfernen einer dekorativen Offenlegung ist etwas anderes als das Entfernen der einzigen Möglichkeit, eine Zeile zu aktivieren.
Testen Sie lange Titel, große Zählungen, echte Metadaten, leere Listen und herausgefilterte Ergebnisse. Erklären Sie, warum eine Ansicht leer ist, und bieten Sie eine angemessene Wiederherstellungsmaßnahme an, z. B. das Löschen eines Filters oder das Erstellen eines Elements. Behalten Sie vorhandene Inhalte während einer Hintergrundaktualisierung bei, solange diese gültig sind. Ersetzen Sie keine geladenen Zeilen mit einem Platzhalter, nur weil eine Anfrage gestartet wurde.
Lesen Sie die Implementierungsfallen, wenn Sie die Reaktionsfähigkeit von Panels, verschachtelte Steuerelemente oder Overlays ändern.
Bewegung dem Zustandswechsel anpassen
Verwenden Sie das bereits vorhandene Animationssystem und die Easing-Token. Überprüfen Sie berechnete Stile, bevor Sie behaupten, dass ein Klassen- oder Token-Austausch die Bewegung ändert. Gehen Sie explizit die Eigenschaften über, die sich tatsächlich ändern: Einzelne CSS-Eigenschaften scale und translate sind von transform getrennt.
Bevorzugen Sie kleine Bewegungen und schnelles Einrasten für Routine-Steuerelemente. Ein Eintreten mit etwa 150–250 ms und ein kürzeres Verlassen können nützlich sein, aber Häufigkeit und Zweck entscheiden über das Timing. Vermeiden Sie das Skalieren von Zeilen aus dem Nichts, langsame gestaffelte Ankünfte in Arbeitslisten und Animationen bei jeder gestreamten Aktualisierung. Animieren Sie nur das, was jemandem hilft, einer Änderung zu folgen.
Halten Sie Hover-Bewegungen hinter Hover-fähigen Feinzeiger-Bedingungen. Wesentliche Steuerelemente bleiben Tastatur- und Touch-Nutzern zugänglich. Ein Schließen während eines Öffnens muss vom sichtbaren Zustand aus umkehren, und ein sich entfernendes Element muss aufhören, Eingaben zu akzeptieren. Wenn ein Dialog oder Menü-Primitiv bereits Präsenz und Fokus verwaltet, verwenden Sie seinen unterstützten Lebenszyklus beim Verlassen. Fügen Sie keinen zweiten Entlade-Timer oder konkurrierenden Fokus-Handler hinzu. Logisches Schließen und Fokus-Wiederherstellung sollten dem Verhalten des Primitivs folgen, ohne auf dekorative Ausgangsbewegungen zu warten.
Reduzierte Bewegung erreicht denselben nutzbaren Endzustand ohne räumliche Bewegung. Überprüfen Sie die Abschlusslogik, wenn Übergänge entfernt werden. Verwenden Sie ein dediziertes Bewegungs-Skill für komplexe Federn, Choreographie oder Animationsarchitektur; dieser Durchgang erfordert nicht die Installation eines weiteren Skill-Pakets.
Das Ergebnis überprüfen, das die Leute nutzen werden
Überprüfen Sie das kombinierte Ergebnis nach allen Änderungen mit denselben Daten vorher und nachher. Beziehen Sie einen breiten Bildschirm mit einem schmalen Bereich, eine telefon-große Ansicht, unterstützte Themen, Tastaturnavigation und Touch-ähnlichen Zugriff ein. Überprüfen Sie die Rückwärtsbewegung während des Übergangs und reduzierte Bewegung bei Bewegungsänderungen. Ein ruhender Screenshot kann nicht bestätigen, dass eine Ausgangsanimation korrekt abläuft.
Führen Sie die anwendbaren Tests, Lint, Typprüfung und Build des Repositorys mit seiner unterstützten Laufzeitumgebung aus. Untersuchen Sie Fehler, bevor Sie den Patch beschuldigen. Wenn ein Basislinienvergleich erforderlich ist, reproduzieren Sie ihn mit derselben Laufzeit und Konfiguration. Bevorzugen Sie Verhaltensüberprüfungen für den geänderten Pfad; CSS-String-Assertionen allein können Kontrast, Geometrie, Fokussichtbarkeit oder Animationskontinuität nicht bestätigen.
Berichten Sie, was geändert wurde und warum, die tatsächlich durchgeführten Überprüfungen und alle verbleibenden Unsicherheiten. Trennen Sie beobachtete Verbesserungen von Token-Bereinigungen ohne sichtbare Auswirkung. Halten Sie Beschreibungen und Belege nach der Integration aktuell. Für Inspiration von außen untersuchen Sie die aktuelle Quelle, passen Sie das Prinzip an dieses Produkt an und geben Sie öffentliche Quellen an. Sagen Sie, wenn eine Quelle nicht zugänglich war, anstatt ein Zitat oder eine Befürwortung zu erfinden.