127 lines
8.1 KiB
Markdown
127 lines
8.1 KiB
Markdown
# 信息与动作规则
|
||
|
||
> 当任务涉及可见文案、动作层级、图标、点击反馈或视觉强调时读取；数据范围和空间布局由对应规则负责。
|
||
|
||
## 可见信息
|
||
|
||
每段文字和每个视觉元素必须至少完成一项职责：
|
||
|
||
- 标识当前对象；
|
||
- 区分相邻对象；
|
||
- 表达当前状态；
|
||
- 说明无法从结构推断的规则、限制或风险；
|
||
- 说明可执行动作；
|
||
- 反馈动作结果。
|
||
|
||
不承担这些职责就删除。
|
||
|
||
当对象、操作顺序、控件和反馈已经通过界面结构清楚表达时，不再用说明文案重复解释流程。添加帮助文字前，先检查能否通过更准确的标题、按钮文案、布局、默认值或状态反馈直接解决；不能用长说明掩盖结构和动作关系不清。
|
||
|
||
只有以下信息不能从当前界面可靠推断时才补充说明：
|
||
|
||
- 非共识的业务规则；
|
||
- 系统限制或数据作用范围；
|
||
- 容易造成真实损失的误操作风险；
|
||
- 危险或不可逆动作的具体后果。
|
||
|
||
必须删除：
|
||
|
||
- 重复页面标题、重复状态和重复入口；
|
||
- 重述按钮含义的段落；
|
||
- 解释显而易见布局的文字；
|
||
- 不影响下一步动作、作用范围或结果判断的状态复述，如 `3 selected`、`20 items`、`Filter applied`；
|
||
- 仅用于填空的说明、徽章和图标；
|
||
- 原始数据库 ID、内部枚举、存储路径和系统时间戳等实现信息，除非它们直接用于当前判断、搜索、复制或排障。
|
||
|
||
空状态只说明为空的原因，并提供一个恢复动作。同一创建或恢复意图不能同时出现在页面 Header 和空状态中。
|
||
|
||
即使实现信息确有用途，也只能作为辅助信息或按需复制项，不得取代用户能够识别的名称、图片和区分字段。
|
||
|
||
## 容器强调边
|
||
|
||
左侧或顶部的彩色强调边、色带和装饰性轨道属于强调边卡片（accent-border card）视觉语言，源自 callout、引用块和状态提示。它会主动争夺注意力，不应成为普通卡片、列表项或内容分组的默认装饰。
|
||
|
||
- 只有强调边持续表达可复用的状态、类别、选择或告警含义时才使用。
|
||
- 分类文字、图标或状态已经表达同一信息时，删除重复的强调边。
|
||
- 不为制造层次、填补空白或让相邻卡片“看起来不同”而给每项配置不同颜色的强调边。
|
||
- 普通集合优先使用对齐、留白、文字层级、轻量分隔线或背景差异建立结构。
|
||
- 项目确有符合本规范的稳定提示、引用、告警或选中模式时，由共享组件和按用途命名的组件变体统一维护；页面不得临时拼装彩色边线。
|
||
|
||
## 用户已有认知
|
||
|
||
- 常见的浏览、选择、编辑、保存、删除、返回和关闭任务使用用户已经理解的结构和动作含义。
|
||
- 同一对象、状态和动作在不同页面使用相同名称；不得用不同术语包装同一件事。
|
||
- 不改变共识图标和动作的惯常含义，也不为普通任务创造自定义手势或新操作模型。
|
||
- 只有标准模式无法表达真实任务时才新增交互模式，并明确显示它的对象、动作和结果。
|
||
|
||
## 动作层级
|
||
|
||
| 层级 | 用途 | 呈现 |
|
||
| --- | --- | --- |
|
||
| 主操作 | 完成当前页面、弹窗或操作区域的主要任务 | 一个高强调文字按钮 |
|
||
| 次级操作 | 高频但非主要 | 低强调文字按钮 |
|
||
| 管理操作 | 重命名、重新处理、复制、可撤销删除 | “更多”菜单 |
|
||
| 危险操作 | 永久删除或其他不可恢复、高损失操作 | 菜单分隔 + 确认 |
|
||
| 导航操作 | 返回、关闭、翻页 | 上下文明确时可用共识图标 |
|
||
|
||
同一页面、弹窗或操作区域出现两个高强调按钮时，重新判断主任务。批量工作台可以同时提供不同任务动作，但只能有一个与当前阶段直接相关的主导动作。
|
||
|
||
## 上下文操作与按需呈现
|
||
|
||
不是所有操作都需要始终平铺显示。根据当前对象和用户正在进行的任务，只显示此刻需要的操作：
|
||
|
||
- 主操作、关键状态和完成当前任务必须先发现的入口保持可见。
|
||
- 卡片、列表项或表格行中的次级操作，可以在 hover、聚焦或选中当前项后显示。
|
||
- 重命名、复制、重新处理等低频管理操作优先放入“更多”菜单，不在每一项中长期平铺。
|
||
- 操作出现前预留稳定位置，不挤压文字，也不让列表或卡片发生布局跳动。
|
||
- 触屏设备没有 hover 时，通过点击选中当前项，或使用始终可见的“更多”入口提供相同操作。
|
||
- 不隐藏用户必须先发现，才能理解当前状态或完成主要任务的操作。
|
||
|
||
## 按钮与图标
|
||
|
||
- 使用能够说明结果的“动作 + 对象”文案，避免只有“处理”“管理”“继续”等无法判断结果的词。
|
||
- 图标只有在能加快识别，并明确表达对象、动作、状态或结果时才使用；移除后不影响理解和扫描的图标应删除，不为标题、标签、菜单项或卡片机械配图标。
|
||
- 同一图标保持相同含义；图标与文字同时出现时表达同一件事。非共识图标必须显示文字，tooltip 不能代替标签；纯图标只用于上下文明确的共识动作。
|
||
- AI 只是实现方式时，图标表达摘要、翻译、生成图片、转写、编辑等实际动作或结果，不额外叠加通用 AI 标记。
|
||
- 星星、闪光、机器人、脑形和魔法棒不作为生成、增强、助手等功能的默认图标；只有表达收藏、真实机器人或 Agent 对象等本来含义，或项目已有不违背本规范的稳定含义时才使用。
|
||
- AI 身份本身影响用户判断时，优先显示明确名称、模型、Logo 或真实 Agent 身份，不用抽象的“AI 图标”代替对象。
|
||
- `Check` 只表示选中、确认、保存或完成，不表示查看；`Refresh` 只表示刷新、重试或重新分析，对象不明确时显示文字。
|
||
- 状态不得做成看似可点击的按钮。
|
||
|
||
## 点击区域与鼠标反馈
|
||
|
||
- 所有可点击按钮、链接、卡片、表格行、菜单项、选择器选项、分页项和上传区域必须显示 `cursor: pointer`。
|
||
- `cursor: pointer` 必须覆盖完整点击区域，不只覆盖图标或文字。
|
||
- 点击区域必须有可见 hover 反馈，例如背景、边框或文字颜色变化。
|
||
- 按下状态必须与 hover 有区别。
|
||
- 禁用控件不是可点击区域，使用禁用视觉和 `cursor: not-allowed`。
|
||
- 非交互卡片、标签、状态和装饰图标不得显示 pointer。
|
||
- 整张卡片可点击时，卡片根节点负责 pointer 和 hover；不要让用户猜只有哪一小块能点。
|
||
- 卡片或表格行内存在独立控件时，各控件保持自己的点击范围，不触发外层点击。
|
||
|
||
pointer、hover、active 和 disabled 样式由共享组件负责，使用组件的页面不得逐个补充。
|
||
|
||
## “更多”菜单
|
||
|
||
- 菜单项显示文字。
|
||
- 点击外部关闭菜单。
|
||
- 删除与普通操作分隔。
|
||
- 当前状态不允许的操作直接隐藏；不要留下无法解释的灰色图标。
|
||
- 菜单触发器与菜单项都显示 `cursor: pointer`。
|
||
|
||
## 检查
|
||
|
||
- 删除某段文字后，用户是否仍能正确判断？
|
||
- 删除流程说明后，用户是否仍能通过对象、顺序、控件和反馈完成任务？如果不能，问题来自真实规则还是界面结构不清？
|
||
- 图标是否要求用户猜含义？
|
||
- 每个图标是否有明确职责，移除无意义图标后是否仍能正常理解和扫描？
|
||
- AI 功能的图标是否表达真实动作或对象，还是只使用了星星、机器人、脑形等通用装饰？
|
||
- 所有可点击区域是否显示 pointer 和 hover？
|
||
- pointer 是否误加到不可点击内容？
|
||
- 低频操作是否仍平铺在主界面？
|
||
- 次级操作是否只在相关对象进入 hover、聚焦或选中状态后出现？触屏设备是否有同等入口？
|
||
- 按需出现的操作是否造成文字位移或布局跳动？
|
||
- 是否展示了不能帮助识别、判断或操作的实现信息？
|
||
- 容器左侧或顶部的强调边是否表达稳定含义，还是只在重复标签或装饰页面？
|
||
- 常见任务是否要求用户重新学习术语或操作方式？
|