{ "_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": "entry", "locale": "en", "id": "ripple-effect", "name": { "zh": "涟漪效果", "en": "Ripple Effect" }, "page": "https://designvocabulary.com/en/entries/ripple-effect/", "self": "https://designvocabulary.com/en/entries/ripple-effect.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/ripple-effect.json", "en": "https://designvocabulary.com/en/entries/ripple-effect.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "ripple-material-web", "url": "https://github.com/material-components/material-web/blob/main/docs/components/ripple.md", "title": "Material Web · Ripple (docs/components/ripple.md)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/ripple.md" } }, { "id": "ripple-compose-material3", "url": "https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/ripple.html", "title": "Compose Multiplatform API · androidx.compose.material3 · ripple", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/ripple.html" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "ripple-effect", "type": "micro", "name": { "zh": "涟漪效果", "en": "Ripple Effect" }, "aliases": [ "Ink Ripple", "Material Ripple", "水波纹", "点击涟漪" ], "granularity": "state", "intents": [ "inform" ], "tags": [ "ripple", "press", "touch feedback", "state layer", "Material" ], "definition": "A translucent circular wave that spreads outward from the touch point when a control is pressed, covering the control's surface and then fading; it is one concrete way Material Design expresses the pressed state, and belongs to the translucent \"state layer\" laid over a control.", "boundary": "A ripple is one way of implementing pressed-state feedback, not the pressed state itself: the pressed state answers \"was my press received?\", and the ripple answers it with a wave spreading from the touch point, where a colour change, an inset, or a shadow could answer the same question. It carries a distinct Material lineage and looks borrowed inside other design languages; nor is it a loading indicator or a result — a finished wave does not mean the action is done. Unlike hover and focus states, in Material's implementation the spreading animation belongs to the moment of pressing alone, while hover and focus show only a static state layer.", "signature": [ "The wave spreads outward with the finger or pointer's press position as its centre, rather than the whole surface changing colour at once", "The wave is a translucent overlay, so the label and icon beneath stay readable", "On release or moving away the wave fades and the control returns to its resting look" ], "when": [ "The product uses or sits close to the Material design language, and users already know this press feedback", "Large tappable areas such as list rows and cards need to show where exactly the press landed", "A touch interface has no hover state and needs a press confirmation more visible than a plain colour change" ], "when_not": [ "The product's visual language has nothing to do with Material, so a borrowed ripple looks like part of another system", "The ripple is the only feedback, and nothing remains once it is switched off under a reduced-motion preference", "The page navigates or refreshes before the wave has played, so the user sees only a passing flicker" ], "tradeoff": "A ripple says both where the press landed and that it landed, which is easier to notice on large touch targets than a colour change alone; the cost is its strong Material identity and its reliance on animation — when the animation is switched off or drops frames on low-end devices, it either vanishes or feels sluggish.", "comparison": { "focus": "Confirming a press with a wave from the touch point that also shows where it landed", "mechanism": "On press, a translucent overlay spreads from the touch point as its centre and fades after release", "cost": "It carries Material identity and depends on animation, so a static fallback is needed for reduced motion" }, "sources": [ { "id": "ripple-material-web", "title": "Material Web · Ripple (docs/components/ripple.md)", "url": "https://github.com/material-components/material-web/blob/main/docs/components/ripple.md", "claim": "The documentation of Material Design's official web component library defines ripples as state layers that communicate the status of a component or interactive element, a state layer being a semi-transparent covering on the element. It says ripples display on hover and press pointer interactions, and notes that ripples are visual components with no assistive technology requirements. This entry takes from it that the ripple is a visual implementation of press feedback, and that it cannot carry accessible state information.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/ripple.md", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:44.798Z", "error": "save-request-failed" } }, { "id": "ripple-compose-material3", "title": "Compose Multiplatform API · androidx.compose.material3 · ripple", "url": "https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/ripple.html", "claim": "The API documentation calls Ripple a Material implementation of Indication that expresses different interactions by drawing ripple animations and state layers: it responds to a press by starting a new ripple animation, and to other interactions by showing a fixed state layer whose alpha varies with the interaction. This entry uses it to separate the ripple's spreading animation, which belongs to pressing, from the static state layer shown on hover and focus.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/ripple.html", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:46.882Z", "error": "save-request-failed" } } ], "relations": [ { "target": "pressed-state", "kind": "related", "condition": "Press feedback has to be designed for a pressable control", "reason": "The ripple is one concrete implementation of pressed-state feedback in the Material language; the pressed state's requirements — immediate, distinguishable, acting only on release — bind the ripple as well, and the ripple is only one possible answer.", "basis": "editorial" }, { "target": "transition-animation", "kind": "related", "condition": "A ripple and a page or component transition play one after the other from a single tap", "reason": "The ripple confirms the input was received and the transition explains how the interface changes; when they stack, let the ripple be seen before the transition starts.", "basis": "editorial" }, { "target": "haptic-feedback", "kind": "composes_with", "condition": "A press on a touch device needs stronger confirmation", "reason": "The ripple confirms the press through the visual channel and haptic feedback through another; when the ripple is switched off under a reduced-motion preference, haptics and a static colour change can take over.", "basis": "editorial" }, { "target": "focus-indicator", "kind": "related", "condition": "The same control supports both keyboard and pointer use", "reason": "A ripple spreads only on press and cannot stand in for a persistently visible keyboard focus indicator; both must be present without obscuring each other.", "basis": "editorial" } ], "rules": [ { "when": "A ripple expresses the pressed state", "instruction": "Start the wave at the instant of pressing, and make sure that even with the animation switched off the control still shows a static colour or state-layer change for the press.", "strength": "recommend", "basis": "editorial" }, { "when": "A tap immediately navigates or replaces the content", "instruction": "Leave the ripple enough time to be seen before the transition begins, or use press feedback that does not depend on animation.", "strength": "recommend", "basis": "editorial" } ], "behavior": { "states": [ "rest", "pressed", "spreading", "fading" ], "a11y": [ "The ripple is visual feedback only; the control's role, name, and state must still be expressed through accessible properties", "Under a reduced-motion preference the spreading animation is not played and a static state layer takes its place", "The ripple's translucent overlay must not lower the contrast between the label text and its background" ], "motion": "The wave begins spreading from the touch point on press, covers the control, and fades on release; under a reduced-motion preference the spread is omitted and only a static pressed state layer remains" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch that shows the wave spreading in frames and does not represent a verified implementation. Before shipping, confirm on a real touch device that the wave starts at the touch point and is distinguishable from hover and focus states, and recheck the static fallback with the system reduced-motion setting on.", "image": { "src": "/images/ripple-effect.webp", "alt": "A frame-by-frame sketch: the same list row in a fictional FIELDNOTES app appears three times, showing from left to right a small circle at the touch point as the fingertip presses, a translucent circular wave spread to half the row's width, and the wave filling the whole row as it begins to fade; the text in the row is shown as grey placeholder bars." }, "searchTerms": [ "涟漪", "按下", "触控反馈", "状态层", "Material" ] } }