Programmierung
Durchsuchbare Begriffe für Schaltflächen, Menüs, Formulare, Suche, Tastaturaktionen und Rückmeldungszustände.
47 Treffer
Zeiger und Touch
Click
onClickEine Zeigermakro, bei der der Benutzer eine Maustaste auf einem Element drückt und wieder loslässt.
Verwenden Sie "click" für Aktionen wie das Öffnen von Menüs, das Absenden von Schaltflächen, das Auswählen von Elementen oder das Navigieren mit Links.
Wenn der Menü-Button angeklickt wird, öffnen Sie das Menü-Panel.
Zeiger und Touch
Tap
touch / pointerEine Touchscreen-Aktion, bei der der Benutzer ein Element berührt und loslässt.
Tippen sollte im Allgemeinen die gleiche wichtige Funktion wie ein Klick auf Smartphones und Tablets erfüllen.
Hover-only-Verhalten ist auf Touch-Geräten unzuverlässig.
Das Kategorie-Menü sollte auf mobilen Geräten durch Antippen und nicht durch Hovern geöffnet werden.
Zeiger und Touch
Hover
:hoverDer Zustand, wenn der Mauszeiger über einem Element liegt.
Hover kann die Funktionalität durch Farb-, Unterstreichungs-, Hintergrund- oder Schattierungsänderungen vorhersagen.
Machen Sie keine wesentlichen Aktionen nur von Hover abhängig.
Ändern Sie den Hintergrund des Menüpunkts, wenn der Mauszeiger darüber bewegt wird.
Zeiger und Touch
Long press
touch holdEine Berührungsaktion, bei der der Benutzer einen Finger für einen längeren Moment auf einem Element hält.
Ein langer Druck wird oft für sekundäre Aktionen verwendet, ist aber weniger auffällig als eine sichtbare Schaltfläche.
Vermeiden Sie langes Drücken als einzige Möglichkeit, auf wichtige Funktionen zuzugreifen.
Verbergen Sie keine wesentlichen Aktionen nur hinter einem langen Druck.
Zeiger und Touch
Drag
pointerdown + pointermoveEine Zeigermakro, bei der der Benutzer ein Element oder eine Auswahl festhält und bewegt.
Drag-Interaktionen benötigen klare Bedienelemente, Grenzen und Ausweichmechanismen, wenn Präzision wichtig ist.
Einen sichtbaren Griff hinzufügen, wenn ein Panel verschoben werden kann.
Zeiger und Touch
Swipe
touch moveEine Berührungsgeste, bei der der Benutzer einen Finger schnell über den Bildschirm bewegt.
Wischen kann Karussells oder Panels verschieben, aber sichtbare Bedienelemente sollten weiterhin vorhanden sein.
Erlauben Sie das Wischen zwischen den Beispielen, behalten Sie aber die Pfeiltasten sichtbar.
Tastatur
Keyboard event
keydown / keyupEine Interaktion, die durch Drücken oder Loslassen einer Tastenkombination ausgelöst wird.
Tastaturereignisse werden für Escape zum Schließen, Enter zum Senden, Pfeilnavigation und Tastenkombinationen verwendet.
Schließen Sie das Dropdown-Menü, wenn die Escape-Taste gedrückt wird.
Tastatur
Escape key
EscapeEine Tastenkombination, die häufig verwendet wird, um eine temporäre Benutzeroberfläche UI zu schließen oder zu beenden.
Dropdown-Menüs, Menüs, Dialogfenster und Popovers sollten normalerweise beim Drücken der Escape-Taste geschlossen werden.
Lassen Sie sowohl das Sprachen-Dropdown als auch das Site-Menü beim Drücken der Escape-Taste schließen.
Tastatur
Enter key
EnterEine Tastenkombination, die oft verwendet wird, um ein ausgewähltes Bedienelement zu aktivieren oder ein Formular abzusenden.
Eine fokussierte Schaltfläche sollte mit der Eingabetaste aktiviert werden. Suchformulare können mit der Eingabetaste abgeschickt werden.
Lassen Sie die Eingabetaste die Suche starten, wenn das Suchfeld den Fokus hat.
Tastatur
Tab key
TabEine Tastenkombination, die verwendet wird, um den Fokus durch interaktive Bedienelemente zu verschieben.
Die Tab-Reihenfolge sollte der sichtbaren Lesereihenfolge und Interaktionsreihenfolge entsprechen.
Halten Sie die Tab-Reihenfolge über die Header-Steuerelemente natürlich.
UI-Zustände
Focus
:focus / :focus-visibleDer Zustand, in dem ein Element bereit ist für die Eingabe über die Tastatur oder die Aktivierung.
Fokussierte Steuerelemente sollten eine sichtbare Umrandung oder einen Fokus-Stil haben.
Das fokussierte Suchfeld sollte deutlich sichtbar sein.
UI-Zustände
Blur
blur / focusoutDer Zustandswechsel, wenn ein Element den Fokus verliert.
Ein Weichzeichner kann die Eingabe validieren oder eine leichte UI schließen, sollte den Benutzer aber nicht überraschen.
Löschen Sie den Suchtext nicht, wenn der Eingabefokus verloren geht.
UI-Zustände
Active state
:activeEin kurzer Zustand, während eine Steuerung gedrückt wird.
Der aktive Zustand kann einen gedrückten Effekt mit einer leichten Hintergrund-, Rahmen- oder Positionsänderung anzeigen.
Einen subtilen gedrückten Zustand zu den Icon-Buttons hinzufügen.
UI-Zustände
Selected state
selected / aria-currentDer Zustand eines Elements, das derzeit in einer Liste, einem Menü, einer Registerkarten- oder Filtergruppe ausgewählt ist.
Ausgewählte Elemente sollten sich optisch von nicht ausgewählten Elementen unterscheiden.
Machen Sie den aktiven Kategorie-Chip deutlich von inaktiven Chips unterscheidbar.
UI-Zustände
Disabled state
disabled / aria-disabledEin Zustand, in dem eine Steuerung sichtbar ist, aber nicht verwendet werden kann.
Deaktivierte Bedienelemente sollten inaktiv aussehen, aber weiterhin verständlich sein.
Deaktivieren Sie die Schaltfläche "Senden", bis die erforderlichen Eingaben gültig sind.
UI-Zustände
Checked state
checkedDer ein- oder ausgewählte Zustand einer Checkbox, eines Radiobuttons oder einer schalterähnlichen Steuerung.
Der überprüfte Zustand sollte deutlich sichtbar sein und durch die Steuerungsemantik angegeben werden.
Zeigen Sie einen klaren, markierten Zustand für ausgewählte Optionen an.
Öffnen und Schließen
Toggle
toggle stateEine Aktion, die zwischen zwei Zuständen umschaltet, z. B. offen und geschlossen oder ein und aus.
Ein Schalter sollte seinen aktuellen Zustand anzeigen und diesen Zustand vorhersehbar ändern.
Verwenden Sie einen Button, um jede Menükategorie ein- und auszublenden.
Öffnen und Schließen
Open / close
open / closedEin Sichtbarkeitszustand, bei dem ein Panel, ein Menü oder ein Abschnitt angezeigt oder ausgeblendet wird.
Öffnen- und Schließen-Zustände sollten konsistent über Schaltflächen, Klicks außerhalb des Bereichs, die Escape-Taste oder die Auswahl gesteuert werden.
Schließen Sie das Site-Menü, wenn das Dropdown-Menü für die Sprache geöffnet wird.
Öffnen und Schließen
Dropdown
button -> panelEine schwebende Liste, die von einer Schaltfläche oder einem Feld erscheint.
Dropdown-Menüs schließen normalerweise nach der Auswahl, einem Klick außerhalb des Menüs oder durch Drücken der Escape-Taste.
Wenn eine Sprache ausgewählt ist, schließen Sie das Dropdown-Menü.
Öffnen und Schließen
Accordion
section toggleEin UI-Muster, bei dem Abschnittsüberschriften ihren Inhalt öffnen oder schließen.
Akkordeons sollten klar anzeigen, welche Abschnitte geöffnet sind.
Halten Sie alle Akkordeon-Kategorien standardmäßig geschlossen.
Öffnen und Schließen
Modal
open dialogEin fokussiertes Overlay, das über der Seite erscheint und normalerweise den Hintergrundinhalt blockiert.
Modale Fenster benötigen Schließen-Steuerelemente, Escape-Verhalten, Fokus-Verwaltung und einen klaren Zweck.
Einen Schließen-Button und ein Escape-zum-Schließen-Verhalten zum Modal hinzufügen.
Öffnen und Schließen
Outside click
document pointerdownEin Klick oder Tippen außerhalb eines temporären Panels wie z. B. eines Dropdowns, Menüs oder Popovers.
Temporäre Panels werden häufig geschlossen, wenn der Benutzer außerhalb davon klickt.
Kontrollen, die zur selben Header-Gruppe gehören, zählen möglicherweise nicht als außerhalb, es sei denn, die Logik ist so geschrieben.
Schließen Sie das Menü, wenn der Benutzer außerhalb des Menübereichs klickt.
Öffnen und Schließen
Focus trap
modal openEin Verhalten, das den Tastaturfokus innerhalb eines Modals oder Dialogs beibehält, während es geöffnet ist.
Eine Fokus-Falle verhindert, dass Tastaturbenutzer versehentlich hinter einem aktiven Modal gelangen.
Fangen Sie den Fokus innerhalb des Modals ein, bis es geschlossen wird.
Navigation
Link navigation
link clickWechselt zu einer anderen Seite, Route oder einem Abschnitt über einen Link.
Links sollten korrekte Ziele verwenden und temporäre Menüs nach der Navigation schließen.
Schließen Sie das Menü, nachdem ein Menülink angeklickt wurde.
Navigation
Route change
router navigationEine Änderung von einer Anwendungsroute oder URL-Pfad zu einer anderen.
Routenänderungen sollten den Seiteninhalt, die Metadaten und den aktiven Navigationsstatus aktualisieren.
Aktualisieren Sie den aktiven Navigationsstatus nach Routenänderungen.
Navigation
Scroll
wheel / touch scrollVerschieben des sichtbaren Viewports durch Inhalte, die größer sind als der Bildschirm.
Das Scrollen kann auf der Seite oder innerhalb eines Panels mit eigenem Überlauf erfolgen.
Lassen Sie lange Dropdown-Menüs innerhalb des Bereichs scrollen, anstatt außerhalb des Bildschirms zu erscheinen.
Navigation
Anchor scroll
href=#idEin Linkverhalten, das zu einem Element mit einer übereinstimmenden ID auf derselben Seite scrollt.
Ankerlinks sind nützlich, um zu Tools, Referenzen oder Abschnitten zu springen.
Lassen Sie den Button "Tools durchsuchen" zum Bereich "Tools" scrollen.
Eingaben und Formulare
Type
input eventEingabe von Text oder Werten in ein Eingabefeld oder einen Textbereich.
Das Tippen kann den Zustand sofort aktualisieren, die Eingabe validieren oder warten, bis die Eingabe gesendet wird.
Aktualisieren Sie die Suchergebnisse, während der Benutzer tippt.
Eingaben und Formulare
Submit
submit eventSenden oder Anwenden von Formulareingaben.
Beim Senden sollten die erforderlichen Eingaben validiert, versehentliche Neuladungen verhindert und Feedback angezeigt werden.
Verhindert, dass das Formular die Seite neu lädt, wenn es abgeschickt wird.
Eingaben und Formulare
Reset
reset actionSetzt Steuerelemente oder Werte in ihren Standardzustand zurück.
Das Zurücksetzen sollte vorhersehbar sein und verhindern, dass wichtige Arbeiten ohne Warnung gelöscht werden.
Einen Reset-Button hinzufügen, der die Suche löscht und zu allen Kategorien zurückkehrt.
Eingaben und Formulare
Validation
input / submitÜberprüfen, ob die Benutzereingabe vollständig und gültig ist.
Die Validierung sollte erklären, was falsch ist und wie es behoben werden kann.
Zeigen Sie eine Validierungsnachricht an, wenn der Eingabewert ungültig ist.
Suche und Filter
Search
query changeFinden von passenden Elementen basierend auf der vom Benutzer eingegebenen Texte.
Achten Sie darauf, nützliche Felder wie Namen, Aliasse, Beschreibungen und Beispiele zu überprüfen.
Die Suche sollte koreanische Wörter, englische Begriffe, Aliase und Anwendungsbeispiele berücksichtigen.
Suche und Filter
Filter
filter stateEinschränken einer Liste auf Elemente, die mit einer ausgewählten Bedingung übereinstimmen.
Filter sollten anzeigen, welche Bedingung aktiv ist und wie viele Elemente verbleiben, falls dies nützlich ist.
Kategorie-Filter über den UI-Interaktions-Term-Karten hinzufügen.
Suche und Filter
Sort
sort optionDas Ändern der Reihenfolge von Elementen nach einer Regel wie Name, Datum, Priorität oder Kategorie.
Das Sortieren darf keine Elemente entfernen; es ändert nur deren Reihenfolge.
Sortieren Sie übereinstimmende Begriffe alphabetisch, nachdem sie gefiltert wurden.
Suche und Filter
Debounce
delayed inputKurze Wartezeit, nachdem der Benutzer das Tippen beendet hat, bevor eine aufwendige Aktion ausgeführt wird.
Debouncing verhindert, dass Suchvorgänge, Validierungen oder API-Aufrufe bei jedem einzelnen Tastendruck ausgeführt werden.
Debounce die Suchleiste, wenn sie bei vielen Einträgen langsam wird.
Suche und Filter
Clear
clear actionEntfernen eines eingegebenen Werts, eines ausgewählten Filters oder eines temporären Zustands.
Löschaktionen sollten sich nur auf das beabsichtigte Feld oder den beabsichtigten Zustand auswirken.
Einen klaren Button innerhalb des Suchfelds hinzufügen.
Feedback
Loading
pending stateEin temporärer Zustand, während Daten, Seiteninhalte oder eine Aktion noch vorbereitet werden.
Eine Ladeanzeige informiert den Benutzer darüber, dass die App arbeitet, und verhindert wiederholte Aktionen, wenn dies erforderlich ist.
Zeigen Sie einen Ladezustand an, während das Konvertergebnis vorbereitet wird.
Feedback
Spinner
loading visualEin visueller Indikator, der anzeigt, dass etwas geladen oder verarbeitet wird.
Spinner funktionieren am besten für kurze Wartezeiten; längere Wartezeiten erfordern möglicherweise eine klarere Fortschrittsanzeige oder Text.
Zeigen Sie einen kleinen Spinner innerhalb der Schaltfläche an, während die Daten übermittelt werden.
Feedback
Toast
temporary messageEine kurze, temporäre Meldung, die nach einer Aktion angezeigt wird.
Toast-Nachrichten sind nützlich für Bestätigungen wie "kopiert", "gespeichert" oder "aktualisiert".
Zeigen Sie eine Toast-Nachricht an, nachdem Text in die Zwischenablage kopiert wurde.
Feedback
Error state
errorEin Zustand, der dem Benutzer mitteilt, dass etwas schief gelaufen ist.
Fehlermeldungen sollten spezifisch, verständlich sein und die nächste nützliche Aktion erklären.
Zeigen Sie eine klare Fehlermeldung an, wenn die Eingabe nicht konvertiert werden kann.
Feedback
Success state
successEin Zustand, der bestätigt, dass eine Aktion erfolgreich abgeschlossen wurde.
Erfolgszustände können subtil sein, wenn das Ergebnis bereits sichtbar ist.
Zeigen Sie eine kleine Erfolgsmeldung an, nachdem die Einstellungen gespeichert wurden.
Feedback
Empty state
empty resultEin Zustand, der angezeigt wird, wenn keine Daten oder kein passendes Ergebnis vorhanden ist.
Leere Zustände sollten erklären, warum nichts angezeigt wird, und einen nächsten Schritt vorschlagen.
Zeigen Sie eine Meldung an, dass keine Ergebnisse gefunden wurden, wenn die Suche keine übereinstimmenden Begriffe findet.
Feedback
Copy to clipboard
navigator.clipboardEine Aktion, die Text in die Zwischenablage des Benutzers einfügt.
Kopieraktionen sollten Feedback geben, damit Benutzer wissen, dass der Text kopiert wurde.
Kopiert die CSS-Eigenschaft, wenn das Eigenschafts-Chip angeklickt wird.
Bewegung und Timing
Transition
CSS transitionEine sanfte Änderung zwischen zwei visuellen Zuständen, z. B. Farbe, Deckkraft oder Position.
Übergänge können dazu führen, dass die UI ein professionelles Gefühl vermittelt, sollten aber für Tools schnell sein.
Eine kurze Übergangsanimation für die Hover-Farben der Menüelemente hinzufügen.
Bewegung und Timing
Animation
CSS animationEine visuelle Bewegungssequenz, die einmal oder wiederholt ausgeführt werden kann.
Animationen sollten die Aufgabe unterstützen und nicht vom Lesen oder der Wiederholung von Aufgaben ablenken.
Verwenden Sie eine subtile Animation, bei der sich das Dropdown-Menü nach unten bewegt, wenn es geöffnet wird.
Bewegung und Timing
Delay
setTimeout / delayEine Wartezeit, bevor etwas passiert oder verschwindet.
Verzögerungen können das Feedback lesbar machen, aber lange Verzögerungen können dazu führen, dass die UI langsam erscheint.
Behalten Sie die kopierte Toast-Nachricht für etwa eine Sekunde sichtbar.
Bewegung und Timing
Throttle
limited repeated eventsBegrenzung, wie oft ein wiederholter Ereignishandler ausgeführt werden kann.
Die Drosselung ist nützlich für Scroll- oder Größenänderungs-Handler, die oft ausgelöst werden.
Drosseln Sie den Scroll-Handler, wenn die Seite langsam wird.