24 KiB
24 KiB
日报重构 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 主体结构
日报正文固定拆成四层：
- 今日结论区
- 今日变化区
- 今日选型推荐区
- 附录区
其中：
今日结论区负责抓眼球和快速定调。今日变化区负责解释“为什么今天值得看”。今日选型推荐区负责直接输出可执行建议。附录区负责保留数据库完整性与查阅深度。
3.3 事件类型
日报重点事件按以下类型组织：
new_modelofficial_releaseprice_cutprice_increasefree_policy_changepromo_campaignsource_risk_change
同一模型可以有多个事件标签，但在首页只选择一个主标签展示。
3.3.1 变化基线规则
为保证“今日变化”具备稳定解释力，所有变化事件必须绑定统一的比较基线，禁止只展示“变了”而不说明“相对什么变了”。
允许使用的变化基线：
较昨日较上次有效价格7日内新低 / 新高首次出现官方首次发布
规则要求：
- 所有
price_cut/price_increase必须显示比较基线。 - 所有
new_model必须显示“首次出现”或“官方首次发布”。 - 所有
free_policy_change必须显示“由付费转免费”或“由免费转付费”的方向信息。 - UI 上必须保留一个稳定的基线展示位，不允许只靠颜色表达变化。
推荐展示格式：
较昨日 -18%较上次调价下降 ¥0.20/M7日内最低价首次出现在可信来源
3.4 免费模型与来源可信度
日报层必须在原始数据上额外生成语义标签：
official_freeaggregator_freepromo_freetrial_creditunknown_free
来源可信度分级：
official_verifiedcloud_verifiedaggregator_verifiedself_hosted_gatewayunverified_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 行标签：价格战 / 官方发布 / 聚合免费偏多 |
+--------------------------------------------------+
| 建议卡 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 行：
- 动作标题，例如
今天先试它 - 适用人群，例如
适合低成本代码生成 - 标签组，最多 3 个
- 证据短句位，必须存在
卡片高度建议：
- 默认高度：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 列：关键指标、市场状态、风险提醒、来源说明入口
线框结构：
+-----------------------------+---------------------------+
| 顶部情报头 | 今日市场状态 / 风险摘要 |
+-----------------------------+---------------------------+
| 一句话结论卡 | 关键指标卡组 |
+-----------------------------+---------------------------+
| 三条行动建议 | 来源可信度说明 |
+-----------------------------+---------------------------+
| 今日头条卡组 | 风险提示卡 |
+-----------------------------+---------------------------+
| 场景推荐矩阵 | 锚点导航 / 附录入口 |
+---------------------------------------------------------+
| 附录区：完整价格 / 完整免费 / 平台覆盖 / 来源证据 |
+---------------------------------------------------------+
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. 实施建议
推荐实施顺序：
- 先完成移动端首页高保真设计
- 再扩展 Web 端版式
- 抽出组件规范
- 改造 HTML 日报模板
- 改造 Dashboard 日报入口与摘要视图
- 用真实日报数据回填验收
推荐工程路径：
- 优先改造
scripts/generate_daily_report.go中的 HTML 模板和内容编排 - 复用现有
/api/v1/reports/latest能力，在前端摘要入口中承载新版视觉模块 - 后续再将事件与来源标签能力沉淀到独立模块
14. 结论
本次 UI 重构的目标不是单纯“美化日报”，而是把日报变成一个：
- 愿意每天打开的高端移动资讯产品
- 能快速做出选型判断的专业工具
- 不牺牲底层数据库完整性的情报展示层
后续实现必须始终围绕三条主线：
- 信息层级清楚
- 来源可信度透明
- 读者能快速行动