今天想跟大家聊聊我上个月帮朋友公司做网站的全过程，说实话一开始我也没想写这么细，但做完后发现很多坑可以避免，干脆把整个流程捋一遍。

第一步：先搞清楚他们要啥

朋友开的是家本地海鲜批发公司，原来那个网站还是十几年前的老样式，手机根本没法看。我直接约了老板和销售经理聊，拿着本子边问边记：网站要展示产品价格表吗？需要在线下单功能吗？客户主要用手机还是电脑看？聊完才发现他们最急的是让客户能手机查报价，反而在线支付暂时用不上。

• 用XMind画了个功能脑图，把核心页面（首页、产品库、联系方式）标红
• 翻了同行业20多个网站，截图存参考文件夹
• 拉着老板定颜色风格，他非要蓝色配海鲜照片，说显得新鲜

第二步：纸上画框框比软件快

别看现在一堆设计工具，我习惯先拿A4纸画页面布局。首页顶部放导航栏，中间轮播图展示爆款海鲜，底下留一大块更新价格表——这样客户打开网站一眼能看到重点。画废五六张纸才定下初稿，用摹客简单拉了个线框图，发微信群里让老板点确认。

结果销售经理突然说想加个“今日特价”弹窗，我赶紧劝住：“弹窗容易惹人烦，不如在价格表第一行加个红字标签”，双方各退一步改成侧边栏浮动按钮。

第三步：切图写代码遇到硬骨头

本来想用现成模板省时间，但朋友非要加个实时天气插件（说海鲜运输要看天气），只好硬着头皮手写前端。CSS调自适应布局折腾最久——手机上看价格表格老是错位，啃了两天Bootstrap文档才搞定。后端用PHP搭的，数据库字段设计得特别简单：产品名、价格、更新时间这三样就够了。

• 响应式图片折腾到凌晨三点，发现是容器宽度没设百分百
• 测试支付接口时手滑充了十块钱，现在还在账户里躺着
• 老板临时要求加微信扫码功能，用草料生成器十分钟搞定

第四步：上线前差点翻车

把网站传到服务器后，用不同手机测试才发现华为手机字体显示异常，查了半天是字体文件没压缩。最吓人的是备案期间网站突然打不开，原来是服务器商偷偷换了IP，连夜改解析记录才没耽误事。后来让公司员工试用了两天，收集到一堆细节问题：比如产品图片鼠标放上去该放大，联系电话点击直接拨号……

现在网站运行一个月了，老板说客户打电话问价的少了，直接看网站价格表的多了。虽然过程磕磕绊绊，但下次要再做个企业站，估计能省下一半时间。对了，你们要是做网站，千万别学我朋友临时加需求——改起来真能要命。