便当盒布局设计记录

项目背景

个人风格网站，内容包括阅读书籍、旅行记录、技术探索等生活分享。从传统的 Hero + Section 布局切换到 Bento Box（便当盒）布局。

---

一、布局结构

选定方案：Bento Grid

• 使用 CSS Grid，分 3 行
• Row 1：Hero（2x2）+ “最近在忙” + 引言
• Row 2：书籍（2 cols）+ 旅行（1 col, 2 rows）
• Row 3：折腾记录（2 cols）+ 技术栈

设计原则

• 便当盒的核心是网格布局 + 每个格子内容不同
• 格子里面放什么形态都行，但 grid 骨架保持不变
• 每个模块的展示方式跟着内容走

---

二、配色与风格演进

尝试过的方案

方案	问题
奶白暖棕色系（#FAF8F5）	AI 味重
深色毛玻璃 + 紫色辉光	典型 AI 生成风格
纯白 + 淡蓝/淡绿卡片	太素，差异不明显

最终方案

• 背景：中性浅灰 #F7F7F7，不暖不冷
• 配色逻辑：无主色，靠图片内容本身带色彩
• 字体：Inter + Noto Sans SC（中性、利落、中文友好）
• 交互：hover 用灰度变化，不用品牌色

去 AI 味的关键认知

• 奶白色（#FAF8F5 / #FAFAFA）是 AI 生成的高频背景色
• 毛玻璃 + 紫色辉光 + 深色 = AI 标配
• gradient text、glow 边框是重灾区
• Quicksand/Caveat 等”设计感”字体容易矫情

---

三、卡片差异化

失败的尝试

• 只改圆角大小（16px vs 24px vs 8px）→ 视觉差异微弱
• 只改背景色深浅 → 差异不够明显

有效的差异化

• 引言卡片：深色底 + 白字（页面唯一深色块）
• 旅行卡片：灰色底作为”桌面”，内部做相册堆叠
• 其他卡片：白底 + shadow-sm，保持干净

核心结论

差异化不是靠圆角和边框，是靠每个格子里内容的视觉重量不同。

---

四、旅行相册堆叠效果

设计目标

模拟真实相册摞放的感觉：每个地点是一叠照片，能看出后面还有更多。

实现方案

结构：Dimensional Layering

• 3 层照片：前（清晰）、中（轻模糊+遮罩）、后（更模糊+遮罩）
• 后面的层从右上方露出边缘
• Layer 3（最后面）：上方 14px，右边 10px
• Layer 2（中间）：上方 8px，右边 6px
• 层次靠 elevation shadow 区分（技能 Dimensional Layering 指引）

外部容器：

• 用 #EAEAEA（比页面背景深一点）作为”桌面”
• 三组相册间距 space-y-6（24px），符合 Tailwind gap 规范

后面层的处理：

• 真实照片 + blur-[2px] + 白色遮罩（40% / 30%）
• 模糊统一杂乱色彩，遮罩压住亮度让它退后
• 不用边框（技能指引：靠 shadow 做层次，不靠 border）

尝试过但放弃的

方案	问题
Polaroid 旋转堆叠	不符合”上下堆叠”的需求
纯白纸边占位	”假”，没有信息量
真实照片裸露	边缘颜色杂乱
毛玻璃边框包裹	像塑料壳，压迫感
scale 缩小做层次	缩小量太小看不出来

---

五、交互动效

Hover 多米诺弹跳

• 鼠标进入相册区域时，三层依次弹起（前→中→后，间隔 80ms）
• 每层上浮 4px，200ms 后回弹
• 视觉效果：像用手指拨了一下这摞照片

为什么不做独立 hover：

• 后面两层露出面积 < 44px（最小交互目标），用户无法精确停留
• 技能 UX 指引：Touch target 最小 44x44px

照片轮播切换

触发方式：hover 停留（不自动播放）

• 技能 UX 指引：“Infinite animations are distracting — Use for loading indicators only”
• hover 触发更尊重用户注意力

真实栈结构：

• 切换时三层同时 crossfade（不是只换前面一张）
• 栈顶翻走 → 第二张升级为栈顶（blur 去掉）→ 第三张升级为中间层
• 循环：1 → 2 → 3 → 1

进度条：

• 1px 高，bg-black/20（不抢眼但有提示）
• hover 后出现，走满后立即消失（在转场开始前）
• 转场完成后下一轮进度条重新出现

圆点指示器：

• 右上角小圆点（1.5x1.5），当前白色/其余半透明
• 随 hover 出现/消失

转场预设（可配置）

const config = {
  transition: 'dissolve', // 'fade' | 'dissolve' | 'blur' | 'slide-up'
  duration: 800,          // 转场时间 ms
  interval: 3000,         // 停留时间 ms
}

预设	效果
fade	纯淡入淡出
dissolve	淡出 + 微放大（呼吸散开）← 默认
blur	逐渐模糊 + 淡出
slide-up	上移淡出，新图从下方淡入

---

六、AI 解决实录模块

设计目标

展示”用 AI 解决真实生活问题”的记录，体现个性化内容。

方案选型

方案	评价
常规列表卡片	太文档化，和其他卡片同质
对话气泡（A）	有新意但不多
分类彩色卡片（B）	太常规
终端风格（C）	极客感，和页面其他白色卡片反差大
A+C 混合：终端 + 轮播	← 最终选择

最终实现

视觉：终端窗口

• 深色底 rgba(26,26,26,0.85) + backdrop-blur-md（半透明终端科技感）
• 顶部三圆点（红黄绿）模拟终端标题栏
• 等宽字体（SF Mono / Fira Code），13px
• 颜色：提示符绿色 #86EFAC、AI 标签黄色 #FCD34D、内容纯白 #FFFFFF、结果绿色

内容结构（每条记录 3 行）：

> 小孩眼睛发炎怎么办
[豆包] 细菌性结膜炎，建议妥布霉素滴眼液，每天4次
✓ 第二天明显好转

交互：自动轮播

• 三行逐行淡入（间隔 200ms）
• 显示 4s 后淡出，切换到下一条
• 循环播放

---

七、引言卡片

• 恢复深色底 + 白字版本（bg-primary）
• 是页面里唯一的深色块，和 AI 终端卡片形成呼应但不重复

---

八、技术栈

• 框架：Astro 6.4
• 样式：Tailwind CSS 4.3
• 字体：Inter + Noto Sans SC（Google Fonts）
• 动画：原生 JS + CSS transition（无第三方库）
• 构建：静态站点生成