做模板最容易失控的地方,是"边做边改"。设计稿还没定就开始写代码,写完发现结构不对,推倒重来。按阶段推进,能把返工降到最低。
阶段一:需求梳理(1-2 天)
产出:一页纸的需求说明。
要写清五件事:
- 模板给谁用(行业、企业规模)
- 包含哪些页面(首页、列表、详情、关于、联系、404)
- 需要哪些模块(轮播、产品展示、案例、表单、FAQ)
- 是否支持多语言、多配色
- 交付形式(源码、安装包、是否含文档)
这一页纸决定了后面的工作量。跳过它,后面一定反复。
阶段二:原型(2-3 天)
产出:灰度的线框图,PC 和移动各一套。
原型不追求好看,只解决"信息怎么排"。重点确认三件事:首屏放什么、导航几级、转化入口在哪。
这个阶段一定要和决策人确认。等视觉做完再改结构,成本翻三倍。
阶段三:视觉设计(3-5 天)
产出:首页 + 一个内页的高保真设计稿。
不必把所有页面都画完,抓住两个典型页:信息最密的(通常是产品详情)和结构最复杂的(首页)。其余页面用组件拼。
设计时同步定好设计规范:配色、字号、间距、圆角、阴影。这份规范是后面开发的依据。
阶段四:切图与开发(7-15 天)
产出:可运行的模板。
开发顺序建议:
- 搭基础结构(布局、导航、页脚)
- 做首页模块
- 做列表页与分页
- 做详情页与富文本样式
- 做表单与交互
- 做移动端适配
每完成一块就在真实内容下测一次,别等全部做完再测。用真实的最长标题、最大图片去试,能提前暴露排版问题。
阶段五:内容填充(2-3 天)
产出:有真实内容的演示站。
这一步最容易被低估。占位文字和真实内容的排版效果完全不同。至少要填:
- 10 条产品(含长短不一的标题)
- 8 篇文章(含表格、图片、列表)
- 真实的公司信息和联系方式
阶段六:测试与交付(2-3 天)
按检查清单过一遍:链接、表单、移动端、SEO、性能、安全。清单见模板交付前检查清单。
交付物包括:源码、安装说明、使用文档、演示数据。缺一样,客户后面都会来问。
三个常见返工点
| 返工点 | 原因 | 预防 |
|---|---|---|
| 结构大改 | 原型没确认 | 原型阶段签字 |
| 移动端重做 | 最后才适配 | 移动优先设计 |
| 内容排版崩 | 只用占位文字测 | 尽早填真实内容 |
周期参考
一套完整的企业模板,从需求到交付通常 20-30 个工作日。压缩到两周也能做,但测试和内容填充会被跳过,交付质量会打折。
设计规范里必须写死的五项
颜色(主色、辅助色、中性色各三档)、字号(六档)、间距(4 的倍数)、圆角(两档)、阴影(两档)。这五项定死,后面加页面才不会越做越乱。
很多模板做到第八个页面开始"变形",就是因为没有这套约束,每页都在重新决定间距和字号。
交付时附一份改动说明
写清哪些文件被改过、哪些是自定义模块、升级时要注意什么。客户以后换人维护,这份说明能省下一周的摸索。
第六阶段之后,还有一个月
上线不是结束。第一个月观察收录、首屏速度、表单提交和客服反馈,修一批小问题:某个页面在手机上错位、某个表单邮件没收到、某个栏目分页 404。这些问题不影响上线,却直接影响转化。
同时把使用文档交出去:怎么发文章、怎么换图、怎么改 TDK、怎么备份。客户能自己维护,后面才不会每个小改动都找你。
开发文档不用写成长篇,至少写清三件事:怎么本地运行、哪些文件不能改、出问题看哪个日志。这三页纸能省下大量重复沟通。
上线当天留一个人盯着表单和客服,前三个小时最容易发现支付、邮件和缓存问题。
上线前把后台账号、使用文档和备份一起交付。,文档一起交付。
常见问题
能不能跳过原型
小项目可以,但至少要画首页的线框。口头描述的结构,十有八九理解不一致。
设计稿要几个页面
两到三个典型页就够,其余用组件推导。全都画一遍,时间成本太高。
要不要做设计规范
要做。哪怕只有一页,写清颜色、字号、间距,后面改版和扩展都靠它。
开发阶段的代码规范,见模板二次开发规范。