打开一个网页，网站建模背后至少有三层结构在同时运转：HTML负责内容骨架，网站建模CSS控制视觉呈现，网站建模JavaScript处理交互逻辑。网站建模这三者拼在一起，网站建模才构成用户最终看到的网站建模那张页面。网站建模，网站建模说白了就是网站建模把这套东西从"脑子里想"变成"屏幕上跑"的过程。

我见过不少人一上来就打开编辑器写代码，网站建模写到一半发现导航栏位置不对，网站建模又回头改结构，网站建模改完结构发现响应式布局全乱了。网站建模这种返工，网站建模多半是网站建模因为跳过了建模这一步。建模不是网站建模画几张漂亮的流程图交差，它的核心问题是：这个页面到底由哪些模块组成，模块之间是什么关系，数据从哪来、到哪去。

先画框，再填肉

拿一个电商商品详情页举例。用户打开链接，第一眼要看到商品图，往下滑是价格和规格选择，再往下是详情描述和评价。这个顺序不是设计师拍脑袋定的，它对应着用户的决策路径——先被吸引，再确认信息，最后看别人怎么说。

建模阶段要做的，就是把这个路径翻译成页面结构。用纸笔或者Figma画一个粗略的线框图，标出每个区域放什么内容、占多大比例。手机端和桌面端的布局差异，这时候就得考虑进去。比如规格选择区，桌面端可以放在商品图右侧，手机端必须折叠到图片下方。这些决策在建模阶段敲定，写代码时就不会来回纠结。

有个做独立开发的朋友，接了个餐厅官网的活。他花了两天时间画线框图，客户看完提了十几条修改意见，全是布局层面的。改完线框图再动手写代码，三天就交付了。他说如果直接写HTML，光是调整那些模块位置就得耗掉一周。

数据流也得建模

页面结构画清楚了，接下来要理清数据怎么流动。用户点击"加入购物车"，这个动作触发什么？前端把商品ID和数量打包，发给后端接口，后端返回成功或失败，前端再更新页面上的购物车图标数字。这条链路如果不提前想明白，写出来的代码就是散的，改一处崩三处。

我习惯用一张简单的表格来梳理：左边写用户操作，中间写触发的事件，右边写数据的变化。比如"选择规格"对应"更新selectedSku变量"和"重新计算价格"，"点击购买"对应"校验库存"和"跳转结算页"。表格不用多精致，自己能看懂就行。

别忽略异常状态

新手建模最容易漏掉的是异常状态。网络请求失败了页面显示什么？商品库存为零时按钮怎么变？用户没登录就点收藏，是弹登录框还是先存本地？这些问题不提前规划，上线后就是一堆bug。

我的做法是在线框图旁边直接标注异常状态的展示方式。比如商品图区域，正常状态放图片，加载中放骨架屏，加载失败放一个带重试按钮的占位图。这些细节写进建模文档，开发时照着实现，测试时也有据可查。

网站建模不是一次性的工作。页面加个新功能，或者数据接口变了，模型就得跟着调整。把它当成一份活的文档，而不是写完就锁进柜子的档案。花在建模上的时间，最终都会从减少返工里省回来。