静态网页原型设计，静态说白了就是网页先画个壳子给需求方看。别小看这个壳子，原型它决定了一个项目能不能顺利立项，设计甚至决定了程序员会不会在深夜诅咒你。静态

我见过太多团队，网页跳过原型直接写代码。原型结果呢？设计产品经理说“这里要加个按钮”，开发说“这不就改个样式吗”，静态测试说“需求文档里没写”。网页三个人围着电脑吵了二十分钟，原型最后发现是设计老板在电梯里随口提了一句“用户可能想要个分享功能”。这种场景，静态但凡有个静态原型，网页哪怕是原型用画图工具拼的，都能少掉一半的扯皮。

静态原型和动态原型的区别，就像毛坯房和精装房。动态原型用Axure或者Figma做交互，点按钮能弹窗，拖拽能排序，看起来高级，但改起来也麻烦。静态原型就简单了——一张图，几个页面，把布局、文案、图片位置摆清楚。它不负责演示逻辑，只负责回答一个问题：这个页面长什么样，信息怎么排，用户先看什么后看什么。

做静态原型有个反直觉的地方：越糙越好。别急着上色，别抠图标细节，用灰块和占位符就行。为什么？因为一旦你把视觉做精致了，需求方的注意力就全跑到“这个橙色不好看，换成蓝色试试”上去了，没人关心信息架构合不合理。我有个同事，花了三天精修原型里的每个像素，结果评审会上老板只说了句“首页的logo不够大”，其他全没看。白干了。

正确做法是先用黑白灰把布局敲定。标题多大、按钮放哪、表单分几列，这些结构性问题才是原型该管的事。等结构确认了，再谈视觉。这就像写文章，先搭骨架，再填血肉，最后润色。你见过谁先逐字润色再考虑段落结构的？

工具选择上，我推荐直接用HTML/CSS写静态原型，而不是用专业原型软件。听起来很蠢？其实不。用代码写原型有几个隐形好处：第一，你逼着自己考虑真实的响应式布局，而不是画个固定宽度的假页面；第二，程序员拿到手可以直接看代码，不用再“翻译”设计稿；第三，改起来快——改个padding值比在画布里拖拽精准多了。当然，前提是你自己会写前端，不然就是给自己挖坑。

静态原型还有个妙用：测用户反应。拿几张打印出来的纸片，找几个目标用户，让他们“点击”纸上的按钮，看他们会不会犹豫，会不会问“这个能点吗”。这种纸面测试成本几乎为零，但能暴露大量导航和信息架构的问题。我见过一个团队，原型里把“注册”按钮放在页面右下角，测试时五个用户里有四个找不到。这种低级错误，要是直接上了开发，改起来就是几万块的工时。

说到底，静态原型不是设计稿，不是需求文档，也不是代码。它是沟通工具。它存在的意义，就是让所有人都对着同一张图说话，而不是各自在脑子里想象一个不同的产品。别把它当作品，把它当草稿纸，大胆地画，大胆地扔，大胆地改。真正的好原型，往往是那些看起来粗糙、但每个模块都经得起追问的东西。