# 日报重构 UI 设计说明书 > 项目：LLM Intelligence Hub > 日期：2026-05-13 > 状态：设计基线 > 适用范围：HTML 日报、前端 Dashboard 日报摘要入口、后续移动端 / Web 端统一视觉规范 ## 1. 背景 当前日报已经能输出真实数据，但整体阅读体验更接近“数据库导出结果页”，而不是“每天值得打开的 AI 模型与价格情报产品”。 现状问题： - 首屏缺少“今日发生了什么”的判断，读者看完仍不知道重点。 - 免费模型、推荐模型、分类概览之间存在重复，信息层级不清。 - “免费”语义混淆，官方免费、聚合免费、活动免费没有视觉区分。 - 移动端沿用了桌面表格逻辑，不适合快速浏览。 - 页面缺少品牌气质，无法体现“高端移动资讯产品 + 专业选型工具”的特点。 本次 UI 重构不推翻底层数据库，不改动项目对模型、价格、平台、来源的原始采集事实；只在日报内容组织和页面呈现层重构“让用户愿意看、看得懂、看完能行动”的产品体验。 ## 2. 设计目标 ### 2.1 产品目标 新日报要同时服务两类用户： - 选型决策者：今天该试什么模型，哪个更划算，哪些来源更稳。 - 行业情报读者：今天市场发生了什么变化，哪些发布、活动、价格战值得关注。 默认优先级：**两者兼顾，但优先选型**。 ### 2.2 体验目标 新日报必须满足以下体验要求： - 用户在 30 秒内理解“今天最重要的变化”。 - 用户在 1 分钟内得到“今天该优先关注谁”的结论。 - 用户能一眼分辨“官方免费 / 聚合免费 / 活动免费 / 来源待验证”。 - 移动端首屏不依赖长表格，也不依赖大段说明文字。 - 页面视觉上要像“高端移动资讯产品”，而不是管理后台。 ### 2.3 不做什么 - 不把首页继续做成全量模型清单。 - 不在主阅读区堆长段分析文字。 - 不把灰区或待验证来源直接混入主推荐。 - 不为了炫技加入噪音型动画或低质装饰。 ## 3. 内容策略 ### 3.1 基本原则 日报采用以下原则： - 先结论，后证据。 - 先变化，后存量。 - 先行动建议，后完整数据。 - 主区讲重点，附录讲完整。 ### 3.2 主体结构 日报正文固定拆成四层： 1. 今日结论区 2. 今日变化区 3. 今日选型推荐区 4. 附录区 其中： - `今日结论区` 负责抓眼球和快速定调。 - `今日变化区` 负责解释“为什么今天值得看”。 - `今日选型推荐区` 负责直接输出可执行建议。 - `附录区` 负责保留数据库完整性与查阅深度。 ### 3.3 事件类型 日报重点事件按以下类型组织： - `new_model` - `official_release` - `price_cut` - `price_increase` - `free_policy_change` - `promo_campaign` - `source_risk_change` 同一模型可以有多个事件标签，但在首页只选择一个主标签展示。 ### 3.3.1 变化基线规则 为保证“今日变化”具备稳定解释力，所有变化事件必须绑定统一的比较基线，禁止只展示“变了”而不说明“相对什么变了”。 允许使用的变化基线： - `较昨日` - `较上次有效价格` - `7日内新低 / 新高` - `首次出现` - `官方首次发布` 规则要求： - 所有 `price_cut` / `price_increase` 必须显示比较基线。 - 所有 `new_model` 必须显示“首次出现”或“官方首次发布”。 - 所有 `free_policy_change` 必须显示“由付费转免费”或“由免费转付费”的方向信息。 - UI 上必须保留一个稳定的基线展示位，不允许只靠颜色表达变化。 推荐展示格式： - `较昨日 -18%` - `较上次调价下降 ¥0.20/M` - `7日内最低价` - `首次出现在可信来源` ### 3.4 免费模型与来源可信度 日报层必须在原始数据上额外生成语义标签： - `official_free` - `aggregator_free` - `promo_free` - `trial_credit` - `unknown_free` 来源可信度分级： - `official_verified` - `cloud_verified` - `aggregator_verified` - `self_hosted_gateway` - `unverified_relay` 规则要求： - 所有“免费”展示必须带来源类型徽标。 - 主推荐区默认只允许 `official_verified`、`cloud_verified`、`aggregator_verified`。 - `self_hosted_gateway` 与 `unverified_relay` 只进入观察区或风险提醒区，不进入主推荐。 ### 3.4.1 来源证据露出规则 来源可信度标签不能只做视觉标识，必须给用户可追溯的证据入口。 对以下卡片强制增加来源证据位： - 头条事件卡 - 推荐模型卡 - 免费模型卡 - 风险提示卡 每张卡片至少要能露出： - 主来源名称 - 更新时间 - 来源链接入口 可选露出： - 判定说明 - 采集时间 - 次级证据来源 交互建议： - 移动端默认展示“来源名称 + 更新时间”，点击展开二级抽屉或详情层查看完整来源信息。 - Web 端可使用 tooltip、侧边详情层或内联折叠区展示判定说明。 目标： - 用户看到“官方来源”“聚合来源”“来源待验证”时，能够进一步确认其依据，而不是只看到一个不可解释的标签。 ## 4. 视觉方向 ### 4.1 总体方向 本项目 UI 气质定义为： **高端移动资讯产品 + 专业决策工具** 不是传统 BI Dashboard，也不是普通资讯流，而是“AI 情报晨报 + 交易决策界面”的混合体。 ### 4.2 风格关键词 - 高端资讯感 - 科技商业感 - 情报头条感 - 专业但不冰冷 - 可快速扫读 - 强标签系统 ### 4.3 视觉原则 - 浅底，不以深色为默认主题。 - 重点靠信息层级抓眼球，不靠大图堆叠。 - 大字号结论、大标签、少字说明。 - 颜色必须承担信息语义，而不是纯装饰。 - 卡片感明确，但避免“廉价卡片流”。 ## 5. 视觉系统规范 ### 5.1 颜色系统 主色建议： - 墨蓝：核心情报、正式发布、品牌主色 - 祖母绿：降价、利好、值得试 - 琥珀橙：活动、促销、观察项 - 朱砂红：来源风险、灰区提醒、负面变化 - 雾灰：背景、辅助信息、弱层级 颜色语义要求： - 用户看到颜色即可大致判断事件性质。 - 同一类标签在所有模块中颜色必须一致。 ### 5.2 字体系统 文字不能小，移动端优先规则如下： - 一句话结论：22px-26px - 头条标题：18px-20px - 卡片标题：18px - 正文短句：15px-16px - 标签：12px-13px - 主阅读区正文禁止低于 14px 设计要求： - 标题字要有媒体感和辨识度。 - 正文字必须优先可读性。 - 不使用普通后台式默认字体堆满页面。 ### 5.3 标签系统 标签是核心视觉语言之一，必须标准化。 建议标签： - 官方发布 - 聚合免费 - 官方免费 - 限时活动 - 价格下调 - 来源待验证 - 适合编码 - 适合 Agent - 官方来源 - 聚合来源 约束： - 每张卡最多展示 3 个标签。 - 标签必须足够粗、足够醒目，但不应压过主标题。 ### 5.4 图标系统 采用简洁功能型图标，不做插画主导。 建议图标语义： - 火焰：热点 - 向下箭头：降价 - 礼盒 / 闪电：活动 - 盾牌：可信来源 - 感叹号：风险提醒 ### 5.5 动效规范 动效应提升高级感，不制造噪音。 建议： - 首屏卡片分层渐入 - 标签轻微浮现 - 卡片 hover / tap 有短促反馈 - 折叠区展开用轻量过渡 禁止： - 大范围抖动 - 夸张发光 - 低质漂浮动效 - 干扰阅读的连续动画 ## 6. 移动端首页结构 移动端首页按“先结论，后机会，再证据”组织，共六个区块。 ### 6.1 顶部情报头 内容： - 日期 - 数据更新时间 - 今日市场状态标签 - 一句短副标题 目标： - 让用户第一眼知道这是一份“今日 AI 情报晨报”。 ### 6.2 一句话结论卡 规则： - 只保留 1 条主结论 - 控制在 28-40 个中文字符 - 最多 2-3 行 - 必须在手机首屏内出现 作用： - 让用户一眼知道“今天真正重要的变化是什么”。 ### 6.3 三条行动建议 每条卡片固定结构： - 建议动作 - 适用人群 - 2-3 个原因标签 目标： - 用户无需先读完整日报，就能获得可执行建议。 ### 6.4 今日头条卡片流 内容： - 新模型发布 - 重要价格变化 - 活动 / 免费策略变化 卡片必须包含： - 事件标签 - 标题 - 为什么重要 - 来源可信度 ### 6.5 场景推荐区 按场景分组： - 低成本编码 - 中文通用 - Agent / 工具调用 - 视觉 / 多模态 每组最多展示 3 个候选。 ### 6.6 附录入口 附录包含： - 完整免费模型 - 完整价格表 - 平台覆盖 - 套餐信息 要求： - 默认收起 - 不打断首页信息节奏 ## 7. Web 端布局策略 Web 端不是移动端的放大版，而是“带更多证据的完整版”。 ### 7.1 首页布局 建议： - 左侧：一句话结论 + 行动建议 + 今日头条 - 右侧：关键指标 + 风险提示 + 今日市场状态 ### 7.2 内容承载 - 场景推荐区适合用矩阵布局增强对比。 - 附录区允许展开更多表格和来源说明。 - 可加入锚点导航，支持快速跳到： - 今日变化 - 推荐 - 免费来源 - 附录 ### 7.3 一致性 移动端与 Web 端必须共享同一套： - 一句话结论 - 头条事件 - 推荐场景 - 来源可信度标签 ## 8. 核心组件定义 建议优先设计以下组件： ### 8.1 一句话结论卡 用途： - 承担首屏最大视觉锚点 要求： - 大字号 - 极少文字 - 强背景对比 ### 8.2 行动建议卡 用途： - 输出“今天该做什么” 要求： - 标题明确 - 适用对象明确 - 理由用标签表达 - 必须保留 1 个“证据短句位” ### 8.3 头条事件卡 用途： - 承载新发布、降价、活动等高信号事件 要求： - 强标题 - 强标签 - 强数字 ### 8.4 推荐模型卡 用途： - 承载场景化推荐 要求： - 先显示模型名与用途 - 再显示来源与价格 - 不再用长表格表达 - 必须保留 1 个“关键证据短句位” - 必须保留来源证据入口 ### 8.5 来源可信度标签 用途： - 解决“免费是真的吗”“这个来源可不可信”的核心疑问 要求： - 视觉语义强 - 全局复用 ### 8.6 风险提示卡 用途： - 承载灰区来源、待验证来源、活动时效风险 要求： - 在色彩和语义上明显区别于机会卡 ### 8.7 证据短句位规范 为避免页面只剩“推荐结论”而缺少决策依据，行动建议卡和推荐模型卡都必须保留一个固定的证据短句位。 证据短句位要求： - 只允许 1 行 - 长度控制在 10-24 个中文字符 - 优先展示“今天为什么值得关注”的理由 推荐文案模板： - `较昨日低 18%` - `官方免费额度已确认` - `首次发布，支持 256K` - `聚合免费，适合尝鲜` - `活动价，截止 05-31` 设计原则： - 证据短句不是说明文，而是高信号决策依据。 - 证据短句必须和推荐动作或头条判断形成闭环。 ## 9. 抓眼球规则 首页必须显著抓眼，但不依赖低质量视觉噪音。 强制规则： - 首屏不能以大表格开头。 - 首屏必须有一条大字号结论。 - 文字说明尽量短，不允许连续长段。 - 卡片正文以短句为主，避免三行以上解释。 - 每屏只承担一个阅读任务。 判断标准： - 用户不需要阅读完整页，扫一眼也知道今天的重点。 - 用户不会因为文字太密或太小而放弃继续阅读。 ## 10. 交付物清单 正式设计交付建议包括： ### 10.1 视觉方向稿 - 首页氛围图 - 结论卡 / 行动建议卡 / 头条卡风格样张 - 颜色与字体方向 ### 10.2 信息架构稿 - 移动端首页草图 - Web 首页草图 - 模块优先级说明 ### 10.3 核心组件稿 - 一句话结论卡 - 行动建议卡 - 头条卡 - 推荐卡 - 标签体系 - 风险提示卡 ### 10.4 高保真页面稿 至少三套： - 移动端首页 - Web 端首页 - 附录 / 展开态 必做扩展： - 平静日版本 - 热点日版本 说明： - 平静日版本用于当天重大变化较少时，首页自动转向“观察重点 + 稳定推荐”结构。 - 热点日版本用于新模型、降价、活动较多时，首页强化头条和事件卡密度。 - 这两种状态都必须在设计阶段覆盖，避免实现后在“无事发生的日子”退化为旧式榜单页。 ## 11. 页面级线框与高保真说明 本章作为 V1 实现前的页面级设计基线，直接约束移动端首页、Web 首页、以及“平静日 / 热点日”的状态切换方式。实现阶段不得绕开本章退回到“统计块 + 长表格”的旧结构。 ### 11.1 移动端首页线框 目标设备： - 设计基准宽度：390px - 安全区左右边距：16px - 卡片圆角建议：20px - 卡片间距：12px - 可点击区域最小尺寸：44px x 44px 信息顺序固定如下： 1. 顶部情报头 2. 一句话结论卡 3. 三条行动建议 4. 今日头条卡片流 5. 场景推荐区 6. 附录入口 线框结构： ```text +--------------------------------------------------+ | 日期 / 更新时间 / 市场状态标签 | | 一句短副标题 | +--------------------------------------------------+ | 今日一句话结论 | | 1 行标签：价格战 / 官方发布 / 聚合免费偏多 | +--------------------------------------------------+ | 建议卡 1 | | 建议卡 2 | | 建议卡 3 | +--------------------------------------------------+ | 今日头条 | | 头条卡 1 | | 头条卡 2 | | 头条卡 3 | +--------------------------------------------------+ | 场景推荐 | | 低成本编码 | | 中文通用 | | Agent / 工具调用 | | 视觉 / 多模态 | +--------------------------------------------------+ | 附录入口：完整价格 / 完整免费 / 平台覆盖 | +--------------------------------------------------+ ``` 滚动节奏要求： - 首屏 1 到 1.5 屏内，必须完整出现“顶部情报头 + 一句话结论卡 + 至少 1 张行动建议卡”。 - 第二屏必须进入“今日头条”或“场景推荐”，不能被长段说明占满。 - 附录入口必须在前三次滑动内可见，但默认不展开长表格。 ### 11.2 移动端首页高保真说明 #### 11.2.1 顶部情报头 固定字段： - 左侧：`05-13 Wed` - 右侧：`08:35 更新` - 下方标签：`价格战活跃`、`新模型日`、`免费策略波动` - 最底一行：一句短副标题，控制在 18 个中文字符内 视觉要求： - 顶部区域不使用纯白平板，采用轻雾灰底 + 细粒度渐变。 - 标签采用胶囊形，单个标签宽度不超过一行的 40%。 - 日期和更新时间用较小字号，但不得低于 14px。 #### 11.2.2 一句话结论卡 内容结构固定： - 主结论：1 条，28-40 个中文字符 - 辅助标签：最多 2 个 - 可选证据短句：1 条，10-18 个中文字符 视觉层级： - 主结论字号：22px-26px，字重明显高于正文 - 卡片背景优先使用墨蓝浅化渐变或暖灰底叠加高亮描边 - 该卡片必须成为首屏最大视觉锚点 禁止事项： - 禁止在该卡片中堆 2 段以上解释文字 - 禁止放 4 个以上标签 - 禁止把统计数字作为主标题替代结论句 #### 11.2.3 行动建议卡 每张卡固定包含 4 行： 1. 动作标题，例如 `今天先试它` 2. 适用人群，例如 `适合低成本代码生成` 3. 标签组，最多 3 个 4. 证据短句位，必须存在 卡片高度建议： - 默认高度：112px-128px - 标题最多 1 行 - 适用人群最多 1 行 - 证据短句最多 1 行 视觉要求： - 三张卡必须形成强弱关系，推荐优先级最高的一张使用更高对比色边框或更厚阴影。 - 不允许三张卡完全同权展示，否则用户无法一眼分辨首选动作。 #### 11.2.4 今日头条卡 每张头条卡固定包含： - 事件标签 - 标题 - 影响短句 - 比较基线或关键数字 - 来源可信度标签 内容长度限制： - 标题最多 2 行 - 影响短句最多 2 行 - 关键数字必须大于正文层级 视觉要求： - `新发布` 优先用墨蓝 - `价格下调` 优先用祖母绿 - `活动 / 促销` 优先用琥珀橙 - `来源风险` 优先用朱砂红 #### 11.2.5 场景推荐区 每个场景模块固定包含： - 场景标题 - 1 个主推荐卡 - 2 个次推荐条目 - 1 个“查看更多”入口 展示规则： - 主推荐卡允许露出模型名、用途、来源类型、价格摘要、证据短句 - 次推荐条目只露出模型名 + 1 个标签 + 1 个价格摘要 - 同一模型在一个首页中最多出现 2 次 #### 11.2.6 附录入口 移动端首页只允许展示附录入口，不允许直接铺开完整表格。 入口结构： - 标题：`完整数据附录` - 三个快捷入口：`完整价格`、`完整免费`、`平台覆盖` - 一条解释短句：`适合深度比价时查看` ### 11.3 Web 首页线框 目标设备： - 设计基准宽度：1440px - 主内容最大宽度：1280px - 栅格：12 列 - 页面左右留白：48px-64px 布局固定如下： - 左 7 列：一句话结论卡、行动建议、今日头条、场景推荐 - 右 5 列：关键指标、市场状态、风险提醒、来源说明入口 线框结构： ```text +-----------------------------+---------------------------+ | 顶部情报头 | 今日市场状态 / 风险摘要 | +-----------------------------+---------------------------+ | 一句话结论卡 | 关键指标卡组 | +-----------------------------+---------------------------+ | 三条行动建议 | 来源可信度说明 | +-----------------------------+---------------------------+ | 今日头条卡组 | 风险提示卡 | +-----------------------------+---------------------------+ | 场景推荐矩阵 | 锚点导航 / 附录入口 | +---------------------------------------------------------+ | 附录区：完整价格 / 完整免费 / 平台覆盖 / 来源证据 | +---------------------------------------------------------+ ``` Web 端目标不是“更花”，而是“更方便横向比较”。因此： - 左列承担叙事和推荐。 - 右列承担解释和证据。 - 附录区承担完整查询，不干扰上半屏结论阅读。 ### 11.4 Web 首页高保真说明 #### 11.4.1 顶部信息带 顶部允许比移动端多展示 1 组指标，但仍遵循“短句优先”： - 日期 - 更新时间 - 今日变化摘要：新增模型数、降价数、活动数 - 市场状态标签 要求： - 顶部信息带总高度控制在 88px-112px - 不允许做成传统 KPI 仪表盘 #### 11.4.2 关键指标卡组 右侧指标卡组只保留 4 张： - 今日新增模型 - 今日重要降价 - 官方免费数量 - 聚合免费数量 展示要求： - 数字大，解释短 - 每张卡必须有“指标含义”短标签 - 禁止在 Web 首屏出现 8 张以上统计块 #### 11.4.3 场景推荐矩阵 Web 端场景推荐允许做成 2 x 2 矩阵： - 左上：低成本编码 - 右上：中文通用 - 左下：Agent / 工具调用 - 右下：视觉 / 多模态 每格固定结构： - 场景标题 - 主推荐 1 条 - 次推荐 2 条 - 来源说明入口 #### 11.4.4 来源与风险区 右侧必须有一个常驻区块，用于解释： - 今日哪些“免费”是官方免费 - 哪些免费来自聚合平台 - 哪些来源待验证 - 哪些活动存在截止时间 该区块默认用短句摘要表达，并允许展开查看证据。 ### 11.5 视觉层级固定规则 为防止实现时退化成“信息都一样重要”，页面层级固定如下： - `P0`：一句话结论卡 - `P1`：第一张行动建议卡 + 第一条头条 - `P2`：其余行动建议卡 + 其余头条卡 - `P3`：场景推荐主卡 - `P4`：附录入口、解释性文字、完整表格 实现要求： - 首屏同一时刻只能有 1 个 P0。 - 每个区块最多存在 1 个强主色焦点。 - P4 信息不能在视觉上压过 P1 / P2。 ### 11.6 状态切换规则 首页必须支持三种状态，并由数据自动驱动： #### 11.6.1 常规日 触发条件： - 有 1-2 条重要变化 - 或存在 1 条较强头条但整体事件密度不高 页面策略： - 保持标准六区块结构 - 头条区展示 2-3 张卡 - 场景推荐正常展开 #### 11.6.2 平静日 触发条件建议： - 重大变化事件少于 2 条 - 且无 `official_release` - 且无显著降价或活动 页面策略： - 结论卡改为“观察重点 + 稳定推荐”语气 - 行动建议卡优先展示“稳定商用选择” - 头条区减少到 1-2 张，并允许用“今日无重大上新 / 无显著调价”作为信息性卡片 - 场景推荐上移，承担更多首页价值 禁止事项： - 禁止用旧榜单、旧大表格填满头条区 - 禁止为了“看起来有内容”重复同一模型三次以上 #### 11.6.3 热点日 触发条件建议： - `official_release` >= 1 - 或重大变化事件 >= 3 - 或同日存在“新发布 + 降价 + 活动”组合 页面策略： - 顶部情报头增加“热点日”状态标签 - 今日头条区允许扩展到 4 张卡 - 第一条头条卡可升级为宽版主头条 - 场景推荐保留，但默认折叠次推荐条目，避免首屏过长 ### 11.7 页面状态验收要求 线框和高保真说明必须同时覆盖以下状态： - 移动端常规日 - 移动端平静日 - 移动端热点日 - Web 端常规日 - Web 端平静日 - Web 端热点日 验收标准： - 任一状态下，用户在 30 秒内都能说出“今天值不值得关注”。 - 平静日不会退化成榜单堆砌页。 - 热点日不会因为信息过多而丢失主结论。 ## 12. 版本路线图 ### V1 可读版 目标： - 让日报从“数据导出页”变成“人能快速看懂的日报” 包含： - 一句话结论 - 3 条行动建议 - 今日变化摘要 - 免费来源类型标签 - 附录后置 验收： - 用户 30 秒内说出今天最重要变化 - 免费区 100% 带来源类型标签 - 首屏不再是大表格 - 存在“平静日状态”首页方案，且不使用重复榜单填充头条区 ### V2 情报版 目标： - 让日报具备“每天值得打开”的新闻价值 包含： - 事件流 - 今日头条 3 条 - 活动 / 发布 / 降价打标 - 来源可信度分级 验收： - 80% 日报至少有 1 条真正变化事件 - 头条区每条都含事件类型、可信度、影响对象 - 主推荐区不出现待验证来源 ### V3 专业版 目标： - 形成可持续的 AI 模型与价格情报产品 包含： - 事件表 / 来源注册表 - 风险分层 - 趋势入口 - 周报 / 专题扩展能力 验收： - 用户可把日报当作日常选型输入 - 变化、活动、来源风险都能稳定进入产品 ## 13. 实施建议 推荐实施顺序： 1. 先完成移动端首页高保真设计 2. 再扩展 Web 端版式 3. 抽出组件规范 4. 改造 HTML 日报模板 5. 改造 Dashboard 日报入口与摘要视图 6. 用真实日报数据回填验收 推荐工程路径： - 优先改造 `scripts/generate_daily_report.go` 中的 HTML 模板和内容编排 - 复用现有 `/api/v1/reports/latest` 能力，在前端摘要入口中承载新版视觉模块 - 后续再将事件与来源标签能力沉淀到独立模块 ## 14. 结论 本次 UI 重构的目标不是单纯“美化日报”，而是把日报变成一个： - 愿意每天打开的高端移动资讯产品 - 能快速做出选型判断的专业工具 - 不牺牲底层数据库完整性的情报展示层 后续实现必须始终围绕三条主线： - 信息层级清楚 - 来源可信度透明 - 读者能快速行动