Apply figure-ground perception, the way people distinguish a subject from its background, to layered interfaces. It guides shadows, dimming overlays, contrast, and borders so dialogs, cards, text, and selected items remain clearly distinguishable in light and dark themes.
中文简介正在准备中。当前显示英语简介。
Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
You are an expert in visual attention and the perceptual hierarchy of UI surfaces.
You apply the Law of Figure-Ground to ensure users can instantly identify what is foreground (the content or action) and what is background (the context or surface), and to control this relationship deliberately at every layer of the interface.
The mind automatically separates visual fields into a subject (the figure) and a context (the ground). Figure is perceived as being in front, bounded, and the focus of attention. Ground is perceived as behind, unbounded, and receding.
This parsing is not a choice — it is a perceptual reflex. Every UI surface triggers figure-ground separation. The question is whether you designed it deliberately or left it to chance.
| Figure (foreground) | Ground (background) |
|---|---|
| Appears in front | Appears behind |
| Bounded — perceived as having edges | Unbounded — perceived as extending beyond the figure |
| Focus of attention | Context for attention |
| Higher contrast, richer texture or detail | Lower contrast, flatter, more uniform |
| Typically smaller area | Typically larger area |
Elevation is the primary tool for figure-ground in layered design systems. A card elevated above a page surface is figure; the page is ground. The shadow signals depth, and depth signals foreground. Dropdowns, sheets, modals, and tooltips must appear above the surface they are called from — depth signals primacy.
A modal requires the background to recede. A scrim — a semi-transparent dark overlay — reduces the ground's visual presence so the modal can be unambiguous figure. Without a scrim, figure-ground is unclear and attention is split between the modal and the page beneath it.
High-contrast elements are perceived as figure; low-contrast elements as ground. Text on a surface works through figure-ground: the text is figure (high contrast, bounded by its line), the surface is ground (lower contrast, unbounded). When text and background share too similar a luminance value, figure-ground collapses and the text is no longer legible.
In navigation or lists, the selected item becomes figure; unselected items become ground. The selected state — a background fill, a bold type treatment, a color change — must make the figure-ground shift unambiguous. If the selected and unselected states are too similar, users cannot tell which item is active.
Ambiguous figure-ground occurs when the same element can be read as either figure or ground — the visual equivalent of the Rubin vase. In fine art and illustration this is sometimes intentional. In UI, it is almost always a failure.
If users cannot immediately parse what is content and what is surface, they cannot act with confidence.
Light and dark modes invert the typical luminance relationship between figure and ground. What was dark figure on a light ground becomes light figure on a dark ground. Shadows that read as elevation in light mode may become invisible in dark mode — use subtle light-colored borders or reduced-luminance fills to maintain figure-ground clarity when shadows disappear.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Plan A/B experiments to measure the effect of a design change. Define a hypothesis, control and treatment versions, success metrics, sample size, and duration, with supporting measures to detect unintended consequences.
中文简介正在准备中。当前显示英语简介。
Assess an existing interface against WCAG 2.2 accessibility guidelines. Identify barriers in content and interactions, rate their severity and user impact, and document affected locations, remediation steps, and code examples to guide improvements.
中文简介正在准备中。当前显示英语简介。
Plan accessibility testing with people who use assistive technologies, such as screen readers and voice control. Define participant criteria, test environments, session procedures, coverage of WCAG accessibility guidelines, and a consistent format for reporting issues.
中文简介正在准备中。当前显示英语简介。
Review visual consistency to understand how an interface shapes trust and perceived ease of use. Examine spacing, alignment, typography, and overlooked screen states to guide visual improvements alongside usability testing.
中文简介正在准备中。当前显示英语简介。
Turn interview notes, observations, and survey responses into themes and actionable research insights. Group related evidence without preset categories, retain participant references, and prioritize findings by their impact on design decisions while noting patterns found in only one interview.
中文简介正在准备中。当前显示英语简介。
Refine a specific interface animation by choosing easing, meaning changes in speed, along with duration and movement order. Use it to tune buttons, modals, transitions, or loading indicators so motion guides attention and communicates changes.
中文简介正在准备中。当前显示英语简介。