Atria.
CH · 02 · SOLUTION章节 · 02 · 解决方案

Eleven moves that change the product’s posture — and close every gap.
十一个 move,改变产品的「姿态」—— 并把每一个缺口都补上。

Each move names what the current product does, why it’s wrong, the change we made, and the reasoning behind it. The first three are strategic — they change what the product is for. The last four are quality — they make the strategic moves believable.
每一个 move(动作)都会写清楚:现在的产品是怎么做的、为什么 错、我们改成什么样、以及背后的理由。前三个是战略性的 —— 改变产品的定位。后四个是质量性的 —— 让前三个看起来可信。

How to read this chapter

The numbered moves are ordered by impact, not by implementation order. 01 and 02are architectural shifts; if we had time for nothing else, these two alone change the product’s posture from «analytics + image generator» to «AI copilot that picks the right kind of action». 03 follows directly from 02. 04–07 are quality refinements.

Every move is live in the interactive prototype. The Tweaks panel in the prototype’s bottom-right has demo shortcuts for each move.

这一章怎么读

11 个动作(move)是按「影响力」排序的,不是按「实现顺序」。01 和 02 是结构性的转变; 如果时间只够做两个,做完这两个就足以把产品从 「分析工具 + 图片生成器」变成「能挑对路径的 AI 副驾」。03 是 02 的自然延伸。04-07 是质量层面的打磨。08-11 是收尾 —— 把诊断章节剩下的 4 个 问题(C-2 / C-3 / A-4 / K-2)一并解决,达成全覆盖。

所有动作都能在 可交互原型 里跑一遍。原型右下角的 Tweaks(快捷调试)面板里,每个动作 都有一个演示快捷按钮,点一下就能直接跳到对应场景。

OVERVIEW · STRATEGIC + QUALITY MOVES全景 · 战略层 + 质量层
The eleven moves at a glance
十一个动作一图看懂
STRATEGIC · changes what the product is for
战略层 · 改变产品的定位
01 · Todo
Verbs on every row
每行带动词
02 · AI takes a side
One hero, not a menu
主推一条,不是菜单
03 · Kind dispatch
4 kinds of output
四种产出形态
QUALITY · makes the strategic moves believable
质量层 · 让战略层看起来可信
04 · +38% CTR
Real metric delta
预测涨幅
05 · Selection
Select to compare
选中即对比
06 · History
Badge as entry
徽标即入口
07 · Type scale
5-tier type ladder
5 档字号
CLOSING · the four leftover issues from problem framing
收尾 · 把诊断章节剩下的 4 个问题收掉
08 · Collapse (C-2)
One row, one AI entry
一行一个 AI 入口
09 · Views (C-3)
3 role presets
3 个角色预设
10 · Iteration history (K-2)
Sidebar entry + deep links
侧边栏入口 + 深链
11 · Real feedback (A-4)
Modal + named toast
弹窗 + 明确 Toast
In this chapter本章包含
01
Radar should be a todo list, not a list
Radar 应该是「待办清单」,不是「数据列表」
★★★★★02
AI takes a side instead of giving a menu
AI 应该有立场,不是给你一份菜单
★★★★★03
«Iterate» is a fake verb — different recs need different outputs
「Iterate」是个假动词 —— 不同建议应该产出不同形态
★★★★04
Replace «AI 87» with a real number the user can act on
把「AI 87」换成用户能据此投钱的真实数字
★★★05
Compare is a side effect of selection, not a separate mode
对比应该是「选中」的副作用,而不是一个独立模式
★★★06
«3 iterations» badge becomes an entry, not a dead end
「3 次迭代」徽标应该是一个入口,不是死胡同
★★07
Use one consistent type scale across all 5 screens
5 个屏幕用同一套字号体系
★★08
Collapse the redundant AI entry on each Radar row (C-2)
收掉 Radar 每一行的重复 AI 入口(C-2)
★★09
Role presets in place of «Customize columns» (C-3)
用「角色预设」代替「自定义列」(C-3)
★★10
Iteration history lives where the workflow started (K-2)
迭代产物落到「工作流开始的地方」(K-2)
★★★11
Feedback that actually changes something (A-4)
真的能改变模型的反馈机制(A-4)
★★★
01–03
Strategic — changes what the product is for.
战略层 —— 改变产品的定位。
04–07
Quality — makes the strategic moves believable.
质量层 —— 让战略层看起来可信。
08–11
Closing the rest — answers the four issues left over from problem framing.
收尾 —— 把诊断章节剩下的 4 个问题一并解决。
MOVE · 01★★★★★

Radar should be a todo list, not a list
Radar 应该是「待办清单」,不是「数据列表」

Today现状
Every row has a Recommendation tag (Iterate / Pause / Scale / Refresh) and an «AI Rec» button. To pause an ad, the user clicks the row, opens the drawer, finds the AI Rec tab, and reads a paragraph.
每一行有一个标签 —— Iterate(迭代生成新创意)/ Pause(暂停)/ Scale(扩量加预算)/ Refresh(换素材重出图)—— 还有一个独立的 「AI Rec(AI Recommendation,AI 建议)」按钮。用户想暂停一条 广告,得点行 → 抽屉滑出来 → 找到 AI Rec 标签页 → 读一段说明 —— 四步。
What's wrong哪里错了
The word «Recommendation» implies one action, but the four tags represent four totally different actions. Pause is a switch on Meta (synchronous, 2 seconds). Scale changes a budget (synchronous, 3 seconds). Iterate / Refresh trigger AI image gen (async, minute). Forcing all four through the same drawer is a 4-step path for what should be 1-step actions.
「Recommendation」这个词暗示「一种动作」,但 4 种标签其实是 4 种 完全不同的动作。Pause 是在 Meta 后台关一个开关 (同步,2 秒);Scale 是改一个预算数字(同步, 3 秒);Iterate / Refresh 触发 AI 出图 (异步,要等一分钟)。把这 4 种全塞进同一个抽屉,等于把本来 1 步的事变成 4 步。
The change改成什么样
Each row gets a «Next action» column. Iterate / Refresh → opens the drawer (still need AI judgment). Pause → inline confirm in the row, no drawer. Scale → inline +30% budget input. Winners (grade A, not yet marked Scale) → «Clone as a new test» button.
每一行尾部多一列「Next action(下一步动作)」。Iterate / Refresh → 还是开抽屉(需要 AI 判断)。Pause → 行内确认,不开抽屉。Scale → 行内 +30% 预算输入。Winners(A 级、还没标 Scale 的) → 「克隆做新测试」按钮。
Why this improves UX为什么这能提升体验
  • Clarity: the tag name is no longer decoration. «Pause» means Pause — what you read is what you can do.
    清晰度:标签名不再是装饰。「Pause」就是 Pause —— 你读到什么,就能直接做什么。
  • Actionability: synchronous actions go from 4 clicks to 1. For a strategist scanning 30+ ads per day, that’s ~90 saved clicks daily.
    可执行性:同步动作从 4 步压到 1 步。一个创意 策略师每天看 30+ 条广告,这就是每天省 90 次点击。
  • Treatment loop: the verbs come back to the surface of the dashboard. A dashboard’s value isn’t being read — it’s inviting immediate action.
    治疗闭环:动词回到了看板的表面。看板的价值不是「被读」, 是「让你立刻行动」。
MOVE · 02★★★★★

AI takes a side instead of giving a menu
AI 应该有立场,不是给你一份菜单

Today现状
Detail Drawer’s AI Recommendation tab shows a 5-row table with checkboxes. The user picks any combination and clicks Iterate.
Detail Drawer 的 AI Recommendation 标签页是一个 5 行表格,每行带 勾选框。用户自己挑要勾哪几个,再点 Iterate。
What's wrong哪里错了
This optimizes for batch exploration but kills decision speed. For a strategist who needs to decide quickly, showing 5 equal-weight options just pushes the strategic thinking back onto the user — exactly what Atria says it does for them.
这套设计是「让你随便挑组合」,但牺牲了决策速度。一个创意策略师 (Creative Strategist,Atria 的真实用户角色,负责给品牌做创意 投放决策的人)需要快速决定,把 5 条平等并列地摆出来,等于把 战略思考又推回给用户 —— 但 Atria 的卖点就是「帮你做战略决策」。
The change改成什么样
The drawer defaults to a hero recommendation (priority #1) — bigger, editorial, with a «Why this might work» explanation and one clear CTA. The other four sit collapsed under «+ 4 more moves». Expanding the collapse reveals the original checkbox table; batch mode stays as the advanced path.
抽屉打开时默认只显示一条主推建议(英文界面里叫 Hero,意思是「头条主推」)—— 优先级第 1 名,做得更大、更显眼, 配一段「为什么这样行得通」的解释和一个明显的主行动按钮(英文 界面里叫 CTA,Call to Action,就是广告里「立即购买」「了解 更多」这种召唤用户动手的按钮)。其余 4 条折叠在「+ 还有 4 个 动作可选」下面。展开后是原来的勾选表格,批量模式还在,只是从 默认变成进阶路径。
Why this improves UX为什么这能提升体验
  • Actionability: 80% of users follow the fast path — one look, one click. Median decision time drops from ~20s to ~5s.
    可执行性:80% 的用户走快路径 —— 看一眼,点一下。 中位决策时间从 ~20 秒降到 ~5 秒。
  • Clarity: Atria’s «think strategically» promise becomes visible in the UI. The AI is no longer giving you a menu — it’s telling you what to do.
    清晰度:Atria 「帮你做战略决策」这句承诺在界面上 立住了。AI 不再是给你一份菜单 —— 它在告诉你该做什么。
  • No trade-off lost: batch users still get batch mode. We just made it the advanced path instead of the default. This is a textbook «progressive disclosure» trade — show one thing first, reveal more on demand.
    没有牺牲掉批量场景:需要批量的用户还能用批量。 我们只是把它从默认变成进阶路径。这是个标准的「渐进披露」取舍 —— 默认显示一件事,需要时再展开看更多。
MOVE · 03★★★★☆

«Iterate» is a fake verb — different recs need different outputs
「Iterate」是个假动词 —— 不同建议应该产出不同形态

Today现状
No matter which of the 5 recommendations the user picks (Strengthen CTA / Optimize Audience / Reorder Clips / Test Split-Screen / Refresh Visual), clicking Iterate opens the same modal and generates the same 4 image variants.
不管用户选哪条建议 —— 不管是Strengthen CTA(强化行动按钮文案)、Optimize Audience(优化投放受众)、Reorder Clips(重新排序视频片段)、Test Split-Screen(测试分屏格式), 还是 Refresh Visual(换一套视觉风格)—— 点 Iterate(迭代生成)按钮都会打开同一个弹窗,生成同样的 4 张图片变体。
What's wrong哪里错了
Product logic error. «Optimize Audience» is about targeting on Meta — it has nothing to do with images. «Reorder Clips» is a video edit. «Test Split-Screen» genuinely needs image gen. Pushing all five through one image pipeline means three of them produce outputs that don’t answer the recommendation.
产品逻辑错位。「优化投放受众」是在 Meta 后台改受众设置 —— 跟图 根本无关,产出应该是「新的受众设置」而不是图片。「重新排序视频 片段」是视频剪辑动作,产出应该是新的视频或者剪辑 brief(给后期 剪辑师的工作说明)。只有「测试分屏格式」「换视觉风格」这两条 才是真正需要图片生成的场景。把 5 条全塞进图片生成管道,等于 3 条建议的产出根本回应不了建议本身。
The change改成什么样
Each recommendation carries an «action kind». Different kinds flow through different production paths:
  • image_gen → the existing modal + image variants
  • copy_overlay → 4 text variants with overlay typography (no new images)
  • targeting_change → diff card showing old vs new audience values, one-click «Apply to Meta»
  • video_edit → exports a brief for the post-production team
CTA copy adapts: «Generate 4 copy variants» / «Apply targeting change» / «Generate 4 images» / «Export brief».
每条建议都带一个「动作类型」标记(系统内部叫 action kind)。 不同类型走完全不同的生产路径,产出形态也不一样:
  • 换文案(copy_overlay,意思是 「在原图上换文字」)→ 生成 4 套不同写法的文案,不重新出图
  • 换图片(image_gen,意思是 「重新生成图片」)→ 原来的弹窗 + 4 张新图变体
  • 调受众(targeting_change,意思是 「改受众设置」)→ 一张对比卡:左边是原来的受众,右边是推荐 的新受众,点一下就能「应用到 Meta 投放后台」
  • 剪视频(video_edit,意思是 「重新剪一版视频」)→ 导出一份剪辑 brief(给后期剪辑师的 一页工作说明:要剪什么、节奏怎么改、用哪些片段)
每一种类型的主按钮(英文界面里叫 CTA)文案也跟着变 —— 写的就是 「点了它会发生什么」,不会再有「点了 Iterate 不知道出来啥」的 困惑:
换文案 → 「Generate 4 copy variants(生成 4 个文案版本)」
调受众 → 「Apply targeting change(应用受众调整)」
换图片 → 「Generate 4 images(生成 4 张图)」
剪视频 → 「Export brief(导出剪辑 brief)」
Why this improves UX为什么这能提升体验
  • Continuity: the output finally answers the question that was asked. No more «I clicked Optimize Audience, why am I looking at 4 pictures?»
    连贯性:产出终于能回应建议本身。不会再有「我点了 优化受众,为什么给我 4 张图?」这种困惑。
  • Clarity: the button text equals the output. The promise is honest before the user clicks.
    清晰度:按钮文案 = 实际产出。承诺在用户点击前就 是诚实的。
  • Strategic: the product looks like «AI that does different kinds of optimization», not «image generator wrapped in analytics». This also opens the door to video iteration (the future chapter expands on this).
    战略层:产品看起来变成「AI 能做不同种类的优化」, 而不是「图片生成器外面套了个分析工具」。这也为「视频版本迭代」 打开了门(下一章 Future 会展开)。
PART TWO · QUALITY MOVES第二部分 · 质量层
The first three moves change posture. The next four make that posture believable across every surface.
前三个 move 改变了姿态。接下来四个让这种姿态在每个屏幕上都显得可信。
MOVE · 04★★★☆☆

Replace «AI 87» with a real number the user can act on
把「AI 87」换成用户能据此投钱的真实数字

Today现状
Each variant card shows «AI 87» in the top-right corner — a black-box AI score from 0 to 100.
每张变体图片右上角显示「AI 87」—— 一个 0-100 的黑盒 AI 分数。
What's wrong哪里错了
A marketer about to put real budget on a variant asks: 87 of what? Is 87 better than 92? Below what number should I refuse it? The score looks smart but ducks every question it should answer.
要拿真钱往这条广告上投的营销人会问:87 是什么的 87?跟 92 差多少? 低于多少我就不该用?这个分数看着挺「智能」,但每个该回答的问题 都没回答。
The change改成什么样
Two changes:
  1. The chip becomes «+38% CTR · vs original» — a direct predicted lift on the metric the recommendation cares about. (CTR (Click-Through Rate · 点击率,即广告被点击的比例))
  2. Hovering shows a popover: confidence (low / medium / high), sample size («based on 18 similar creatives in your cohort»), and one-sentence «Why» («Lifestyle-bg variants in your cohort had +35–42% CTR over studio-white»).
两步:
  1. 分数改成 「+38% CTR · 对比原图」 —— 直接说 预测涨幅,而且对齐这条建议真正在意的指标。(CTR (Click-Through Rate · 点击率,广告被点击的比例))
  2. 鼠标悬停弹出小卡片:置信度(低 / 中 / 高, 意思是「AI 自己对这个预测有几成把握」)、样本量(「基于你账户里 18 条相似创意」)、一句话「为什么」(「你同类账户里『生活场景 背景』的变体比『纯白背景』高 35-42% CTR」)。
Why this improves UX为什么这能提升体验
  • Actionability: a number plugs into a budget decision. «+38% CTR» is operational; «AI 87» is theatrical.
    可执行性:这个数字能直接接上「该不该投钱」这个 决定。「+38% CTR」可以拿来计算,「AI 87」只能拿来看。
  • Honesty about AI: low-confidence variants explicitly show low. This is the central design responsibility for AI products — expose uncertainty. Users who lose trust once because of a hidden bad call never come back.
    对 AI 诚实:置信度低的变体明确显示「低」。这是 AI 产品最核心的设计责任 —— 把不确定性暴露出来。用户因为一次 隐藏的失误而失去信任,就永远不会回来了。
  • Feedback loop: every push-to-platform binds the prediction to outcome. 14 days later, real performance tunes the next prediction. The loop closes without the user lifting a finger.
    反馈闭环:每次「推回投放平台」都把「预测」和 「真实结果」绑定。14 天后,真实数据回流校准下一次预测。整个闭环 用户什么都不用做。
MOVE · 05★★★☆☆

Compare is a side effect of selection, not a separate mode
对比应该是「选中」的副作用,而不是一个独立模式

Today现状
Click «Side-by-side compare» → enter compare mode → tick 2-3 variants → view them side by side. Three steps + a mode switch.
先点「Side-by-side compare(并排对比)」按钮 → 进入「对比模式」 → 勾选 2-3 张变体 → 才能看到并排对比的画面。三步 + 一次模式 切换。
What's wrong哪里错了
The natural workflow is: notice two interesting variants → want to see them together. Mode-first puts the action before the motivation.
用户真实的工作流是:先看到两张觉得不错的 → 自然就想「把这两张 并起来对比」。把「进入对比模式」放在最前面,等于把动作放在动机 之前。
The change改成什么样
Variant cards are always selectable. 0 selected → default grid view. 1 selected → sticky bar at bottom: «Select 1 more to compare». 2-3 selected → a small bar above the grid says «Compare these N with original →»; clicking enters compare view. Exit compare returns to the grid; selection state is kept.
变体卡片永远是可勾选的。选 0 个 → 默认网格视图。选 1 个 → 底部出现一条常驻横条(英文界面里叫 sticky bar,「贴」在屏幕底部不随滚动消失):「再选 1 张就能对比」。选 2-3 个 → 网格上方出现一个小提示卡「跟原图对比 这 N 张 →」,点击就进入对比视图。退出对比回到网格,刚才的选中 状态保留。
Why this improves UX为什么这能提升体验
  • Less modal load: the user doesn’t need to declare «I’m entering compare mode now». Linear and Figma built their fluency on this — selection precedes mode.
    少一个心智负担:用户不需要先声明「我现在要进对比 模式」。Linear、Figma 都是靠这个建立流畅感的 —— 先选中,模式自然 从选中推断。
  • Fewer dead ends: users currently enter compare, find no use, and exit. The selection-first version absorbs that failure mode silently.
    少几个死胡同:现在的设计里,很多用户先进对比模式 发现没用又退出来,白浪费两步。先选中的版本静默吸收了这种失败。
  • Reusable elsewhere: the same selection semantics apply to multi-select retry / cancel on Tasks panel — one mental model, two surfaces.
    可以复用到别的地方:同样「选中即操作」的语义也能 用在 Tasks 面板的多选重试 / 取消 —— 一种心智模式,两个使用场景。
MOVE · 06★★☆☆☆

«3 iterations» badge becomes an entry, not a dead end
「3 次迭代」徽标应该是一个入口,不是死胡同

Today现状
Radar rows that have iteration history show a black «3 iterations» pill. Hovering does nothing. Clicking it does the same thing as clicking the row.
Radar 表格里,有迭代历史的行会显示一个黑色「3 iterations」徽标。 鼠标悬停没反应。点击的效果跟点行一样。
What's wrong哪里错了
This badge is the only visible trace of a treatment loop in the product — but clicking it leads nowhere. After 3 iterations the user doesn’t want a 4th — they want to see which past iteration is performing.
这个徽标是整个产品里唯一能看到「治疗闭环」的痕迹 —— 但点了什么 都没发生。做完 3 次迭代之后,用户不想做第 4 次了 —— 他想知道 过去 3 次哪一次跑得最好。
The change改成什么样
Hover → popover with 3 thumbnails and per-iteration status (PUSHED to platform / DRAFT / FAILED). Click → jump to a per-ad iteration history page (reuses the Variants page layout, but shows multiple groups of 4).
悬停 → 弹出小卡片,显示 3 次迭代的缩略图 + 每次 的状态(已推回投放 / 草稿 / 失败)。点击 → 跳到 这条广告的迭代历史页(复用 Variants 页面布局,但显示多组,每组 4 张)。
Why this improves UX为什么这能提升体验
  • Continuity: the loop closes visibly. The user feels they’re building up a library for the brand, not making one-off creative.
    连贯性:闭环被可视化了。用户感觉自己在为这个品牌 累积一个素材库,而不是在做一次性的创意。
  • PM retention: an ad that has been iterated 3 times is worth orders of magnitude more in product value than one that hasn’t. The badge should surface that value, not bury it.
    从 PM 角度看留存:一条广告被迭代过 3 次,跟一条 没迭代过的,产品价值差几个数量级。徽标应该把这个价值显性化, 而不是把它埋起来。
MOVE · 07★★☆☆☆

Use one consistent type scale across all 5 screens
5 个屏幕用同一套字号体系

Today现状
Radar header: 56px serif. Variants header: 44px. Drawer: 18px sans. Tasks panel: 20px serif. Modal: 22px serif. Five different sizes for «the most important text on this screen».
Radar 标题:56px 衬线体。Variants 标题:44px。抽屉:18px 无衬线。 Tasks 面板:20px 衬线。Modal:22px 衬线。5 个屏幕的「页面顶部 最重要的字」用了 5 个不同字号。
What's wrong哪里错了
These aren’t a ladder — they’re scattered steps. Editorial design’s power comes from a strict size scale. Break the scale once and the system reads as «trying but not systematic».
这不是一个阶梯 —— 这是散落的台阶。Editorial(报刊式)设计的力量 来自严格的字号体系。破坏一次,整个系统就开始像「努力但不系统」。
The change改成什么样
Enforce a five-tier ladder across all five surfaces:
  • Display 56 — screen entry (Radar, Variants)
  • H1 36 — drawer + modal entry
  • H2 22 — section title
  • Body 13 — paragraphs, table cells
  • Label 10 — monospace uppercase eyebrow
在 5 个屏幕严格执行 5 档字号:
  • Display 56px —— 屏幕入口大标题(Radar、Variants)
  • H1 36px —— 抽屉 + 弹窗的入口
  • H2 22px —— 段落标题
  • Body 13px —— 正文、表格
  • Label 10px —— 等宽字母大写的小标签
Why this improves UX为什么这能提升体验
  • Cognitive consistency: switching between surfaces no longer requires recalibrating «what’s big and important here». Same rhythm everywhere.
    认知一致性:在屏幕之间切换的时候,大脑不需要重新 校准「这屏什么字大什么字重要」。每个屏幕用同样的节奏。
  • Brand: editorial is a posture. Atria sits in a category of cold data tools (Linear, Vercel, Datadog); editorial gives it a PM-level differentiator — but only if it’s applied consistently.
    品牌:Editorial 是一种姿态。Atria 处在一堆冷峻的 数据工具里(Linear、Vercel、Datadog),Editorial 给它一个 PM 层面 的差异化 —— 但前提是要全站统一。
PART THREE · CLOSING THE REMAINING FOUR第三部分 · 把剩下 4 个问题收掉
The diagnosis chapter listed 10 issues; the first seven moves answered 6 of them. These four close C-2 / C-3 / A-4 / K-2 — finishing the coverage.
诊断章节列了 10 个问题,前 7 个 move 解决了其中 6 个。下面这 4 个 move 把剩下的 C-2 / C-3 / A-4 / K-2 全部收掉,完成全覆盖。
MOVE · 08★★☆☆☆

Collapse the redundant AI entry on each Radar row (C-2)
收掉 Radar 每一行的重复 AI 入口(C-2)

Today现状
Each row had two AI entry points: hovering the Recommendation pill showed a popup, and a separate «AI Recommendation» button on the same row opened the full detail. Same row, two ways in, two different surfaces.
每一行原本有两个 AI 入口:鼠标悬停 Recommendation 标签会弹出一个 小气泡,同行还有一个独立的「AI Recommendation」按钮点进详情。同一行, 两个入口,两种界面 —— 用户得猜哪个给得多。
What's wrong哪里错了
Two clickable elements that promise «AI insights» but in different shapes and depths. New users guess which to use. Both are decoration without commitment to a verb.
两个看起来都「能给 AI 洞察」的可点元素,形状和深度都不一样。 新用户得猜该用哪个。两个都是装饰,没有承诺任何具体动作。
The change改成什么样
Diagnosis pill is now a calm, low-contrast label (not a button). It carries one signal — what kind of recommendation this is — and a ✦ glyph for AI-driven verbs only (Iterate / Refresh). The Next-action column is the sole place where AI actions live. Click row to diagnose; click the verb to act. One row, one AI surface.
诊断标签(Diagnosis)现在变成低对比度的纯信息标签(不是按钮,点不动)。它只承担一种信号 —— 这条建议是哪一类。 然后在「需要 AI 介入」的动作按钮上加一个 ✦ AI 标记(只标在 Iterate / Refresh 这两个动作上,Pause / Scale 不标因为它们不调 AI)。最右边的「Next action(下一步动作)」列 是整张表里唯一放 AI 动作的地方。点行 → 看诊断; 点动作按钮 → 直接做 —— 一行一个 AI 入口。
Why this improves UX为什么这能提升体验
  • Clarity: there’s no longer «which one do I click». New users see one signal (the label) and one button (the verb).
    清晰度:不再有「我该点哪一个?」新用户看到一个 诊断标签(读)和一个动作按钮(做)。
  • Information vs. action: the visual treatment makes the distinction obvious — gray pill = read; orange verb = do. No cognitive overlap.
    信息 vs 动作:视觉上把两者拉开 —— 灰色诊断标签 = 读,橙色动作按钮 = 做。没有认知重叠。
  • Trade-off: power users who relied on the popup tooltip now have to open the drawer for context. We think that’s cheap — drawer opens in 200ms over Radar, doesn’t break the scan.
    取舍:之前靠悬停那个小气泡(tooltip,鼠标停在 元素上时弹出的悬浮提示)看上下文的资深用户,现在得开抽屉。我们 认为这个代价不大 —— 抽屉 200ms 滑出,Radar 还在背景里,不打断 扫表。
MOVE · 09★★☆☆☆

Role presets in place of «Customize columns» (C-3)
用「角色预设」代替「自定义列」(C-3)

Today现状
The table’s primary view control was Customize columns — the user could add or remove individual columns. This implies a data analyst persona that loves grids. But the named user is a Creative Strategist: they don’t want more columns; they want the right ones already on.
表格的主视图控件是Customize columns(自定义列) —— 让用户自己加减列。这暗示着用户是个喜欢拼数据网格的数据分析师。 但 Atria 真实用户是创意策略师,他们不要更多列, 他们要「最对的几列已经默认就在」。
What's wrong哪里错了
Customize is a power-user feature offered to a non-power user. Most users never touch it; the few who do, do it to remove what nobody asked for in the first place. It bloats the toolbar and signals «figure it out yourself».
Customize 是给资深用户的功能,却摆在所有人面前。大多数用户根本不会 点;真去点的人,是为了删掉「一开始就不该加上的列」。它占着工具栏的 位置,传递的信号是「自己想办法」。
The change改成什么样
The toolbar now leads with a segmented «View» switcher: Strategist · Analyst · Brand mgr. Three tuned column sets, one click to switch.
  • Strategist (default): Creative · Diagnosis · Grade · Sub-scores · ROAS · Next action
  • Analyst: + Spend
  • Brand mgr: + Cohort %, drops sub-scores
The full Customize control survives as a small gear icon — escape hatch, not the front door.
工具栏改成一个分段控件 「View(视图)」切换器:Strategist(策略师) · Analyst(分析师) · Brand mgr(品牌经理)。3 套调好的列组合,一键切换。
  • Strategist(默认):Creative · Diagnosis · Grade · 子评分 · ROAS · Next action
  • Analyst:多一列 Spend(花费)
  • Brand mgr:多一列 Cohort %(同类占比),去掉 子评分
完整的「自定义」功能降级为一个小齿轮图标 —— 兜底入口,不是正门。
Why this improves UX为什么这能提升体验
  • Right tool for the named user: the default view is tuned for the user we actually have, not the user we imagined.
    给对的人用对的工具:默认视图是为「真实用户」调的, 不是为「想象中的用户」调的。
  • Discoverable variation: Analyst / Brand mgr know their view is there in one glance — they don’t need to know which columns to add.
    可发现的变化:分析师 / 品牌经理一眼就知道自己的 视图在哪儿 —— 不需要去思考「我该加哪些列」。
  • Escape hatch preserved: the gear icon survives for the 1% who really want column-by-column control.
    保留逃生口:齿轮图标还在,留给那 1%「真的想逐列 控制」的用户。
MOVE · 10★★★☆☆

Iteration history lives where the workflow started (K-2)
迭代产物落到「工作流开始的地方」(K-2)

Today现状
After Iterate, the generated images landed in Creation > Image Ads: a different sidebar subtree, mixed with unrelated generation tools (Clone-S, IT-RID). The treatment loop never closed visually — the user started in Analytics > Radar and ended somewhere else.
Iterate 之后,生成的图落到了 Creation > Image Ads:一个完全不同的侧边栏 分组,跟不相关的生成工具(Clone-S、IT-RID)混在一起。整个 「发现 → 治疗」的闭环在视觉上从来没合上 —— 用户从 Analytics > Radar 出发,最后却落在别的地方。
What's wrong哪里错了
The work and the workflow live in different houses. Returning users don’t know which sidebar entry to click to find «my Radar iterations». Even when they do find them, the listing mixes their Radar-triggered work with standalone Clone-S projects.
工作和工作流住在不同的房子里。回访用户不知道该点哪个侧边栏入口 去找「我从 Radar 触发的那些迭代」。就算找到了,列表里还混着用户 独立发起的 Clone-S 项目。
The change改成什么样
Sidebar gains a new entry directly under Analytics: Iteration history. It groups every completed iteration by source ad, with a clear «From Radar · {ad code}» breadcrumb at the top of each card. Tasks panel deep-links here on click. Creation > Image Ads stays as the home for standalone generation projects — but iterations born in Radar live in Radar’s subtree.
侧边栏在 Analytics(分析)子树下新增一个入口:Iteration history(迭代历史)。它把所有已完成的 迭代按「源广告」分组,每张卡顶部都有清晰的路径标注「From Radar · {广告编号}」(像浏览器顶部那种「你现在在哪 → 来自哪儿」 的路径提示,英文界面里叫 breadcrumb,面包屑)。Tasks 面板点击 已完成任务也直接跳到这里。Creation > Image Ads(创意生成 > 图片广告)继续作为「独立发起的生成项目」的家 —— 但从 Radar 触发的迭代,留在 Radar 的子树下。
Why this improves UX为什么这能提升体验
  • Continuity: the discovery surface and the result surface live in the same place. Returning users know exactly where to look.
    连贯性:发现广告问题的地方,和看到迭代结果的 地方,住在同一个子树下。回访用户清楚地知道该去哪儿找。
  • Information architecture honesty: «output of Radar» belongs under Radar, not in Creation. The IA reflects what users actually did.
    信息架构诚实:「Radar 的产物」属于 Radar 子树, 不属于 Creation 子树。整个产品的菜单结构(英文叫 IA,Information Architecture,信息架构)应该反映用户真正做了什么,而不是按 「这个功能背后是哪个工程模块」分组。
  • No duplication: the page reuses the Variants layout for each task — no new visual vocabulary to learn.
    没有重复造轮子:每个已完成任务的展示界面, 复用了 Variants(变体)页的布局 —— 用户不用学新的视觉语言。
MOVE · 11★★★☆☆

Feedback that actually changes something (A-4)
真的能改变模型的反馈机制(A-4)

Today现状
Atria had a thumbs-up / thumbs-down at the bottom of detail pages. Click «not helpful» and… nothing changes. The next time the user opens Atria, the same recommendation comes back unchanged.
Atria 之前的设计是详情页底部一个赞/踩按钮。点了「没用」之后…… 什么都不会变。下次再打开 Atria,同样的建议照样原样推荐。
What's wrong哪里错了
Feedback widgets that look like buttons but go nowhere are worse than no feedback at all. They train users to ignore feedback affordances on every product they touch afterward.
长得像按钮、点了什么都不会变的反馈控件,比没有反馈还糟。它教用户 在之后用任何产品时都忽略反馈入口。
The change改成什么样
Hero recommendation card has two clear options at the bottom: Useful · Not for me.
  • Useful → inline acknowledgement + toast: «We will surface more like this for {brand}.»
  • Not for me → opens a Modal: four structured reasons (off-target persona / bad example / wrong metric / already tested) + optional free text. Submit closes the Modal, fires a toast that names the specific recommendation de-prioritized and the ad cluster scope.
Both branches name what changed — the user sees their click move the needle.
主推建议(英文叫 Hero)卡片底部有两个清晰选项:Useful(有用) · Not for me (不适合我)。
  • Useful → 行内出现一个确认勾,然后右下角弹出 一条小提示条(英文界面里叫 Toast,像吐司一样从底部「弹」 出来,几秒后自动消失):「会给 {品牌} 多推送这类建议」。
  • Not for me → 打开一个弹窗(英文叫 Modal, 意思是「会盖住背景、必须先处理掉才能继续操作」的浮层): 4 个结构化原因(用户画像不匹配 / 示例不好 / 指标对不上 / 已经试过了)+ 一个可选的自由填写框。提交后弹窗关闭,右下角 弹出一条 Toast,明确告诉你:「会给 {品牌缩写} 同类型 广告的同类建议降权(下次少出现)」。
两条分支都明确告诉用户「点完之后改变了什么」—— 用户看得见自己 的点击在推动模型。
Why this improves UX为什么这能提升体验
  • Reciprocity: the user gives something (an opinion), the system gives something back (a named consequence). Feedback widgets earn their place in the UI when they have consequences.
    有来有往:用户给出一个观点,系统给回一个明确的 后果。反馈控件得有后果才配占着 UI 的位置。
  • Structured input: free text alone is hard to process at scale. Four reasons + optional text strikes a balance — the model gets structured signal, the user can still elaborate.
    结构化输入:纯自由文本在规模上很难处理。4 个原因 + 可选自由文本,在「模型拿到结构化信号」和「用户还能补充细节」 之间找到了平衡。
  • Modal + Toast: the modal is where the user pays attention; the toast is where the system pays attention back. The modal closes when work is done; the toast persists 4.5s so the user can read the consequence even after the modal is gone.
    Modal + Toast:Modal 是用户给系统输入的地方; Toast 是系统反过来回应用户的地方。Modal 完成任务就关掉;Toast 持续 4.5 秒,让用户在 Modal 消失后还能读到后果。

Trade-offs we accepted

  1. Batch users have a slightly slower default path. Move 02 makes single-recommendation the default and batch the advanced path. Power users who genuinely run three moves at once now click one extra control. We think that’s the right side of the trade because most users aren’t power users.
  2. «Iterate» loses its meaning as a unified verb. Move 03 splits Iterate into four kinds. New users see four different CTA labels and may briefly wonder why. We accept this in exchange for not lying — clicking «Generate 4 images» for a targeting recommendation is more confusing in the long run.
  3. Variants are HTML-rendered fake ads, not real generated images. A pure-HTML/CSS «AdCreative» component renders each variant as a brand-coloured ad with a product shape, headline, sub-headline, and CTA pill — so reviewers can tell variants apart at a glance without us over-promising what real image gen would produce. Pulling stock photos and claiming they were AI-generated would have been more deceptive than editorial-style mock creative.
  4. Round-two scope is smaller, but real. Moves 08–11 (closing C-2 / C-3 / A-4 / K-2) shipped in the prototype but get less screen real estate per change. They are quieter — the goal is total coverage, not headline impact.
  5. Editorial type ladder over a literal Ant Design palette. The brief says «align with our current design system (Ant Design)». We took that as: stay in the same product family visually, but pick a posture that differentiates Atria from the dozen other dashboards Creative Strategists already use. The prototype inherits Ant’s component grammar (tables, drawers, modals, tabs, toasts, segmented controls, checkbox lists, popovers) but layers on a Source-Serif editorial display ladder + IBM Plex Sans / Mono body. The accent + semantic colors map cleanly to Ant tokens (orange ≈ volcano-6 / blue ≈ daybreak-6 / green ≈ polar-green-6 / red ≈ dust-red-6) and we ship 3 themes (Warm / Slate / Editorial) — the «Slate» theme is the closest 1:1 to a vanilla Ant aesthetic if reviewers prefer that. Trade-off: a stock Ant build would feel safer to ship but would lose the «AI copilot, not data tool» posture that Move 07 argues for.
  6. Full Figma file replaced with an interactive Next.js site. The brief allowed Figma Make / Claude Code / Cursor / Google AI Studio. We chose Claude Code so reviewers can actually click through the redesigned flow (Radar → Detail → Iterate → Variants → Push) end-to-end, rather than clicking through static Figma frames. Trade-off: no clean «single Figma file» artifact — annotations and rationale live in the bilingual /problem and /solution pages instead, and the prototype is the source of truth for any state question.

我们接受的取舍

  1. 批量用户的默认路径会慢一点。 Move 02 把「主推一条」做成了默认,把「批量勾选」做成了进阶路径。 真正会一次跑 3 条建议的资深用户现在需要多点一下「展开 更多」。我们认为这是值得的取舍 —— 因为绝大多数用户不是资深用户。
  2. 「Iterate」这个统一动词的语义被打散了。 Move 03 把 Iterate 拆成了 4 种产出。新用户看到 4 种不同的 CTA 文案可能会困惑一下。我们接受这一点,代价是不撒谎 —— 点「生成 4 张图」却拿到的是受众调整,长期来看更糟糕。
  3. 变体是 HTML 画的拟真广告,不是真实生成的图。 我们写了一个纯 HTML/CSS 的 AdCreative 组件 —— 用品牌色背景 + 产品色块 + 标题 + CTA 按钮把每个变体画成可识别的广告样子, 让评审一眼能区分,而不用对「AI 真实出图能做到什么」做过度承诺。 用素材库假装是 AI 生成的图反而比刊体感的 mock 创意更具误导性。
  4. 第二轮 4 个 move 的篇幅会比前 7 个小。 Move 08-11(解决 C-2 / C-3 / A-4 / K-2)在原型里已经实现, 但每个改动占的屏幕篇幅会小一些。它们是「安静」的 move —— 目标是完整覆盖,不是抢眼。
  5. 采用了刊体感字号体系,而不是照搬 Ant Design 的视觉调性。 作业要求里写明「需要对齐目前的设计系统(Ant Design)」。 我们的理解是:**保留同一个产品家族的组件语法**,但视觉 调性上让 Atria 跟创意策略师每天用的其他十几个数据看板 区分开。原型继承了 Ant 的组件语法(表格、抽屉、弹窗、tabs、 toast、分段控件、勾选列表、popover),但叠了一套 Source Serif 4 刊体大字号 + IBM Plex Sans / Mono 正文。 品牌色和语义色都能干净地对应到 Ant token(主橙 ≈ volcano-6 / 蓝 ≈ daybreak-6 / 绿 ≈ polar-green-6 / 红 ≈ dust-red-6),原型里还内建 3 套主题(Warm / Slate / Editorial)—— 评审如果偏好接近原版 Ant 的视觉,把右下角 用户菜单切到「Slate」就最接近。取舍:完全照 Ant 做会更稳 也更省时,但会丢掉 Move 07 论证的「AI 副驾,不是又一个 数据工具」的姿态。
  6. 没交 Figma 单文件,交了一个可交互的 Next.js 站点。 作业允许 Figma Make / Claude Code / Cursor / Google AI Studio。 我们选了 Claude Code,这样评审可以真的点一遍重 设计后的整条流程(Radar → 详情 → 迭代 → 变体 → 推回投放), 而不是只翻静态 Figma 帧。取舍:没有「单 Figma 文件」这个 干净的交付物 —— 标注和设计理由都写进了双语 /problem 和 /solution 页面里,任何状态问题都以原型为准。
← Problem问题See the user flow →查看用户流程 →