Les Halles de Lyon Paul Bocuse
六十家商户，一个地点：网站既要是名录，也要是橱窗。
- 年份
- 2026
- 制作周期
- 5 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 信息架构
- 设计
- 开发
- SEO
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 家收录商铺
- 60
- Lighthouse 无障碍
- 97/100
- Lighthouse 性能低于我们 90 分的目标：一个包含六十家商铺及其照片的名录天生体量较大；减轻这一负担（延迟加载、更紧凑的格式）是下一轮迭代的首要任务。
- 76/100
需要解决的问题。
背景
里昂保罗·博古斯市场（Halles de Lyon Paul Bocuse）汇集了约六十家商铺——肉铺、奶酪铺、生蚝海鲜铺、甜点铺，其中多位店主获得“法国最佳手工业者”（MOF）称号。这里曾被《Food & Wine》评为全球第三佳市场。
限制
一个集合型场所的网站总是左右为难：如果只讲场所本身，它帮不了任何人找到某家具体的商铺；如果只做成一本名录，又会失去一切让人想来的理由。网站既要服务初次探访的游客，也要服务搜索“市场里那家奶酪铺”的人。
对策
两层叠加。叙事层——历史、摄影、氛围——激发前来的欲望。名录层——60 份商铺资料，可按行业筛选，附位置和营业时间——提供实际用处。前者负责吸引，后者负责留住。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
每家商铺一份资料
行业、特色产品、在市场内的位置、营业时间。这些信息几乎总是缺失的，访客因此常常在过道里兜圈子。
按行业筛选
肉铺、奶酪铺、生蚝海鲜铺、果蔬铺、酒窖、熟食铺。访客找的不是店名，而是需求；筛选方式遵循人们思考市场的方式。
满幅摄影，但有节制
文化遗产需要被展示。图片宽幅而精致，但渐进加载：图库不会拖累访客要找的那家奶酪铺的资料页。
项目配色
市场红
#9B2C2C
品牌识别
瓷砖白
#FAFAF8
背景
石板灰
#2B2E33
正文
黄铜
#B99247
线条与 MOF 奖章
字体系统
标题字体
Playfair Display
正文字体
Inter 400
文化遗产的调性需要衬线字体；名录需要紧凑的无衬线字体。两者按区域共存，绝不出现在同一个区块中。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
结构化数据驱动的名录
60 家商铺存放在一个带类型的数据集中，是列表、筛选器、平面图和结构化标记的唯一数据源。修改营业时间只需改一处。
性能 76 分：一个坦然承担的取舍
这个分数低于我们的标准，我们选择记录在案而不是隐瞒：文化遗产图库体积较大。这是已确定的首要优化任务——转换为 AVIF，并更细致地拆分图库。
网站如何被搜索到。
每个行业一个页面
“Fromager Halles Paul Bocuse”（保罗·博古斯市场 奶酪铺）、“écailler Lyon”（里昂 生蚝海鲜铺）：每个行业都有自己的汇总页面，承接首页无法覆盖的搜索。
场所与商铺的结构化标记
场所带有一个 Place 节点，每家商铺带有一个关联的 LocalBusiness 节点。层级关系对搜索引擎和智能助手都一目了然。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
筛选器与结果都会播报
切换筛选条件时，live region 中的结果计数会随之更新。否则，视障用户根本不知道列表已经变化。
交付了哪些内容。
- 首页——场所
- 60 家商铺——可筛选名录
- 行业页面
- 历史与文化遗产
- 交通、营业时间、平面图
项目的推进过程。
信息普查
60 家商铺的行业、位置、营业时间。
信息架构
叙事层与名录层，按行业筛选。
设计
文化遗产调性、图库、商铺资料页。
SEO
行业页面，Place 与 LocalBusiness 结构化标记。
