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