用途:在视觉设计介入之前,确定屏幕的结构解剖——屏幕上有什么、各元素位于何处、什么最重要。它刻意不回答“看起来怎样”,以免过早把讨论引向字体和配色。
主要能力:
- 缩略图(lo-fi):同一问题的多个结构性方案,以真实 UI 片段加编号标题呈现,用于机制层面的发散比较。
- 整页线框(mid-fi):完整屏幕结构,含真实标签、真实层级与可交互控件(输入、按钮、开关),仅用灰度与系统强调色,用于收敛“什么放哪里”。
- 原型视图:线框本身成为可点击原型,真实触发元素可导航到目标屏幕,按流程逻辑串联,用于验证屏幕序列是否成立。
使用方式:当用户要求线框化某屏幕、页面或视图,讨论布局结构,把已定义流程物化为屏幕,或组装可点击原型时触发。产物为 HTML 查看器,含网格与幻灯片视图、明暗主题切换、位置哈希链接;也可映射到 Figma 或手绘。
适用场景:结构评审、流程物化、视觉设计前的布局确认。
限制:视觉设计(配色、字体、品牌表达)不在范围内;不编写工程实现文档。资料未提供具体安装命令、收费与平台信息。