Acte 2 Théâtre
一个剧场里的五项业务：信息架构就是整个项目。
- 年份
- 2026
- 制作周期
- 4 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 信息架构
- 设计
- 开发
- 票务
- SEO
由Kayzen Web上线在Vercel地址上的演示版本；正式域名归客户所有。
- 类受众，五条路径
- 5
- Lighthouse 性能
- 91/100
- Lighthouse SEO
- 100/100
需要解决的问题。
背景
Acte 2 Théâtre 是位于里昂九区沃伊斯（Vaise）的一家社区剧场。剧场上演儿童剧、成人戏剧、学校专场，开设工作坊，并对外出租场地。
限制
五项业务，五类受众：家庭、成人观众、教师、工作坊学员、活动主办方。每类人要找的信息都不同，按时间顺序组织的网站会让他们全部迷失。
对策
按受众而不是按日历来组织网站。每项业务都有自己的入口、用语和订票路径。日历依然存在，但只是一个横向视图——而不是主体结构。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
按受众设置入口
家庭、成人、学校、工作坊、场地租赁。访客一眼就能找到自己的位置；一个混杂五类内容的日历只会迫使他自己去筛选。
认真对待学校团体
教师要找的是教学资料、适用年级、时长和团体票价。这些信息拥有专属页面；放在别处，只会干扰普通观众。
把场地租赁当作一项产品
容量、技术设备、价格、可预订时段。这是一项稳定的收入来源，却几乎总被扔在联系页面的最底部。
项目配色
午夜蓝
#1C2A45
品牌识别
珊瑚色
#D65A4A
儿童剧
奶油色
#F6F2EA
背景
墨色
#1B1D22
正文
字体系统
标题字体
Outfit 700
正文字体
Inter 400
刻意采用当代风格，而非“戏剧腔”：剧场的观众以少年儿童为主，过于庄重的风格会让家庭望而却步。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
外部票务系统，按需加载
票务模块只在点击后才加载。如果每个页面都嵌入第三方小组件，就会为了一个偶发操作拖累整个网站。
带类型的演出排期
演出、日期、受众、价格和时长集中在一个共用的数据文件中。五个入口和横向日历全部由它生成。
网站如何被搜索到。
每类受众一组搜索词
“Spectacle enfant Lyon”（里昂 儿童演出）、“théâtre Vaise”（沃伊斯 剧场）、“sortie scolaire théâtre Lyon”（里昂 学校观剧活动）、“location salle spectacle Lyon 9”（里昂九区 演出场地租赁）。没有任何一个单一页面能同时满足它们。
Event 与 Place 结构化标记
每场演出都是一个 Event，关联到描述剧场、容量和交通方式的 Place 节点。
交付了哪些内容。
- 首页——五个入口
- 儿童剧
- 成人戏剧
- 学校专场
- 工作坊
- 场地租赁
- 日历（横向视图）
项目的推进过程。
信息架构
识别出五类受众，按受众而非日期组织结构。
设计
独立入口，亲切的家庭化风格。
开发
带类型的演出排期，延迟加载的票务系统。
SEO
每类受众一组搜索词。
