YL
FEEDBACK & OVERLAY

反馈与浮层 UI 设计模式

反馈与浮层(Feedback & Overlay)分类收录 12 种常用界面模式:轻提示、模态框、抽屉面板、气泡浮层、工具提示、骨架屏等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

反馈与浮层

Feedback & Overlay

12 条

轻提示

Toast Notification

Toast通知反馈浮层

角落里冒出来、几秒后自己消失的小通知条。不打断、不阻塞、看完即走。

模态框

Modal / Dialog

弹窗模态对话框遮罩

遮罩压暗全页、对话框居中弹出的重型交互。出现即垄断注意力,慎用。

抽屉面板

Drawer / Sheet

抽屉侧滑面板浮层

从屏幕边缘滑出的面板,右边进左边留——比弹窗温和,比新页面轻。

气泡浮层

Popover

气泡浮层引导浮卡

带小三角指向触发源的富内容浮层,可以装标题、正文甚至按钮。

工具提示

Tooltip

提示悬停说明浮层

悬停 500ms 后出现的一行小黑条,解释"这个图标/词是什么"。

骨架屏

Skeleton Loading

骨架屏加载占位shimmer

内容加载前先用灰色几何块占好版面,一道高光来回扫——比转圈高级得多。

进度条

Progress Bar

进度加载进度条状态

一条圆角细条从左往右填色,不确定时长时用斑马纹循环动画代替。

步骤条

Stepper

步骤流程向导进度

圆点 + 连接线的流程指示:完成的实心、当前的带光圈、未来的灰色。

空状态

Empty State

空状态引导占位零数据

没有数据时的页面不能真的空白——插画 + 一句话 + 一个行动按钮把用户带回来。

彩带庆祝

Confetti Burst

彩带庆祝仪式感动效

完成的瞬间彩纸从上落下或从中心炸开——给用户一个值得截图的仪式感。

撤销提示条

Snackbar with Undo

撤销删除Snackbar后悔药

深色提示条自带一个"撤销"按钮,删除类操作给用户留 5 秒后悔药。

加载指示器

Spinner / Loader

加载转圈等待loader

转圈、跳点、翻方块——等待超过 300ms 就该给用户一个"正在干活"的信号。