Atria.
CH · 03 · USER FLOW章节 · 03 · 用户流程

Before & after, on a single page.
原版 vs 重设计,放在 一页上对比。

Today’s flow assumes the user stays on screen for the duration of the work. The redesigned flow assumes they leave. Every red step on the left is a place the current product breaks; every green step on the right is a place the new design closes the gap.
原版的流程假设「用户会一直盯着屏幕等完事」。重设计的流程 假设「用户一定会离开」。左边每个红色的步骤是现在产品断裂的 地方;右边每个绿色的步骤是新设计把这个断裂补上的地方。

VISUAL FLOW · SIDE BY SIDE可视化流程 · 并排对比
Friction摩擦点
Carries forward顺畅
Today · 8 steps现状 · 8 步
click AI Rec btnsync wait → new tabclick Iterateif image adclick Generateasync — no ETA30 min laterRadar tableScan tabAI RecommendationSync waitAd DetailOpens in NEW TABIterate adsIf video → dead endAdd ContextBrand prereq blocksGenerateAsync, no progressUser leaves pageGeneration runs hiddenReturns laterNo global recall — dig via Creat…ion > Image AdsTODAY
«User leaves page» and «Returns later» exist but have no closing edge — the loop never comes back.
「用户离开页面」和「稍后回来」这两个节点存在,但中间没有连接线 —— 闭环永远合不上。
Redesigned · 11 steps + closing loop重设计 · 11 步 + 闭环
row verbopen drawersingle CTAif image / copyGeneratetask enqueuedlaterdirect deep-linkback to RadarRadar tableVerbs in rows: Pause / Scale / I…terate / RefreshInline actionPause / Scale fire inline + toas…tDetail DrawerSlides over Radar, no new tabHero recommendationAI takes a side. 4 more under co…llapseKind-aware CTAImage / Copy / Targeting / BriefAdd Context modalBrand prefilledTask → queueProgress bar + ETA in global Tas…ksUser leaves freelyTasks badge persists across page…sReturns: Tasks badgeClick task → direct to VariantsVariantsMetric delta, select-to-compare,… push-to-platformRadar row badge"3 iterations" closes the loopREDESIGNED
The loop closes through the global Tasks queue and the row-level «iterations» badge.
闭环通过两个东西合上:全局 Tasks 队列、和每行的「iterations(迭代次数)」徽标。
STEP-BY-STEP READING逐步对照阅读
STATE OF THE WORLD当前状态

Today.
原版。

Synchronous expectation, asynchronous reality.
界面假设同步,但现实是异步。
  1. 01
    entry
    入口
    Sidebar → Analytics → Radar
    侧边栏 → Analytics(分析)→ Radar
  2. 02
    table
    表格
    Scan «High iteration potential» tab
    扫描「High iteration potential(高潜力迭代)」标签页
  3. 03
    row click
    点击行
    Click AI Recommendation button → wait synchronously
    点 AI Recommendation 按钮 → 同步等待生成
  4. 04
    new tab
    新标签页
    Ad Detail opens in new tab
    广告详情在新浏览器标签页里打开
  5. 05
    drawer-less
    没有抽屉
    Browse Performance + Recommendations + check Iterate ads CTA
    看 Performance(表现)+ Recommendations(建议)+ 找 Iterate ads CTA
  6. 06
    iterate
    iterate
    Click Iterate ads → if video: disabled, dead end
    点 Iterate ads → 如果是视频:按钮灰掉,死路一条
  7. 07
    modal
    弹窗
    Add Context: bind brand (creates if missing → blocks)
    Add Context:绑定品牌(没建过的话强制创建 → 阻塞)
  8. 08
    wait
    等待
    Click Generate → async image gen, no progress shown
    点 Generate → 异步出图,没有进度提示
  9. 09
    leave
    离开
    User leaves browser to do something else
    用户切走去干别的
  10. 10
    lost
    迷失
    Returns later — no global Tasks entry. Must dig via Sidebar → Creation → Image Ads
    回来后 —— 没有全局任务列表。只能侧边栏 → Creation → Image Ads 翻找
  11. 11
    outcome
    产出
    Browse Variants grid with no compare, no score, no push action
    看一堆 Variants(变体),没有对比、没有评分、没有「推回投放」按钮
PROPOSED新设计

Redesigned.
重设计。

Asynchronous-aware, action-first.
按异步设计,动作优先。
  1. 01
    entry
    入口
    Sidebar → Analytics → Radar
    侧边栏 → Analytics(分析)→ Radar
  2. 02
    table-todo
    表格即待办
    Scan «High iteration potential» — every row shows its action as a verb
    扫「高潜力迭代」—— 每行直接显示「该做的动作」
  3. 03
    inline action
    行内动作
    Pause / Scale: confirm inline (1 click). Iterate / Refresh: open Drawer (still 1 click)
    Pause / Scale:行内确认(1 次点击)。Iterate / Refresh:开抽屉(也是 1 次点击)
  4. 04
    drawer
    抽屉
    Detail Drawer slides over Radar — Radar stays visible behind it
    详情抽屉从右滑出,覆盖在 Radar 上 —— Radar 还在背景里可见
  5. 05
    hero rec
    主推一条
    AI Rec drawer shows ONE hero recommendation by default. Four collapsed under «+ 4 more moves»
    抽屉默认只显示 1 条主推建议。其余 4 条折叠在「+ 4 more moves」下
  6. 06
    kind-aware CTA
    CTA 按类型变
    CTA copy adapts: «Generate 4 copy variants» / «Apply targeting» / «Generate 4 images» / «Export brief»
    按钮文案随建议类型变:「生成 4 个文案」/「应用受众调整」/「生成 4 张图」/「导出 brief」
  7. 07
    modal
    弹窗
    Add Context modal: brand prefilled. URL parser w/ manual fallback
    Add Context 弹窗:品牌已预填。URL 解析 + 解析失败可手输
  8. 08
    queued
    进队列
    Generate → task enters global Tasks queue with progress bar + ETA
    Generate → 任务进入全局 Tasks 队列,有进度条 + 预计剩余时间
  9. 09
    leave
    离开
    User leaves freely — toast + task badge persists across pages
    用户随便离开 —— 完成时弹 toast,Tasks 徽标在所有页面持续可见
  10. 10
    recall
    找回
    Returns → Tasks badge in header shows count. Click → direct link to Variants with source breadcrumb back to Radar row
    回来 → 顶部 Tasks 徽标显示数量。点 → 直接跳到 Variants,面包屑能回到原 Radar 行
  11. 11
    decide
    决策
    Variants: per-card metric delta (+38% CTR), confidence dots, select-to-compare, sticky push-to-platform
    Variants:每张卡显示预测涨幅(+38% CTR)、置信度小圆点、选中即对比、底部一键「推回投放」
  12. 12
    loop close
    闭环
    Back to Radar — row now shows «3 iterations» badge; hover → thumbnails; click → per-ad history
    回到 Radar —— 这一行现在显示「3 iterations(3 次迭代)」徽标;悬停看缩略图;点击看历史

What changed at the flow level

  1. Single drawer instead of new tab. Detail and AI Recommendation appear over Radar, with Radar visible behind. The user stays in scanning context.
  2. Row-level verbs.Pause / Scale don’t need the drawer at all. The drawer is reserved for kinds that need AI judgment (Iterate, Refresh).
  3. Tasks panel in the global header. Replaces the implicit «come back later and hunt» pattern with an explicit queue + recall path.
  4. Round-trip badges. Iterations show as badges on the Radar row, completing the treatment loop visually.
  5. Kind-aware production.The pipeline forks by recommendation kind, so the user’s output answers their recommendation.

What still happens off-screen

The actual async generation work, push to Meta / Google / TikTok ad managers, and the long-term feedback loop (real performance from published variants tuning the next prediction) live outside the take-home scope. We surface them in the Future chapter.

流程层面改动了什么

  1. 用一个抽屉代替新标签页。 详情和 AI 建议 都在 Radar 之上滑出,Radar 还在背景里。用户不会丢失「扫表」 的上下文。
  2. 动词回到每一行。 Pause / Scale 根本不需要 抽屉。抽屉只留给真正需要 AI 判断的动作(Iterate / Refresh)。
  3. 全局顶部加 Tasks 面板。 把「自己一会儿回来 翻」这种隐式模式换成「显式队列 + 找回路径」。
  4. 用徽标关闭闭环。 迭代过的广告在 Radar 行 显示徽标,从视觉上把「发现-治疗」的闭环合上。
  5. 按建议类型分发产出。 管道按建议类型分叉,保证用户拿到的产出能回应他选的建议。

没在屏幕上演示的部分

真实的异步生成、推送到 Meta / Google / TikTok 广告后台、以及 长期反馈闭环(真实投放数据回流校准下一次预测)—— 这些都不 在 take-home 的范围内。我们在 未来方向 一章详细写了。

← Solution方案Open the mockup →打开原型 →