BestBlogs 设计原则与体验系统
更新时间：2026-03-27 状态：Core / Draft
1. 文档目标
本文件用于定义 BestBlogs 的顶层设计原则、体验目标和设计判断标准。
它不负责描述所有 UI 细节，也不直接承担组件实现说明。
它的职责是回答以下问题：
- BestBlogs 的设计要服务什么体验
- 什么样的设计是符合 BestBlogs 的
- 页面、内容对象、阅读流程应该如何被组织
- 品牌、产品、术语如何在体验层落地
- 设计评审时应该优先判断什么
本文件应作为设计、产品、前端和后续文档维护的共同上位约束。
2. 设计与产品的关系
BestBlogs 的设计不能脱离产品定位单独存在。
BestBlogs 不是一个泛内容流，也不是一个纯订阅管理工具。它存在的意义，是帮助用户持续发现更适合自己的高质量内容，并逐步把阅读延伸为理解与沉淀。长期看，它会延展为高质量阅读与知识基础设施，但当前产品核心仍是个性化阅读工作流。
因此，设计的中心不是“展示能力很多”，而是“让用户更稳定地进入高质量阅读节奏”。
这与 Vision、Product、Brand 的主线保持一致。
3. 设计使命
BestBlogs 的设计使命，是帮助用户以更低的认知成本完成以下事情：
- 更快判断什么值得看
- 更轻松理解内容重点
- 更安静地进入深读
- 更自然地形成持续的阅读节奏
- 更明确地感受到系统正在变得“越来越适合我”
设计不是为了把产品做得更像一个“很强的 AI 工具”，而是为了让高质量内容更准确地抵达用户，并让阅读本身更顺畅。
4. 核心体验目标
4.1 三秒判断
用户进入内容广场、我的早报、公共早报、为你推荐、我的关注等入口后，应能够在很短时间内判断：
- 这条内容讲什么
- 值不值得打开
- 和我是否相关
- 阅读成本大概多高
因此，列表设计首先服务“判断”，而不是服务“完整展示”。
4.2 三十秒理解
用户进入详情页后，应能在短时间内掌握：
- 这篇内容的主题
- 为什么值得看
- 哪些部分最重要
- 是否需要继续深读
AI 伴读、摘要、章节跳转等能力存在的前提，是帮助用户更快理解当前内容，而不是把详情页变成一个泛化聊天界面。产品文档已经把 AI 伴读归入“阅读理解与 AI 辅助”，而不是通用助手能力。
4.3 深读安静
当用户决定阅读时，页面应从“帮助判断”切换为“帮助理解”。
此时设计要主动退后，减少与正文竞争注意力的元素。
4.4 持续适合
BestBlogs 的个性化不应给用户一种不可解释的黑盒感，而应让用户逐渐产生一种明确感受：
- 我的早报越来越懂我
- 为你推荐越来越准
- 我的关注越来越有秩序
- AI 伴读越来越像一个靠谱的阅读助手
品牌文档已明确，“个性化不是黑盒”“更适合，而不是更多”是品牌层的核心表达，这必须成为设计层的体验目标。
5. 顶层设计原则
以下原则按优先级排序。发生冲突时，靠前原则优先。
5.1 内容优先（Content First）
UI 控件在视觉上必须退后，内容区域占据主导。
BestBlogs 不是以操作面板为中心的产品，而是以高质量内容为中心的阅读产品。
这与现有设计规范中“内容为王”“筛选器默认收起或使用 inline pills”的约束一致。
5.2 判断优先于装饰
任何视觉元素都需要回答一个问题：
它是否帮助用户更快判断内容是否值得读？
不能帮助判断的视觉元素，即使提升了“完整感”，也不应默认出现。
因此：
- 不为无图内容强行补占位图
- 不为“像 AI 产品”增加重未来感特效
- 不以大图、大色块取代信息层级
- 不让动效变成额外噪音
5.3 层次清晰（Clear Hierarchy）
标题、摘要、元信息、辅助信号之间必须建立稳定而明确的层级。
现有设计规范已把这一点定义为重要原则，要求标题、正文、元信息三层之间有字号、字重、颜色的明确断层。
5.4 节奏优于堆叠（Spatial Rhythm）
BestBlogs 追求的是“秩序感”，不是“密集感”。
页面应通过留白、分组、层级和节奏来建立结构，而不是依靠大量边框和分割线。
5.5 一致且可预期（Consistency）
同类对象在不同页面上的认知方式应尽量一致。
一致性不是机械重复，而是让用户在不断进入不同入口时仍能快速建立稳定心智。
5.6 品牌温度（Brand Warmth）
BestBlogs 的视觉气质不是冷工具，也不是炒作型 AI 产品。
品牌已经明确其视觉语义关键词为：
- Editorial Tech
- Calm Intelligence
- Structured Flow
- Minimal Utility
对应到体验上，应表现为：
- 有阅读感，而不是纯工具感
- 有组织感，而不是信息洪流感
- 有智能感，但不炫技
- 有现代感，但不过度未来化
5.7 更适合，而不是更多
当“展示更多信息”和“帮助用户做出更好判断”发生冲突时，优先后者。
这不仅是品牌原则，也应成为设计中的默认取舍逻辑。
6. 视觉语义
6.1 核心母题：Ink + Amber + Paper
现有设计系统已经明确 BestBlogs 的视觉主题是 Ink + Amber + Paper。
这个定义应该保留，但从顶层文档中，它更应被理解为三种体验语义，而不是三种颜色本身。
- Ink：知识深度、专业判断、稳定可信
- Amber：经过判断后值得注意的高亮
- Paper：承托阅读的温和背景与安静表面
6.2 Amber 的语义
Amber 不是单纯的品牌点缀色，而是“值得注意”的信号色。
它适合用于：
- 当前 active 状态
- 主 CTA
- 精选内容
- 评分与星标
- 选中态指示
- Pro 标识等关键但克制的位置
不应用于：
- 破坏性操作
- 普通正文
- 大面积背景装饰
这与现有设计规范完全一致。
6.3 应出现的视觉线索
根据品牌文档，BestBlogs 应倾向于以下视觉线索：
- 分层卡片
- 页面与内容片段的秩序感
- 来源、标签、摘要的结构化组合
- 柔和高亮线
- 留白与可扫描性
6.4 应避免的视觉线索
应避免：
- 魔法火花
- 脑、机器人、宇宙旋涡
- 过重的 AI 发光特效
- 过于金融终端化的密集仪表盘
- 过像加密项目或炒作型 AI 产品的视觉语言
7. 页面模板系统
页面模板不是单纯的布局复用，而是页面意图模型。
每一个模板都要回答：
- 用户来这里要完成什么
- 页面最应该突出什么
- 页面最不应该打扰什么
7.1 模板 A：品牌 / 营销页
适用场景：
- 首页
- 功能介绍页
- About
- 定价页
- 活动页
用户意图：
- 快速理解产品是什么
- 感受到品牌气质
- 建立信任并形成兴趣
最该突出：
- 产品价值
- 典型路径
- 关键差异
- 品牌态度
最不该打扰：
- 复杂功能术语
- 过多内部概念
- 炫技式 AI 视觉
7.2 模板 B：内容列表 / 工作台页
适用场景：
- 内容广场
- 为你推荐
- 我的关注
- 我的早报列表态
- 公共早报目录页
用户意图：
- 快速扫描
- 进行判断
- 做出下一步动作
最该突出：
- 标题
- 来源
- 摘要
- 内容类型
- 价值信号
- 轻量操作
最不该打扰：
- 默认展开的大量筛选器
- 过重侧栏
- 过多操作按钮
- 与内容判断无关的装饰元素
7.3 模板 C：阅读详情页
适用场景：
- 文章详情
- 视频 / 播客详情
- 研究报告详情
- 早报阅读页
用户意图：
- 理解内容
- 决定是否深读
- 在阅读中完成少量动作
最该突出：
- 正文或内容主体
- 摘要
- 章节结构
- AI 伴读入口
最不该打扰：
- 重复导航
- 过多 badge
- 营销 CTA
- 与正文竞争的工具栏
7.4 模板 D：设置 / 表单 / 管理页
适用场景：
- 来源管理
- 兴趣设置
- Pro 设置
- 账号与偏好设置
用户意图：
- 完成明确配置
- 理解设置结果
- 降低出错概率
最该突出：
- 当前状态
- 关键选项
- 配置结果
最不该打扰：
- 装饰性插图
- 冗余层级
- 过于技术化的术语
8. 内容对象系统
BestBlogs 面向的不是单一内容类型。
文章、播客、视频、推文、早报、研究报告拥有不同的使用预期，设计不应完全同构。
8.1 文章
用户预期：值得认真阅读
设计重点：
- 标题优先
- 摘要帮助判断
- 来源和阅读成本清晰
- 封面图始终从属于文本
8.2 播客
用户预期：适合听，但需要先判断是否值得投入时间
设计重点：
- 时长信息清晰
- 摘要更偏价值说明
- 嘉宾 / 主持人信息清楚
- 若有转录，应作为重要辅助理解信号
8.3 视频
用户预期：信息密度可能不稳定，需要更强前判断
设计重点：
- 标题与时长优先于封面冲击
- 摘要与章节信息更重要
- 来源可信度需要更明确
8.4 推文 / 线程
用户预期：碎片性更强、时效性更高、信噪比波动更大
设计重点：
- 作者与上下文优先
- 文本片段优先于缩略图
- 更强调“是否值得展开看原线程”
8.5 早报
产品文档和术语文档已经明确，“我的早报”“公共早报”是核心入口，并且属于 BestBlogs 每日节奏中的关键节点。
设计重点：
- 有编辑递交感，而不是营销推送感
- 适合快速扫读
- 每一条都服务“今天最值得看的少数内容”
- 适合邮件、网页、音频脚本等多载体延展
8.6 研究报告
术语文档已明确：用户可见名称统一为“研究报告”，内部可保留更结构化术语。
设计重点：
- 强调结构与可回顾性
- 比普通详情页更强调目录、层级、引用、结论
- 更适合“阅读后再回来使用”
9. 阅读体验专项规范
这是 BestBlogs 区别于普通 SaaS 设计系统的核心部分。
9.1 扫描态（Scan Mode）
适用场景：
- 内容广场
- 我的早报
- 公共早报
- 为你推荐
- 我的关注
设计目标：
- 尽快判断
- 尽量少打扰
- 让用户愿意进入下一步
设计要求：
- 标题优先于封面
- 摘要只保留帮助判断的信息
- 元信息简洁
- 标签点到为止
- 卡片操作默认弱化
- 不能依赖 hover 才能看到关键信号
9.2 理解态（Understand Mode）
适用场景：
- 刚进入详情页
- 用户尚未进入连续深读
设计目标：
- 帮用户迅速看懂核心价值
- 帮用户做出“继续读 / 暂时离开 / 收藏备用”的判断
设计要求：
- 顶部信息应快速说明主题与价值
- AI 伴读入口优先帮助理解当前内容
- 摘要、章节、相关问题等首先服务理解，而不是展示能力丰富度
9.3 深读态（Deep Reading Mode）
适用场景：
- 用户已经进入正文连续阅读
设计目标：
- 安静
- 稳定
- 少打断
设计要求：
- 正文是主角
- 侧面板、推荐区、工具条都应弱化
- 辅助功能按需出现，而不是持续抢夺注意力
- AI 伴读是旁侧可信助手，而不是正中央主角
9.4 回顾态（Review Mode）
产品文档已明确，“回顾 / 沉淀”属于每日节奏中的重要方向，虽然仍在建设中，但设计规范需要提前保留语义空间。
设计目标：
- 帮助用户重新看到已读内容中的结构与重点
- 让阅读结果可回顾、可积累、可复用
设计要求：
- 比深读页更强调结构而不是沉浸
- 已读内容的重访成本低
- 划线、收藏、研究报告之间应有统一关系
- 不做成另一个普通信息流
10. AI 伴读的角色定义
AI 伴读是 BestBlogs 的关键能力，但它的角色必须明确克制。
10.1 AI 伴读是什么
AI 伴读是：
- 阅读助手
- 理解加速器
- 当前内容的上下文桥梁
10.2 AI 伴读不是什么
AI 伴读不是：
- 页面主角
- 通用聊天入口
- 替代用户判断的系统
- 泛化“问我任何事”的 AI 面板
10.3 入口策略
- 在列表页：轻入口，不占主视线
- 在阅读页：完整能力，但仍从属于正文
- 在研究与回顾场景：可以更强结构化支持
10.4 设计原则
- 不使用夸张 AI 特效
- 不以“系统正在接管”作为体验感
- 不与正文同级竞争
- 优先支持摘要、章节跳转、划线提问、针对当前内容的理解辅助
这与产品文档中对 AI 伴读的定位保持一致。
11. 信号系统：质量、相关性、个性化
BestBlogs 的一个关键差异，是公共判断力与个人阅读工作流的整合。
因此，界面中必须区分以下三类信号，不能混为一谈。品牌文档也明确强调了“公共判断与个人工作流如何互相增强”。
11.1 质量信号
回答：这条内容本身值不值得看？
例如：
- 精选
- 高质量来源
- 深度内容
- 专家精审
- 平台重点推荐
要求：
- 高置信、克制表达
- 不泛滥
- 一旦出现，应具备解释性
11.2 相关性信号
回答：它和我当前的关注是否相关？
例如：
- 与你的关注主题相关
- 与你最近阅读相关
- 属于你常读来源类型
要求：
- 比质量信号更轻
- 不能伪装成公共权威判断
11.3 个性化信号
回答：为什么它此刻出现在我面前？
例如：
- 为你推荐
- 来自我的关注
- 被加入我的早报
- 因你的行为而提高优先级
要求：
- 尽量让用户理解其来源逻辑
- 让“个性化不是黑盒”变成可感知体验
12. 文案与设计协同原则
设计不能脱离语言系统。
TERMINOLOGY 已经定义了统一表达，BRAND 已经定义了语气边界，设计必须承接它们。
12.1 用户语言优先
界面优先使用用户一眼能理解的表达：
- 内容广场
- 我的早报
- 公共早报
- 为你推荐
- 我的关注
- 研究报告
这些名称已经在术语文档中确定。
12.2 结果导向，不炫技术
文案与界面应优先表达用户得到的结果，而不是系统采用的技术。
推荐方向：
- 帮你更快找到值得读的内容
- 让内容越来越适合你
- 帮你更高效地阅读
避免方向：
- 我们的 AI 很强
- 智能推荐引擎
- 全自动内容理解系统
12.3 克制，不夸张承诺
避免：
- 永远不错过
- 海量高质量内容
- 替你阅读
- 一键掌握一切
品牌文档已经给出过类似的错误 / 正确表达对照。
12.4 动作与关系要分清
- 用户对来源的动作：关注
- 用户与 Pro 的关系：订阅 Pro / 开通 Pro
这在术语文档中已明确规定。
13. 设计评审标准
评审新页面、新功能或重构时，优先检查以下问题：
13.1 体验目标
- 用户此刻的主任务是什么？
- 页面是否帮助用户更快判断与理解？
- 是否有多余噪音？
13.2 内容优先
- 内容是否是绝对主角？
- 标题、摘要、元信息层级是否清楚？
- 是否出现不必要的大图、大按钮、大色块？
13.3 信号清晰
- 质量信号、相关性信号、个性化信号是否被混淆？
- 用户是否看得懂为什么看到它？
13.4 品牌一致
- 是否符合 Editorial Tech / Calm Intelligence / Structured Flow / Minimal Utility？
- 是否出现不符合品牌边界的炒作型 AI 视觉？
13.5 文案一致
- 是否使用统一术语？
- 是否保持清晰、克制、不推销的品牌语气？
- 是否避免过度承诺？
13.6 商业化克制
- Pro 引导是否出现在价值明确、上下文合理的位置？
- 商业化触点是否避免打断用户的阅读主线？
- 是否避免用焦虑式或过度稀缺话术推动转化？
13.7 文档分层边界
- 顶层文档是否只讨论体验原则与取舍逻辑？
- 执行阈值、组件映射、页面触点细则是否落在
6-UI-SPEC.md？ - 是否避免把执行细则重新堆回顶层文档，导致职责混淆？
14. 一句话总结
BestBlogs 的设计，不是为了让产品看起来更复杂、更聪明、更像 AI。
而是为了让用户更快看到真正重要的内容，更顺畅地进入理解，更自然地形成自己的每日节奏，并在持续使用中明确感受到：
它越来越适合我。