html-wireframe

HTML 线框图

将产品问题转化为一个低保真 HTML 产物，便于检查、修改和讨论。线框图应帮助评审者判断屏幕上应包含哪些内容，以及任务应如何运行。它不应看起来像已完成的产品。

明确评审问题

在选择布局前，阅读对话、提供的简报和相关项目资料。沿用项目的词汇、内容模型和已知产品约束。

决策依据按以下顺序排列：

1. 用户的明确指示和已接受的决定。
2. 产品现有的结构和术语。
3. 正在建模的用户、任务和内容。
4. 你对布局的判断。

编码前，明确以下内容：

• 用户是谁，以及他们需要完成什么工作；
• 正在评审的屏幕或范围明确的流程；
• 产物必须包含的信息和操作；
• 可以安全做出的假设；
• 线框图应帮助回答的结构性问题。

使用真实标签和有代表性的内容。低保真并不意味着可以在措辞会影响布局时使用匿名方框或 Lorem Ipsum。

先探索结构，再考虑样式

当 design-artifact 可用时，阅读其中针对特定主题的构图和层级指导，但不要引入编辑润色。本技能的低保真约定仍具有最高优先级。

当布局尚未确定时，创建两到三个有实质差异的方案。调整产品决策，例如：

• 导航模式；
• 分组和顺序；
• 主要操作的位置；
• 内容密度；
• 总览与分步流程；
• 桌面布局到移动端布局的重排方式。

不要把颜色变化或卡片位置的细微调整称为不同方案。为每个方案起一个简短且描述性的名称，并用一句话说明其取舍。

实际可行时，将所有方案放在同一个 HTML 文件中。使用小型、可通过键盘操作的选择器，让评审者无需打开多个文件即可比较。各方案应保留相同的核心内容和任务。如果用户已选定结构，则只构建该方案。

让产物有意保持未完成状态

• 使用克制的灰度配色、系统字体、朴素边框和简单区块。
• 避免品牌色、渐变、阴影、插图、装饰性图像和精致的组件样式。
• 限制圆角和间距。布局应足够有序，以便判断层级，但不要过于精致，以免引发品牌评审。
• 除非素材会影响结构决策，否则将图像或富媒体显示为带标签的占位内容。
• 仅在标注能揭示假设、未解决的问题或无法直接呈现的行为时添加标注。

线框图仍可具有良好的构图。有意保持未完成，不等于间距随意、字体难以辨认或响应式行为异常。

只添加有用的交互行为

当点击跳转有助于测试导航、内容展开或简短任务流程时，使用基础的交互行为。保持即时、朴素。

• 如果链接、选项卡以及前进或后退操作属于评审内容，就让它们可以正常使用。
• 使用原生控件，并显示键盘焦点。
• 不要构建复杂动画、持久化功能、模拟 API 或生产级状态管理。
• 移除没有评审用途的控件，或明确标注其不在本次范围内。

构建约定

• 交付一个自包含的 .html 文件，并将必要的 CSS 和 JavaScript 内联其中。
• 不需要构建工具或外部服务。
• 使用语义化地标、标题、列表、表单和按钮。
• 确保布局在宽屏桌面端和窄屏移动端都易于使用。
• 避免页面出现意外的水平溢出。
• 尊重源材料。不要为了填充空间而虚构额外的产品范围。

验证并交付

在桌面端和移动端屏幕宽度下打开结果。检查阅读顺序、换行、溢出、焦点可见性以及每条已实现的点击路径。确认在两种尺寸下，各个方向仍保持结构上的差异。

返回绝对文件路径、各个方向的名称及其取舍，以及有意留待后续模型稿或原型再决定的视觉设计。

延伸阅读

阅读 Plannotator 的面向编码 Agent 的 HTML 线框图和原型，了解线框图阶段需要决定哪些内容。