# 良人伊欣博客重设计 — 设计简报

> 项目名：lryx-blog
> 平台：网页（PC + 移动响应式） + 微信小程序
> 创建日期：2026-06-19
> 简报版本：v3
> 状态：草稿

---

## 1. 产品定位

**一句话描述**：「良人伊欣」— 宁白久 & 刘小Q 的双人博客，以全栈技术 + 科技前沿内容为主、生活随想为辅，记录代码与日常的个人品牌阵地。

**核心价值主张**：
- 对读者：一个有温度的技术博客，既能学到全栈技术和前沿科技，又能感受到真实的生活气息，区别于冷冰冰的技术站
- 对作者：统一的个人品牌出口，展示技术能力 + 生活品味，辅助职业发展和社交连接
- 对比现有版本：全新视觉风格（活泼亲和），更好的阅读体验，小程序触达微信生态

### 双作者设定

| 维度 | 宁白久 | 刘小Q |
|---|---|---|
| 角色 | 前后端全栈程序员 | 前端程序员 |
| 代表色 | 蓝色系 | 粉色系 |
| 主要内容 | 技术文章（多） | 生活随想（多） |
| 文章署名 | 每篇文章标注作者 | 每篇文章标注作者 |

## 2. 目标用户

### 主要用户画像

| 维度 | 描述 |
|---|---|
| 年龄段 | 22-35 岁 |
| 职业/身份 | 程序员、技术爱好者、朋友、潜在雇主/客户 |
| 使用场景 | 通勤/午休刷技术文章、晚上读生活随笔、朋友间分享链接 |
| 核心诉求 | 获取有价值的内容、了解作者 |
| 痛点 | 现有博客视觉陈旧，阅读体验一般，小程序端缺失 |

### 读者分层

| 读者类型 | 关注点 | 设计应对 |
|---|---|---|
| 技术同行 | 全栈技术深度、前沿科技应用、代码可读性 | 代码高亮、标签分类（前端/后端/AI/...）、清晰的阅读排版 |
| 潜在雇主/客户 | 专业能力、项目经验、个人品牌 | 关于页、突出的作者形象、作品展示（P3） |
| 朋友圈子 | 生活随想、两人日常 | 生活板块的温馨调性（刘小Q 粉色系） |
| 自己（存档） | 回顾记录、搜索历史文章 | 搜索、归档、标签系统 |

## 3. 核心任务流

### 主干路径：读文章

```
打开博客 → 浏览首页（双板块内容预览）→ 进入技术/生活列表 → 点开文章 → 阅读 → 评论/分享
```

### 分支路径

- **搜索/筛选**：打开博客 → 搜索框/标签筛选 → 浏览匹配结果 → 点开文章
- **分类筛选**：任意页面 → 点击分类标签 → 跳转到搜索/标签页展示该分类下的文章
- **留言互动**：打开博客 → 点击导航「留言板」→ 浏览留言/发表留言/申请友链
- **了解作者**：打开博客 → 点击作者头像/关于页 → 查看双作者介绍
- **查看作者个人主页**：任意页面 → 点击作者署名/头像 → 进入该作者独立页（个人介绍+文章列表）
- **切换板块**：任意页面 → 顶部导航切换「技术 / 生活」→ 进入对应板块
- **暗色模式**：任意页面 → 点击主题切换按钮 → 切换明/暗皮肤

## 4. 页面清单

| 页面名 | 一句话说明 | 优先级 | 备注 |
|---|---|---|---|
| 首页 | 混合时间线列表（技术+生活）+ 双作者形象 | P0 | 核心门面，详见下方设计说明 |
| 技术博客列表页 | 技术文章列表，支持标签/分类筛选 | P0 | 占比 70% 的内容 |
| 生活随想列表页 | 生活随笔列表，温馨调性 | P0 | 占比 30% 的内容 |
| 文章详情页（通用） | 文章正文、作者署名、代码高亮、评论区、分享按钮 | P0 | 技术/生活共用模板，视觉随内容类型色微调（技术蓝/生活粉） |
| 留言板 | 读者留言互动 + 申请友链入口 | P0 | 读者互动核心阵地 |
| 关于页 | 双作者介绍（宁白久 & 刘小Q）、社交链接、博客故事 | P1 | 个人品牌核心 |
| 作者独立页 | 作者个人介绍 + 文章列表（最新+精选混排） | P1 | /author/jelon、/author/joanna，详见下方设计说明 |
| 搜索/标签页 | 搜索结果 + 标签云/分类筛选，分类点击后也跳此页展示筛选结果 | P1 | 同时承接标签筛选和分类筛选的结果展示 |
| 日记（说说动态） | 轻量短内容，类似朋友圈/微博，时间线形式，支持作者署名 | P1 | 短文本+图片，发布门槛低 |
| 相册（照片墙） | 照片展示，网格/瀑布流布局，可按时间或主题分组 | P1 | 视觉冲击力强的展示页 |
| 计划进度页 | 计划列表 + 进度追踪，详见下方设计说明 | P1 | 参考 lovey.kikiw.cn + love.naiblog.cn/plan |
| 宠物专属页 | 阿喵和阿汪的独立页面，比首页小窝更丰富的交互和布局 | P1 | 详见 pet-design.md |
| 归档页 | 按时间线展示所有文章 | P2 | 锦上添花 |
| 链接收藏页 | 链接分类 + 卡片式链接列表 + 申请收录入口 | P2 | 不只是友链，包含各类收藏链接 |
| 项目展示页 | 作品/项目展示，辅助求职/接活 | P3 | 最后考虑，优先级最低 |

**P0**：必须有，MVP 核心
**P1**：应该有，体验完整
**P2**：可以有，锦上添花
**P3**：其他全部完成后再启动

### 首页 — 详细设计说明

采用**混合时间线列表**方案（技术 + 生活文章按时间倒序混排），而非双板块并列。

**页面结构**：
1. **顶部区域**：双作者形象展示
   - 两位作者的头像 + 名字 + 一句话简介
   - 简短的博客介绍（「良人伊欣，记录代码与日常」）
2. **中部区域**：最新文章列表（混合时间线）
   - 技术文章 + 生活文章按发布时间倒序混排
   - 每篇卡片：标题 + 摘要 + 发布时间 + 内容类型标签（技术/生活）+ 作者署名
   - 技术文章卡片用蓝色调，生活文章卡片用粉色调
   - 展示 10-15 篇，底部「加载更多」或分页
3. **底部区域**：快速入口
   - 留言板入口、友链入口、归档入口

**设计理由**：
- 个人博客更新频率不高，双板块容易「一边空一边满」
- 混合列表更适合移动端，设计工作量减半
- 读者习惯时间线浏览，技术/生活的区分通过**内容类型色 + 标签**解决
- 作者身份通过**署名 + 头像**体现，不依赖颜色区分

### 计划进度页 — 详细设计说明

综合两个参考站的设计优点，形成以下方案：

**参考来源与取长**：
- `lovey.kikiw.cn/list.php` → 取「计划列表 + 完成标记 + 点击展开详情」的交互模式，但将详情从「展示图片」改为「进度时间轴 + 打卡图片」
- `love.naiblog.cn/plan` → 取「顶部汇总统计 + 筛选 Tab」的信息架构

**页面结构**：
1. **顶部汇总栏**：显示三个统计数字 — 总计划数 / 已完成 / 未完成
2. **筛选 Tab**：全部 / 已完成 / 未完成（对应上方三个统计）
3. **计划列表**：每个计划卡片显示：
   - 计划标题
   - 该计划自身的进度条/百分比（不显示所有计划的总进度）
   - 完成状态标记（已完成 / 进行中）
   - 作者署名（宁白久 or 刘小Q）
4. **计划详情**（点击卡片进入）：
   - 进度时间轴：按时间顺序展示里程碑节点
   - 每个节点可附带打卡图片
   - 直观呈现从开始到完成的全过程

### 链接收藏页 — 详细设计说明

参考 zhheo.com 的卡片式布局，结合用户要求的增强信息量。

**页面结构**：
1. **分类区域**：每个分类有一行标题 —
   - 分类名称（如「友情链接」「常用工具」「技术社区」「设计资源」）
   - 分类一句话介绍（如「一起记录生活的朋友们」）
2. **链接卡片**（网格排列，每行 2-3 个，整卡点击跳转）：
   - 链接 LOGO / 站点图标
   - 链接名称
   - 链接介绍（一句话描述这个站点是什么）
   - 推荐角标（可选，如「推荐」「常用」「新」等标签）
3. **底部**：申请收录入口（提交友链表单）

**交互方式**：整卡点击跳转（卡片整体作为链接入口，不设单独访问按钮）

### 作者独立页 — 详细设计说明

每位作者拥有独立的个人页面（/author/jelon、/author/joanna），用于展示个人品牌和专业方向。

**页面结构**：
1. **顶部区域**：
   - 头像（圆形，左侧）
   - 名字 + 一句话简介（右侧）
   - 社交链接（可自定义渠道，详见下方交互说明）
2. **中部区域**：文章列表（2-4 篇）
   - 最新文章 1-2 篇 + 代表作 1-2 篇混排
   - 代表作卡片右上角显示「精选」小标签
   - 每张卡片：标题 + 摘要 + 发布时间 + 标签
3. **底部区域**：
   - 个人数据统计（文章数 / 标签数 / 总阅读，3 个指标）
   - 「联系我」入口（点击跳转留言板并预填 @作者）

**社交链接交互**：
- 渠道可自定义（微信 / QQ / 抖音 / 邮箱 / GitHub / 掘金等）
- 展示方式因渠道而异：
  - **微信 / 抖音**：点击图标弹出二维码（扫码联系）
  - **邮箱**：直接显示邮箱地址（可点击发邮件）
  - **QQ**：显示 QQ 号（可点击复制）
  - **GitHub / 掘金等**：直接显示链接（点击跳转）
- 图标水平排列，hover 显示渠道名称

**两位作者共用同一模板**，仅内容不同（头像、名字、简介、社交账号、文章列表）。

## 5. 视觉风格方向

**选择的方向**：C — 活泼亲和（个性化强）

- [ ] A. 现代极简（Linear / Notion 风）
- [ ] B. 精致商务（Stripe 风）
- [x] C. 活泼亲和（C 端消费类）—— 多色彩，圆润，亲和力强
- [ ] D. 中国风 / 文化感
- [ ] E. 暗黑专业

**主色（内容类型双色系统）**：
- 技术文章：蓝色系 — 如 #3B82F6（蓝-500），代表全栈技术、理性、专业
- 生活随想：粉色系 — 如 #EC4899（粉-500），代表生活、温馨、感性
**辅色**：中性暖灰 + 米白底，让双色系统不冲突
**中性色基调**：偏暖（米白底 / 暖灰文字）
**内容类型配色策略**：
- 技术文章卡片：蓝色调，体现专业、深度
- 生活文章卡片：粉色调，体现温馨、日常
- 共用元素（导航、页脚、通用组件）：中性色，不偏不倚
- 每篇文章卡片用内容类型色区分，同时署名作者（宁白久/刘小Q）

**参考方向**：
- 现有博客 liangrenyixin.cn 的温馨调性（保留情感内核，升级视觉）
- 当前主题 Grace（theme.nicetheme.xyz/grace/）的简约科技风（卡片式布局、圆角阴影、清爽现代），但要有自己的原创特色，不能照搬
- 活泼但不过度花哨 — 博客需要长时间阅读，配色要舒适
- 双色系统让读者一眼识别「这是什么类型的内容」

**信息密度原则**（重要）：
- **不要过多内容堆砌** — 不是大段留白，而是每个区块的文本信息密度不要太大
- 卡片内容精炼：标题 + 一句话描述为主，不堆叠过多信息层
- 区块之间用间距和分隔线做视觉分组，避免内容挤在一起
- 宁可多用一屏，也不要让一屏塞太多东西

## 6. 约束与规范

- **品牌色**：品牌名「良人伊欣」，域名 liangrenyixin.cn。双色系统：蓝（技术）+ 粉（生活）
- **字体**：无强制要求。中文用 PingFang SC / Microsoft YaHei，英文/代码用等宽字体
- **合规**：无特殊要求
- **技术约束**：
  - 网页端：HTML 单文件设计稿，Tailwind CDN，CSS 变量注入 tokens
  - 小程序端：同步设计，需要考虑小程序设计规范（WeUI 参考）
  - 需要暗色模式支持
  - 代码高亮渲染（技术文章刚需）
- **双端设计**：网页和小程序共用设计语言，但布局适配各自平台特性
- **内容语言**：中文

## 7. 待澄清问题

- [x] ~~品牌主色~~ -> 宁白久蓝色系，刘小Q 粉色系
- [x] ~~博客名~~ -> 良人伊欣
- [x] ~~作者署名~~ -> 需要，每篇文章标注作者
- [x] ~~技术方向~~ -> 全栈 + 科技前沿应用
- [x] ~~项目展示页~~ -> P3，最后再启动
- [x] ~~视觉参考~~ -> zhheo.com（链接卡片）、Grace 主题（整体风格）
- [x] ~~链接收藏页交互~~ -> 整卡点击跳转
- [x] ~~留言板~~ -> P0，保留，读者留言互动 + 申请友链入口
- [x] ~~分类页~~ -> 不需要独立分类页，点击分类后跳到搜索/标签页展示筛选结果
- [x] ~~作者独立页~~ -> 需要，每位作者有独立页面（个人介绍 + 社交链接 + 文章列表 + 数据统计 + 联系我），详见第 4 节设计说明
- [ ] 具体蓝色和粉色的色值确认（当前初选：蓝 #3B82F6 / 粉 #EC4899，设计阶段可微调）

## 8. 参考资料

- 现有博客：https://www.liangrenyixin.cn/?from=homepage
- 当前主题 Grace：https://theme.nicetheme.xyz/grace/
- 链接卡片参考：https://zhheo.com/ （应用推荐板块的卡片布局）
- 计划进度参考 1：https://lovey.kikiw.cn/list.php （取列表+完成标记+点击展开详情的交互）
- 计划进度参考 2：https://love.naiblog.cn/plan （取顶部汇总统计+筛选Tab的信息架构）
- 竞品/其他参考：待补充

---

**简报确认人**：待确认
**确认日期**：待定