线框图设计使用场景
- 落地页规划在视觉设计或文案制作开始前，规划营销页面的各个区块。
- 响应式布局审查根据明确的断点说明，检查从桌面端到移动端的变化。
- 设计交付将结构决策与实现指导集中在一起。
设计标注交付亮点
- 设计标注侧边栏编号标记将可见区域与对应的规格说明行连接起来。
- 响应式规则断点行为写在相关页面区块旁边。
- 低保真结构中性区块展示构成，同时不暗示内容已经完成。
- 统一阅读顺序画布与注释遵循相同的编号顺序。
五个页面区域及其规格说明
1 / 1
Acme 营销落地页
这个作品示例以带设计标注层的低保真桌面端线框图呈现“Acme · Marketing Landing”。它的主要价值在于可追溯性：左侧画布展示拟议的页面构成，右侧面板则说明每个编号区域预期承担的功能。这使设计适合在品牌素材、最终文案或生产环境行为确定之前讨论页面结构。
可见页眉通过“WIREFRAME · REDLINE”、“DEVICE DESKTOP 1280”、“FIDELITY LOW”和“REV A”确立工作背景。这些标签将此次截取界定为设计规格，而不是已完成的营销页面。浏览器样式的地址区域显示“acme.example / home”，为页面提供了具体路径，同时不对底层服务做出验证。
画布
左侧的大区域展示页面顺序：导航、首屏、社会证明、功能网格和页脚。
规格说明
右侧面板将这些区域转化为具体说明，例如尺寸、断点和对齐方式。
此线框图的适用场景
此设计适合营销页面的早期规划、评审和交付。它为团队提供共同的讨论依据，用于决定页面应包含哪些区块，以及哪些响应式变化需要明确达成一致。由于内容主要是中性区块，评审者可以专注于构成和规则，而不会将占位文案或图像误认为经过验证的营销表达。
规划落地页
五个标记为导航、首屏、Logo 条、功能网格和页脚区域预留了位置。页脚包含四栏占位条，而不是可用链接或法律信息行。这种抽象方式明确了区块顺序和相对权重，但无法验证最终文案、合作伙伴身份或转化表现。
审查响应式意图
侧边栏提出了移动端隐藏 Logo、960px 功能网格规则，以及 1000px 以下采用两栏页脚的建议。实际 CSS 则仅在 1000px 及以下使用一个断点：将外壳、首屏和功能区改为堆叠布局，使注释面板变为静态定位，并将页脚改为两栏。Logo 条仍保持可见。这些差异表明该页面是规格审查示例，而不是每条说明都已实现的证明。
从顶部导航到页脚
规格说明采用一一对应的编号方式。标记 ① 指向中性的导航行；其 64px 吸顶和滚动收缩行为只是说明，并未在导航中实现。标记 ② 指向文本和一个带叉号的媒体占位符。实际首屏网格为 1fr/0.85fr，使文本略宽；但占位符的最小高度为 188px，并未强制采用 16:9 比例。
| 区域 | 书面意图 | 实际源代码 |
|---|---|---|
| 导航 | 吸顶，64px，滚动时收缩 | 静态 div 形状；没有滚动处理程序。 |
| 首屏媒体 | 16:9 槽位 | 宽度可伸缩，最小高度为 188px；没有比例规则。 |
| Logo 条 | 在移动端隐藏 | 五个占位区块仍保持可见。 |
| 功能网格 | ≥960px 时三列；8px 间距 | 1000px 以上为三列；flex 间距为 10px。 |
| 页脚 | 四栏及法律信息行 | 四个灰盒栏；≤1000px 时为两栏；没有法律信息行。 |
首屏构成
说明规定了 48/56 的 H1、18/28 的副标题，以及由主 CTA 和透明底 CTA 组成的一对操作按钮。截图显示了相应的左对齐文本条，以及大型带叉号图片占位符旁的两个操作区块。这种布局清晰呈现了预期重点，但低保真图像无法确定最终视觉素材、裁剪方式或交互形式。
证明、功能与收束
标记 ③ 预留了五个等宽的中性 Logo 槽位，而不是已命名或已验证的合作伙伴。标记 ④ 将三张功能卡片放在桌面端同一行，其中图标区块为 38px；尽管注释标为 8px，实际 flex 间距为 10px。标记 ⑤ 预留了四栏页脚，但没有法律信息行。重复的区块使各区域便于比较，同时保留最终内容和行为的不确定性。
可见设计与能力边界
灰盒导航、按钮和类链接形状都是没有点击或提交行为的 div。实际具有吸顶效果的是右侧规格说明面板，它会在 1000px 及以下变为静态定位；导航不会吸顶或收缩。acme.example 地址是浏览器界面文本，而不是目的地。注释中的尺寸是需要与实现协调的设计要求，并非生产环境保证。
名称、路径和规格数字仍为示例内容。随附清单声明由 OpenDesign 创作并采用 MIT 许可证，但该声明并不能证明其中展示的每项素材都已单独获得许可。截图展示的是线框图及其说明，而不是合作伙伴背书、已连接服务或转化结果。
如何在 OpenDesign 中创建营销网站线框图设计
设置页面顺序
从一个 Acme 风格的营销落地页开始，其中包含顶部导航、双栏首屏、五个 Logo 的社会证明区、三卡片功能网格以及多栏页脚。第一版保持低保真，以便轻松调整间距和顺序。
建议提示词创建一个名为“Acme · Marketing Landing”的低保真营销落地页线框图。使用最大宽度 1320px 的页面、280px 的注释侧边栏、1fr/0.85fr 的首屏网格、编号标记 ①–⑤、带叉号的图片占位符、五个中性 Logo 槽位、三张功能卡片和四栏页脚。将每个标记与一条规格说明配对，并直观区分拟议要求与已实现的 CSS。在 1000px 及以下，将侧边栏、首屏和功能区改为堆叠布局，并将页脚改为两栏。保持导航和 CTA 形状不可交互；不要暗示数据已提交或服务已连接。
附加具体布局说明
为每个编号区域添加一行侧边栏说明。将拟议的导航高度、首屏字号比例、CTA 配对和媒体比例分别记录，并与实际 CSS 区分。明确标注尚未解决的差异：源文件中的 16:9 和 8px 说明并未强制规定宽高比，也不符合其 10px 的功能区间距。
检查响应式状态
将实际的 1000px 断点与注释中的 960px 功能区规则进行对照。确认侧边栏变为静态定位，首屏和功能卡片改为堆叠布局，页脚变为两栏。明确决定是否实现注释中所述的移动端隐藏 Logo 以及可吸顶、收缩的导航；在此源文件中，两者均不存在。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
