用 AI 做 App:这四种按钮,点下去就有感觉

同样是点一下，点赞要轻快，提交要交代进度，删除要留出反悔时间。我用四个小场景，带你把按钮从“能点”改到“有回应”。

图中是按交互参数绘制的动画示意，用来说明该怎样变化；配套 HTML 尚未完成浏览器运行检查。

先看上面的点赞：爱心按下去会回弹，数字和粒子跟着回应。往下还有三个练习：提交按钮收成加载圆环，开关滑块像果冻一样拉伸，删除按钮要按住一圈才完成。

我把它们分别放进信息流、表单、设置和相册。接下来每次只改一个地方：先说清楚哪里僵硬，再把动作拆给 AI，最后说明跑起来以后该怎么调参数。

如果你从零开始，先给写代码的 AI 这句话：“用 HTML、CSS 和 JavaScript 做一个可直接打开的单文件网页，样式和脚本全部内嵌，不依赖外部服务。”然后接上下面的案例提示词。已有 App，就让它保留项目技术栈，只改对应组件。

1. 点赞：红心别突然跳出来

普通写法是“做一个点赞按钮”。结果往往只有灰心变红、数字加一，点完就结束了。

我想补上的是按下去的力度：先缩小，再弹起来，最后落回原位。彩色粒子和数字变化跟着这一拍走，反馈就完整了。

把这段交给 AI：

做一个深色信息流卡片，底部有灰色爱心和点赞数。点击后，爱心按 1→0.8→1.2→1 的比例缩放，颜色变红，约 600ms 完成轻微弹簧回弹。八颗彩色小圆点向外散开并淡出，点赞数加一，新数字向上滑入。按钮周围的文字和卡片位置保持不动。提供重置入口，方便重复看效果；快速重播时清掉上一轮粒子，不要越积越多。

看效果时，先盯这两处：爱心回到原尺寸后有没有继续晃；数字更新时，旁边的内容有没有被顶开。前者要收小回弹，后者要固定容器尺寸，用 transform 改视觉位置。

这个练习保留重播，方便调动作。接入真实点赞时，再把它改成“点赞／取消点赞”状态，并让数量跟业务数据一致。

2. 提交：让按钮自己交代进度

表单点了提交，按钮一动不动，人就容易再点一次。给它加一个转圈也能解决一部分问题，但加载、成功如果出现在不同位置，视线还得来回找。

我把三个阶段都留在按钮里：长条收成圆，圆里加载，成功后变绿并画出勾。

把这段交给 AI：

做一个预约表单的提交按钮。点击后文字先淡出，长条按钮用 300ms ease-in-out 收缩成圆形，出现旋转加载环。用 1.2 秒模拟请求，等待结束后背景变绿，白色勾线逐笔画出；成功态停留 1 秒，再恢复长条。加载期间忽略重复点击，外层占位不变，别让表单跳动。增加“模拟失败”选项：失败显示错误反馈，恢复后可以重试，不显示绿色勾。页面注明请求是本地模拟。

这里的 300ms 管收缩，1.2 秒管模拟请求，它们不必排成两段干等。想让变化更利落，优先调文字淡出和收缩的衔接，别先把所有时长都砍半。

试的时候连续点几下，再打开失败选项。加载只能启动一次，失败不能打勾。接上真实接口后，把模拟计时器换成请求结果，成功动画由成功响应触发。

3. 开关：让滑块在路上变一下形

开关只有左右位移，常常像一块小石头被推过去。我给它加的变化很少：出发时拉长一点，到终点恢复圆形。

把这段交给 AI：

做一个深色设置列表，包含通知开关。关闭时轨道为灰色，开启时变绿。点击后，滑块向另一端移动，途中横向拉伸成胶囊，抵达时轻微回弹恢复圆形，整段约 350ms。颜色与位置同步变化。开关状态在点击时立即更新，快速反向切换时从当前位置继续，最终滑块、文字和状态值必须一致。支持键盘空格切换。

拉伸不用很夸张。先保留 350ms，只调拉伸幅度，直到你能感觉到弹性，又不会把滑块看成一根拖尾。

再快速开关几次。如果文字写着“关闭”，滑块却停在右边，先修状态同步，别继续加动画。

4. 长按删除：把反悔时间画出来

相册里的删除按钮，轻轻一碰就执行，太容易误触。长按可以多给用户一点时间，但这个时间最好能看得见。

按住后，让按钮外圈沿顺时针前进；没走满就松手，退回零。走满后，再用轻晃和对勾确认完成。

把这段交给 AI：

做一个相册管理页面的长按删除演示，不删除真实文件。按住删除按钮，外圈进度在 1.5 秒内顺时针走满。提前松手或移出按钮，进度退回零，不执行；移回也不自动重启，必须重新按下。走满后只确认一次，轻微左右晃动，再出现对勾和“已删除”状态。提供恢复演示入口。Escape、窗口失焦和手势取消也要终止长按。

这一步别只试“按住成功”。按半秒松开，移出后再移回，切换窗口，都试一次。进度没走满，删除就不该发生。

长按完成后的轻晃是画面反馈，不是手机震动。真正在 App 里接删除时，还要补撤销或恢复，别把这段动画当成数据安全方案。

轮到你的按钮，怎么继续改

拿自己项目里最常用的一个按钮，把“在哪里用、点下去先做什么、多久结束、取消怎么办”填完整，再交给 AI。第一轮只检查状态，第二轮再调幅度和时长，会比一句“高级一点”省事。

示例参数用于练习。代码生成后，先按文中的操作逐项检查；换到原生 App，再用真机检查触摸和系统交互。

交互参考：林逸 AIGC 的按钮交互视频。提示词为本文独立编写，重置、失败重试和取消检查是我补充的实现要求。