用 CSS 搓一个像美食手账一样的落地页到底怎么设计

把美食地图做成数据库太无聊了，我试着把它做成一个像旅行者随笔一样的互动界面。这次折腾的 Rasa 项目核心逻辑是围绕印度饮食的六种味道（Shadrasa）展开的，整个页面的设计思路是想让用户产生一种“翻阅感”，而不是在刷一个典型的餐厅官网。

为了实现这种触感，我没有用常见的 Grid 布局堆菜品，而是设计了一套递进的视觉引导：先通过 CSS 绘制的 Mandala 曼陀罗图引入概念，再引导用户进入互动区域。这里的逻辑链条是：Rasa（概念）→ 味道 → 地区 → 菜品 → 故事。只有先建立了这个心理模型，后面的交互才能顺畅。

最让我觉得有意思的实操点是那个“舌头地图”。虽然科学上说味觉受体是分布在全舌的，但为了视觉隐喻，我把它做成了六个可交互的区域。这其实成了整个站点的核心导航：用户点击某个区域，相机直接平滑移动到对应位置，然后弹出相关的现场笔记。

在具体实现细节上，我避开了所有像“目录”一样的设计，因为印度饮食的维度太复杂了，从街头小吃到部落传统，用卡片流根本承载不了。所以我给每个味道配了一个有身份的引导员，比如负责发酵植物学的 Ami 或者沿海导航员 Neer。为了防止界面太嘈杂，这些人物头像我用了 DiceBear 的 Open Peeps SVG，且刻意限制了动画幅度，只在响应时才有动作，避免那种廉价的循环 Idle 动画。

最硬核的交互在最后的“笔记本”环节。我放弃了常规的滚动列表，而是写了一个模拟真实笔记本翻页的组件，用户可以像翻书一样在 84 道菜品之间切换，并且能看到区域性的批注。

如果你也想尝试这种非线性导航的落地页，可以参考这个简单的交互逻辑：

一、建立一个中心视觉锚点（比如我的曼陀罗图或舌头地图）
二、通过坐标偏移（Camera Move）而非页面跳转来切换内容
三、用模拟物理材质（如笔记本翻页）替代标准的 UI 组件