{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "list", "locale": "en", "id": "M-C", "name": { "zh": "微交互与反馈 · 经典基础", "en": "Microinteractions & feedback · Classic foundation" }, "headline": { "zh": "微交互 Top 10：10 大经典界面反馈设计", "en": "Top 10 Classic Microinteraction and UI Feedback Patterns" }, "page": "https://designvocabulary.com/en/lists/M-C/", "self": "https://designvocabulary.com/en/lists/M-C.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/lists/M-C.json", "en": "https://designvocabulary.com/en/lists/M-C.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/lists/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "selection": "editorial", "ordered": false, "disclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is.", "titleNote": "“Top” in the title is a search convention. This edition is an editorial selection, not a ranking, a score, or a measure of popularity.", "seatOrigins": { "issue-1-ledger": "The seat comes from the list ledger in plan issue #1.", "editorial-reconstruction": "The seat was filled by editorial judgement in this repository." }, "evidence": "Each reason says which feedback capability the entry covers; none grades effectiveness. Accessibility specifications place testable requirements on several of them — see each entry's own sources.", "nominalSize": 10, "seatCount": 10, "filled": true, "sibling": { "id": "M-Y", "page": "https://designvocabulary.com/en/lists/M-Y/", "json": "https://designvocabulary.com/en/lists/M-Y.json" } }, "seats": [ { "seat": 1, "entry": "skeleton", "origin": "editorial-reconstruction", "reason": "Sets the category's baseline: saying content is on its way when the structure is known but the content is not.", "name": "Skeleton Screen", "type": "micro", "page": "https://designvocabulary.com/en/entries/skeleton/", "json": "https://designvocabulary.com/en/entries/skeleton.json" }, { "seat": 2, "entry": "determinate-progress", "origin": "editorial-reconstruction", "reason": "Covers feedback that can state how much is done, on condition that the total is knowable.", "name": "Determinate Progress Bar", "type": "micro", "page": "https://designvocabulary.com/en/entries/determinate-progress/", "json": "https://designvocabulary.com/en/entries/determinate-progress.json" }, { "seat": 3, "entry": "indeterminate-progress", "origin": "issue-1-ledger", "reason": "Covers what to show when the total is unknowable, and makes clear it must not masquerade as a percentage.", "name": "Indeterminate Progress Indicator", "type": "micro", "page": "https://designvocabulary.com/en/entries/indeterminate-progress/", "json": "https://designvocabulary.com/en/entries/indeterminate-progress.json" }, { "seat": 4, "entry": "inline-validation", "origin": "issue-1-ledger", "reason": "Separates a validation result from being in edit mode: validating is not editing.", "name": "Inline Validation Feedback", "type": "micro", "page": "https://designvocabulary.com/en/entries/inline-validation/", "json": "https://designvocabulary.com/en/entries/inline-validation.json" }, { "seat": 5, "entry": "focus-indicator", "origin": "issue-1-ledger", "reason": "Covers the visible mark that tells a keyboard user where they currently are.", "name": "Focus Indicator", "type": "micro", "page": "https://designvocabulary.com/en/entries/focus-indicator/", "json": "https://designvocabulary.com/en/entries/focus-indicator.json" }, { "seat": 6, "entry": "pressed-state", "origin": "issue-1-ledger", "reason": "Covers the immediate confirmation that a press registered, on a shorter timescale than any other feedback here.", "name": "Pressed-State Feedback", "type": "micro", "page": "https://designvocabulary.com/en/entries/pressed-state/", "json": "https://designvocabulary.com/en/entries/pressed-state.json" }, { "seat": 7, "entry": "status-message", "origin": "issue-1-ledger", "reason": "Covers reporting a result without moving the person, kept apart from continuous quantified progress.", "name": "Status Message", "type": "micro", "page": "https://designvocabulary.com/en/entries/status-message/", "json": "https://designvocabulary.com/en/entries/status-message.json" }, { "seat": 8, "entry": "optimistic-feedback", "origin": "issue-1-ledger", "reason": "Covers showing the expected result first and reconciling afterwards, with correction required when it fails.", "name": "Optimistic Feedback", "type": "micro", "page": "https://designvocabulary.com/en/entries/optimistic-feedback/", "json": "https://designvocabulary.com/en/entries/optimistic-feedback.json" }, { "seat": 9, "entry": "haptic-feedback", "origin": "issue-1-ledger", "reason": "Covers a perceptual channel beyond sight, showing feedback need not always be seen.", "name": "Haptic Feedback", "type": "micro", "page": "https://designvocabulary.com/en/entries/haptic-feedback/", "json": "https://designvocabulary.com/en/entries/haptic-feedback.json" }, { "seat": 10, "entry": "transition-animation", "origin": "issue-1-ledger", "reason": "Covers continuity between states, and treats reduced motion as an adaptation of it rather than a separate entry.", "name": "State Transition Animation", "type": "micro", "page": "https://designvocabulary.com/en/entries/transition-animation/", "json": "https://designvocabulary.com/en/entries/transition-animation.json" } ], "list": { "id": "M-C", "category": "micro", "edition": "classic", "name": { "zh": "微交互与反馈 · 经典基础", "en": "Microinteractions & feedback · Classic foundation" }, "headline": { "zh": "微交互 Top 10：10 大经典界面反馈设计", "en": "Top 10 Classic Microinteraction and UI Feedback Patterns" }, "note": "A classic foundation for microinteractions and feedback: it separates feedback mechanisms rather than grading how well they work.", "keywords": [ "microinteractions", "UI feedback", "loading states", "skeleton screen", "progress bar", "focus indicator", "inline validation", "status message" ], "lead": "This edition collects the distinct feedback mechanisms of microinteraction. They get lumped together as “loading” or “a toast”, but they answer different questions: what is happening now, how far along it is, and whether that last action registered.", "criteria": [ "It describes one recognisable piece of feedback, not a whole flow.", "Its difference from neighbouring mechanisms lies in what information it can carry, not how it looks.", "It is possible to say what a person loses when it is absent." ], "pairing": "Against the 2026 focus edition, this one does not assume model-generated content. An entry in both lists is feedback being discussed again in a new setting.", "evidence": "Each reason says which feedback capability the entry covers; none grades effectiveness. Accessibility specifications place testable requirements on several of them — see each entry's own sources.", "seats": [ { "seat": 1, "entry": "skeleton", "origin": "editorial-reconstruction", "reason": "Sets the category's baseline: saying content is on its way when the structure is known but the content is not." }, { "seat": 2, "entry": "determinate-progress", "origin": "editorial-reconstruction", "reason": "Covers feedback that can state how much is done, on condition that the total is knowable." }, { "seat": 3, "entry": "indeterminate-progress", "origin": "issue-1-ledger", "reason": "Covers what to show when the total is unknowable, and makes clear it must not masquerade as a percentage." }, { "seat": 4, "entry": "inline-validation", "origin": "issue-1-ledger", "reason": "Separates a validation result from being in edit mode: validating is not editing." }, { "seat": 5, "entry": "focus-indicator", "origin": "issue-1-ledger", "reason": "Covers the visible mark that tells a keyboard user where they currently are." }, { "seat": 6, "entry": "pressed-state", "origin": "issue-1-ledger", "reason": "Covers the immediate confirmation that a press registered, on a shorter timescale than any other feedback here." }, { "seat": 7, "entry": "status-message", "origin": "issue-1-ledger", "reason": "Covers reporting a result without moving the person, kept apart from continuous quantified progress." }, { "seat": 8, "entry": "optimistic-feedback", "origin": "issue-1-ledger", "reason": "Covers showing the expected result first and reconciling afterwards, with correction required when it fails." }, { "seat": 9, "entry": "haptic-feedback", "origin": "issue-1-ledger", "reason": "Covers a perceptual channel beyond sight, showing feedback need not always be seen." }, { "seat": 10, "entry": "transition-animation", "origin": "issue-1-ledger", "reason": "Covers continuity between states, and treats reduced motion as an adaptation of it rather than a separate entry." } ] } }