jmaxzh/sdlc-ui-design

UI-Design

Anwendbarkeit

• Anwenden auf die angeforderte visuelle Oberflächendesign, Implementierung, Änderung, Überprüfung, Optimierung oder prinzipienbasierte Beratung für Desktop, Mobilgeräte und Web. Aufgaben, die ausschließlich Backend, Datenbank oder andere nicht-visuelle Oberflächenarbeit betreffen, liegen außerhalb des Umfangs dieses Skills.
• Dieser Skill arbeitet unabhängig vom SDLC-Workflow und kann allein installiert werden. Bei Aufgaben, die auch die Informationsorganisation, das Interaktionsverhalten oder die Wiederherstellung betreffen, verfügbare UX-Richtlinien wie sdlc-ux-design für diese Entscheidungen verwenden.
• Wenn nur eine prinzipienbasierte Beratung angefordert wird, eine kurze Antwort auf dieser Ebene geben, anstatt sich auf produktspezifisches Design, Implementierung oder Abnahmetests auszuweiten.
• Bei reinen Überprüfungsanfragen Ergebnisse und Empfehlungen melden, ohne ein neues Design zu erstellen oder die Implementierung zu ändern.
• Design-Erkundungen, Vorschläge, Konzeptvergleiche und Prototyp-Validierung erstellen oder ändern ausschließlich eigenständige Design-Artefakte. Produktionscode nur ändern, wenn die Anfrage die Implementierung einschließt.
• Bei gemischten Anfragen das Design liefern, bevor mit der autorisierten Implementierung fortgefahren wird. Beides getrennt liefern und bewerten; die Prototyp-Validierung begründet keine Implementierungsabnahme.
• Bei der Implementierung den bestehenden Projektprüfungen folgen. Wenn die aktuelle Umgebung die Reproduktion eines Fehlers unterstützt, eine fokussierte Nachprüfung dieses Fehlers durchführen; Prüfungen für andere Verhaltensänderungen nach deren Risiko und Umfang auswählen. Keine zusätzlichen Verifikationsumgebungen einrichten, keine formellen Verifikationsberichte erstellen oder bestehende Prüfungen nur zur Erfüllung dieses Skills duplizieren.
• Für Implementierungsergebnisse die durchgeführten Prüfungen, Beobachtungen und den ungeprüften Umfang melden. Laufzeitnachweise, codebasierte Rückschlüsse und subjektive Beurteilungen unterscheiden; die Selbsteinschätzung des Modells ist keine Benutzerabnahme.

Bei Bedarf lesen

• Den folgenden gemeinsamen Prinzipien folgen und Plattformreferenzen für das tatsächliche Ziel und Szenario lesen.
• Desktop: Desktop-Prinzipien lesen.
• Mobilgeräte: Mobil-Prinzipien lesen.
• Web: Web-Prinzipien lesen.
• Für mobiles Web sowohl die Mobil- als auch die Web-Prinzipien lesen. Für andere Kombinationen zusätzliche Referenzen entsprechend den Bedingungen der ausgewählten Dokumente laden.
• Wenn die Plattform nicht angegeben ist, diese zuerst aus dem Aufgaben- und Projektkontext ableiten. Für allgemeine Ratschläge nur die gemeinsamen Prinzipien verwenden. Nur dann um Klarstellung bitten, wenn einer konkreten Aufgabe immer noch eine notwendige Plattformentscheidung fehlt.
• Für den Kontext oder die Grenzen einer Anpassung den verlinkten Eintrag in Quellkontext und bei Bedarf die ursprüngliche Passage konsultieren. Die englischen Anweisungen in diesem Skill definieren die lokale Anpassung; die Konsultation importiert keine übergeordneten Workflows oder Toolchains.

Design-Lieferung

Diesen Abschnitt für angeforderte visuelle Erkundungen, Vorschläge, Konzeptvergleiche oder Prototyp-Validierung verwenden, unabhängig vom Änderungsumfang. Bei gemischten Aufgaben gilt er für den Designteil; die Lieferung und Abnahme der Implementierung folgen der Aufgabe und den bestehenden Projektanforderungen.

• UI-Designvorschläge zuerst durch Bildgenerierung präsentieren. Vorhandene Screenshots der Benutzeroberfläche können als Referenzen dienen. Wenn die Bildgenerierung nicht verfügbar ist oder fehlschlägt, den Vorschlag als einseitiges HTML-Artefakt präsentieren. Quellkontext.
• Für kombiniertes UI/UX-Design das UI-Designbild und einen interaktiven UX-HTML-Prototyp bereitstellen. Wenn das UI auf den HTML-Fallback zurückgreift, ein HTML-Artefakt für beides verwenden.
• Bei HTML-Artefakten standardmäßig Inline-CSS und JavaScript verwenden, damit sie direkt geöffnet werden können. Lokalen Zustand und klar gekennzeichnete illustrative Daten verwenden, um den vereinbarten Interaktionsumfang zu demonstrieren.
• Das gerenderte Design im vorgesehenen Viewport mit tatsächlichem Inhalt prüfen, wo verfügbar; andernfalls klar gekennzeichnete repräsentative Inhalte verwenden. Quellkontext.
• Die Lieferung mit Bildern, Vorschauen und öffnbaren Dateien anführen. Begleitenden Text kurz halten und auf Öffnungsanweisungen, Simulationsumfang und notwendige Einschränkungen beschränken.

Gemeinsame Prinzipien

Anwendung der Prinzipien

• Für die angeforderte Arbeit, die Zielplattform und das Szenario relevante Prinzipien anwenden.
• Bedingungen und Zielkonflikte erläutern, die die Empfehlung beeinflussen. Keinen bestimmten visuellen Stil universell vorschreiben.
• Bevor numerische Anforderungen oder Empfehlungen zitiert werden, deren Quelle, Einheiten und Anwendbarkeit auf die Zielplattform überprüfen.

Designprinzipien

• Einstiegspunkte und Affordanzen: primäre Einstiegspunkte visuell erkennbar machen. Das Erscheinungsbild, die Beschriftung und die Platzierung eines Steuerelements verwenden, um zu kommunizieren, wie es zu verwenden ist und was seine Aktion bedeutet. Quellkontext.
• Konsistenz und Stil: Symbole, Komponenten und Dekoration am Produktzweck und bestehenden Designkonventionen ausrichten. Inhalt lesbar und Aktionen nutzbar halten, wenn Dekoration hinzugefügt wird. Einen visuellen Stil wählen, der zum Produkttyp, zur Zielgruppe, zum Nutzungskontext und zu den angegebenen visuellen Präferenzen passt. Quellkontext.
• Visuelles Designsystem: standardmäßig produktweite visuelle Designregeln verwenden, wobei explizite Ausnahmen auf Seitenebene auf diesen Seiten Vorrang haben. Wiederverwendbare Designwerte und -muster nach semantischer Rolle organisieren, gemeinsame Definitionen extrahieren, wenn wiederholte Bedürfnisse festgestellt werden. Unterschiede in der Absicht bewahren, wenn über die Wiederverwendung entschieden wird. Quellkontext.
• Ästhetische Ausrichtung: den expliziten ästhetischen Entscheidungen des Benutzers folgen, wenn diese mit den stilistischen Präferenzen des Skills in Konflikt stehen. Quellkontext.
• Präsentationskonzept: das visuelle Konzept einer Präsentationsseite auf Merkmale ihres Themas gründen. Quellkontext.
• Inhaltsanpassung: Layouts wählen, die der Form, Länge und Menge des tatsächlichen Inhalts entsprechen. Wenn eine Struktur den erforderlichen Inhalt nicht aufnehmen kann, die Struktur anpassen, während Fakten und notwendige Informationen erhalten bleiben. Quellkontext.
• Verfügbare Medien: wenn ein visueller Ansatz von Medien abhängt, auf Assets basieren, die existieren oder tatsächlich beschafft werden können. Eine machbare Komposition wählen, wenn die erforderlichen Assets nicht verfügbar sind. Quellkontext.
• Typografie: Schriftarten, Größen und Zeilenabstände für die Lesebedingungen wählen. Hierarchie durch Größe und Gewichtung herstellen. Körper- und Begleittext lesbar halten, auch bei Vergrößerung, ohne notwendige Inhalte oder Steuerelemente abzuschneiden oder zu verstecken.
• Zielsprachen: für die vom Produkt unterstützten Sprachen und Schriftsysteme Texterweiterung, Leserichtung und schriftspezifische Formgebung in Typografie und Layout berücksichtigen. Quellkontext.
• Layout und Abstände: Position und Gruppierung verwenden, um Wichtigkeit und Beziehungen auszudrücken. Ausrichtung und Abstände konsistent anwenden. Dichte an die Lese-, Vergleichs- und Bedienungsbedürfnisse anpassen. Konkurrierende Betonung vermeiden. Die Layout-Struktur basierend auf dem verfügbaren Platz der Oberfläche oder des Containers wählen. Inhalt bei Bedarf neu organisieren, wenn sich dieser Platz ändert, wobei der primäre Inhalt und die Aktionen zugänglich bleiben. Quellkontext.
• Farbe, Zustände und Fokus: primäre, unterstützende und Statusfarben definieren und konsistent verwenden. Angemessenen Kontrast für Text, Steuerelemente und Zustände sicherstellen. Wenn Farbe Informationen vermittelt, diese durch Text oder Formen ergänzen. Steuerelement-Zustände und Fokus visuell identifizierbar machen. Für jedes unterstützte Erscheinungsbild des Produkts die Lesbarkeit von Text und Steuerelementen sowie die Zustandsunterscheidungen überprüfen. Wenn die Zielplattform Hochkontrast-Präferenzen bereitstellt, diese in der gerenderten Oberfläche respektieren. Quellkontext.
• Interaktionsziele: Ziele für Maus, Touch oder andere Eingabemethoden in Größe und Abstand so auslegen, dass sie leicht auszuwählen sind, ohne versehentlich benachbarte Elemente zu aktivieren.
• Datenkodierung: bei der grafischen Darstellung von Daten visuelle Kodierungen wählen, die für die Beziehungen geeignet sind, die Benutzer verstehen müssen. Anwendbare Einheiten und Skalen klar machen. Quellkontext.
• Bewegungszweck: Bewegung auf aufgabenorientierten und lesenden Oberflächen für Feedback, Zustandsänderungen oder Kontinuität verwenden. Wenn Bewegung eine Änderung erklärt, deren Ursache und Wirkung verständlich machen. Auf überzeugenden oder erlebnisorientierten Oberflächen kann Bewegung einem klaren Ausdruckszweck an sich dienen. Wenn ein Benutzer eine vom Zielsystem unterstützte Präferenz für reduzierte Bewegung aktiviert, diese respektieren. Bei der Reduzierung oder Ersetzung von Bewegung den Inhalt lesbar und notwendige Zustandsänderungen verständlich halten. Nicht notwendige Bewegung darf die Eingabe nicht blockieren. Wenn eine Interaktion das Umschalten oder Abbrechen unterstützt, ihre Animation unterbrechbar machen und in den neuesten Interaktionszustand übergehen; die Unterbrechung einer Animation bricht keinen Hintergrundvorgang ab. Quellkontext.