某建筑集团
中英双语品牌官网
一家从事建筑设计与模块化制造的集团，需要一个能代表品牌水准、同时面向国内外客户的官网。大图多、清晰度要求高，中英文都要被搜索引擎收录。
- 行业
- 建筑设计与模块化制造
- 服务范围
- 设计还原 · 前端开发 · 多语言 · SEO · 性能优化
- 技术栈
- React · TypeScript · Vite · GSAP · 构建期预渲染 · WebP 多档 srcset
挑战
清晰度要求苛刻
全屏建筑图片是品牌的核心，在 5K 显示器上也不能糊，同时手机上不能加载过大的文件。
双语同等重要
中英文两个版本都要被搜索引擎收录，切换语言时停留在同一页面，不打断浏览。
设计逐项还原
12 张 Figma 设计画板，字体、颜色、字重逐项还原，并适配从手机到超宽屏的所有尺寸。
方案
- 01
按显示尺寸生成多档图片
按页面布局计算每张图片的实际显示宽度，生成多档 WebP，浏览器按屏幕尺寸与像素密度自动选择最合适的一档。
- 02
独立语言 URL + 构建期预渲染
中英文使用独立网址，构建时为每个页面生成独立 HTML，搜索引擎无需执行 JavaScript 即可完整收录。
- 03
译文结构化管理
建立中英文对照与缺失翻译清单，只上线确认过的译文，不用整页机翻。
- 04
流体排版规范
统一三档字号，随屏幕在设计基准与宽屏之间平滑缩放，从笔记本到大屏都保持设计比例。
成果
- 12
- 张设计画板全部实现为响应式页面
- 45/47
- 张页面图片在 5K 屏上达到 2 倍清晰度
- 49.7 MB
- 从未被页面使用的冗余图片资源被清理
- 2
- 种语言，每个页面预渲染为独立 HTML
应客户要求，本案例隐去了客户名称与 Logo。
聊聊你的出海计划，先拿一份免费建站方案
加微信或打电话，说说你的产品和目标市场，3 个工作日内给你一份出海网站方案。免费，不强制合作。
微信
扫码添加微信添加时请备注「出海建站」在微信中打开本页，可长按二维码识别
扫码添加微信