Google Flow UI/UX 深度研究报告

一、产品定位与生态系统

1.1 产品矩阵定位

Google Flow 是 Google Labs 旗下 labs.google/fx 创意工具套件的核心成员，与 ImageFX、MusicFX、Whisk 形成完整的 AI 创意生态：

工具 核心能力 底层模型
Flow AI 视频生成与叙事构建 Veo 2/3.1 + Imagen 4
ImageFX 文本到图像生成 Imagen 4
Whisk 图像混合与风格迁移 Imagen 4 × Veo 2
MusicFX AI 音乐生成 -

设计巧思：Flow 被定位为"化身讲故事高手"，强调的不只是单一视频生成，而是完整的叙事创作能力——这决定了其 UI 需要支持从单个片段到多场景叙事的完整工作流。

1.2 订阅分层体系与 UI 适配

Flow 的 UI 设计需要服务三个用户层级：

用户层级 月积分额度 功能范围
免费用户 100-180 积分 仅 Veo 3.1
Google AI Pro 1,000 积分 完整功能
Google AI Ultra 25,000 积分 优先访问实验功能

UI 体现：

  • 顶部用户头像旁显示 ULTRA 徽章，让高级用户有身份认同感
  • 模型选择器中对不同层级用户显示不同的可用选项
  • 积分即将耗尽时通过通知系统主动提醒

二、信息架构与导航系统

2.1 三层级 URL 结构

Flow 采用语义化 URL 设计，反映清晰的信息层级：

/fx/zh/tools/flow                           → 项目列表
/fx/zh/tools/flow/project/{project-id}      → 项目详情（片段库）
/fx/zh/tools/flow/project/{id}/scenes/{id}  → 场景构建器

设计考量：URL 结构直接映射到面包屑导航，用户可通过修改 URL 直接跳转，对高级用户友好。

2.2 面包屑导航的精妙设计

Flow > Jan 06 - 11:04 > Scenebuilder
      [可编辑按钮]     [状态指示]

交互细节：

  1. 项目名称可原地编辑：点击项目名旁的 edit 图标可直接修改，无需进入设置页
  2. Scenebuilder 作为状态而非层级：点击可在片段库和场景构建器间切换，是一种视图模式而非导航深度
  3. chevron_right 分隔符：采用右箭头而非斜杠，暗示可点击导航

2.3 双抽屉导航架构

页面包含两个独立的抽屉式导航区域，通过 F8 键可切换焦点：

region "抽屉式通知导航栏（使用 F8 键可切换容器）"

无障碍设计亮点：

  • 明确的 ARIA region 标签
  • 键盘快捷键提示直接写入 region 名称
  • 支持屏幕阅读器用户高效导航

三、核心交互模式深度解析

3.1 模式选择器（Combobox）的多维信息展示

底部输入区的模式选择器承载了大量信息：

[文生视频 ▼] [🔊 Veo 3.1 - Fast] [16:9] [⚙]
  模式切换    模型+音频状态    宽高比  高级设置

设计巧思：

  1. 模型选择器复合显示

    • volume_up 图标 + 模型名称组合，暗示该模型支持音频生成
    • 用户一眼就能识别 Veo 3 系列的音频能力

  2. 宽高比图标化

    • crop_16_9 直接显示当前比例，无需文字说明
    • 点击可在 16:9（横向）和 9:16（纵向）间切换

  3. 设置按钮（tune 图标）的收敛设计

    • 高级参数（如种子值、相机控制）收纳于此
    • 保持主界面简洁，同时满足专业用户需求

3.2 五种视频生成模式的渐进式复杂度

Flow 提供五种生成模式，设计上遵循"简单到复杂"的渐进原则：

模式 输入要求 适用场景 UI 复杂度
Text to Video 仅文本 快速原型 ★☆☆☆☆
Frames to Video (First) 首帧图片 + 文本 角色延续 ★★☆☆☆
Frames to Video (First + Last) 首尾帧 + 文本 过渡动画 ★★★☆☆
Ingredients to Video 多素材图片 + 文本 复杂合成 ★★★★☆
Create Image 文本（图片模式） 素材准备 ★★☆☆☆

交互设计要点：

  • 选择高级模式时，输入区自动展开图片上传区域
  • 支持拖拽图片到输入区
  • 图片缩略图显示，支持预览和删除

3.3 提示词扩展器（Expander）的创意辅助系统

展开 按钮（pen_spark 图标）提供 AI 辅助提示词优化：

功能设计：

  1. 预设扩展器：由 Flow TV 团队提供的专业提示词模板
  2. 自定义扩展器：用户可创建、保存、管理个人模板
  3. 实时预览：扩展后的提示词可编辑、重新生成

UI 流程：

输入简单描述 → 点击"展开" → 选择扩展器 → 预览结果 → 确认或继续编辑

设计洞察：这解决了"提示词工程门槛高"的痛点，让新用户也能获得专业级输出。

四、视频卡片系统的微交互设计

4.1 卡片状态机

每张视频卡片可能处于多种状态：

生成中（显示百分比进度）
     ↓
生成成功（显示完整操作）
     ↓
生成失败（显示错误原因 + 重试选项）

状态展示细节：

  • 进度百分比实时更新（如 "69%" → "78%" → "99%"）
  • 失败状态显示具体原因（如"此提示可能违反了我们关于生成知名人士相关内容的政策"）
  • 政策违规时提供直接的 FAQ 链接，而非笼统的错误提示

4.2 卡片翻转交互

flip_camera_android 图标触发卡片翻转动画：

正面：视频预览 + 播放控制 + 时长
背面：完整提示词 + 复制按钮 + 模型信息

设计意图：

  • 默认只显示视觉内容，保持界面干净
  • 提示词对于复用和学习很重要，但不需要常驻显示
  • 翻转动画提供空间感和信息层级

4.3 多功能操作栏的信息密度

每张卡片悬浮时显示完整操作栏：

[添加到场景] [收藏] [编辑] [下载] [全屏] [更多选项]
     ↓
   核心操作        辅助操作        溢出菜单

层级设计：

  1. 主要操作：添加到场景（工作流核心动作）
  2. 快速操作：收藏、下载（常用但非核心）
  3. 溢出菜单：删除、分享等低频操作

4.4 "重复使用提示"的巧妙复用模式

wrap_text 图标 + "重复使用提示"组合：

交互流程：

  1. 点击后提示词自动填入底部输入框
  2. 用户可微调后直接生成
  3. 支持跨项目复用（Flow TV 的 Reuse Prompt 功能）

设计价值：降低试错成本，鼓励迭代创作。

五、场景构建器（Scenebuilder）的专业编辑体验

5.1 时间轴控制的精细度

[播放/暂停] |====●=========| [全屏]
            ↑              ↑
         起点把手       终点把手
         
时间显示: 0:00 / 0:08

交互细节：

  • 起止把手：可拖动调整片段裁剪范围，tooltip 明确说明"拖动即可更改视频片段的开始/结束时间"
  • 进度条指针：精确定位到任意帧，支持保存当前帧为素材
  • 时间显示：当前位置 / 总时长，便于精确编辑

5.2 场景间添加逻辑

时间轴上的 add 按钮提供两种添加位置：

[+] 片段内添加（在当前片段后插入）
[+ 在最后一个片段之后添加片段]

触发操作类型：

  • Jump to...：生成与前片段无缝衔接的新场景
  • Extend...：延长当前片段的动作

5.3 移动端适配提示

"Scene Builder 尚不支持移动设备"
[前往"片段"]

设计考量：

  • 场景构建需要精细拖拽操作，移动端体验受限
  • 提供明确的替代方案（"前往片段"）而非简单报错
  • 体现了"优雅降级"的设计原则

六、素材管理的信息组织

6.1 双维度筛选系统

内容类型切换（互斥单选）：

[🎬 Videos] [🖼 Images]

视图模式切换（互斥单选）：

[舒适视图] [网格视图] [收藏视图]
 view_cozy   grid_on    favorite

设计分析：

  • 两组筛选器独立运作，可自由组合
  • 收藏视图作为"智能过滤器"而非视图模式，但 UI 上与视图切换并列，可能造成概念混淆

6.2 日期分组与空状态处理

素材按日期自动分组：

"2026年1月6日"

空状态提示：

"在提示框中输入内容即可开始"

设计要点：

  • 日期分组帮助用户回溯创作历史
  • 空状态引导用户进行下一步操作，而非仅展示空白

七、高级编辑功能的交互设计

7.1 物体插入/移除的区域绘制

用户可通过在画面上绘制矩形框来指定编辑区域：

To select where the object should appear or be removed from, draw a box on the image.

交互流程：

  1. 选择 Insert 或 Remove 模式
  2. 在预览帧上拖拽绘制矩形区域
  3. 输入描述（要添加/删除的物体）
  4. 生成编辑后的视频

7.2 相机控制的预设选项

Camera Position 和 Camera Motion 提供预设选项，无需用户描述复杂的镜头语言：

  • 相机位置：鸟瞰、正面、侧面等
  • 相机运动：推进、拉远、平移、跟拍等

设计价值：降低影视专业术语门槛，让非专业用户也能使用电影级镜头。

7.3 帧保存与素材复用循环

场景构建器暂停 → 保存当前帧 → 帧进入图片库 → 作为素材重复使用

设计精妙之处：

  • 形成闭环的素材生态
  • 解决 AI 视频"角色一致性"难题
  • 从输出中提取输入，迭代改进

八、Flow TV 的展示与灵感系统

8.1 频道化的内容组织

Flow TV 将示例作品组织为主题频道：

Doughmotion | Inaction Figures | Day Chasers | ...
  Veo 3 (With Audio) 标签表示使用的模型和功能

频道命名风格：

  • 使用双关语和创意命名（如"In-faux-mercial" = Infomercial 的戏仿）
  • 每个频道聚焦特定创作风格或主题

8.2 电视遥控器隐喻

Flow TV 采用电视遥控器的交互隐喻：

[All Channels] [Previous Clip] [Pause] [Next Clip] [Loop Channel] [Unmute] [Full Screen] [Share]

状态反馈设计：

  • Playing / Paused 状态文字提示
  • Muted / Unmuted 明确音频状态
  • Mixing 表示频道随机播放模式

8.3 提示词透明度与复用

每个视频都可查看完整提示词：

checkbox "Show additional data"  → 展开详细信息
link "Reuse Prompt"             → 一键复制到 Flow 工作区

设计理念：教学与创作工具合一，用户可从优秀作品中学习提示词技巧。

九、图片生成模式的独立体验

9.1 Nano Banana Pro 模型的品牌化

图片生成使用 🍌 Nano Banana Pro 模型：

button "🍌 Nano Banana Pro"

品牌设计分析：

  • 使用 emoji + 品牌名称，增加记忆点
  • "Nano Banana" 命名轻松有趣，降低技术门槛感
  • "Pro" 后缀暗示专业能力

9.2 迭代编辑工作流

生成图片 → 悬浮点击 Edit → 输入修改描述 → 生成变体

支持的编辑类型：

  • 风格调整
  • 元素添加/删除
  • 细节修改

十、ImageFX 的交互对比分析

10.1 输入区的差异化设计

ImageFX 独特元素：

  1. 内联样式芯片：35mm film | minimal | sketchy 等可点击标签
  2. 种子值锁定：lock_open_right 图标控制随机性
  3. "手气不错"按钮：casino 图标，随机生成灵感

10.2 设计语言的一致性

Flow 与 ImageFX 共享的设计元素：

  • 相同的 combobox 下拉样式
  • 一致的帮助按钮位置（help_outlined）
  • 统一的底部免责声明格式

十一、无障碍与国际化设计

11.1 ARIA 标签的完整实现

region "Notifications alt+T"
button "调整音量"
generic "拖动即可更改视频片段的开始时间"

无障碍设计要点：

  • 所有交互元素都有描述性标签
  • 复杂操作提供额外说明
  • 键盘快捷键在标签中明确标注

11.2 本地化的深度适配

  • 界面完全支持中文
  • 动态占位符本地化（"使用文本生成视频…"）
  • 错误信息本地化（"此提示可能违反了我们关于生成知名人士相关内容的政策"）

11.3 RTL（右到左）语言支持

语言选择器包含希伯来语、乌尔都语等 RTL 语言，表明界面支持双向文本布局。

十二、积分系统的透明化设计

12.1 积分成本可视化

模型选择器旁可查看每次生成的积分消耗：

模型 积分/次
Veo 2 - Fast 50
Veo 2 - Quality 100
Veo 3.1 - Fast 25-50
Veo 3.1 - Quality 100

12.2 积分状态的多触点提示

  1. 账户菜单：显示剩余积分
  2. 生成前：预估消耗
  3. 积分不足时：阻断提示 + 充值引导
  4. 月度刷新：通知系统提醒

十三、错误处理与引导设计

13.1 策略违规的温和处理

"此提示可能违反了我们关于生成知名人士相关内容的政策。请尝试使用其他提示或发送反馈。"
[政策] → 链接到 FAQ

设计特点：

  • 使用"可能"而非绝对否定
  • 提供具体的政策类型说明
  • 给出替代方案（修改提示）
  • 提供反馈入口（可能是误判）

13.2 生成失败的复用引导

失败的生成仍显示"重复使用提示"按钮，鼓励用户调整后重试。

十四、产品更新通知系统

14.1 新功能公告条

项目列表顶部的公告卡片：

heading "Nano Banana Pro Has Arrived!"
button "See it in action."
button [close]

设计细节：

  • 可关闭的横幅设计
  • 直接链接到功能演示
  • 不阻断主流程

14.2 ImageFX 的弹出公告

button "打开更新日志"
heading "Whisk 重磅登场：精确模式 + Veo 3 珠联璧合！"

跨产品推广设计：在 ImageFX 中推广 Whisk 新功能，促进产品矩阵的相互引流。

十五、设计系统总结

15.1 图标语言系统

Flow 使用 Google Material Icons 的一致图标集：

图标 语义 使用场景
videocam 视频内容 类型切换
image 图片内容 类型切换
favorite 收藏 卡片操作
edit 编辑 项目/卡片
delete 删除 项目管理
download 下载 导出
fullscreen 全屏 预览
volume_up 音量/音频 模型状态
tune 设置 高级选项
arrow_forward 提交/前进 生成按钮

15.2 颜色与视觉层级

基于深色背景的设计：

  • 主操作使用高对比度色彩
  • 状态指示器（如进度百分比）使用品牌色
  • 错误状态使用红色系

15.3 动效原则

  • 卡片翻转动画提供空间感
  • 进度百分比平滑过渡
  • 模式切换使用渐变而非跳变

十六、设计优化建议

16.1 可发现性提升

  1. 功能引导层：首次使用时增加交互式教程
  2. 快捷键速查表：在帮助中心提供完整的键盘快捷键列表
  3. 工具提示增强：悬浮按钮时显示操作说明

16.2 效率优化

  1. 批量操作：支持多选卡片进行批量删除/收藏
  2. 拖拽排序：在项目列表支持拖拽调整顺序
  3. 历史版本：保存提示词修改历史，支持版本回退

16.3 专业功能扩展

  1. 关键帧编辑：更精细的时间轴控制
  2. 转场效果：场景间添加过渡效果
  3. 多轨时间轴：支持音频轨道独立编辑

16.4 协作功能

  1. 项目分享：生成可分享的预览链接
  2. 团队工作区：支持多人协作创作
  3. 评论系统：在时间轴特定位置添加批注

十七、结论

Google Flow 展现了 Google 在 AI 创意工具领域的深厚设计功底。从信息架构到微交互，从无障碍设计到国际化适配，Flow 在专业创作能力与易用性之间取得了精妙平衡。

核心设计哲学：

  1. 渐进式复杂度：从简单文本生成到复杂场景构建，用户可按需深入
  2. 迭代式创作：鼓励从输出中提取素材，形成创作闭环
  3. 透明化 AI：明确的积分成本、模型能力、政策边界
  4. 生态协同：与 ImageFX、Whisk 无缝衔接，构建完整创意流水线

Flow 的 UI/UX 设计值得同类产品学习借鉴，尤其是其在复杂功能与简洁界面间的平衡艺术。

报告生成时间：2026年1月6日 研究对象：Google Flow (labs.google/fx/tools/flow)