AI 能生成界面，但质感藏在交互里：我的 6 点学习笔记

一、完成动作要有终态

第一个案例是完成反馈按钮。点击“完成”后，按钮收缩成圆形，对勾一笔画出，周围再迸发一小圈粒子。 它解决的不是“按钮不好看”，而是用户点完之后不知道事情有没有真正结束。

普通按钮常常只有按下变色，松手后又恢复原样，用户只能靠页面跳转来判断结果。 完成反馈则把“正在处理”和“已经成功”拆成两个清楚的状态：先让用户知道点击被接收，再用终态确认任务结束。

这个模式适合提交、确认、打卡、保存等短动作，但不适合长任务，更不适合付款、删除这类高风险操作。 实现时最重要的是状态机，而不是粒子：idle → pressing → loading → success / error 要完整，成功动画必须等真实请求成功之后播放，失败还要能回到可重试状态。 对动效敏感的用户，保留对勾和文字提示即可。

二、一个勾选，要让整页回应

第二个案例是勾选联动。勾掉一项待办，进度环同步增长，数字滚动更新，顶部背景也跟着变化。 一个很小的操作，让整个页面都给出了回应。

这背后其实是一个很朴素的产品问题：单项操作和整体进度经常是割裂的。 用户勾了一项，却不知道离完成还差多少；页面明明已经变化，却没有任何“我正在接近目标”的感觉。

但联动不能变成假进度。进度必须从同一份勾选数据派生，不能另外维护一个可能漂移的数字。 批量操作要合并刷新，乐观更新要能回滚。0%、部分完成、100% 三种状态都要检查， 读屏用户也应该能知道当前进度，而不是只看到一段动画。

三、内容多，不代表只能铺成长列表

第三个案例是叠卡展开。几张卡片层层叠放，点击后依次展开，再点一下又整齐收回。 它用很低的页面成本，表达了内容的层级。

长列表的问题不只是“长”，而是重点容易被淹没。用户看到很多条目，却不知道哪些是一组、 哪些是摘要、哪些可以继续展开。叠卡把“先看什么、再看什么”变成了空间关系。

不过，卡片不能用来藏关键信息。它更适合三到七张摘要卡、功能入口或步骤说明， 不适合需要并排比较的大量数据。实现时要明确当前展开的是哪一张，单开还是多开， 返回键是先收起卡片还是离开页面。动画可以做得漂亮，但状态和动画必须一致， 不能出现“看起来展开了、逻辑上却还是收起”的情况。

四、滑动要有落点

第四个案例是吸附卡加画线。上下滑动一组卡片，松手后自动吸附到中间； 卡片停稳之后，旁边的时间线再逐段绘制出来。

自由滚动最大的问题是缺少落点。用户滑到一半松手，卡片停在两个选项之间， 既不确定当前选中了什么，也不知道下一步该往哪走。 吸附把“浏览”变成了“选择”，时间线则把当前位置和整体结构连了起来。

这个模式适合步骤、日期、章节、方案等有序内容，但不适合强行拦截页面的主滚动。 快速甩动、第一项和最后一项、反向滑动，都要有明确行为。 画线也要等卡片停稳后再开始，用户一旦继续滑动，旧动画就应取消，否则线和卡会错位。

五、选择器要有手感，也要有准头

第五个案例是惯性滚轮。手指轻轻一滑，滚轮带着惯性旋转，逐渐减速后吸附到刻度； 滑过头时像橡皮筋一样回弹。

它比一格一格点选更自然，但“手感”不能以牺牲准确度为代价。 惯性太强，用户会反复滑过头；只显示动画位置，不明确最终值，用户又不知道自己到底选了什么。

所以这类控件要同时定义四件事：刻度间距、速度上限、吸附阈值、越界回弹。 手指抬起后不要立刻提交值，等滚轮真正停稳再确认。 触摸之外，还应该有点击、键盘或滚轮等替代路径；触觉反馈可以加分，但不能成为唯一反馈。

六、转场要交代“从哪里来”

第六个案例是圆形扩散转场。点击底部页签，新页面从手指按下的位置向外扩散，直到铺满屏幕。

页面直接替换并不是不能用，但它没有交代空间关系。 圆形扩散把“我点了这里，所以进入了这个页面”表达了出来，前后两屏因此显得连贯。

这种转场适合底部页签、卡片进入详情等有明确来源的导航，不适合每一次跳转都使用， 也不适合频繁返回的多层级页面。实现时要先把目标页面准备好，再播放扩散， 否则动画结束时会露出空白或布局跳动。 时长控制在三百到五百毫秒比较稳妥，并且要允许快速点击时跳过； 开启减少动态效果后，直接切换或淡入即可。

把方法带回开发流程

这 6 个案例让我最受用的一点，不是记住了六种效果，而是找到了一套检查顺序：

1. 先写状态，再写动画。用户做了什么、页面立即反馈什么、等待时显示什么、成功后停在哪里、失败后怎么恢复。
2. 按任务选模式。一屏最多选一两个真正解决问题的交互，不要把所有效果都堆上去。
3. 让动效服务于理解。动效只负责解释状态变化、保留空间关系或确认结果，不负责掩盖数据延迟。
4. 最后做压力测试。快速连点、反向滑动、第一项和最后一项、小屏、长文本、减弱动效、低端机，都是比截图更重要的验收项。

AI 可以很快生成一个“能用”的界面，但“好用”仍然需要人来定义节奏。 完成之后有没有回应，操作和整体有没有关系，内容展开有没有层次，滑动结束有没有落点， 选择之后有没有准头，页面切换有没有来源——这些细节加在一起，才是产品的质感。

参考来源

• 视频：《让AI做的App和小程序更精致的6个交互》，作者“西瓜同学”，抖音，2026-10-21。
• 链接：https://www.douyin.com/video/7695339931123715366