让 UI 评审快速收敛,并直接落地到界面
`guide` 给你一套清晰的设计规则,`review` 给你带优先级的修复清单。下面三个示例用同一业务目标的“前后界面”对比, 把差异做成可视化结果:主任务更清晰、提示更克制、状态更完整、操作更可发现。
快速触发
直接点名 Skill + 说清页面目标,输出会更稳定。
guide
请使用 $oiloil-ui-ux-guide 的 guide 模式。 页面类型:B 端设置页。 输出:简洁的“该做 / 不该做”规则。
review
请使用 $oiloil-ui-ux-guide 的 review 模式。 目标:提升首次配置完成率。 输出:P0/P1/P2 + 修复方案 + 验收标准。
你会得到什么
- 优先级P0/P1/P2 分层,先解决最影响结果的问题。
- 可落地建议落到布局/组件/文案/状态,能直接改代码。
- 可验收每项修复配验收检查点,避免“改了但没变好”。
关注点:任务、状态、结果、风险
约束:少文案 + 提示分层
图标:禁止 emoji,统一图标集
输出:简洁要点,避免长段落
规范集(简版)
不追求写很多,只保留最能稳定结果的规则:先过这 6 条,再做视觉润色。
开发与评审共用的 6 条规则
1) 主任务优先3 秒可识别主操作
2) 提示分层先就近必要信息,再按需展开
3) 状态闭环加载/空/错/成/权限都给下一步
4) 间距上尺度4/8/12/16/24/32/40/48
5) 重复与规整同类组件间距一致,不漂移
6) 少嵌套容器必须有功能,不做装饰叠层
如果一条规则需要很多例外,优先检查信息架构和默认值设计,而不是继续加提示文案。
建议顺序:先过规范集,再做设计心理学诊断,最后补齐状态与细节(图标/动效)。
示例 1:设置表单
同样是“完成首次配置”,差异主要来自提示分层与主操作的层级。
界面
通知策略设置未保存
邮箱
name@example.com
请填写常用邮箱,格式错误会导致通知失败。
邮箱用于告警、系统消息与账号安全提醒。
发送频率
立即发送
建议立即发送。
也可以选择每小时或每天汇总。
直观变化:主 CTA 更清晰;提示更克制;保存后有明确结果与下一步。
评审输出(节选)
P0 / P1 / P2
P0
主操作与次级按钮同权重,用户容易误点或犹豫。
P1
提示重复且过多,扫描成本高,关键约束不突出。
P2
缺少保存后的结果反馈,用户不知道是否生效。
修复建议会落到:按钮层级、提示分层、成功/失败状态。
直观收益:评审从“泛建议”变成“优先级 + 可验收改法”。
示例 2:仪表盘
同样是“看数据”,差异来自主次层级与关键风险的可见性。
界面
运营概览过去 7 天
活跃用户24,120
新注册1,632
支付率5.1%
流失率3.2%
工单数482
告警数19
直观变化:先看到关键状态;风险有明确入口;下一步动作更清晰。
清单式规则(guide 输出片段)
该做 / 不该做
该做
只保留一个主指标做视觉主点,其他指标降权作为支撑信息。
该做
关键风险要可见,并提供可点击的下一步入口。
不该做
不要让所有数字同权重铺满首屏,用户难以判断重点。
直观收益:同一套规则能复用到多个仪表盘页面,避免“每页一套”。
示例 3:列表页
同样是“打开项目”,差异来自操作可发现性与一致的行动入口。
界面
项目列表32 个项目
支付链路监控...
增长实验看板...
客服自动分配...
直观变化:主操作显式;长尾操作后置;列表行为一致。
触发示例
提示词
请使用 $oiloil-ui-ux-guide 的 review 模式。 页面:项目列表(列表-详情)。 目标:减少误点,提高“查看项目”的可发现性。 输出:P0/P1/P2 + 修复方案 + 验收检查点。
直观收益:同一个问题能被稳定拆成优先级与可落地动作。
设计心理学(怎么落到界面细节)
把抽象概念变成可检查的界面信号:可做什么、怎么做、做完发生了什么、错了怎么恢复。
可视化标注(点击开关看变化)
设计手段
诊断标签
通知策略设置
邮箱(必填)
name@example.com
仅用于告警和账号安全通知。
发送频率
立即
每小时
每天
保存后立即生效,可在“通知历史”查看投递结果。
示能性:主操作清晰可见,用户知道“能保存”。
指示符:按钮文案是动作,且视觉层级明确。
约束:关键风险就近提示,减少填写/理解错误。
知识外显:把约束放在决策点,用户不需要记忆。
反馈:结果 + 下一步,减少“是否生效”的不确定。
映射:控制项紧贴它控制的内容,减少找位置成本。
模式:用控制状态表达(查看/编辑切换),避免额外的“状态标签”噪音。
执行鸿沟:如果主 CTA 不突出,用户会犹豫“点哪里”。
评估鸿沟:如果缺少结果反馈,用户会重复点击或放弃。
概念模型:标题与字段命名一致,帮助用户建立正确理解。
提示:开关越少,越能看清“最关键的信号”是什么。
Slip vs Mistake(两种错误要用两种修复)
Slip
目标是对的,但点错了/手滑了。修复方向:可撤销、更安全的触达、二次确认。
已删除“支付链路监控”。
撤销删除
Mistake
理解错了:以为“删除”只是移出列表。修复方向:命名、后果、概念模型要更明确。
删除是不可逆操作,会移除项目与数据。
了解差异:停用 vs 删除
Skill 在 review 模式会要求标注这类诊断,避免只给“把按钮做大点”这种泛建议。
系统状态(加载 / 空 / 错误 / 成功 / 权限)
同一个界面,在不同状态下也要“可理解、可操作、可恢复”。
状态切换
项目列表加载中
要点:保持布局稳定,避免跳动;必要时禁用重复提交。
直观收益:状态齐全意味着更少疑惑、更少重复点击、更少“卡住”。
review 输出会覆盖哪些状态
检查清单
必须有
加载 / 空 / 错误 / 成功 / 权限状态,且每个都有可执行下一步。
避免
只用全局 toast 代替关键页面状态;状态和内容混在一起导致难读。
加分项
骨架屏保持布局稳定;失败后尽量保留用户输入。
直观收益:把“状态缺口”变成可检查项,评审更稳定。
细节规则补齐:图标与动效
少量关键细节决定“看起来专业”,也决定“用起来不费劲”。
图标(统一图标集 + 避免只靠图标传达主操作)
更安全的做法
主操作优先用文字或“文字+图标”,降低误解风险。
风险更高的做法
icon-only 适合通用动作(搜索/关闭/更多),不适合承载主操作语义。
动效(解释层级与状态变化)
打开详情面板
动效只用来解释“层级/状态”,不做装饰。
编辑器画布稳定不漂浮
内容
这里是你的主要工作区域(保持稳定)。