线框图Wireframe

先认出这张灰阶线框，再点主操作或尝试上色

下面就是视觉稿前的项目列表线框：灰块、占位和唯一主操作。点「新建项目」看主路径；再切空状态，或点「尝试上色」看品牌色涂到同一张列表上，再剥回灰阶。

知识点：线框把结构从视觉里剥出来

上面的画布已经演示了核心关系，这里只给可复用的命名。

• 每屏只有一个主操作，用唯一强调块标出，不靠品牌色。
• 主路径要连通：点主操作能走到下一屏线框。
• 空和错误有专属位置，不靠红色或弹窗临时救场。
• 颜色、像素、阴影被显式写出来暂缓，评审才不会跑题。

什么时候用、怎么用

线框用最低成本对齐结构和流程，不是用来定品牌。

• 信号：还没进视觉稿，注册、列表、空状态的层级和主操作对不齐。
• 适用：视觉稿前的两到三屏灰阶评审。
• 不适用：定按钮配色、字体、阴影和间距像素。
• 最短路径：选一条任务 → 画灰阶 → 标唯一主操作 → 写「暂缓颜色」→ 走通空或错误。

正反例：同一屏线框，只换是否掺视觉

任务都是「评审项目列表屏」。差别只在结构是否被配色盖掉。