界面精简
编辑界面,使其上的每个词和装饰都服务于正在使用它的人。AI 生成的界面往往有自我解释的倾向:标题上方有个眉标,标题下方有句话,按钮旁边有个提示。每个添加看似无害,但它们加在一起掩盖了用户真正需要的三个词。
目标是展现一个服务于用户的界面。它不是一个避免看起来像 AI 生成的界面。当规则与用户需求相悖时,两者之间的差异就变得重要:用户需求优先,并且要在报告中说明这一点。
目标: 用户指定的文件、文件夹或组件。如果用户未指定,则使用此对话中已更改的界面文件。如果没有则询问。
范围: 文案、操作、状态、虚构内容、装饰和图表。视觉效果(规则 X1 至 X4)仅在用户明确要求时(通过文字或 --surface 参数)才纳入范围。
第1步:明确屏幕用户
在阅读任何字符串之前,写下一行:
用户: 一个中途按了 Esc 键的玩家。操作: 决定是返回游戏、更改设置还是重新开始。
这行是你判断一切的标准。没有它,下面的规则只会被机械地应用,就像模式匹配,从而会把密码要求也当作无意义内容一并删除。首次访问定价页面的新用户与日常使用管理员表格的熟练用户,所需的信息量截然不同。游戏可以承载一些风味文本,而纳税申报表则不能。
如果代码无法明确用户身份,则根据产品推断并说明推断依据。仅当两种合理的推断会导致不同的编辑方案时才进行询问。
第2步:测试
对于每段可见文本和每个装饰元素,问:
没有这个,用户会犹豫、犯错,或者对接下来发生的事情感到意外吗?
- 否 → 删除。
- 否,但其他地方有人需要它 → 移动它。开发者需要的事实放在代码注释中;少数用户查找的事实放在工具提示或文档中;仅辅助技术需要的名称放在
aria-label中。 - 是,但表述不佳 → 仅使用代码、内容或对话中找到的事实进行重写。
- 是 → 保留,不做改动。
以下规则是 AI 生成的界面在测试中常见的失败点,它们帮助你快速定位候选内容。当界面以规则未明确命名的方式失败时,测试仍然适用。当某条规则标记了通过测试的内容时,保留它。
值得完整的句子
这些几乎总是能通过测试。不要将它们缩短为标签,也不要删除:
- 用户必须满足的约束:密码规则、接受的文件类型和大小、日期和数字格式、字符限制。
- 后果:破坏性或不可逆操作将移除什么;支付收取什么费用、何时收取;权限授予什么;共享后谁将看到内容。
- 错误:出了什么问题以及如何应对。
- 空状态:此处应有什么以及如何添加第一个项目。
- 同意、法律和监管文本。切勿编辑其措辞。如果看起来可疑,则报告。
- 用户很少执行且无法撤销的任务的说明。
规则
规则 ID 是稳定的,可在报告中引用。
文案
- C1. 眉标。 标题上方的小写大写或字间距文字(如“功能 | 特性”、“它如何工作”、“操作暂停”在“已暂停”上方)。标题本身已经命名了该部分,因此删除眉标。如果眉标的表述更好(游戏中的风味文本、产品的自有术语),则将其提升为标题并删除泛泛的标题。两者选其一,永不共存。
- C2. 装饰性编号。 “01 02 03”、“01 // 功能”、“§”和“//”前缀。除非顺序是真实的且用户会遵循(如结账步骤或安装指南),否则删除。
- C3. 副标题惯性。 每个标题下都跟一句话,每个菜单项下都有描述(“设置:更新您的设置”)。仅当该句陈述了标题未提及的事实时才保留。
- C4. 叙述性文字。 描述元素本身可见功能或行为的帮助文本和说明文字(“点击下方按钮开始”、“此卡片显示您的近期活动”)。删除。
- C5. 泄露的实现说明。 关于界面底层工作原理的文本,或从提示词需求直接生成的文案:“恢复可重新捕获鼠标”、“(实时更新)”、“(由 AI 提供支持)”、“数据将缓存 5 分钟”。用户不会据此操作。将其移至代码注释,或删除。
- C6. 状态字符串。 用“·”或“|”连接的事实(“12 个项目 · 更新于 2 分钟前 · 已同步 · v2.1”)。保留用户会据此操作的事实,其他事实按需放置或删除。
- C7. 重复提示。 与占位符、图标、按钮文本或部分标题重复的标签。保留一个。对于表单字段,保留可见标签:占位符输入后消失,不能作为可访问名称。
- C8. 标语。 “一个。大事。”、“与众不同。”、“更快交付。想得更少。”如果源素材提供了相关事实,则改写为一句点明事物和其功能的话。否则,标记给所有者处理。
- C9. 泛泛的章节标题。 “为什么选择我们”、“您所需的一切”、“专为像您这样的团队打造”。一个可以放在任何产品页面上的标题,对这个产品毫无意义。根据章节内容重命名,如果内容无需标题也能独立成立,则删除标题。
- C10. 过度提示。 对已有文本标签的控件加上工具提示、每个操作上的快捷键小提示、“提示:”和“专业提示”标注、普通界面上的引导指示。仅在控件模糊(如纯图标按钮)或快捷键是主要使用方式时才保留提示。
操作
- A1. 含糊的操作标签。 “开始”、“了解更多”、“提交”、“继续”、“确定”、“点击此处”。按钮上的文字应说明按下时会发生什么:一个动词,以及当动词单独使用时含义模糊的对象(“创建账户”、“导出 CSV”、“发送邀请”)。在流程中的步骤内,“继续”和“下一步”是可以的。
- A2. 同一操作,多个名称。 一个屏幕上用“删除”,下一个屏幕上用“移除”,菜单中用“回收站”表示同一操作,或者“登录”旁边是“登入”。选择项目中最常用的术语并在目标范围内统一使用。如果两个术语表述的是不同的操作(如从列表中移除 vs 永久删除),则两者都保留。
- A3. 确认对话框。 “您确定吗?”加上“确定”和“取消”。标题应命名操作及其对象(“删除 3 个项目?”),主体应说明后果(如果有)(“这还将移除其 14 个任务。此操作无法撤销。”),确认按钮重复动词(“删除项目”)。对于可轻松撤销的操作,确认对话框本身就是冗余:标记给所有者处理。
状态
加载、成功、空和错误文本是填充词的聚集地,因为人们检查界面时通常不会查看这些状态。在编辑这些文本之前,请阅读 references/states.md:它说明了每个状态应包含的内容,比仅仅告诉你删除什么更为深入。
- S1. 加载填充词。 “请稍等!”、“正在计算数字……”、“请稍候,我们正在准备好一切。”仅当等待时间足够长到可以阅读时才说明正在加载什么。否则仅使用旋转指示器或骨架屏。
- S2. 成功填充词。 “成功保存!”、“您的更改已成功保存。”用尽可能少的词陈述结果(“已保存”、“邀请已发送至 [email protected]”)。如果界面已显示结果,则无需 Toast 提示。
- S3. 空状态填充词。 “这里还没有内容!”、“看起来您还没有创建任何项目。开始创建您的第一个项目吧!”说明此处应有什么,并给出添加它的唯一操作。
- S4. 含糊或可爱的错误。 “糟糕!出了点问题”、“发生错误,请稍后重试。”说明出了什么问题以及用户能做什么。如果代码无法知道问题所在,则直白说明并给出重试选项。
虚构内容
- F1. 虚构的证明。 用户数量、正常运行时间数据、星级评分、带姓名和职位的推荐语、“致力于”Logo 行、“曾见于”列表。如果项目没有来源,这些就是已上线页面上的虚假声明。不要将其改写为较小的虚假声明。删除它们并在报告中列出,以便所有者提供真实数据。
- F2. 已上线界面中的占位符数据。 “张三”、“XX 公司”、lorem ipsum、
example.com地址、默认头像服务。在测试数据、测试用例和故事书中这没问题。但在已上线界面中,将其报告为任务。你无法提供真实数据。
装饰
- D1. 无状态的徽章。 “新”、“直播”、“AI”、“测试版”、“专业版”、“热门”出于装饰目的添加。仅当徽章反映了应用追踪的某个状态时才保留。
- D2. 状态点。 文本旁边的脉冲或彩色圆点。仅当绑定到真实状态时才保留,并给出可访问名称。
- D3. 装饰性表情符号和图标。 在标题、按钮、标签和列表项中。删除。当图标本身是控件(带
aria-label的图标按钮)或它承载着文本无法传达的意义时,保留图标。
图表和仪表盘
- V1. 命名图表类型的标题。 “月度收入柱状图”改为“月度收入”。仅当前的数据能证明时,才改为陈述发现(“3 月以来收入翻番”)。
- V2. 阅读说明。 “每个柱代表一个月”、“悬停查看详情”。删除。
- V3. 重复表述。 每个数量只使用一种编码。一个 KPI 带有箭头、百分比、“上升”字样以及一句重新陈述所有内容的话,则只保留数字和一个对比元素。
- V4. 与数据争抢注意力的框架。 绘图框架、深色或密集的网格线、粗的坐标轴边框、3D 效果、标记上的阴影和发光效果。删除,或将必须保留的部分削弱为细线。保持图表类型、数据和系列颜色不变。
- V5. 图例,而直接标注足以胜任时。 当系列数不超过四个且空间足够时,在每条线末端或每个柱旁边直接标注系列名称,并移除图例。
视觉效果(仅当要求时)
请先阅读 references/surface.md。它以一个检查设计意图的步骤开头,该步骤决定这些规则是否适用:游戏、营销页面或具有刻意显示排版的编辑布局,并非需要标准化的缺陷。
- X1. 渐变和发光效果。 表面和按钮上的色相渐变、渐变文字、彩色发光效果、模糊彩色斑点。
- X2. 间距异常值。 在兄弟元素使用统一间距尺度的情况下,出现诸如
mt-[13px]或gap: 7px的单一值。 - X3. 运行界面中的粗重字重。 在正文、标签、表格单元格和控件上使用字重 800 和 900。显示标题不在此范围。
- X4. 装饰性动画。
transition-all、悬停时缩放的卡片、不解释任何内容的弹跳和循环动画。
对于你保留或重写的文本的字符串级样式(大小写、标点、填充词、一致性),请阅读 references/writing.md。对于完整的修改前后对比示例,包括正确做法是保留文本的情况,当你不确定要删除到什么程度时,请阅读 references/examples.md。
安全护栏
- 绝不添加事实。 重写仅使用代码、内容文件、数据或对话中存在的事实。“编辑同步仅需几秒”是一个产品声明,你无法确认其真实性。如果诚实重写需要你没有的事实,则删除该行或将其列为所有者任务。这是最容易违反的规则,因为一个具体的虚构听起来总比它替换的模糊行更好。
- 仅修改可见文本和装饰元素。 不要改动逻辑、数据、颜色、字体和布局结构。例外情况是 V4 下的图表框架以及当要求时的视觉效果规则。
- 保留可访问名称。 永远不要删除
aria-label、alt、title(在图标按钮上)或屏幕阅读器专用文本。如果你删除的可见文本是唯一的可访问名称,请将其移至aria-label。 - 在源头编辑文本。 来自国际化文件、属性、测试数据或内容管理系统的字符串,在那里编辑或报告。不要在组件中硬编码替换。当你在一个语言文件中更改字符串时,将其他语言文件列为任务;除非被要求,否则不要自己翻译它们。
- 删除后清理。 移除现在为空的包装器,以及仅为已删除元素存在的边距或间距。
- 保持干净的界面原样不变。 如果没有内容未通过测试,则不做任何更改。
- 遵循项目规范。 如果项目有自己的语音指南、词汇表、令牌或设计系统,则优先向它们靠拢,而不是本技能的默认规则。
操作步骤
记录以下步骤:
- [ ] 1. 用户和操作:一行
- [ ] 2. 计数:python3 scripts/count_tells.py <target> (如果要求则添加 --surface)
- [ ] 3. 查看:尽可能截图
- [ ] 4. 阅读每种状态下的每个可见字符串和装饰;应用测试;用规则 ID 标记失败
- [ ] 5. 判断:重度、轻度或无
- [ ] 6. 编辑
- [ ] 7. 再次计数,再次查看
- [ ] 8. 报告
scripts/ 位于本技能文件夹内。通过完整路径运行脚本。
计数。 count_tells.py 是一个对源代码进行正则表达式的扫描。它查找候选内容,并为具有代码签名的模式给出前后数字。它无法识别 C3、C4、C5、C7、A2、V3 或任何依赖含义的内容,并且会标记出合法的使用。将其输出视为待检查位置的列表。当保留的内容是有意保留时,计数未归零是可接受的。
查看。 源代码隐藏了用户实际看到的内容:哪些字符串一起出现、哪些来自数据、删除某个元素对布局的影响。如果你有浏览器或截图工具,请在前后各截取一次屏幕。如果两者都没有,python3 scripts/screenshot.py <url-or-html-file> <out.png> 可以在安装了 Playwright 的环境下完成截图。检查修改后的图像是否存在孤立的空隙、标题失去层级、以及控件位置发生变化。如果你无法渲染界面,请在报告中说明。
阅读所有状态。 默认视图只是界面的一部分。在目标中搜索加载、空、错误、成功和禁用状态、Toast 提示、对话框和验证。
...
[其余内容因长度截断]