Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

行内编辑

Inline Edit

加入比较 +

在原来的阅读位置切换为编辑控件,完成后回到阅读状态。

可操作示例 · 虚构产品 FIELDNOTES

手记名称

周末散步

识别特征

  • 阅读与编辑在同一上下文
  • 明确的保存和取消
  • 失败时保留输入

概念边界

不是自动保存的同义词;保存时机、取消语义和错误处理必须另行明确。

什么时候考虑它

  • 高频修改短字段
  • 用户需要保留周边内容作为参照

什么时候慎用

  • 修改需要复杂说明或跨字段验证
  • 无明确提示就让点击外部丢弃输入

取舍

上下文连续,但编辑入口、焦点恢复与保存状态需要精心处理。

条件规则 · 编辑建议

当按 Escape 或取消必须恢复原值并把焦点送回编辑入口。
当保存失败必须保留草稿并说明修复方法。

查询前提:short_field = true
本词条样例面向短字段;长表单应另评估编辑流程。

相关词条

主从布局 ↗可以配合 · 编辑当前详情中的短字段

保留所选项目上下文。

识别优于回忆 ↗可以配合 · 让用户发现编辑动作

使用明确的编辑入口。

来源与支持范围

Atlassian Design · Inline edit ↗

组件在同一页面的阅读与编辑状态之间切换。

检索日期:2026-09-15

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示;应用到产品时仍须重新验证。

{
  "states": [
    "read",
    "edit",
    "error",
    "saved",
    "cancelled"
  ],
  "a11y": [
    "编辑入口有名称",
    "进入编辑后聚焦输入,退出后恢复"
  ],
  "motion": "无"
}
完整 Agent 条目 JSON
{
  "id": "inline-edit",
  "type": "interaction",
  "name": {
    "zh": "行内编辑",
    "en": "Inline Edit"
  },
  "aliases": [
    "就地编辑",
    "edit-in-place"
  ],
  "granularity": "component",
  "intents": [
    "edit-in-place",
    "configure"
  ],
  "tags": [
    "编辑",
    "保存",
    "取消",
    "文本",
    "非模态"
  ],
  "definition": "在原来的阅读位置切换为编辑控件,完成后回到阅读状态。",
  "boundary": "不是自动保存的同义词;保存时机、取消语义和错误处理必须另行明确。",
  "signature": [
    "阅读与编辑在同一上下文",
    "明确的保存和取消",
    "失败时保留输入"
  ],
  "when": [
    "高频修改短字段",
    "用户需要保留周边内容作为参照"
  ],
  "when_not": [
    "修改需要复杂说明或跨字段验证",
    "无明确提示就让点击外部丢弃输入"
  ],
  "tradeoff": "上下文连续,但编辑入口、焦点恢复与保存状态需要精心处理。",
  "comparison": {
    "focus": "在原位修改内容",
    "mechanism": "阅读与编辑切换",
    "cost": "管理未保存值、校验和焦点"
  },
  "sources": [
    {
      "id": "atlassian-inline",
      "title": "Atlassian Design · Inline edit",
      "url": "https://atlassian.design/components/inline-edit",
      "claim": "组件在同一页面的阅读与编辑状态之间切换。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://atlassian.design/components/inline-edit",
        "status": "available",
        "checkedAt": "2026-09-15T16:50:40.136Z",
        "jobId": "spn2-d931b84ec728ee359a86e37a9b3be6dec300eae6",
        "url": "https://web.archive.org/web/20260915165217/https://atlassian.design/components/inline-edit",
        "timestamp": "20260915165217"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "composes_with",
      "condition": "编辑当前详情中的短字段",
      "reason": "保留所选项目上下文。",
      "basis": "editorial"
    },
    {
      "target": "recognition",
      "kind": "composes_with",
      "condition": "让用户发现编辑动作",
      "reason": "使用明确的编辑入口。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "按 Escape 或取消",
      "instruction": "恢复原值并把焦点送回编辑入口。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "保存失败",
      "instruction": "保留草稿并说明修复方法。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "requirements": [
    {
      "fact": "short_field",
      "value": true,
      "reason": "本词条样例面向短字段;长表单应另评估编辑流程。"
    }
  ],
  "behavior": {
    "states": [
      "read",
      "edit",
      "error",
      "saved",
      "cancelled"
    ],
    "a11y": [
      "编辑入口有名称",
      "进入编辑后聚焦输入,退出后恢复"
    ],
    "motion": "无"
  },
  "demo": "inline-edit",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示;应用到产品时仍须重新验证。",
  "searchTerms": [
    "editing",
    "save",
    "cancel",
    "text",
    "non-modal"
  ]
}