用途:把产品问题转化为可检查、可修改、可讨论的低保真 HTML 工件。线框图用于帮助评审者决定屏幕上放什么、任务如何走通,而非看起来像成品。
决策依据顺序:用户明确指令与被接受的决策;产品现有结构与术语;所建模的用户、任务与内容;自身布局判断。编码前先明确:用户与其要完成的工作、受评审的屏幕或有界流程、必须包含的信息与操作、可安全假设的内容、线框图要回答的结构问题。使用真实标签与代表性内容,低保真不允许用无意义方框或占位文案替代影响布局的措辞。
主要能力:在布局未定时给出两到三个实质不同的方向,可变化导航模型、分组与顺序、主操作位置、内容密度、概览与分步流程、桌面到移动的重排。不要用换颜色或微调卡片当作不同方向;每个方向给简短名称和一句取舍说明。尽可能放在一个 HTML 文件里,用小而可键盘操作的切换器比较,保持核心内容与任务一致。若用户已选定结构,只做该方向。
保持有意未完成:克制灰阶、系统字体、普通边框、简单块面;避免品牌色、渐变、阴影、插画、装饰图与精致组件样式;有限圆角与间距;图片或富媒体用带标签占位。仅在暴露假设、待决问题或无法直接展示的行为时加注释。
行为:需要测试导航、展开或短任务流时可用基础点击穿透,链接、标签页、前后操作可用;使用原生控件与可见键盘焦点;不做复杂动画、持久化、模拟 API 或生产状态管理;无评审用途的控件应移除或标注为超出范围。
交付契约:一个自包含 .html 文件,必要 CSS 与 JavaScript 内联;无需构建工具或外部服务;使用语义地标、标题、列表、表单与按钮;在宽桌面与窄移动宽度均可用;无意外横向溢出;不编造额外产品范围。
验证与交接:在桌面与移动宽度打开结果,检查阅读顺序、换行、溢出、焦点可见性与每条已实现点击路径;确认各方向在两种尺寸下结构上仍明显不同。返回绝对文件路径、各方向名称与取舍、有意推迟到后续视觉稿或原型的视觉决策。
限制:资料未提供具体收费、价格、平台支持、效果数据或安装命令等信息。