线框风格

本词条尚无可操作示例；插画为编辑示意，展示线框呈现的结构可见性，不代表已验证的实现。应用到产品前仍须在目标尺寸上确认网格密度不会糊成灰面，并实测线框上文字的对比度。

{
  "tokens": {
    "surface": "#11151c",
    "ink": "#dfe6ef",
    "accent": "#4fd1c5",
    "radiusPx": 0,
    "shadow": "none"
  },
  "tokenScope": "本样例配方：深蓝黑底面、冷白墨色与青色强调线，只是这套风格常见的一种取值；浅底线框同样成立，实际项目需按语境重新取色并验证线上文字的对比度。"
}

{
  "id": "wireframe-3d",
  "type": "visual",
  "name": {
    "zh": "线框风格",
    "en": "Wireframe (3D Mesh)"
  },
  "aliases": [
    "Wireframe Aesthetic",
    "3D Mesh Style",
    "网格线框风格",
    "多边形线框"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "线框",
    "三维",
    "网格",
    "技术感",
    "透视"
  ],
  "definition": "把三维模型只以顶点与边的连线呈现、不填充表面的视觉语言：物体的轮廓与内部结构同时可见，画面由细线网格构成，读起来像一份被放到构图里的技术图纸。",
  "boundary": "本词条指把三维线框当作最终视觉呈现的风格，不指界面设计流程中的低保真原型稿——后者虽然也叫 wireframe，但它是过程产物而非视觉语言。判定标准是\"多边形网格的边被保留为可见线条、表面不填充\"，而不是\"用了线条\"或\"看起来很科技\"。它与蓝图风格相邻但不同：蓝图模仿工程晒图的正投影图纸与尺寸标注，线框风格保留三维透视与网格密度本身作为表现力。",
  "signature": [
    "只有顶点与边被绘制，表面不填充，背面的线也可见",
    "网格密度本身构成明暗：曲率大的地方线更密",
    "单色或双色细线在深色底上构成整幅画面"
  ],
  "when": [
    "需要同时展示外形与内部结构，例如说明装配或空间关系",
    "品牌要表达工程、计算或\"尚在构建中\"的气质",
    "素材需要在深色主题下保持轻量与可缩放"
  ],
  "when_not": [
    "需要表现真实材质、光照或颜色的产品呈现",
    "线密度过高，缩小后整幅退化为一片灰噪",
    "把流程用的低保真原型稿直接当成成品视觉发布"
  ],
  "tradeoff": "线框能同时交代外形与结构、体积极小且易于着色，代价是丢失材质与光照信息，且线密度稍高就会在小尺寸或低分辨率下糊成灰面。",
  "comparison": {
    "focus": "同时呈现外形与内部结构",
    "mechanism": "只绘制多边形网格的顶点与边，不填充表面",
    "cost": "没有材质与光照，密度过高会糊成灰面"
  },
  "sources": [
    {
      "id": "wireframe-wikipedia",
      "title": "Wikipedia · Wire-frame model",
      "url": "https://en.wikipedia.org/wiki/Wire-frame_model",
      "claim": "该条目说明线框模型是三维物体的视觉呈现方式：只用点与线段（边）描述物体，不含表面信息，因此可以透过物体看到其后方与内部的线；本词条的定义据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://en.wikipedia.org/wiki/Wire-frame_model",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T13:05:23.426Z",
        "error": "status-request-failed",
        "jobId": "spn2-0d622a2160d5a41d99fd5544ae91c22e467a7a3a"
      }
    },
    {
      "id": "wireframe-blender",
      "title": "Blender Manual · Wireframe Modifier",
      "url": "https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/wireframe.html",
      "claim": "该文档说明 Wireframe 修改器把网格的边转换为有厚度的几何体，从而把线框本身变成可渲染的实体；本词条据此说明这一表现方式在实际制作中如何落地，文档本身不讨论风格取向。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/wireframe.html",
        "status": "available",
        "checkedAt": "2026-09-16T13:30:00.725Z",
        "jobId": "spn2-8d9a1c0477e4a599845af7fce8ee3f0d45ced5f9",
        "url": "https://web.archive.org/web/20260916133024/https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/wireframe.html",
        "timestamp": "20260916133024"
      }
    }
  ],
  "relations": [
    {
      "target": "retro-computing",
      "kind": "related",
      "condition": "线框被用来唤起早期计算机图形的观感",
      "reason": "早期图形硬件只能绘制线框，因此这一手法自带年代联想；但线框风格本身并不必然是怀旧的。",
      "basis": "editorial"
    },
    {
      "target": "minimalism",
      "kind": "composes_with",
      "condition": "画面只保留结构信息、去除材质与装饰",
      "reason": "线框天然是一种减法呈现，与去除冗余的版面取向方向一致，可以共用同一套克制的配色。",
      "basis": "editorial"
    },
    {
      "target": "contrast-legibility",
      "kind": "conflicts_when",
      "condition": "文字直接压在高密度线框之上",
      "reason": "细密的线会在文字后方制造持续变化的背景亮度，实际对比度取决于最不利的线段。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "线框图需要缩小到卡片或图标尺寸",
      "instruction": "先降低网格密度再缩小，并在目标尺寸上确认结构仍可读，而不是直接缩放原图。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "线框作为背景而其上放置文字",
      "instruction": "在文字区域降低线的不透明度或加一层底色，并按最亮的线段验证对比度。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#11151c",
      "ink": "#dfe6ef",
      "accent": "#4fd1c5",
      "radiusPx": 0,
      "shadow": "none"
    },
    "tokenScope": "本样例配方：深蓝黑底面、冷白墨色与青色强调线，只是这套风格常见的一种取值；浅底线框同样成立，实际项目需按语境重新取色并验证线上文字的对比度。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示线框呈现的结构可见性，不代表已验证的实现。应用到产品前仍须在目标尺寸上确认网格密度不会糊成灰面，并实测线框上文字的对比度。",
  "image": {
    "src": "/images/wireframe-3d.webp",
    "alt": "一张名为 FIELDNOTES 的虚构深色页面：中央是一个只由顶点与边构成的三维线框立体，背面的线同样可见，曲率大的地方线更密，右侧排着冷白色占位文本条。"
  },
  "searchTerms": [
    "wireframe",
    "three-dimensional",
    "mesh",
    "technical",
    "perspective"
  ]
}