Net Rénovation
为手机设计的石膏板工匠网站，因为他的客户就在手机上。
- 年份
- 2026
- 制作周期
- 2 周
- 技术栈
- React · Vite · Tailwind · Vercel
- 移动优先设计
- 开发
- 本地 SEO
- 文案撰写
- 访问来自手机
- 80%
- 基准设计稿宽度
- 375 px
- 性能——已立项并量化的优化任务
- 59/100
需要解决的问题。
背景
一位里昂的石膏板工匠：隔墙、墙面衬板、吊顶、室内保温，服务个人客户和翻新工程。
限制
超过 80% 的访问来自手机，通常是白天通过 Google 地图搜索进入。旧网站是为桌面设计的，在手机上几乎无法使用：表单超出屏幕，电话号码无法点击。
对策
所有页面都先按 375 像素宽的屏幕设计，再向大屏扩展。电话号码始终可点击，表单一屏即可填完，服务项目用客户的语言描述——“重做天花板”，而不是“BA13 石膏板悬挂式吊顶”。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
按 375 像素设计
基准设计稿是手机版，而不是桌面版。反过来设计，手机版总会沦为降级版本——而 80% 的访客恰恰在手机上。
使用客户的词汇
服务项目按客户的说法命名。专业术语依然存在，但放在第二层——既能让人安心，又不会把人拒之门外。
拨打电话与报价始终触手可及
屏幕底部固定操作栏。在手机上，屏幕底部是拇指的活动区，也是唯一能保证随时可达的位置。
项目配色
石板蓝
#2C4A63
品牌识别
橙色
#D96D2B
行动
石膏白
#F7F7F5
背景
墨色
#1E2226
正文
字体系统
标题字体
Outfit 700
正文字体
Inter 400
两套字体足矣；第三套沿袭自原有内容，已在优化方案中列为待删除项。
幕后的技术实现。
- React
- Vite
- Tailwind
- Vercel
坦然面对的性能短板
性能得分 59：这是我们最低的两个分数之一，原因是客户提供的工程案例图库未经优化，外加一款额外的展示字体。优化方案已经写好——统一规范图片、删除第三款字体——将在下一次维护时实施。我们公开这个分数，因为掩盖一个公开的分数从来不会让网站变得更好。
包容的表单
电话号码接受所有常见写法，并自动规范化。因为号码中间用了点号就拒收，是一种荒唐的流失客户的方式。
网站如何被搜索到。
“Plaquiste Lyon”（里昂 石膏板工）及周边市镇
每个实际服务的区域都有一个页面，并配有该区域专属的工程案例。
与 Google 商家资料保持一致
名称、地址、电话和营业时间与商家资料严格一致——绝大部分移动流量正是从那里来的。
交付了哪些内容。
- 首页
- 服务项目
- 案例作品
- 服务区域
- 报价
项目的推进过程。
移动优先
375 px 设计稿、操作栏、一屏填完的表单。
内容
用客户的语言重写服务项目。
开发
包容的表单，本地 SEO。
后续计划
统一规范图片，删除多余字体。
