Muller Toiture
屋顶漏水不能按装修项目来处理：两条路径，一个网站。
- 年份
- 2026
- 制作周期
- 4 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 设计
- 开发
- 估价工具
- 本地 SEO
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 独立访问路径
- 2
- 估价所需问题
- 3
- Lighthouse SEO
- 100/100
需要解决的问题。
背景
Muller Toiture 是一家位于米翁（Mions）的屋面工程公司，服务里昂东部和北伊泽尔（Nord-Isère）地区：屋面铺设、锌板工程、保温隔热、除苔。
限制
两类行为截然相反的客户来到同一个网站。屋顶漏水的人要的是电话号码，立刻就要，而且常常是在周日晚上。打算翻新屋顶的人要的是价格区间，会在两个月里比较三份报价。单一的访问路径会让两者都得不到好的服务。
对策
从首屏起就分出两个入口。一条常驻的紧急横幅，电话号码无需滚动即可看到。另一边，为第二类客户提供屋顶估价器，根据面积和屋面类型即时给出价格区间。一个承接紧急需求，一个承接长期意向。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
常驻紧急横幅
电话号码可直接点击拨打，始终可见，滚动时也不会被遮挡。对于漏水，唯一重要的指标是从进入网站到拨出电话之间的秒数。
三个问题完成估价
面积、屋面类型、现状。结果明确标注为价格区间，并列出其前提假设。给出精确价格是不诚实的；什么都不给，访客就会转向敢于报价的竞争对手。
除苔单独呈现
这项服务客单价低，但需求量大，而且常被单独搜索。因此它有自己的页面，而不只是列表中的一行。
项目配色
石板灰
#39434D
结构——取自屋面材料的颜色
瓦红
#B15A2B
行动
天空
#EEF3F7
背景
警示红
#C0392B
仅用于漏水横幅
字体系统
标题字体
Outfit 700
正文字体
Inter 400
警示红严格只用于漏水横幅：警示色一旦被用作装饰，就不再具有警示作用。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
估价器完全在客户端运行
计算在浏览器中完成：无需请求服务器，无需等待，在用户主动决定之前不收集任何个人数据。只有在显示结果之后才会请求联系方式。
已明确的性能优化计划
性能得分 75，原因在于工程案例图库。优化方案已经写好：转换为 AVIF、使用 srcset、将图库分页。分数是公开的，解释它比掩盖它更有意义。
网站如何被搜索到。
紧急类搜索与项目类搜索
“Fuite toiture urgence Lyon”（里昂 屋顶漏水 紧急）、“couvreur Mions”（米翁 屋面工）、“prix réfection toiture Nord-Isère”（北伊泽尔 屋顶翻新价格）。三种意图，三组页面：混在一起，结果哪个都排不上。
明确的服务区域
实际服务的市镇逐一列出并加以结构化标记。宣称服务“全法国”的工匠会失去市镇级搜索，而那恰恰是唯一能带来转化的搜索。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
估价器可完全用键盘操作
使用原生表单字段，结果在 live region 中播报，没有任何步骤依赖拖放操作。
交付了哪些内容。
- 首页——紧急求助 + 估价器
- 屋面与锌板工程
- 保温隔热
- 除苔
- 屋顶估价器
- 服务区域
- 联系我们
项目的推进过程。
需求分析
根据接到的来电，识别出两类客户画像。
设计
紧急横幅、估价器、分离的访问路径。
开发
客户端估价器、表单、通知。
SEO
三组页面，服务区域结构化标记。
