本文关键词：做网站原型图
昨天有个刚入行的小兄弟找我。
手里攥着个PSD文件。
非要让我给他改个配色。
我一看，好家伙。
整个页面密密麻麻全是细节。
按钮圆角3像素，阴影深度5像素。
我问他：用户流程跑通了吗？
他愣了一下。
说还没呢，先做漂亮点。
我差点把咖啡喷屏幕上。
这就是典型的“本末倒置”。
很多人做网站原型图，
第一步就错了。
上来就搞高保真。
觉得那样才显得专业。
其实老板和开发都看不懂。
老板只看逻辑，开发只看结构。
你整那些花里胡哨的动效，
除了累死自己，
对推进项目毫无帮助。
记得去年接了个电商项目。
客户是个传统老板。
不懂什么UI/UX。
他给我提的需求是：
“我要个大气的首页，
还要有个显眼的购买按钮。”
我当时没急着画图。
而是拉了张白纸。
跟他聊了半小时。
聊用户从哪来，
聊用户想解决什么问题，
聊购买路径要几步。
最后画了个草图。
只有方框和箭头。
老板看了直点头。
说：“对，就是这个意思。”
要是当时我就出个精美的图，
他肯定盯着字体颜色纠结半天。
根本不会看逻辑。
所以，做网站原型图，
核心是“沟通”，
不是“展示”。
低保真原型（Wireframe）
才是最高效的沟通工具。
它像房子的骨架。
还没装修，
但承重墙在哪，
门开在哪，
清清楚楚。
这时候改起来，
成本几乎为零。
橡皮擦一擦，
或者在Figma里拖个框，
几秒钟的事。
一旦你画完了高保真，
也就是UI阶段。
再想改结构？
那就得推倒重来。
那时候改一个按钮位置，
都要重新切图、标注、
跟前端扯皮。
累不累？
真的累。
我见过太多团队，
因为前期原型没做好，
导致开发做了一半，
产品说“这里逻辑不对”。
然后开发骂骂咧咧地返工。
最后项目延期，
背锅的还是设计师。
其实，做网站原型图
真的不需要多高超的技术。
哪怕你用PPT，
用Visio，
甚至手绘拍照发群里，
只要逻辑清晰，
都比那种花里胡哨但逻辑混乱的图强。
我现在的习惯是：
先纸上画草图。
理清信息架构。
然后再进工具。
推荐几个工具吧。
Figma，现在主流，
协同方便，
不用装软件。
Axure，老牌，
适合做复杂交互。
墨刀，国内友好，
上手快，
适合快速出Demo。
不管用哪个，
记住三点：
1. 别加颜色。
黑白灰足矣。
颜色会干扰对布局的判断。
2. 别写具体文案。
用Lorem Ipsum或者“标题1”代替。
不然客户会纠结文案措辞。
3. 别做动画。
静态图足够表达逻辑。
动画是后期的事。
最后想说句掏心窝子的话。
别被那些“设计感”绑架了。
原型图就是图纸。
图纸不需要好看，
需要准确。
当你把逻辑理顺了，
后面的UI设计只是填空游戏。
当你逻辑都乱了，
再美的UI也是空中楼阁。
做网站原型图，
慢就是快。
前期多花半小时理清逻辑，
后期能省三天加班时间。
这笔账，
你自己算。
别急着点保存。
先问问自己：
这个页面，
真的有必要吗？
用户真的需要吗？
想清楚了，
再动手。
这才是专业设计师该有的样子。
不装，不端，
只解决问题。
共勉。
