为一家虚构的意大利餐饮集团（三家门店）打造的概念网站：客人可以在平面图上选定具体餐桌，让侍酒师工具搭配一桌晚餐，并随预订提前点菜。
概述
VITALIANO 是一家虚构的意大利餐饮集团，旗下三家门店——网站称之为“家”——分别位于莫斯科、圣彼得堡和索契（计划 2027 年开业）。我把它做成概念，展示餐厅网站在菜单和电话之外还能做什么。网站为英文，菜名用意大利文。
网站要回答客人在晚餐前会问的问题：菜单上有什么、多少钱、配什么喝、每家店在哪里，以及自己具体坐在哪里。预订应当是选座位，而不是填表格。
14
页面，从 La Carta 到预订确认
来源：网站源文件，2026年9月22日
34
菜单标价菜品，另有 8 款葡萄酒
来源：网站源文件，2026年9月22日
20
每家门店平面图上的可订餐桌（共 3 家）
来源：网站源文件，2026年9月22日
70 / 93
首页性能：手机/桌面
来源：Lighthouse 13.4，2026年9月22日
思路
14 个页面：首页、La Carta（菜单）、Il Sommelier、Il Tavolo（预订）、预订确认、私人宴会、Le Case（地图上的门店）、Chi siamo（关于我们）、招聘、联系、带预订记录的演示账户、法律声明、隐私和 404 页面。菜单列出 34 道菜和 8 款葡萄酒及其价格；光标在列表上移动时，菜品照片会随之跟随。
Il Tavolo 为每家店绘制含 20 张餐桌的平面图：靠窗双人桌、主厅、共享长桌 tavolata、柴火炉旁的主厨吧台、包间和露台。可订座位随门店、日期、时段和人数变化，“Surprise me”会挑出最佳空位。Il Sommelier 为每道菜和每款酒设定四个维度的风味画像：客人调节四个滑块并选择心情，网站便把最接近的前菜、主菜、甜点和一杯酒组合成带价格的菜单，作为预点单带入预订。
动效决定节奏：带计数器的预加载、页面之间的橄榄色幕布转场、逐行显现的标题、固定的招牌菜横向画廊、仿佛手绘般自行画出的椭圆，以及磁吸式印章按钮。网站为纯 HTML、CSS 和 JavaScript，使用 GSAP、ScrollTrigger 和 Lenis；预订和账户是保存在浏览器 localStorage 中的演示数据。
图集
成果
这个概念由 14 个可用页面组成：34 道菜、8 款酒、3 家门店，每张平面图 20 张餐桌。Lighthouse 于 2026 年 9 月 22 日测量了首页。移动端（默认限速）：性能 70、无障碍 94、最佳实践 77、SEO 100，LCP 5.0 秒、CLS 0.015，页面 5.4 MB、31 个请求。桌面端：性能 93、无障碍 94、最佳实践 77、SEO 100，LCP 1.0 秒、CLS 0.025。
对在 Chrome 中渲染的 13 个页面（不含 404）的检查显示：每页标题唯一且只有一个 H1，lang 属性为 en，布局在 390 px 屏幕上无横向滚动，100% 的图片有替代文本，内部失效链接为 0。13 个页面都没有 canonical、Open Graph 和结构化数据，也没有 sitemap.xml 或 robots.txt。
SEO 评估
2026 年 9 月 22 日，Lighthouse 给首页的 SEO 在手机和桌面端均为 100，性能移动端 70、桌面端 93；对 Chrome 中渲染的 13 个页面的检查显示基础项到位，但上线层仍然缺失。
Lighthouse
移动端
- 性能：70 / 100
- 无障碍：94 / 100
- 最佳实践：77 / 100
- SEO：100 / 100
- LCP
- 5 秒
- CLS
- 0.015
- TBT
- 0 毫秒
- 体积
- 5.4 MB
桌面端
- 性能：93 / 100
- 无障碍：94 / 100
- 最佳实践：77 / 100
- SEO：100 / 100
- LCP
- 1 秒
- CLS
- 0.025
- TBT
- 0 毫秒
- 体积
- 5.4 MB
已具备：13 个页面标题唯一且各有一个 H1，lang=en，每个页面在 390 px 屏幕上无横向滚动，100% 的图片有替代文本，内部失效链接为 0。尚未达标：13 个标题中只有 6 个在 30–65 字符之间；部分达标：13 个 meta description 中 10 个在 70–170 字符之间。最佳实践在手机和桌面端均为 77，原因是 Pexels 视频 CDN 设置了第三方 Cookie。
上线前：13 个页面都加上 canonical 和带图片的 Open Graph；JSON-LD 为每家门店加入 Restaurant（address、openingHours、servesCuisine、acceptsReservations），加入带价格的 Menu 和 MenuItem、私人宴会的 Event 以及 BreadcrumbList；sitemap.xml 和 robots.txt；加长 7 个过短的标题和 3 个过短的描述；用自托管视频替代 Pexels CDN。对餐厅来说本地 SEO 最重要：每家门店都需要一个带地址和营业时间、可被收录的独立页面，而目前三家门店共用一个带地图的 Le Case 页面。5.0 秒的移动端 LCP 也需要降下来。
| 检查项 | 结果 | 状态 |
|---|---|---|
| 页面标题不重复 | 13/13 | 通过 |
| 标题长度 | 6/13 | 未通过 |
| 元描述 | 10/13 | 待改进 |
| 每页一个 H1 | 13/13 | 通过 |
| 语言属性 | en | 通过 |
| 移动设备适配 | 390 px | 通过 |
| 图片替代文本 | 100% | 通过 |
| 失效的内部链接 | 0 | 通过 |
| 规范网址 | 0/13 | 未通过 |
| Open Graph 标签 | 0/13 | 未通过 |
| 结构化数据 | 0/13 | 未通过 |
| XML 站点地图 | 0/2 | 未通过 |
本案例不能证明的
VITALIANO 是我在 VITON13 为展示能力而做的概念，不是委托项目。餐饮集团、三家门店、人员、菜品、价格和地址都是虚构的。网站没有域名、访客、搜索流量，也没有真实预订：每一次预订和预点单都是留在浏览器里的演示数据。照片和视频来自 Unsplash 和 Pexels 的授权图库素材。
Lighthouse 分数是某一天对首页的实验室测量，不是真实客人的现场数据，SEO 100 也只涵盖基础。本案例没有展示预订如何对接真实的订位系统、厨房或支付，也不能证明网站会为餐厅带来客人。
在筹划类似的项目？每条消息我都会亲自阅读。
下一个项目
FIFTY概念工作室网站
概念2026
全部作品 (19)