Bento 布局重设计探索记录

记录时间：2025-06-26 状态：暂停 — 转向 Figma/Stitch 等可视化设计工具继续探索

---

一、探索背景

个人网站采用 Astro + Tailwind CSS 构建，部署在 Vercel，代码托管 Gitee。网站定位为：Java 开发者转 AI 编码方向的个人技术站，风格克制安静，Bento Grid 布局。

本次探索的起点是书籍模块的”翻页展示名句”交互，后逐步扩展到整站布局、内容策略、配色节奏的全面重新规划。

---

二、书籍翻页交互探索

2.1 探索过程

阶段	方案	结果
V1	CSS 3D rotateY(180deg) 中心轴翻转	生硬，像旋转门
V2	transform-origin: left 从书脊翻开	翻过去后占用左侧空间
V3	翻到 90° edge-on 消失在书脊	消失太突然
V4	完整翻转 + 末段淡出 + skew 弧度	高光和淡出效果不够自然
V5	双面结构（正面图片 + 背面纸质纹理）	翻过去后仍占空间
V6	翻到 90° + scaleX 压缩贴书脊	中线伪影

2.2 核心物理限制

transform-origin: left + 翻转超过 90° 时，封面必然占据书的左侧外部空间。在 bento 格子里左边紧挨其他卡片，没有可用空间。这是 CSS 3D 翻转在受限容器内的根本矛盾。

2.3 最终放弃翻页，转向替代方案

方案	效果	选择
A: 书签抽出（translateY 从底部滑出）	流畅、无穿帮	实现并测试
B: 柔和转场（cross-fade + scale + blur）	极致顺滑、现代感	最终采用

最终选择方案 B：点击封面后封面 scale(0.92) + blur(4px) + opacity 淡出，名句面从下方淡入上浮。纯 2D 过渡，零 3D 穿帮。

2.4 补充优化

• 名句面配色：用 nth-child(6n+N) CSS 变量自动轮循 6 种柔和色调，无需手动配色
• 书籍 3D 厚度感：多层 box-shadow 模拟页面堆叠
• 交互确定为 click（非 hover），理由：名句需要阅读时间，hover 容易误触发

---

三、内容策略调整

3.1 新增内容

内容	实现方式	状态
Content Collections（文章系统）	src/content/posts/*.md + 动态路由	✅ 完成
文章详情页 /posts/[id]	Astro 动态路由 + prose 样式	✅ 完成
书单页 /books	23 本书按年份分组 + 名句	✅ 完成
Token 消耗统计卡	总量 + 7天柱状图	✅ 完成
项目经验卡（深色）	4 个项目（智慧农业/环保/政务/个人站）	✅ 完成
AI Tools 卡	6 个工具彩色圆形图标	✅ 完成
在读卡（紧凑版）	单本封面竖图	✅ 完成
Travel 紧凑版	单地点 + 自动切换	✅ 完成

3.2 内容优先级定义

优先级	内容	理由
核心	折腾记录（文章）	技术产出，最有深度
核心	项目经验	能力证明
辅助	Books / Travel	生活面补充
氛围	Quote / Now / Token / Stack / AI Tools	人格化、状态信息

3.3 项目经验包装策略

将 20+ 个政企中小型项目按能力维度合并为 4 个方向：

1. 智慧农业数字化平台 — 10+ 区县方案（Spring Cloud Alibaba）
2. 环境监测与预警系统 — 多源实时数据（Spring Boot）
3. 政务数字化协同平台 — 工作流/审批/移动端（Spring Boot）
4. 个人技术站 — AI 辅助构建（Astro + AI Coding）

---

四、布局演进

4.1 初始布局（分行 Grid）

Row 1: Hero(2col) + Now + Quote
Row 2: Books(2col) + Travel(row-span-2)
Row 3: AiSolves(2col) + Stack
Row 4: Explorations(2col)

问题：折腾记录在最底部；Books 占核心区但非核心内容。

4.2 中间调整

多次重排尝试：

• 折腾记录提到 Row 2 → 左侧太素
• Books 和 Explorations 互换 → 文章核心区更突出
• Projects 深色卡加入 → 右侧形成 Z 字深色节奏
• AiSolves 替换/移位 → 最终保留在下方

4.3 最终目标：12 列自由 Bento Grid

放弃分行布局，改为统一的 12 列 CSS Grid：

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 1rem;
}

每个卡片手动指定 grid-column / grid-row，可任意大小任意位置。

4.4 12 列布局的最终规划（未完成，有冲突待解决）

卡片	列	行	尺寸	类型
Hero	1-6	1-3	6×3	白/文字
Now	7-9	1-2	3×2	白/文字
Quote	10-12	1-2	3×2	深色
Token	7-9	3	3×1	图表
在读	10-12	3-4	3×2	图片
AI Tools	1-3	4-5	3×2	彩色图标
Explorations	4-9	4-7	6×4	白/文字
Travel	1-3 or 1-4	6-8	3×3 或 4×3	图片
Projects	10-12	5-9	3×5	深色
AiSolves	4-9	8-10	6×3	深色
Books	1-3	9-11	3×3	图片
Stack	10-12	10-11	3×2	白/标签

待解决：Travel 宽度（3col=270px 是否够展示风景图）需要可视化确认。

---

五、设计原则总结

5.1 配色节奏

• 深色块分散放置（对角线/Z 字形），不扎堆
• 图片卡互不相邻，中间用文字/深色块缓冲
• 每半屏视口内混合：文字 + 深色 + 图片 + 色彩

5.2 卡片大小参差

• 不允许一行内所有卡片等大
• 大中小卡片混合搭配
• 用”装饰性小卡”打破规整感

5.3 Skill 规范合规项

规范	执行情况
无 emoji 做图标	✅ 用 SVG（Lucide 风格）
cursor-pointer 可点击元素	✅
Hover 150-300ms 过渡	✅
prefers-reduced-motion	✅
动画仅用 transform/opacity	✅
文字对比度 4.5:1	✅

---

六、技术实现备忘

6.1 已完成的技术配置

• Astro Content Collections（src/content.config.ts）
• 文章 Markdown 渲染 + prose 样式
• 动态路由 /posts/[id]
• 12 列 CSS Grid 基础结构
• 移动端 fallback（<768px flex column 堆叠）

6.2 响应式策略

断点	行为
lg（1024+）	12 列精确定位
md（768-1024）	待设计（建议 6 列）
sm（<768）	单列堆叠

6.3 部署流程

写 md / 改代码 → git push (Gitee) → Vercel Deploy Hook → 自动构建上线（~30s）

---

七、暂停原因与后续方向

7.1 为什么暂停

在纯代码/ASCII 字符画中设计 Bento 布局存在明显瓶颈：

1. 不直观 — 格子坐标和实际视觉效果之间有认知鸿沟，反复调整后仍有冲突
2. 迭代太慢 — 每次调整都需要：讨论→修改代码→构建→查看截图→发现问题→再讨论，一个循环 5-10 分钟
3. 缺少全局预览 — 无法同时看到所有卡片的相对关系、颜色对比、间距效果
4. 响应式无法验证 — 只能看到一个断点的效果

7.2 后续计划

转向可视化设计工具完成布局规划：

工具	用途
Figma	精确设计 12 列 Grid 布局、配色、间距、响应式
Stitch	快速生成 UI 组件

设计稿确定后，再回到代码实现。这样”设计”和”编码”分离，效率更高。

7.3 当前代码状态

• Git 最新提交：49b7b07（恢复版本，清理实验性组件）
• 12 列布局已有基础代码框架，但 grid 坐标有冲突需要在设计稿中重新规划
• 所有新组件（AI Tools、Reading、TravelCompact、Projects）已创建可用
• Content Collections、/books 页面、文章详情页均已完成可正常工作

---

八、关键文件索引

文件	说明
src/pages/index.astro	首页（当前含 12 列 grid 代码，有冲突）
src/pages/books.astro	书单详情页
src/pages/posts/[id].astro	文章详情页模板
src/content.config.ts	Content Collections 配置
src/content/posts/*.md	3 篇文章
src/components/BentoAiTools.astro	AI 工具图标卡（新）
src/components/BentoReading.astro	在读紧凑卡（新）
src/components/BentoTravelCompact.astro	旅行紧凑卡（新）
src/components/BentoProjects.astro	项目经验深色卡（新）
src/components/BentoTokens.astro	Token 统计卡
src/styles/global.css	全局样式 + prose 排版