DrawerDrawer
Ein Drawer fährt von einem Bildschirmrand herein. Ein Teil der Seite dahinter bleibt sichtbar.
Finde den passenden Begriff.
Mach aus der Idee etwas Echtes.
Beschreibe die Oberfläche oder den Ablauf, den du dir vorstellen, aber nicht benennen kannst. Vibulary findet den passenden Begriff, zeigt ein visuelles Beispiel und macht daraus eine klare Bauanfrage.
Verwenden Sie Ihre eigenen Worte. Wir betrachten, was es ist, was es tut und wann Sie es benötigen.Nicht sicher, wie man fragt? Versuche
MCP · Connect to your AI559Leitfäden10Themen10Sprachen128Live-Demos
Sehen. Benennen.Selbst ausprobieren
Drawer.
Ein Panel, das von der Seite hereingleitet.
Vom Gefühl zur umsetzbaren Idee.Atlas
Lerne die Wörter, die du brauchst, um eine Idee zu entwickeln.
Wir zeigen, woher jeder Begriff stammt. Standards, offizielle Leitfäden und gebräuchliche Fachwörter haben unterschiedliche Kennzeichnungen.
SchaltflächeButton
Ein Button ist ein Bedienelement, das du drückst, um etwas auf dem aktuellen Bildschirm passieren zu lassen.
ModaldialogModal Dialog
Ein modaler Dialog ist ein Fenster, das im Mittelpunkt steht. Es blockiert den aktuellen Bildschirm, bis man es schließt oder fertig ist.
Bottom SheetBottom Sheet
Ein Bottom Sheet ist ein Panel für Touch-Bedienung. Es steigt von unten auf und kann auf festen Höhen stoppen.
Command PaletteCommand Palette
Eine Command Palette ist ein tastaturfreundliches Such-Panel. Es öffnet Aktionen, Seiten und letzte Elemente.
GlassmorphismusGlassmorphism
Glassmorphismus ist ein visueller Stil mit klaren, geschichteten Oberflächen. Es verwendet Unschärfe, helle Rahmen und ein kleines Maß an Tiefe.
FederanimationSpring Animation
Die Federanimation folgt einem physikalischen Modell. Steifigkeit, Dämpfung, Masse und Startgeschwindigkeit steuern, wie sie sich bewegt.
Design-TokenDesign Token
Ein Design Token benennt eine Design-Entscheidung. Beispiele sind eine Farbe, ein Abstand, eine Schriftart oder eine Bewegungs-Geschwindigkeit.
BarrierefreiheitAccessibility
Barrierefreiheit hilft Menschen mit verschiedenen Fähigkeiten, ein Produkt zu verstehen und zu benutzen.
ProduktzielProduct Goal
Ein Product Goal nennt das nützliche Ergebnis, das ein Produkt für Nutzer oder das Geschäft schaffen soll.
Abruf-unterstützte GenerierungRetrieval-Augmented Generation
Abruf-unterstützte Generierung, oder RAG, findet zur Laufzeit externe Belege. Sie gibt diese Belege einem Modell, bevor es schreibt.
API & EndpointAPI & Endpoint
Eine API ist ein Regelwerk, damit Programme miteinander reden können. Ein Endpoint ist eine Adresse und ein Befehl in dieser API.
CSS GridCSS Grid
CSS Grid ist ein Layout-System für Reihen und Spalten zusammen. Es kann feste Bereiche setzen oder diese anpassen, wenn sich der Platz ändert.
FormularvalidierungForm Validation
Formularevalidierung verwendet Regeln und Meldungen, um fehlende oder falsche Antworten zu finden, zu verhindern und zu erklären.
Toast-NachrichtToast
Ein Toast ist eine kurze Statusmeldung. Er blockiert die Seite nicht und verschwindet meistens von selbst.
Git, Repository, Branch & Commit — LernpaketGit, Repository, Branch & Commit — Learning Bundle
Dieses Lernpaket verbindet vier Git-Ideen. Git ist das Versionskontrollsystem. Ein Repository speichert seine Objekte und Referenzen. Ein Branch benennt eine Arbeitslinie. Ein Commit zeichnet den Projektzustand mit Metadaten auf. Das Paket ist kein Git-Begriff.
Reduzierte BewegungReduced Motion
Reduzierte Bewegung ist eine Einstellung zur Barrierefreiheit und ein Designmodus. Sie entfernt oder vereinfacht Bewegungen, die Menschen nicht benötigen.
ProblemstellungProblem Statement
Eine Problem Statement sagt, wer ein Problem hat, wann es auftritt und warum es wichtig ist, es zu lösen.
Wählen Sie das Muster, das zur Aufgabe passt.
Zwei Muster können ähnlich aussehen, aber unterschiedliche Aufgaben erfüllen. Diese kurzen Regeln helfen Ihnen bei der Auswahl.
↯↗
Schaltfläche · Link
Eine Schaltfläche ändert etwas hier. Ein Link bringt dich woanders hin.
□▯▱
Modaldialog · Drawer · Bottom Sheet
Verwenden Sie einen Dialog für eine Entscheidung, eine Schublade für Nebentätigkeiten und ein Bottom Sheet für einige Aktionen auf einem kleinen Bildschirm.
▤◌
Skeleton · Spinner
Ein Skeleton zeigt die Form von Inhalten an, die gerade laden. Ein Spinner zeigt nur, dass die App beschäftigt ist.
☑◉⊙
Checkbox · Switch · Radio Group
Kontrollkästchen können mehrere Dinge auswählen. Ein Schalter ändert eine Einstellung sofort. Radio-Buttons wählen nur eine Sache aus.
Kannst du das UI-Muster nennen?
Lies die Situation, dann wähle den klarsten Begriff. Keine Fangfragen.
Punktzahl 0 / 2
Lage · 1/2
Wenn Sie „Entwurf speichern“ drücken, speichert die Website Ihre Änderungen und teilt Ihnen mit, ob es funktioniert hat.
UI-Texte in eine klare Bauanfrage umwandeln.
Schreib, was du brauchst. Dann wähle, was die UI macht, wie sie aussieht und wie sie sich bewegt. Wir wandeln es in eine Anfrage um, die du kopieren kannst.
Sage, wer das braucht, was passiert, und was als Nächstes passieren sollte.
VIBULARY / ANFRAGE● ● ●
Sage, wer das braucht, was passiert, und was als Nächstes passieren sollte.Sage, wer das braucht, was passiert, und was als Nächstes passieren sollte.
V.✦
Klare Worte, nützliche Beispiele.
Jede Anleitung beginnt mit einer einfachen Bedeutung und einem klaren Beispiel. Technische Namen tauchen nur auf, wenn sie dir beim Bauen helfen.