数字化产品经理 · 表单交互重构

按钮灰掉了,
用户也走掉了。

AIAI.com 是聚合主流大模型的 AI 内容生产平台,面向海外用户提供视频、图片、音乐、音频等生成能力。Clarity 行为数据揭示了一个隐形漏斗杀手:灰显的提交按钮。这个 Case 记录我作为数字化产品经理,如何定位并修复它。

角色 · 数字化产品经理 平台 · AIAI.com Web 范围 · Image to Video 生成表单 方法 · Clarity 行为分析 / 专家评审 / 可用性测试
↓ 往下滚动,看完整决策过程
01

背景:生成表单,是所有能力的总入口

AIAI.com 聚合主流大模型服务商,把视频生成、图片生成、音乐音频、场景化应用(去水印、老照片修复、室内效果图等)装进同一个创作台。无论用户用哪种能力,最后一步都收敛到同一个动作:填写生成表单 → 点击 Generate。这张表单的表现,直接决定平台的商业漏斗。

多模型聚合MULTI-MODEL

接入 Veo、Sora、Nano Banana 等主流大模型,分析接口能力差异,按场景路由最优模型。

全模态生产ALL MODALITIES

视频、图片、音乐、音频、文字——所有 AI 生产能力共用同一套表单交互范式。

按次计费CREDITS

每次生成都消耗 Credits。表单每一次失败和放弃,都是真金白银的流失。

02

问题:灰显的按钮,成了隐形漏斗杀手

通过 Clarity 数据平台观察大量线上用户行为录像,我发现一个高频且刺眼的行为模式:用户疯狂点击灰显的 Generate 按钮——没有响应、再点、还是没有响应——最终放弃任务,跳离网站。流量获取成本很高,这个小细节在持续放血。

灰按钮 死点击

行为录像中的典型路径:上传图片 → 直接点击底部 Generate(按钮灰显)→ 无响应 → 快速连点 3~6 次 → 滚动寻找原因无果 → 关闭标签页。用户始终没意识到:还有必填项没填。

Clarity 会话回放:用户多次点击灰显的 Generate 按钮,04:02 处录得连续 rage clicks
Clarity 会话回放 · 证据 — 会话见解记录:用户从 Google 进入 Image to Video 页,多次点击 Generate 无响应,04:02 处出现连续 rage clicks,最终未生成即离开

根本原因ROOT CAUSE

「必填项未填 → 按钮灰显」是表单设计的默认规范。规范假设用户会先理解界面再操作——但这个假设在这里不成立。

用户心智MENTAL MODEL

流程简单、表单复杂、目标明确:用户没有耐心理解界面,直接操作,并预期系统立即给出结果。

商业损失IMPACT

每一次死点击都是一次付费意图的流失:任务失败 → 无生成结果 → 无 Credits 消耗 → 更无订阅转化。

03

设计策略:打破表单的默认模式

洞察到问题后,我立即组织专家评审,把表单交互彻底重构一遍,再用真实用户测试验证。核心思路只有一句话:不要在用户点击之前说教,在用户点击的瞬间给出引导。

策略 1

按钮始终激活ALWAYS-ACTIVE CTA

打破「必填未填 → 按钮灰显」的默认规范。按钮随时可点;点击时表单自动滚动并高亮聚焦第一个未填写的必填项——错误从「静默惩罚」变成「主动带路」。

策略 2

高级选项默认收起PROGRESSIVE DISCLOSURE

为主流用户而设计:视频比例、配音、时长、分辨率、Seed、Negative Prompt 全部收进 Advanced Settings,专业用户一键展开,普通用户完全无感。

策略 3

首尾帧开关END-FRAME TOGGLE

首尾帧默认仅展示首帧上传,通过 Add end frame 开关按需展开尾帧入口——少一个输入框,就少一分认知负担。

策略 4

只剩两个必填项2 REQUIRED FIELDS

表单简化为「首帧 + 提示语」。长表单变成短表单,进入用户熟悉的心智模式——就像注册登录:填两项,按钮永远亮着。

优化前:生成按钮灰显
优化前 · 必填未填,Generate 灰显无响应
优化后:按钮始终激活,高级选项收起
优化后 · 按钮始终激活,高级项收进 Advanced Settings
04

可用性测试:为三类用户分别验证

方案原型邀请真实用户测试。我们把被试按使用意图分成三类,验证同一个表单能否同时服务他们:

快速产出型

主流普通用户 · ~80%

“我只想快速把图片变成视频,越快越好。”

  • 不想看见高级参数
  • 希望默认值就是合理的
  • 期待「一键出片」
  • 典型产出:6 秒竖屏短视频

内容创作型

博主 / 创作者

“我希望视频符合特定的风格需求。”

  • 会认真修改 prompt
  • 会调分辨率和时长
  • 偶尔需要音频调整
  • 对结束帧、负向提示词理解较弱

专业调参型

测评 / 重度用户

“我需要可控性,精确复现每一个参数。”

  • 会用 Negative prompt
  • 会锁定 Seed 复现结果
  • 关注 Resolution 和 End frame
  • 对折叠项不抵触,能找到就行
设计结论:对 80% 的用户极简,对 20% 的专业用户可扩展。
05

原型:亲手点一点那个按钮

下面是 Image to Video 表单的可操作高保真原型。用顶部的开关在优化前(Before)和优化后(After)之间切换,亲手体验两种模式的差别。

试玩指南

1

先切到 Before:什么都不填,直接点 Generate——体验旧版灰按钮的「死点击」,右上角会计数。

2

切回 After:同样什么都不填,直接点 Generate——表单会自动滚动并高亮第一个未填的必填项。

3

点击上传框放入示例图,再点 Generate——高亮自动移动到 Prompt;点 Cyberpunk City 示例词一键填入。

4

展开 Advanced Settings 看专业参数(Resolution / Seed / Negative Prompt);两个必填项完成后点 Generate,等待出片。

当前为优化后:按钮始终激活,未填必填项时点击会自动滚动并高亮引导。

Image to Video

170 credits
G
Google Nano BananaGenerate Smarter, Faster, Lighter
›
Image * Add end frame
Upload image
Prompt * Translate to English
0/2000
Video Size Format
9:16›
Audio
Duration
4S 6S 8S
Advanced Settings ▾
Resolution
Seed
Negative Prompt
无效点击 ×0

Generating your video…
通常需要 30–60 秒

06

结果:按钮亮起来之后

新表单灰度上线后,对比旧版本的关键指标:

任务完成率
68%
41% 进入流程后成功出片的会话占比
+27 pt
平均任务时长
1'15"
3'40" 从进入页面到提交生成
−66%
订阅会员转化率
3.0%
2.1% 完成首次生成后 7 日内付费
+43%
提交按钮无效点击
−92%
基线 Clarity 录得的灰按钮死点击量
RAGE CLICK ↓

* 口径:任务完成率 = 进入生成流程后成功提交生成任务的会话占比;无效点击 = Clarity 记录的灰显状态按钮点击次数。灰度样本约 5 万会话,观察期 21 天,覆盖 Image to Video 主流程。