AI Vibe Coding 前端指令效果对照表

悬停/聚焦时出现的轻量提示气泡，用于解释元素含义，不打断操作流。

比 tooltip 更丰富的浮层，可承载标题、文本、按钮等富内容，点击触发。

点击展开的菜单列表，用于选择操作或选项，是导航和工具栏的常见形态。

模态对话框，遮罩+居中弹窗，强制用户聚焦当前任务，常用于确认、表单。

从屏幕边缘滑出的侧边面板，承载导航或详情内容，不打断主内容。

从底部滑出的面板（Bottom Sheet），移动端常用，可承载操作列表或扩展内容。

旋转指示器，表示进行中的操作，轻量且不占空间。

进度条，展示任务完成百分比，适合耗时明确的操作。

骨架屏+微光扫过，占位内容加载前的视觉反馈，减少感知等待。

按钮内嵌加载态，点击后按钮变为加载中，防止重复提交。

整页加载遮罩，用于路由切换或首屏初始化，常配 logo 或进度。

标签页，在同等层级的内容间切换，指示条跟随选中项。

分段控制器，互斥选项的紧凑形态，iOS 风格。

面包屑导航，展示当前页面在层级中的位置，支持逐级返回。

分页器，浏览多页数据，支持页码、上一页/下一页。

步骤条，展示多步流程的进度，如注册、结账。

侧边导航栏，组织多级菜单，可折叠为图标模式。

底部导航栏，移动端 App 主入口，3-5 个核心功能。

手风琴，多个面板垂直堆叠，同时只展开一个。

折叠面板，单个内容区的展开/收起，可独立控制。

树形视图，展示层级数据，节点可展开收起。

可展开行，表格行点击后展开显示详情区域。

阅读更多，长文本截断+展开按钮，控制内容展示量。

加载更多，列表底部按钮追加更多条目，常用于信息流。

可展开卡片，卡片点击后高度和内容扩展。

抽屉展开，从边缘滑出内容面板（与弹层 drawer 同源，此处强调展开动效）。

刷选，图表中拖拽矩形区域选择数据范围，用于缩放或筛选。

十字准线，鼠标悬停图表时显示横纵参考线+坐标值。

数据点高亮，悬停或选中时放大数据点并显示数值。

图表提示框，悬停时显示该点的详细数据。

图例筛选+缩放，点击图例切换系列显示，图表自动重缩放。

下钻，点击图表元素进入更细粒度的数据视图。

产品导览，分步引导用户了解核心功能，带步骤指示。

教练标记，脉冲光圈引导用户注意某个元素。

热点标记，地图/图片上的脉冲圆点，点击查看详情。

聚光灯，暗化页面其余部分，突出当前操作区域。

引导清单，分步任务列表，完成项打勾并显示进度。

上下文提示，在输入框/操作区旁出现的小型提示气泡。

圆形→胶囊形变形，常用于按钮/图标的形态切换。

胶囊→卡片变形，从紧凑入口展开为内容卡片。

紧凑→展开，小元素扩展为完整面板，iOS 风格。

圆角变形，元素圆角在不同状态间平滑过渡。

尺寸变形，元素大小平滑缩放，常用于强调或过渡。

内容重排，容器尺寸变化时内容自动重新布局。

反向折叠，从收起状态展开内容，与 collapse 方向相反。

基础下拉选单，点击展开选项列表，单选。

分组选单，选项按类别分组，组头不可选。

输入联想，输入时实时过滤并展示匹配建议。

分裂按钮，主操作+下拉箭头两部分，箭头展开更多操作。

日期范围选择，起止日期联动，常用于筛选。

级联选择，多级联动（省/市/区），上级变化下级重置。

标签选择器，多选标签，已选标签可移除。

巨型菜单，鼠标悬停展开大面板，展示多列内容。