How the redesigned Atria actually works.重设计后的 Atria 实际怎么用.
Who Atria is for
Primary user: creative strategists at ad agencies (also brand marketers). They run 50–200 ad variants per month per brand across Meta / Google / TikTok. ~80% of variants perform mediocre; the strategist’s job is finding which to pause, scale, or iterate — and generating new variants to test.
The pain: doing this manually means watching dashboards in three ad managers, writing briefs, waiting on designers, repeating. A full iteration cycle takes 5–10 days. Atria compresses that loop. The redesign makes the compression feel like one product, not three.
Atria 在帮谁解决什么
核心用户:广告代理公司的 creative strategist(也包括 品牌方 marketer)。他们每月给每个品牌跑 50-200 条广告变体,跨 Meta / Google / TikTok。其中约 80% 表现平庸,strategist 的工作就是找出该 pause / scale / iterate 的那些,并产出新变体继续测试。
真实的痛:手工做这件事 = 在三个投放后台之间切,写 brief,等设计师出图,反复。一个完整 iteration 周期 5-10 天。Atria 把 这条链路压缩进一个产品。重设计的目标是让压缩看起来像一个产品, 而不是三个工具拼一起。
Open Radar打开 Radar
Sidebar → Analytics → Radar. The redesigned table shows 15 active creatives across the last 14 days. Every row carries its own verb in the last column.
You scan top-down. Two rows catch your eye:
WARN-2K· grade A · Scale +30% (ROAS 3.5×, profitable)BREW-3S· grade B · Iterate (CTR decaying, narrative is fine)
左侧栏点 Analytics(分析)→ Radar。重设计后的表格 列出了过去 14 天 15 条活跃广告。每一行最右侧就是「该做什么」—— 不用再点进去看才知道。
你从上往下扫,两条吸引你注意:
WARN-2K· 评级 A 级 · 建议「Scale +30%(扩量 30%)」(ROAS 3.5×,意思是每花 1 块钱回 3.5 块,在赚钱,值得加预算)BREW-3S· 评级 B 级 · 建议「Iterate(迭代)」(CTR 也就是点击率在衰减, 但故事讲得没问题,不用换素材,改文案就行)
Scale inline (no detour)原地扩量(不绕路)
You click Scale +30% on the WARN-2K row. The cell turns into a confirm step in place. Click Confirm. Toast fires: «Scaled WARN-2K budget +30% · synced with Meta».
The row updates to ✓ Budget +30%and dims slightly. No drawer, no modal — Scale doesn’t need AI judgment, so it doesn’t pull you off the scan.
点 WARN-2K 行尾的 Scale +30% 按钮。这个格子原地变成 确认状态(不会跳出弹窗,不会打开新页面)。再点 Confirm(确认)。屏幕角落弹出一条小提示: 「WARN-2K 预算 +30% · 已同步到 Meta 广告后台」。
那一行更新成 ✓ Budget +30% 并稍微变灰(表示「这条已经 处理完了」)。这整个动作里 没有面板、没有弹窗 —— 因为扩量本身不需要 AI 判断,直接调一个预算数字就完事, 没必要把你从扫表的节奏里拉走。
Open Detail drawer for BREW-3S打开 BREW-3S 的详情面板
Click the BREW-3S row. A drawer slides in from the right at 60% width. Radar stays visible behind it — no new tab, no broken context.
The drawer leads with one hero recommendation, not a menu:
Strengthen Call-to-Action.Your CTA is “Learn more” (passive). Three top-performing ads in your cohort lead with imperatives: “Brew”, “Save”, “Try free”. Predicted +38% CTR · medium confidence (based on 18 similar creatives).
The chip on the CTA reads Generate 4 copy variants — not generic «iterate», because this rec is a copy_overlay kind, not image_gen.
点 BREW-3S 那一行。一个面板(drawer,从右侧滑出来的浮层) 以 60% 宽度从右边滑进来。Radar 的列表还在后面隐约可见 —— 不开新的浏览器标签页,你之前在看哪些广告这条信息没有丢。
面板顶部直接给出 一条主推的建议(不是让你从一堆里挑):
Strengthen Call-to-Action(强化「行动呼吁」)。 你现在用的 CTA(Call to Action,即广告底部「立即购买」「了解更多」 这类按钮文字)是「Learn more(了解更多)」—— 语气太被动了。在你这个 品牌的同类广告里,表现前三的都用更主动的动词:「Brew(冲一杯)」、 「Save(省钱)」、「Try free(免费试)」。AI 预测改完之后 CTR(点击率)能涨 38%,置信度 medium(中等)(这个预测是基于你账户里 18 条相似 创意算出来的)。
注意按钮上写的是 Generate 4 copy variants(生成 4 个 文案变体),不是泛泛的「Iterate(迭代)」。
为什么按钮文案这么具体? —— 因为重设计里每条建议都会标一个 「动作类型」。这条建议是「换文案」类型(内部叫 copy_overlay,意思是「在原图上换文字」),所以生成的 是 4 套不同写法的文案,不会重新出图。如果换成另一条建议比如 「换视觉风格」类型(内部叫 image_gen,意思是「重新 生成图片」),按钮文案就会变成「Generate 4 images(生成 4 张图)」。 按钮文案 = 它实际会做的事 —— 不会再有「点了 A 出来 B」的困惑。
Add Context modal「补充信息」弹窗
The modal opens. Brand profile (SATURNBIRD, warm orange, sans tagline) is already pre-filled from your workspace. The product URL parser already extracted a hero image and three product images.
You don’t change anything. Click Generate copy. The modal closes; a task enters the queue.
一个弹窗(modal,屏幕中央弹出来的对话框)打开了。「品牌档案」(brand profile,记录品牌名、主色、字体、 调性等)已经自动填好(SATURNBIRD、暖橙色、没有 slogan)—— 这些都是 上次在 Brands 页配置过的,这里直接复用。
系统还自动把你的产品页 URL 解析了一遍,抽出了 1 张主图 + 3 张 产品图给你选。
你什么都不改,直接点 Generate copy(生成文案)按钮。 弹窗关闭,一个生成任务进入「任务队列」(顶部 Tasks 面板里能看到)。
Leave the page离开页面
Generation takes ~60 seconds for copy variants. You don’t wait. You close the drawer and look at three other rows — pause one ad, scale another, queue another iteration.
The Tasks badge in the top right shows 3 running. You could close the laptop and come back later; the queue persists.
This is the entire point of the redesign. Today’s Atria assumes you stay on the page; the redesigned Atria assumes you leave.
文案变体的生成大约要 60 秒。但你不必等。 关掉那个面板,接着看另外三条广告 —— 一条点暂停(Pause)、 一条扩量(Scale +30%)、再给一条发起新的迭代。
右上角的「Tasks(任务)」徽标显示 3 个生成任务正在跑。 你甚至可以关电脑去吃午饭 —— 队列会保留下来,完成时系统会通知你。
这就是整个重设计的核心论点 —— 原版 Atria 假设「用户会一直盯着 屏幕等」,重设计假设「用户一定会切去做别的事」。前者会让用户 找不回自己刚发起的任务;后者从一开始就为「离开后再回来」设计。
Come back, pick variant回来选变体
A toast appears: «Copy variants ready for BREW-3S · Strengthen CTA». Click Tasks badge → completed list → click the BREW-3S task → land directly on the Variants page.
Four variants, each with a predicted lift chip:
Brew in 3 sec → Save 10 hrs/week— +42% CTR · high−30% TODAY ONLY— +31% CTR · medSave 10 Hrs/Week— +28% CTR · medGet Started— +19% CTR · low
You click the first two. A sticky bar at the bottom says 2 selected · Compare 2 with original →. Click. The three images render side by side. You pick the +42% one.
屏幕角落弹出一条提示(toast,几秒后自动消失的小条幅): 「BREW-3S 文案变体生成完毕 · Strengthen CTA」。点右上角的 Tasks 徽标 → 切到 Completed(已完成)→ 点 BREW-3S 那条任务 → 页面 直接跳到「变体页(Variants)」。
页面展示 4 张文案变体,每张右上角有一个预测涨幅 chip(小标签,告诉你 AI 估计这张能带来多少点击率提升):
Brew in 3 sec → Save 10 hrs/week—预测点击率 +42% · 置信度高−30% TODAY ONLY—预测点击率 +31% · 置信度中Save 10 Hrs/Week—预测点击率 +28% · 置信度中Get Started—预测点击率 +19% · 置信度低
你点中前两张。页面底部出现一条常驻横条(sticky bar,会一直黏在屏幕底部直到你做完事):「已选 2 张 · 跟原图对比 →」。点击。3 张并排 渲染(原图 + 选中的 2 张),让你直观对比。挑出 +42% 那一张。
Push + close the loop推回投放 + 闭环
Click Push to platform → Meta Ads Manager. Modal asks which ad set. Confirm. The variant is uploaded with a tag tying it back to its source recommendation.
Back on Radar: the BREW-3S row now shows a small 1 iterations → badge in its Recommendation cell. Hover to preview the variant; click to see history.
Total time: 19 minutes. Three ads touched (1 scaled, 1 iterated + variant pushed, 1 paused). In the old Atria (or the manual Ads Manager + designer workflow), the equivalent would have taken at least a day.
点 Push to platform → Meta Ads Manager(推回投放平台 → Meta 广告后台)。弹窗问你要投到哪一个广告组(ad set)。确认。 这张变体上传到 Meta,同时系统自动给它打了一个标签 —— 记住「这张是从哪条建议生成的」,方便 14 天后回看效果时归因。
切回 Radar:BREW-3S 这一行的「Diagnosis(诊断)」列里现在多了一个1 iterations →(1 次迭代)徽标。鼠标悬停可以看变体 缩略图,点击进入这条广告的完整迭代历史页。
总耗时:19 分钟。动了 3 条广告(1 条扩量、1 条 迭代 + 推回变体、1 条暂停)。在原版 Atria(或者纯手动用 Meta 广告 后台 + 找设计师出图的传统流程)里,做同样的事至少要一整天。
Iteration log · how the prototype got here
The seven steps above describe the redesigned product. What follows is the journal of changesthat landed between the first draft and the version you’re looking at — every fix is in response to a specific reviewer note.
Newest rounds first. Each entry has the same shape:symptom · fix · where to see it in /mockup.
迭代日志 · 这个原型是怎么走到这一步的
上面那 7 步说的是「重设计后的产品长什么样」。下面这一节是所有改动的流水账 —— 从第一版到你现在看到的这一版, 每一处改动都对应一条具体的评审反馈。
从最新一轮往前列。每条改动都按同一个结构写:现象 · 怎么改的 · 在 /mockup 哪儿能看到。
Round 9 · Browser-language default for first visit第 9 轮 · 首次访问按浏览器语言自动选语言
- First-visit language was always English regardless of who opened the page. Fixed in two places: (1) head bootstrap script in the prototype's «index.html» now reads «navigator.language» and sets «document.documentElement.lang» before React hydrates (zh-* → 中, anything else → en) — no FOUC. (2) The prototype's «getLang()» in «atoms.jsx» applies the same fallback when no localStorage value exists. After the user clicks the EN | 中 toggle once, their pick is written to «atria-proto-lang» and overrides the browser-language fallback forever. The Next.js docs site already had this behavior; this round closes the gap on the prototype side.首次访问之前永远默认英文,不管谁打开。两处都改了:(1) 原型的 «index.html» 头部引导脚本现在读 «navigator.language»,在 React 渲染之前就设好 «document.documentElement.lang»(zh-* → 中,其他 → en)—— 无 FOUC。(2) «atoms.jsx» 的 «getLang()» 在 localStorage 里没值时走同样的降级。用户只要点过一次 EN | 中 切换,选择就写进 «atria-proto-lang»,从此覆盖浏览器语言的降级。Next.js 文档站之前就有这逻辑;这一轮把原型端补齐。
Round 8 · Raya conversational panel + create-ad entry第 8 轮 · Raya 对话面板 + 创建广告入口
- Watched Atria's «Introducing Raya» product film (https://youtu.be/vjoD0jbUdgg) and grafted the conversational pattern onto the AI Playground. Top of Playground now hosts a Raya chat panel: greeting bubble → user input with associative suggestion chips that match what's being typed (8 contextual templates, regex-matched on summer / coffee / cart abandon / skincare / Black Friday etc.) → thinking dots → Raya reply listing the 4 things she'll do → 4 variant cards animate in with 120 ms stagger.看了 Atria 的「Introducing Raya」产品片(https://youtu.be/vjoD0jbUdgg),把对话式交互嫁接到 AI 实验场顶部。Raya 聊天面板:问候气泡 → 用户输入(下方实时浮现 8 套联想 chip,按正则匹配 summer / coffee / cart abandon / skincare / Black Friday 等)→ thinking dots → Raya 回复列出她要做的 4 件事 → 4 张变体卡以 120 毫秒 stagger 淡入。
- Added «+ Create ad creative» primary button to Radar and Overview headers. Click opens a modal asking «How do you want to create?» — Option A «Talk to Raya» (primary, with HOT badge) navigates to Playground with the input focused; Option B «Configure manually» jumps to Image Ads. Esc closes the modal.Radar 和 Overview 头部都加了「+ 创建广告创意」主按钮。点了弹 modal「怎么创建?」 —— 选项 A「跟 Raya 对话」(主推,带 HOT 徽标)跳到 Playground 并聚焦输入框;选项 B「手动配置」跳到 Image Ads。Esc 关闭。
- Created ads loop the user back to Radar with «just created» highlight. After pushing a variant to platform: new ad prepended to ads list with «_isRayaCreated» marker → Radar switches to «All ads» tab + clears filters + scrolls the row into view + applies a 3.2 s fading orange background glow + persistent «JUST CREATED · By Raya» pill in the diagnosis column + dashed «—» placeholders for grade / sub-scores (no data yet) + a single «View on Meta» action.推到平台之后用户被带回 Radar 并看到刚创建的广告高光:新广告 prepend 到 ads 列表带 «_isRayaCreated» 标记 → Radar 自动切「全部广告」tab + 清空筛选 + 把行滚到视口 + 3.2 秒淡出的橙色背景光 + 诊断列「刚刚创建 · Raya」橙色 pill + 评级 / 子评分显示虚线 «—»(还没数据)+ 动作列只有一个「在 Meta 查看」。
- Sidebar badge swap: dropped «NEW» from Iteration history (not new anymore); added pulsing «HOT» badge (red→orange gradient, 2.2 s breathing ring) on the renamed «AI Playground · Raya» entry. Onboarding tour got 2 new steps (06 «AI Playground — your sandbox» + 07 «The rest of the sidebar» with a labeled tour row for each entry) — and the modal widened from 520 px to 640 px. Onboarding key bumped to v2 so existing users see the updated tour once.侧栏徽标互换:「迭代历史」上的「NEW」去掉(不新了);改名后的「AI Playground · Raya」加了脉冲「HOT」徽标(红→橙渐变,2.2 秒呼吸光环)。新手引导加了 2 个新步骤(06「AI 实验场 —— 你的沙盒」+ 07「左边栏其他模块」,每个 sidebar 入口一行带 tour pill)—— 弹窗宽度也从 520 → 640 px。引导 key 升到 v2,老用户会自动重看一次。
Round 7 · Drawer scroll fix + flatten variants nav第 7 轮 · 详情页滚动 bug + 变体页导航去重
- Detail drawer was scrolling out of view — the Radar table bled through underneath when the user scrolled. The drawer was mounted inside «.content» (a scrollable container) and positioned absolute inside that scroll context, so it moved with the table. Fixed by hoisting the drawer up one level — it's now a sibling of «.content» inside «.app-main», positioned «absolute; top: 56px» so it locks below the topbar and can never scroll out. The topbar stays visible above; the sidebar stays visible at left.详情页之前能跟着 Radar 表格一起往下滑,下面表格就「漏」出来了。原因:drawer 挂在 «.content» 里(那是个可滚的容器),用 absolute inset:0 定位,结果跟着滚动内容一起走。改完后:把 drawer 提一级,挂到 «.app-main» 下,跟 «.content» 平级,«position: absolute; top: 56px» 锁在顶栏正下方,再也滚不掉。顶栏依然可见,左侧 sidebar 也露着。
- On the Variants page the «其他动作» list in the left sidebar AND the verbose «Move 02» stacked card below the main grid were doing the same job — letting you jump to another iteration on this ad. Removed both, replaced with one compact «这条广告上其他已完成的迭代 · N» navigator at the bottom. Each chip-style card shows the action_kind, the rec title, a one-line description, the completion time, and a «→». One canonical place to switch iterations.变体页之前同时有两个干同一件事的入口:左侧 sidebar 的「其他动作」按钮列表 + 主网格下方那张完整的「Move 02」叠加卡(带自己的 4 张变体)。都删了,替换成一个紧凑的「这条广告上其他已完成的迭代 · N」导航条 —— 每张小卡显示动作类型、rec 标题、一句话说明、完成时间 + 「→」。切换迭代只剩一个标准入口。
Round 6 · Detail → full-page + breadcrumb + small bugs第 6 轮 · 详情改全屏 + 面包屑 + 一堆小 bug
- Detail drawer (60% slide-from-right) → full-page detail. The drawer used to overlap the table edge — visually weird. Now the entire content area is the detail page; topbar stays visible above. Header has an explicit «← Back to Radar» button (the X icon alone was too easy to miss) + an «Ad detail · {code}» mono breadcrumb.详情抽屉(原来从右侧 60% 滑出)→ 整页详情。之前抽屉边缘跟表格重叠,视觉上很怪。现在整个内容区都是详情页,顶栏还在上面。头部多了一个显眼的「← 返回 Radar」按钮(原来只有 X 图标太容易漏)+「广告详情 · {code}」mono 面包屑。
- Clone-then-can’t-Scale fix. Earlier, clicking «Clone as new test» on a Winner row replaced the entire action area with a success badge, killing the «Scale +30%» button. Fixed: only the Clone slot shows the confirmation; Scale stays clickable side-by-side. Clone + Scale can be done in parallel.克隆完之后不能扩量的 bug 修了。之前在赢家行点「克隆做新测试」会把整个行尾动作区替换成一个成功提示,把 Scale +30% 也吃掉了。改完:只替换 Clone 那一格为「✓ 已克隆」小标记,Scale +30% 还在,继续能点。Clone + Scale 可以并行。
- «Why?» / «Diagnose» buttons now reliably land the drawer on the Performance tab. Added an «openSeq» counter that bumps on every openAd() call so the drawer’s useEffect re-fires even when the same ad + same tab are re-clicked. Primary verb (Iterate / Refresh) still lands on the AI Recommendation tab.「为什么?」和「诊断」按钮现在能稳定打开「投放表现」tab。加了一个 «openSeq» 计数器,每次调用 openAd() 就 +1,这样 drawer 的 useEffect 永远会重跑(即便同一条广告 + 同一个 tab 重点)。主按钮(迭代 / 换素材)依然落在「AI 建议」tab。
Round 5 · Playground variants action + custom prompt第 5 轮 · Playground 变体动作 + 自定义 prompt
- «Playground 里生成的能不能去投放?» — yes. Each variant card now has «Push to platform» (primary) + «Save» (secondary). Push fires a toast claiming the variant went live as a new test creative against the campaign. Save fires a toast saying it landed in the Image Ads library. Both have hover tooltips explaining where the variant ends up.「Playground 里生成的能不能去投放?」 —— 能。每张变体卡下面加了「推到投放平台」(主按钮)+「保存」(次按钮)。推到投放会弹 toast,说这条变体作为新测试创意上线到 Meta;保存会弹 toast,说存到「图片广告」库。两个按钮都有悬停 tooltip 解释去向。
- Custom prompt area got prompt-shape hints. Above the textarea: 4 example chips — «Coffee · Gen-Z · sustainability», «DTC tee · 35+ men · understated», etc. Clicking fills the textarea. Below textarea: a one-liner reminding the user a good prompt names 4 things — product · audience · tone · visual style.自定义 prompt 区加了「prompt 模板」提示。textarea 上面 4 个示例 chip:「咖啡 · Gen-Z · 环保」「DTC T恤 · 35+男 · 克制」之类,点一下就填进 textarea。下面一行小字提醒用户:好的 prompt 通常写清 4 件事 —— 产品 · 受众 · 语气 · 视觉风格。
- «Generate» button actually works now (was disabled before). Click → fake-wait 1.6s → drop 2 «mock-generated» variant cards under the prompt. Each card is tagged «YOUR PROMPT» (orange chip) so it’s distinguishable from the demo presets. Multiple runs stack: every Generate appends a new pair of cards above the previous ones, prompt text shown above each pair.「生成」按钮真的能跑了(之前是 disabled)。点一下 → 假等 1.6 秒 → 在 prompt 下面冒出 2 张「你的 prompt」变体卡。每张卡左上角有「你的 prompt」橙色标签,跟 demo 预设区分开。可以连点多次,每次产出 2 张追加在最上面,每对卡前面显示对应的 prompt 文本。
Round 4 · HTML ad creatives + algorithm popovers + breadcrumb第 4 轮 · HTML 真实广告创意 + 算法说明 + 面包屑
- Replaced the abstract striped + letter-chip placeholders with «AdCreative» — a pure-HTML/CSS rendered fake ad. Brand-colored gradient background, soft rotated «product shape», headline + sub in a glass-blur panel, CTA pill at bottom. Each of the 4 variant kinds (idx 0..3) gets a slightly different decorative treatment so they read as distinct creatives, not 4 identical squares.把以前的抽屉条纹+字母色块占位图,换成「AdCreative」—— 纯 HTML/CSS 画的拟真广告:品牌色渐变背景、稍微旋转的「产品色块」、玻璃磨砂面板里的标题+副标题、底部 CTA 胶囊按钮。4 种变体(idx 0..3)各自带略不同的装饰处理,4 张卡看起来真的是 4 个不同创意,不是 4 个一样的方块。
- «Grade» column ? popover got the full algorithm. Formula in mono: «score = 0.40·z(ROAS) + 0.25·z(HOOK) + 0.20·z(RET) + 0.15·z(CTR)». Explains z = (metric − cohort mean) / stdev. Mapping: A ≥ +1.0σ (top 10% / scale), B 0 to +1.0σ (top 25% / keep), C −1.0σ to 0 (iterate), D < −1.0σ (pause / rework). Industry refs at the bottom: Meta Quality / Engagement / Conversion Rate Ranking · Google Ads Quality Score · Motion / Pencil creative analytics.「评级」列的 ? 弹窗里写了完整算法。等宽字体公式:«score = 0.40·z(ROAS) + 0.25·z(HOOK) + 0.20·z(RET) + 0.15·z(CTR)»。解释 z =(本指标 − 同类均值) / 标准差。等级映射:A ≥ +1.0σ(前 10% · 加预算)、B 0 到 +1.0σ(前 25% · 维持)、C −1.0σ 到 0(迭代)、D < −1.0σ(暂停或重做)。底部列出行业参照:Meta 的 Quality / Engagement / Conversion Rate Ranking · Google Ads Quality Score · Motion / Pencil 的创意打分。
- «Sub-scores» ? popover split image vs video definitions. Image: ROAS = revenue ÷ spend (14d window); HOOK = % who didn’t scroll past first impression (cohort median ≈ 28–35%); RET = landing-page time ÷ cohort median; CTR = clicks ÷ impressions. Video: HOOK = 3-sec view rate (Meta standard); RET = avg watch time ÷ video length (50% completion common median); CTR / ROAS same as image.「子评分」? 弹窗里把图片广告 vs 视频广告的定义拆开写。图片:ROAS = 营收 ÷ 花费(14 天归因);HOOK = 首次展示没被划走的比例(同类中位数 ≈ 28-35%);RET = 落地页停留 ÷ 同类中位数;CTR = 点击 ÷ 曝光。视频:HOOK = 3 秒播放率(Meta 官方定义);RET = 平均观看时长 ÷ 视频总长(50% 完播是常见中位数);CTR / ROAS 跟图片一样。
- Topbar breadcrumb segments are now clickable on the Variants page. «Image Ads» segment → back to Radar list. «Iteration · CODE» segment → back to Radar with that ad’s drawer reopened (returning user to the «scene of the iteration»). Hover turns segments orange + underlined.顶栏面包屑在变体页变成可点的。「图片广告」段 → 回 Radar 列表。「迭代 · 广告编号」段 → 回 Radar 并自动打开那条广告的详情(把用户送回到「开始迭代时所在的那个场景」)。悬停时段变橙 + 下划线。
- Variants page: Compare button now lights up at 1 selected (used to need 2). Original is always part of the compare grid, so 1 variant + original is a valid comparison.变体页:「对比」按钮选 1 张就能用(以前要至少选 2 张)。原图永远是对比网格的一部分,1 张变体 + 原图就够对比了。
- Three buttons in the sticky variant bar got hover tooltips: «Compare with original (N)» explains what gets paired; «Download» explains it’s a demo (fires toast, no real file); «Push to ad platform» explains it goes live as a new ad set in the same campaign A/B-tested against the original.变体页底部 sticky 横条的 3 个按钮都加了悬停 tooltip:「与原图对比 (N)」解释会成对什么;「下载」明确说是 demo(只弹 toast,不真的存文件);「推回投放平台」解释会作为新广告组上到原来那个 campaign 跟原图做 A/B。
- Detail drawer’s «Overall · A–D» label got a ? icon mirroring the Radar header — same algorithm popover content, so users can see the formula without leaving the drawer.详情抽屉左侧的「总评级 · A-D」标签旁也加了 ? 图标,内容跟 Radar 列头的 ? 完全一致 —— 用户不用关掉抽屉就能看到完整算法。
- Recommendation titles in the «Other moves» / Tasks panel / Iteration history list now respect language. Added a global «localizedRecTitle(task)» helper that looks the rec up by recId and returns titleZh when the lang toggle is on 中.「其他动作」、Tasks 面板、迭代历史里的建议标题终于跟着语言走了。加了一个全局 «localizedRecTitle(task)» 帮手,按 recId 反查 rec 然后根据 lang 返回 titleZh 或 title。
Round 3 · Scoring, filter, winner highlight, onboarding第 3 轮 · 评分体系、筛选器、赢家高亮、首次引导
- Reorganised sub-scores layout. The old «ROAS D HOOK B RET D · CTR B» flow wrapped unpredictably (3 on line 1, 1 on line 2 — visually messy). Now it’s an even 2×2 grid with filled color chips for the letters, so all four metrics are scannable at once.「子评分」布局重做。原来「ROAS D HOOK B RET D · CTR B」会乱换行(3 个在第一行,1 个在第二行,视觉上很乱)。现在是齐整的 2×2 网格,字母用填色小块,一眼能看到 4 项。
- Filter button (used to be a dead button) → real client-side popover. Three filter groups: Grade (A/B/C/D), Ad format (Image/Video), Diagnosis (Iterate / Refresh / Pause / Scale / Video advisory). Multi-select, persists in component state, badges the Filter button with active count, «Clear all» at the bottom.「筛选」按钮(原来是个死按钮)→ 真的能用的前端筛选弹窗。3 组筛选:评级(A/B/C/D)、广告类型(图片 / 视频)、诊断类型(迭代 / 换素材 / 暂停 / 扩量 / 视频仅建议)。多选,组件 state 记忆,激活时按钮上挂数字徽标,底部有「全部清空」。
- Tab strip («★ Winners 2 · ▴ High iteration potential 5 · · Iteration candidates 8 · All ads») got its own ? help icon explaining how each bucket is derived (A → Winners, B → High potential, C+D → Candidates) AND what the recommended next move is in each bucket.tab 条上面那几个组(★ 赢家 · ▴ 迭代潜力大 · · 待迭代 · 全部广告)旁边也加了 ? 帮助图标。点开能看到每个组是怎么分出来的(A 是赢家、B 是潜力大、C+D 是待迭代),以及每组对应的「下一步该做什么」。
- Winners (Grade A rows) got a calm gold pulse animation on the grade chip + a thin gold left-edge stripe on the row. Action column now has «Clone as new test» (ghost) alongside «Scale +30%» (primary) — spin off a variant before the trend decays.「赢家」(Grade A)行的 Grade 色块加了一个柔和的金色脉冲动画 + 行首一条细金条。动作列除了「Scale +30%」(主)之外,多了一个「克隆做新测试」(次)—— 趁势还没退之前拷一个变体出去试。
- First-visit onboarding. 4-step coachmark modal that fires once per browser (localStorage flag): (1) what is this redesigned Radar; (2) how grading works; (3) verbs on every row; (4) where to find help. Esc / Skip / arrow keys navigate.首次进来有 4 步引导浮层(localStorage 记一次):(1) 什么是这个重设计后的 Radar;(2) 评级是怎么打的;(3) 每一行右侧的动词按钮怎么用;(4) 哪里能找到帮助。Esc / 跳过 / 方向键都能控制。
Round 2 · Full i18n across the prototype第 2 轮 · 原型全站中英文
- Added EN / 中 toggle in the topbar — localStorage-backed, FOUC-blocked via a head bootstrap script. All visible UI labels — sidebar, topbar, column headers, action buttons, tabs, modal labels, drawer headings, toast messages, tooltips — go through a useT() / t(en, zh) helper. App-level useLang() subscribes so the whole tree re-renders on switch.顶栏加了 EN / 中 切换 —— localStorage 记忆,head 里加了引导脚本防 FOUC。所有可见的 UI 标签 —— 侧边栏、顶栏、列头、动作按钮、tabs、弹窗标签、抽屉标题、toast、tooltip —— 都走 useT() / t(en, zh) 帮手。App 顶层调 useLang() 订阅,语言切换时整棵树重渲。
- Translated ALL prototype screens: Radar, Detail drawer, Add Context modal, Variants page, Tasks panel, Pulse, Playground, Image Ads, Overview, Brands, Iteration history, Feedback modal, Rationale drawer. Ad headlines + variant names + alert titles + rec titles all got *Zh fields in data.jsx so the «content» (not just chrome) switches language too.原型 13 个屏幕全部翻译:Radar、详情抽屉、Add Context 弹窗、变体页、任务面板、Pulse、AI 实验场、图片广告、总览、品牌列表、迭代历史、反馈弹窗、设计思路抽屉。广告 headline、变体名称、告警标题、建议标题都在 data.jsx 里加了 *Zh 字段,这样切换语言连「内容」也跟着变,不只是「外壳」。
- Rewrote all the Chinese-language docs (/usage, /mockup, /solution, /problem) to remove untranslated English jargon. Every English UI label that appears inline now comes with a Chinese explanation in parens; «copy_overlay» / «image_gen» / «targeting_change» get plain-Chinese names + a meaning gloss.把所有中文版文档(/usage、/mockup、/solution、/problem)重写了一遍,把里面没翻的英文术语都补上中文解释。每一个英文 UI 标签后面都跟一个中文括注;«copy_overlay» / «image_gen» / «targeting_change» 都给出中文名 + 一句话解释。
Round 1 · Original 7-move redesign + 4 closing moves第 1 轮 · 最初的 7 个动作 + 4 个收尾动作
- First draft of the redesign. The 11 «Moves» live in the /solution page and the prototype demonstrates all of them. Move 01–07 reframe the product’s posture: Radar = todo list (not list); AI takes a side, not a menu; one «Iterate» splits into 4 action kinds; AI 87 score → metric delta; compare from selection; iteration badge → entry; type ladder. Move 08–11 close diagnosed gaps C-2 / C-3 / K-2 / A-4.重设计第一版。11 个「Move」都写在 /solution 里,原型把它们都跑通了。Move 01-07 改变产品姿态:Radar = 待办清单(不是排行榜);AI 有立场,不是甩菜单;一个「Iterate」拆成 4 种产出形态;AI 87 黑盒分数 → 真实指标涨幅;对比是「选中」的副作用;迭代徽标成入口;字号阶梯。Move 08-11 收尾 C-2 / C-3 / K-2 / A-4 四个剩下的诊断问题。
TL;DR
The original Atria reads like “analytics tool + image generator stitched together” — the user has to be the director. The redesigned Atria reads like an AI copilot that picks the priority, dispatches each recommendation to the right kind of production, and keeps every task traceable from launch to push-to-platform. When the user comes back to Radar tomorrow, the loop is closed visibly.
Want to try the live version? Open the prototype (desktop only) and follow the same seven steps.
一句话总结
原版 Atria 读起来像「分析工具 + 出图工具拼凑而成」 —— 用户得自己当指挥。重设计后的 Atria 是个AI 副驾 —— 它替你做优先级、按建议类型分发到对的产出形式、把每个任务从发起到推 回投放平台都可追溯。明天用户回到 Radar,那个闭环是肉眼可见的。
想跑一遍现场版? 打开 prototype(桌面端),按上面 7 步走一遍。