Files
workbuddy_skills/oil-ui-pro/references/reviewer-manual.md
T
admin d9445b5888 oil-ui-pro 0.15.4 → 0.22.2(上游 ui.oiloil.org 正式包)+ 记 P0-98 跨盘 rename 坑
- oil-ui-pro 升到 0.22.2:references 13→28 份(新增 16、删 imagery.md)、assets 增 cards/(22 组)与 fonts/、SKILL.md 顶层五步结构未改名。
- 升级路径:官方 `npx github:oil-oil/oil-cli update` 稳定失败(error=replace、报「检查目录权限」)。
  真身为 EXDEV —— 解压在 os.tmpdir()(C 盘)、技能目录在 E 盘,Windows 上 rename 不能跨盘;
  CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed,真错误一个字不吐。
  做法=借其 prepare() 只做下载+校验,再 cp 到同盘 stage、rename 交换;官方命令复验 up_to_date。
- 回归:product-planning 按名引用的 visual-review.md/tools.md/design-direction.md/style-explorer.md 全部健在;命名闸门 2061|0|27。
- session-mechanism/references/pitfalls.md 新增 P0-98(含通则:更新器把原生错误兜底成指错方向的人话)。
2026-10-14 10:21:46 +08:00

9.9 KiB
Raw Blame History

视觉与交互评审手册 (子 Agent 专用)

本手册给独立评审者读。评审者没有参与制作,只根据主 Agent 交来的当前截图和约束评审;分数按第 1 节的锚点给,拿不准时取低一档。

只提供评审,不修改文件,不启动其他评审者。分清看得见的缺陷和个人的风格偏好;没有明显问题就直说,不为了凑数提修改。没看到、没法验证的内容要写明;只有静态截图时,不能声称动效或操作流程已经通过。

1. 全新界面与改版评审(打分制)

评审视角:拉高标准,以“该体裁里最顶尖的团队会怎么做”为标尺。

  1. 三秒测试(先于一切细节和流程):把首屏缩到 480px 宽(手机截图缩到 180px 宽)看三秒,再看遮字版三秒,写下两句话:它像哪一年的哪一类产品;第一眼看到的是什么,这样东西换到别的产品上是否同样成立。像若干年前的通用产品、组件库默认样式或素材库配图的,直接写出来,总分不超过 7 分;第一眼看到的东西放到别的产品上也成立,辨识度不及格。能用截图工具时,用它出缩略图和遮字图。
  2. 品类与标杆检验:一句话指出这属于什么品类(如 B 端后台、展览落地页),该品类里标杆产品在首屏怎么做。指出现有画面违背共识的地方,判断是有意的创新,还是套用了模型的默认模板。能找到时,拿一两张同品类顶尖产品的实际画面并排比,说清素材、材质和场景完成度差在哪里。
  3. 模型默认做法(扣分项):
    • 没来由的“左边大标题 + 右边说明/图片”的默认分栏。
    • 处处圆角卡片、每个层级都画线框(留白已分开的地方还要画线,让画面发碎)。
    • 单侧的彩色边线(如引文或当前项左边加个彩色条)。
    • 无来由的渐变、发光、表情符号图标 (Emoji)。
    • 空泛、晦涩的比喻式文案。
    • 配色是这个品类里最顺手的那一套:问自己,这套配色换到另外三个品类的产品上是否同样成立;成立,就是没有来由的安全色。交接里有方向卡的选色记录时对照着看。
    • 字体和素材显旧:把系统字体拉开字距当品牌字标或标题字,几种系统字体轮换着冒充不同品牌;全部品牌感只靠一个饱和纯色按钮;生成图是通用的素材库质感,看不出属于这个产品。
    • 主 Agent 附了截图工具的“默认做法提示”时,逐条看它是否仍在画面上。仍在、交接里又没写理由的,按本节扣分;写了理由的,判断理由是否来自这个产品。
    • 品牌字标挤占当前任务的空间:App 每屏左上角都放 Logo 加产品名,或品牌行下面再叠一行页面标题,扣分。网页的落地页、官网、文档站在左上角放标识不扣分;画面里的实物铭牌属于场景;主 Agent 在交接约束里写明品牌要求的不扣分。
  4. 动效检查(看动没动,不查证据齐不齐):按正常速度看录屏;录屏里看不清或没有时,自己打开页面操作一遍。只判断该动的地方动了没有:
    • 主操作有没有反馈,一处状态切换看不看得出来路,首次进入有没有出场。
    • 落地页、品牌页、发布页和展览页,再看两样:各区块是不是按自己的内容出场,全页统一淡入上移算没做;有没有至少一段主角随滚动发生明显变化的叙事,只有一个点沿线移动、节点逐个点亮算没做。
    • 小游戏、抽奖、计时养成这类产品,三处基本动效只是底线,再按 游玩 核对“过程即玩法”和“素材与渲染”。
    • 确实没做的写进问题。做了的,动得好不好放到“提升”的动效一项里评,不在这里展开。
    • 不逐帧拆录屏,不核对证据文件。录屏和截图对不上,或只在个别帧里看得到的瑕疵,以正常速度下看到的为准。只有静态截图、页面也打不开时,写一句“没看到动效”,不猜。
  5. 提升:精致度、设计感、动效:缺陷清零的页面常常只是及格。这三项逐项看,有看得见的差距才写,每条写位置、现在的水平、做到什么样算到位;某一项确实没有,写“没有”和依据。提升是把已有的东西做得更好,不是再加东西。第一条是“重做”时不写提升。
    • 精致度:放大到 200% 看,哪个组件或哪处排版最显粗糙:字距和行距、图标和文字的对齐、阴影和描边、各状态是否一致;再在 100% 看中文断行、孤字和数字格式。
    • 设计感:主角在 480px 缩略图里看不看得见、占多大;哪一处最接近品类最好水平,还差什么;哪一处仍是组件库默认的样子。处处及格却没有一处让人记住,写在这里,并指出最值得集中发力的一处。
    • 动效:不只看有没有。哪一处动得机械:匀速、各动各的、全页一律淡入上移、和操作接不上;哪一处最值得做出手感,让人想再操作一次或往回再滚一遍。手感用“动作 + 实物参照”写,不写形容词。
  6. 精简与瑕疵:
    • 填缝文字:为了把版面两端配平而塞进去的小字,例如听起来有诗意却不指向任何对象、动作或数据的短句,或写在界面上的设计说明。逐条点名,要求删掉。
    • 明确列出其他可以直接删掉的无用文字(如“示例”、“待核实”、“系统界面”)。
    • 除了文字,还要列出该删或该并的面板、数据和装饰:每一屏只有一个主角,多出来的点名。删完以后主角没有变大变强、画面只是变空的,同样算问题。

核对构图、字体、素材和交互是不是都在呼应设计北极星。工具、后台与内容浏览页面,说明首屏对象数量、第一排内容的位置和主动作与当前对象的距离,并和同类优秀产品比较密度。

参考作品是方向与质量基线,不要求照抄;精准还原任务以给定参考图为准。若有同类优秀作品截图,可与当前画面一起按完成度排序并说明差距。借用的媒介只是风格来源,不为了“更像”而增加无用部件。

输出要求:

  • 先写问题,再写提升。问题只写会阻断任务、读不清或明显是模型默认做法的,按影响从大到小排序,最多 5 条;提升最多 5 条,精致度、设计感、动效三项都要表态。每条写位置、观察证据、影响、修完要达到的结果和怎样验收。改法只写目标,不替制作方定构图,不规定要放多少对象、多少数据,也不建议用加功能、加数据量来换真实感;要求新增任何元素时,同一条里写明为它腾位置要删掉什么;更小的问题合成一句放在最后。主 Agent 会按这个顺序修改,下一轮也会拿这份清单逐条核对,所以每条要写到修完能看出来的程度。
  • 首屏骨架仍是模型默认模板,或主视觉远低于同品类水准,分数因此落在 6 分及以下时,第一条写“重做:……”,点名要重做的区块和原因,不再给这些区块列修补建议。在被否定的骨架上修补,只会把它修得更像样。
  • 倒数第二行写“保留:……”,点名一两处修改时不能磨掉的做法,通常是这个方向最有辨识度的地方。
  • 最后给出 1–10 分的总分。

分数按下面的锚点给,先看任务,再看视觉:会丢数据、走不通、骗用户“已成功”的问题,比任何视觉问题都优先扣分。任务全部走通也不等于 8 分,主视觉同样要过门槛。

分数 门槛
10 挑不出可观察的缺陷,至少一处是这个品类里没见过的好做法
9 主流程、异常状态、细节都成立,提升只剩小处;至少一处达到品类最好水平
8 方向鲜明,主流程走得通,没有阻断和数据丢失;页面有主视觉或关键素材的,达到同品类一线产品的完成度;缩到 480px 仍认得出是哪件作品;有若干中等问题
7 方向成立,但有一处会让用户丢数据、走错、卡住的问题,或首屏结构仍带明显的模型默认做法,或主视觉停在手画矢量、平面假透视、用文字代替造型的水平,或三秒测试里像某一年的某类通用产品
5–6 能看出方向,但骨架是模型默认模板,或主流程有多处卡住
1–4 主任务走不通,或画面有重叠、裁切、看不清这类基本错误

分数写在锚点上,给出“离下一档还差什么”,从精致度、设计感和动效里写,不写“再补一种状态”。

评分必须附具体差距,不同模型的数值不直接比较,用户判断优先。不猜不存在的文件与行号。

2. 存量已有界面润色评审(只对齐规范,不打分)

评审视角:不要想象你理想的风格,而是严格遵循该产品现有的设计规范(色板、间距)。

主 Agent 提供成文规范或从现有设计变量、共享组件与同类页面整理的现状规范,以及不能改动的品牌、字体、主色、组件库和导航。没有一致的现状时,以多数做法为准,少数做法记为待统一;规范本身有问题时单独列出,交给用户决定。

  1. 偏离规范检查:逐条指出当前画面哪里用了规范以外的颜色/字号/圆角,或者明明有现有组件却自己手搓了一个。
  2. 布局与结构:在规范范围内,指出最影响完成度的三处问题(层级、对齐、留白、减法)。
  3. 动效检查:这次改动涉及动效,或页面是落地页、品牌页、发布页和展览页时,同样按第 1 节的“动效检查”看一遍;确实没做的写成必须修改的问题。
  4. 输出要求:只提供客观修正建议,列出可删减的文字。不打分。不建议更换整体品牌色或字体。