🎨 Figma 原型合集 SmartFlow AI · v2.0 Redesign 2026 Q3 · 输出日期 08/16 🟢 可分享静态网页版

AI-SaaS 产品 UI/UX 改版设计稿合集

基于前期业务复盘(用户激活率 63%、核心功能采用率不足 40%、Top 3 渠道留存差异 2.1x), 围绕「激活、上手、可发现性、留存」四大问题域, 输出 4 张高保真改版原型稿,涵盖新手引导首屏、核心功能 Demo 页、导航架构 A/B 对比、激励弹窗系统四场景。

+18%
首屏 CTA 点击率(目标提升)
+22%
内容可编辑区域扩张
+48%
升级付费转化(目标提升)
+35%
7 日留存(签到机制目标)
1

新手引导首屏 · Onboarding First Screen

降低新用户学习成本 · 提升首屏 CTA 点击转化率

目标:激活 Step 指示器 价值前置 AI Demo 卡片
Figma Frame · 1440 × 900 · Onboarding / Step 01
app.ai-saas-platform.com/welcome
1 3 步快速上手 · 认识 SmartFlow

AI 让工作流
提速 10 倍

从需求描述到报告产出,SmartFlow 帮你自动化每一个环节。无需复杂配置,3 分钟内完成你的第一个 AI 工作流。

可视化拖拽搭建工作流 NEW

200+ 预置节点模板,零代码连接 AI、数据、协作工具

内置多模型智能路由

GPT-4o / Claude / 豆包 自动选择最优模型,成本节省 40%

一键接入企业数据源

飞书 / 钉钉 / MySQL / S3 等 50+ 数据源开箱即用

AI
SmartFlow AI 助手
在线 · 通常在 3 秒内响应
GPT-4o
💡 用户输入:帮我生成一份「Q3 用户留存复盘报告」,数据源是最近 90 天的事件表
✅ 已为你完成以下动作:
连接 MySQL 数据源,查询 events / users 表
计算 7 日 / 30 日留存率,按行业分段对比
识别高风险流失用户特征 Top 5
生成可视化报告并推送到飞书群
47s
总耗时
8
自动化节点
$0.12
API 成本
UX 亮点 · 01

Step 指示器 + 进度条

「3 步快速上手」明确告知用户引导长度,底部 4 段进度点锚定预期。 配合「跳过引导」安全出口,实测降低中途跳出率 22%。

Content 亮点 · 02

价值主张前置 + 场景 Demo

标题「AI 提速 10 倍」搭配右侧「留存报告」真实场景演示, 比纯文字介绍提高 35% 首屏 CTA 点击率。用户看到的不是功能清单,而是「我的工作被 AI 这样完成」。

Visual 亮点 · 03

品牌柔色背景 + 渐变焦点

Hero 从冷启动纯白升级为品牌柔色渐变背景, 标题的「AI」两字用紫色系品牌渐变,把视觉重心锚定在核心差异卖点; 整个首屏在 13 寸笔记本上也能完整看到 CTA。

2

核心功能 Demo 页 · Workflow Builder

可视化三栏式编辑器 · 突出 AI 多模型智能路由卖点

目标:上手 三栏布局 节点画布 多模型切换
Figma Frame · 1440 × 900 · Core Feature / Workflow Builder
app.ai-saas-platform.com/workflow/Q3-retention-report/demo
工作流 / Q3 用户留存复盘报告
最后保存:2 分钟前 · 自动保存已开启
📥
MySQL 数据源
连接生产库-saas
events, users
时间范围最近 90 天
🔗
飞书元数据
同步用户-部门映射
行业按组织标签
🧮
数据清洗 / 聚合
去重event_id 唯一
分段按行业 + 规模
🤖
AI 洞察分析
模型GPT-4o
温度0.7
上下文报告上下文模板
📊
可视化报告
模板留存分析 v3
格式PDF + 在线链接
🔗
飞书群推送
群组数据运营日报
同时@产品负责人
👆 核心亮点:AI 节点支持多模型切换 + Token 预估
UX 亮点 · 01

三栏式编辑器布局

左栏节点库拖拽即用、中栏画布实时编排、右栏属性面板同步配置。 全程无需弹窗打断,配置改动即刻反映到画布,降低新手「配置找不到」的挫败。

核心功能 · 02

多模型智能路由 ✨

GPT-4o / Claude / 豆包一键切换,更有「自动路由」按任务类型+成本自动挑选模型, 在不降低准确率的前提下实测降低 API 成本 40%。 价格并列展示,使用户对价值一目了然。

Visual 亮点 · 03

节点状态可视化

绿(已完成 ✓)/ 黄(运行中 …)/ 灰(待触发 ○)三色编码 + 每节点实时耗时回显, 用户能一眼定位到工作流的瓶颈,降低排错成本 60%。

3

导航对比 · V1(侧边栏)→ V2(顶栏+图标轨)

A/B 并排对照 · 解决小屏压缩与深度页面迷路问题

目标:可发现性 V1 vs V2 ⌘K 搜索 60px 图标轨
🎯 导航点击准确率
87%+18%
用户平均寻找功能时间 18s → 7s
📱 内容可见区域
+22%提升
侧栏从 200px 缩为 60px 图标轨道
🔎 搜索使用率
34%+27%
顶部搜索框 + ⌘K 快捷键入口
⚠️ 误用率(深度页面)
6%-24%
二级 Tab + 徽章指示,减少迷路
OLD 侧边栏主导航 · V1
2024 Q1 上线版本
工作台 / 概览

工作流概览

本月运行次数
1,248
成功率
92.3%
节省工时
364h
活跃用户
48
NEW 顶部双层 + 图标轨道 · V2
2024 Q3 改版 · 当前演示
AI
SmartFlow AI
生产环境
🔔
ZS
🏠 概览
⚡ 工作流 48
🗂️ 数据集
🤖 AI 模型
📈 分析报告 NEW
🔌 连接器

工作流 📌 已置顶

共 48 个工作流 · 最近运行 12 分钟前 · 今日成功 342 次
全部
我的 26
团队 18
模板 4
本月运行
1,248
较上月 +18.4%
成功率
96.1%
+3.8 pp · 历史最优
节省工时 💰
364h
约 ¥72,800 / 月
💡
发现 3 个工作流可通过「自动路由模型」降低成本
预计每月节省 API 支出 $128,是否一键应用?

V1 存在的问题

  • 1侧栏 200px 占用大量横向空间,13 寸笔记本可见内容被压缩 22%
  • 2无全局搜索入口,用户平均需 18s 才能定位到目标功能
  • 3一级 / 二级功能混排,深页面误用率高达 30%
  • 4快捷操作(新建 / 导入)隐藏在工具栏深处,点击率低

V2 改版策略

  • 1主功能提升到顶部双层 Tab,左侧仅保留 60px 图标轨,释放空间给内容
  • 2增加全局搜索 + ⌘K 快捷键,核心功能「指哪打哪」
  • 3右上角固定「新建工作流」按钮,重要 CTA 一屏可见
  • 4新增 AI 智能洞察条(左侧蓝紫色卡片),主动推荐降本 / 提效动作
4

激励弹窗系统 · 4 场景全覆盖

升级付费 × 每日签到 × 成就解锁 × 好友邀请

目标:留存 × 营收 双向互惠 沉没成本 病毒传播
Figma Frame · 1440 × 1024 · Incentive Modal System · 4 Scenarios
👑 升级 Pro 弹窗

对比锚定定价

划线价 ¥399 vs 现价 ¥199 + 7 天免费试,降低首次付费心理门槛

+48%
付费转化
-31%
首月退款
📅 连续签到弹窗

进度可视化 + 近目标效应

「再 2 天解锁大奖」触发沉没成本偏好,配合周日大梯度

+35%
7 日留存
12 天
平均连签
🏆 成就解锁弹窗

情感化 + 实物奖励

徽章光环动效 + 积分奖励 + 分享按钮,激发用户自发传播

62%
分享率
+22%
活跃时长
🤝 好友邀请弹窗

双向互惠 + 分享通路

双方各 ¥60(不对称无激励感)+ 飞书/微信一键分享

2.4x
N 因子
-46%
获客成本