线框图Wireframe
你可能会说
先别急着上颜色，帮我画个灰色的页面骨架：页头、首屏、三张卡片、页脚，位置排好就行。
线框图是用灰块和占位线画出的页面骨架——只定「哪里放什么」，不谈颜色和字体。先在纸上或让 AI 画一个灰块版页面：页头多高、首屏放什么、按钮在哪，都只用方框和文字标出。位置定了再上颜色和字体，改起来就不会牵一发动全身。它和成品的分工是：线框管骨架，视觉稿管皮肤。
先知道
也常被叫作线框原型草图页面草图低保真原型
延伸阅读 · 权威出处
先别急着上颜色，帮我画个灰色的页面骨架：页头、首屏、三张卡片、页脚，位置排好就行。
定位置和大小：页头多高、首屏占多大、几张卡片怎么排——这些结构问题在线框阶段确认，改起来只动方框。
写占位文字：真实文案还没定时，用「一句主标题」「一段说明」这样的占位标注，别为了线框提前编内容。
先出首页的线框图：灰色占位块就行，标出页头、首屏、三张能力卡和页脚的位置和大概高度。我确认位置以后，你再上颜色和字体。