# Design v1 · 其他社媒搜索 - Twitter/X（v7.4.1） > 交互设计规格文档 · 公共上下文：`other_social_search_common_context_v1.md` > > 上游规格来源：`spec_v1.md` --- ## 0. 文档目的 本文档解决 `741` 的两个问题： 1. 在不重做旧框架的前提下，如何把 Twitter 搜索结果页改成“真实 Twitter 主对象”的交互体验。 2. 在沿用现有频道详情页骨架的前提下，如何把 Twitter 详情页设计成可判断、可延展、且与现有 Nox 页面风格一致的标准频道详情页。 本文档不重新定义业务规则；如与 `spec_v1.md` 冲突，以 `spec_v1.md` 为准。 --- ## 1. 视觉参考复用清单 ### 1.1 参考来源 #### A. 站内现状截图（本地归档） - [`reference_screenshots/2026-03-18-twitter-search-viewport.png`](./reference_screenshots/2026-03-18-twitter-search-viewport.png) - 用途：首屏结果态、列表密度、左右信息区占比 - [`reference_screenshots/2026-03-18-twitter-search-top.png`](./reference_screenshots/2026-03-18-twitter-search-top.png) - 用途：平台切换、搜索框、一级筛选、排序区位置 - [`reference_screenshots/2026-03-18-twitter-search-fullpage.png`](./reference_screenshots/2026-03-18-twitter-search-fullpage.png) - 用途：整页结构、分页、滚动后列表节奏 - [`reference_screenshots/2026-03-18-twitter-search-results.png`](./reference_screenshots/2026-03-18-twitter-search-results.png) - 用途：结果列表全局结构 - [`reference_screenshots/2026-03-18-twitter-search-first-card.png`](./reference_screenshots/2026-03-18-twitter-search-first-card.png) - 用途：结果卡组成与模块分层 #### B. 详情页参考基线（评审会话中用户提供） - Instagram 频道详情页截图 - TikTok / YouTube 频道详情页同骨架参考 说明： - 当前 `741` 工作区未单独归档这些详情页截图文件。 - 但其骨架与模块分层已在 `Input / Spec` 阶段完成对齐，可作为详情页设计基线使用。 - 详情页中“关联平台切换”也沿用现有频道详情页的关联机制与交互语义，不单独发明新模式。 ### 1.2 必须复用 - 搜索页的整体页面骨架： - 平台切换区 - 搜索与一级筛选区 - 排序与增强操作区 - 高信息密度结果列表 - 搜索页的结果卡横向分区思路： - 左侧身份识别 - 中部指标判断 - 右侧内容预览 - 详情页的页头 + 分区 Tab 骨架： - 数据总览 - 内容数据 - 品牌数据 - Nox 现有页面的基础视觉语言： - 浅灰背景 + 白色卡片 - 高密度数据卡布局 - 橙色重点态 / 激活态 - 顶部与左侧导航保持现有平台语言 ### 1.3 按场景改写 - Twitter 搜索结果卡中的主身份区： - 旧版“Twitter 外壳 + 其他平台主对象”改为“Twitter 主对象 + 辅助平台识别” - 右侧内容预览区： - 旧版视频缩略图逻辑改为 Tweet 媒体卡 / 文本卡双形态 - 详情页页头摘要指标： - 不照搬 Instagram 的评分导向头部 - 改为“规模 + 活跃 + 近期内容表现”导向 - 内容数据 Tab： - 不照搬 Instagram 的图片帖 / Reels 结构 - 改为适配 Tweet 的高密度内容卡流 - 品牌数据 Tab： - 沿用骨架，不沿用厚重模块内容 ### 1.4 禁止照搬 - 旧 Twitter 搜索结果中来自 YouTube/其他平台的视频内容缩略图 - Instagram 内容页中的纯图片墙表达 - Instagram / YouTube 已有评分体系、合作价格、CPM 等依赖额外计算模型的厚模块 - 任何会把其他平台当作主对象、主跳转、主内容来源的旧交互 --- ## 2. 全局视觉与布局约束 ### 2.1 视觉令牌引用 引用来源：[`other_social_search_common_context_v1.md`](./other_social_search_common_context_v1.md) | 类型 | Token | 值 | |------|-------|----| | 页面背景 | `bg-page` | `#F5F7FA` | | 卡片背景 | `bg-card` | `#FFFFFF` | | 主色 | `color-primary` | `#2E5BFF` | | 错误色 | `color-danger` | `#FF4D4F` | | 文本主色 | `text-primary` | `#1D1D1F` | | 次级文本 | `text-secondary` | `#86868B` | | 按钮/输入框圆角 | `radius-control` | `8px` | | 卡片圆角 | `radius-card` | `10px` | | 大容器圆角 | `radius-container` | `12px` | | 页面边距 | `space-page` | `24px` | | 组件间距 | `space-component` | `16px` | | 列表行高 | `row-height` | `48px` | ### 2.2 Desktop First 约束 - 本版默认 Desktop WEB。 - 不为移动端单独设计新的信息折叠方式。 - 所有主要设计判断以 `1280px+` 桌面宽度为基准。 ### 2.3 页面层级 - Level 1：页面骨架与页头 - Level 2：筛选 / 排序 / Tab - Level 3：卡片与模块内容 - Level 4：轻操作与微交互 ### 2.4 数值与标签展示规则 #### 2.4.1 数值展示 - 大数值默认采用站内现有的简化展示习惯，不在同一页面混用多套单位体系。 - 同一组指标中的数值格式必须统一。 - 百分比统一保持同等级精度，不出现一处整数、一处两位小数的混乱表达。 - 缺失值统一使用 `暂无数据`，不混用 `--`、空白、`N/A`。 #### 2.4.2 标签展示 - 类别标签、主题标签、状态标签三类视觉样式应有层级区别。 - 类别 / 主题标签优先使用浅底色胶囊，不使用强警示色。 - 状态型标签如“未开放”“建设中”应与普通主题标签有明显区分。 - 标签过多时优先截断数量，不压缩到不可读。 --- ## 3. 搜索页设计 ### 3.1 页面结构 搜索页从上到下固定为： 1. 平台切换区 2. 搜索输入区 3. 一级筛选区 4. 搜索增强与排序区 5. 结果列表区 6. 分页区 ### 3.2 平台切换区 - 保留 `Facebook / Twitter` 的双平台切换样式。 - `Twitter` 激活态沿用现有选中样式，不引入新的平台导航模式。 - 切换平台时只切换结果对象，不改变整页布局。 ### 3.3 搜索输入区 - 搜索输入框保持现有大输入框布局。 - 输入框右侧保留“展示结果”主按钮，不重新发明 CTA 位置。 - 一级筛选继续贴近搜索框，保持“先搜后筛”的熟悉路径。 提交语义： - 搜索词变化后，按当前其他平台搜索页语义，直接触发搜索刷新。 - 一级筛选变化后，也直接触发搜索刷新。 - 因此顶部主按钮保留现有视觉位置，但不额外承担“只有点击才搜索”的唯一提交职责。 ### 3.3.1 顶部区域布局比例 在桌面默认宽度下，顶部搜索与筛选区域遵循以下原则： - 平台切换区位于最左，作为短宽度固定模块。 - 搜索输入区占据顶部主宽度，优先保证输入行为。 - 一级筛选区位于搜索区右侧，宽度固定且不与搜索框抢主空间。 - `展示结果` 主按钮固定贴右，不因为筛选数量变化而换行。 当可用宽度不足时，压缩优先级如下： 1. 保留搜索输入区完整 2. 保留主按钮完整 3. 压缩筛选控件宽度 4. 最后才压缩平台切换区间距 ### 3.4 一级筛选区 一级筛选固定展示： - 频道类别 - 频道地区 - 粉丝量 设计规则： - 保持与现有 Instagram 搜索相同的轻量化下拉样式。 - 不在一级筛选区堆叠受众筛选。 - 筛选条件被选择后，应在控件内直接可读，不要求再次打开抽屉确认。 ### 3.4.1 筛选抽屉结构 筛选抽屉承担完整筛选体系，默认采用右侧抽屉或等价的二级面板形式。 内容顺序固定为： 1. 抽屉标题区 2. 频道组 3. 受众组 4. 底部操作区 抽屉标题区包含： - 标题：`筛选` - 当前已生效筛选数 - 关闭入口 底部操作区包含： - `重置` - `应用筛选` ### 3.4.2 筛选分组设计 #### 频道组 默认包含： - 语言 - 最后更新日期 - 平均互动率 - 预估曝光量 - 平均观看量 - 平均点赞量 - 平均收藏量 - 平均评论量 设计规则： - 高频项优先放在分组上半区。 - 数值型筛选统一采用区间型输入或预设区间，不混用复杂控件。 - 日期型筛选与数值筛选视觉上要有明显区分。 #### 受众组 默认包含： - 受众地区 - 受众年龄 - 受众性别占比 - 受众语言 设计规则： - 受众组整体位于频道组之后，不与频道组穿插。 - 本期受众组整组置灰，不提供可编辑控件。 - 分组内直接展示 `敬请期待` 占位说明，不做“看起来可选、提交时报错”的伪交互。 ### 3.4.3 筛选抽屉状态 | 状态 | 触发条件 | UI 表现 | |------|---------|---------| | 默认态 | 初次打开抽屉 | 展示全部筛选分组，未选项为空 | | 已选态 | 已设置筛选条件 | 控件内回显当前值，底部显示已生效筛选数 | | 部分禁用态 | 部分筛选暂不可用 | 不可用项置灰并标注未开放/暂无数据 | | 整组占位态 | 受众组本期未交付 | 整组置灰，并显示“敬请期待”占位说明 | ### 3.4.4 筛选抽屉文案建议 - 抽屉标题：`筛选` - 分组标题：`频道组` / `受众组` - 重置按钮：`重置` - 应用按钮：`应用筛选` - 不可用说明：`该筛选项暂未开放` - 占位说明：`敬请期待` ### 3.5 排序与增强操作区 - 默认排序文案保留现有结构感，但语义以“综合排序”为准。 - 排序控件放在结果列表上方右侧。 - AI 关键词、精准模式、导出等已有增强操作，保持现有区位，不作为 `741` 重设计重点。 ### 3.6 结果卡布局 单条结果卡采用三段式横向布局： 建议宽度占比： - 左侧身份区：约 `22%` - 中部判断区：约 `28%` - 右侧内容预览区：约 `50%` 说明： - 右侧内容预览区保持最大宽度，以承接 Twitter 内容感知。 - 中部判断区保持稳定宽度，避免指标换行破坏扫描节奏。 - 左侧身份区不追求宽度，而追求对象确认效率。 #### 3.6.1 左侧身份区 包含： - 头像 - 频道名 - `@handle` - 辅助平台图标 - 收藏入口（若当前模块已有） 规则： - 头像、频道名、`@handle` 为视觉主锚点。 - 辅助平台图标退到弱层级，仅作识别，不与主标题抢层级。 - 身份区整体不额外承载指标，避免认知拥堵。 - 收藏入口保持在身份区的次级动作位，不与主入口竞争视觉主次。 布局细则： - 头像固定为身份区视觉起点，频道名与 `@handle` 紧邻排布。 - 频道名优先单行展示；空间不足时先截断频道名尾部，不挤压 `@handle` 到不可识别。 - 辅助平台图标排列在 `@handle` 下方或侧下方，形成弱辅助带。 #### 3.6.2 中部判断区 包含： - 类别标签 - 地区 - 粉丝数 - 内容总数 - 平均互动率 - 预估曝光量 规则： - 先看标签与地区，再看指标。 - 指标组按“规模 → 表现”顺序排列。 - 缺失指标统一使用“暂无数据”，不出现 `0` 伪装缺失。 - 若类别标签过多，默认只展示前 2 到 3 个，高频标签优先，剩余以省略表达。 布局细则： - 标签行位于最上方，地区位于标签下方或同层弱位。 - 指标默认分成两组： - 基础规模：粉丝数、内容总数 - 表现判断：平均互动率、预估曝光量 - 两组指标在视觉上需有段落感，不堆成单一数字墙。 #### 3.6.3 右侧内容预览区 包含近期 Tweet 预览，支持两种形态： 1. 媒体卡 - 首图 / 缩略图 - 发布时间 - 轻量指标覆盖层（如需要） 2. 文本卡 - 正文摘录 - 发布时间 - 基础互动指标 规则： - 同一账号优先保持预览风格一致。 - 无媒体时绝不留空，直接回退文本卡。 - 内容区只展示 Twitter 内容，不允许继续混入其他平台内容。 - 同一账号首屏默认展示 2 到 3 条近期内容预览，不将右侧做成可横向滚动的大内容墙。 ##### 媒体卡规则 - 优先展示单张主图，不做复杂多图拼贴。 - 图片区域下方或覆盖层内显示发布日期。 - 若指标需要外显，优先保留一个轻量指标位，不堆叠多行数据。 - 多张媒体卡并排时，保持统一尺寸和圆角，不因个别内容异常拉伸。 - 鼠标悬浮到首图时，应提供正文内容悬浮层或等价的文字浮层，帮助用户在不离开卡片的情况下理解内容语义。 - 悬浮层优先展示正文摘录，不额外引入复杂二级操作。 ##### 文本卡规则 - 文本卡顶部优先展示正文摘录。 - 正文默认截断为 3 到 4 行。 - 文本区下方展示发布日期与轻量互动信息。 - 文本卡高度需与媒体卡尽量接近，避免同一行出现明显参差。 文本卡文案规则： - 正文优先保留可读语义，不强行做关键词高亮。 - 若正文过短，不额外补足占位文案。 - 若正文为转发 / 引用语义，允许保留原始结构，不做二次改写。 ##### 混合展示规则 - 同一账号下若既有媒体内容也有纯文本内容，首条优先展示媒体卡，其余允许混排。 - 若近期内容全部为纯文本，则整组使用文本卡，不保留媒体位占位框。 - 若近期内容存在图片加载失败，回退为文本卡，不显示破图状态。 - 若账号存在但核心 Twitter 数据尚未完成采集，结果卡展示 `数据采集中` 状态： - 不显示空粉丝数或误导性默认值 - 仍提供通过头像、名称、`@handle` 进入详情页的入口 - 保留账号已存在的基础识别信息 ### 3.6.4 结果卡首屏阅读顺序 用户扫描单条结果卡时，默认阅读顺序应为： 1. 左侧头像 + 名称，确认对象 2. 中部标签与地区，确认画像 3. 中部核心指标，做快速判断 4. 右侧内容预览，建立内容感知 该顺序不得被辅助平台图标、收藏按钮或装饰性徽记打乱。 ### 3.6.5 悬停与反馈 - 悬停头像、频道名、`@handle` 时，显示可点击反馈。 - 悬停整卡时仅允许出现轻微容器高亮，不制造“整卡可跳转”的误导。 - 收藏按钮悬停保持现有收藏交互反馈。 - 右侧内容预览悬停只提供内容浏览感，不出现强跳转指示。 ### 3.6.6 字段显隐优先级 当结果卡空间不足或字段缺失时，显隐优先级如下： #### 身份区 1. 头像 2. 频道名 3. `@handle` 4. 收藏入口 5. 辅助平台图标 #### 判断区 1. 粉丝数 2. 平均互动率 3. 预估曝光量 4. 内容总数 5. 地区 6. 类别标签 规则： - 身份区永远不隐藏头像与频道名。 - 判断区若需要压缩，优先减少类别标签数量，再考虑隐藏地区。 - 平均互动率与预估曝光量若缺失，保留位置但显示降级文案；不直接删除该行。 ### 3.6.7 信息密度与卡片节奏 - 单条结果卡默认保持“高密度但可扫读”的节奏，不追求大留白营销风格。 - 相邻结果卡之间的垂直间距应小于详情页模块间距，强调“列表连续扫描”。 - 单卡内部的视觉节奏固定为： - 身份信息 - 标签 / 地区 - 核心指标 - 内容预览 - 同一列表中的所有结果卡必须保持统一高度体系，不因个别内容较长造成显著断层。 - 当正文预览过长时，优先截断内容，不拉高整卡。 ### 3.6.8 卡片间距与分隔 - 结果卡使用白色卡片容器时，外部垂直间距优先控制在 `12px` 到 `16px`。 - 若延续当前列表分隔线样式，也应保持一致，不混用“卡片阴影 + 粗分隔线”两套语言。 - 收藏、辅助平台图标、弱指标之间的间距应小于主标题与指标组的间距，以保持主次清晰。 ### 3.7 结果卡点击热区 #### 3.7.1 进入详情页 只有以下元素进入 Twitter 详情页： - 头像 - 频道名 - `@handle` #### 3.7.2 非详情热区 - 辅助平台图标：继续按原平台逻辑处理，不承担本版主流程 - 收藏入口：沿用现有收藏行为 - 内容预览区：第一版默认仅浏览，不新增“跳 Tweet 详情”的重交互 ### 3.8 搜索页状态设计 | 状态 | 触发条件 | UI 表现 | |------|---------|---------| | 默认态 | 刚进入 Twitter 搜索页 / 无搜索条件 | 保持现有搜索页骨架，展示默认推荐/热门账号列表 | | 加载中 | 提交搜索 / 切换筛选 / 切换排序 | 列表区 Skeleton，顶部筛选与排序保持可见 | | 空结果 | 有搜索条件但无匹配账号 | 列表区显示“暂无搜索结果”空态，占位图保留当前搜索词与筛选条件 | | 部分降级 | 指标或预览缺失 | 缺字段显示“暂无数据”，无媒体回退文本卡 | | 错误态 | 搜索接口失败 | 列表区错误提示 + 重试，不清空顶部搜索条件 | ### 3.8.1 搜索页状态文案建议 - 加载中：使用 Skeleton，不额外显示长文案。 - 默认列表标题：无需额外标题，直接展示默认推荐/热门账号列表。 - 空结果标题：`暂无匹配结果` - 空结果说明：`请尝试更换关键词、放宽筛选条件，或切换不同的搜索词组合。` - 错误标题：`搜索失败` - 错误说明：`当前请求未成功完成，请稍后重试。` - 重试按钮：`重新加载` ### 3.8.1A 搜索页 Skeleton 版式 - 顶部平台切换、搜索框、一级筛选、排序区保持可见，不进入骨架态。 - 仅结果列表区进入 Skeleton。 - 每条 Skeleton 按真实结果卡的三段式结构绘制： - 左侧：头像圆形占位 + 两行文本占位 - 中部：两行标签/地区占位 + 两组指标占位 - 右侧：2 到 3 个内容卡矩形占位 - 首屏 Skeleton 数量与默认首屏可见结果条数一致，避免页面高度跳变。 ### 3.8.1B 搜索页空结果版式 - 空结果展示在结果列表容器内，不替换整个页面。 - 空态区垂直居中于列表首屏区域。 - 结构顺序固定为： 1. 空态图或轻插图 2. 标题 3. 说明文案 4. 辅助动作（可选） - 当前空结果只适用于“有搜索条件但无召回”的场景。 - 若用户当前没有输入搜索条件，则不展示空结果，而直接回退为默认推荐/热门账号列表。 - 辅助动作优先为： - 清空筛选 - 清空搜索词 ### 3.8.1C 搜索页错误态版式 - 错误态也仅发生在结果列表容器内。 - 顶部搜索词、筛选、排序全部保留，便于用户重试。 - 结构顺序固定为： 1. 错误图标或轻量提示图 2. 错误标题 3. 错误说明 4. 主按钮：`重新加载` - 若已有结果列表后续请求失败，不强行清空旧列表，可优先保留旧内容并显示轻量错误提示。 ### 3.8.2 筛选与排序交互 - 修改搜索词后，结果列表即时刷新，不要求再次点击“展示结果”。 - 修改一级筛选后，结果列表即时刷新，不要求再次点击“展示结果”。 - 修改抽屉筛选时，抽屉内改动默认先停留在抽屉局部状态，不立刻影响结果列表。 - 抽屉底部应有明确的“应用筛选”与“重置”动作。 - 只有点击“应用筛选”才会提交抽屉中的改动并触发搜索刷新。 - 点击抽屉外部、关闭抽屉或取消抽屉时，抽屉应直接收起，并回退为当前已生效筛选状态。 - 排序切换后，只刷新结果列表，不重置搜索词与筛选条件。 - 当前激活的排序项应在下拉中明确可见。 ### 3.8.3 分页与刷新交互 - 翻页时保留当前搜索词、筛选条件与排序方式。 - 翻页后默认回到结果列表顶部，不回到页面最顶端导航区。 - 重新搜索新关键词时，分页重置回第一页。 - 切换平台时，分页也重置回第一页。 ### 3.9 搜索页核心文案 - 搜索框占位：`输入关键词，按Enter键开始搜索` - 一级筛选：`频道类别 / 频道地区 / 粉丝量` - 抽屉分组：`频道组 / 受众组` - 抽屉不可用说明：`该筛选项暂未开放` - 空结果标题：`暂无匹配结果` - 空结果说明：`请尝试更换关键词或放宽筛选条件` - 降级文案：`暂无数据` --- ## 4. 详情页设计 ### 4.1 页面结构 详情页固定由两层组成： 1. 页头区 2. 分区 Tab 本期保留四个分区： - 数据总览 - 受众数据 - 内容数据 - 品牌数据 ### 4.2 页头区 页头区分为三块： 建议布局： - 左侧：身份信息区 - 中部：摘要指标区 - 右侧：动作区 在桌面首屏中，三者应保持单行呈现，不拆成上下两层头部。 建议宽度重心： - 左侧身份信息区：约 `28%` - 中部摘要指标区：约 `52%` - 右侧动作区：约 `20%` #### 4.2.1 身份信息区 包含： - 头像 - 频道名 - `@handle` - 地区 - 语言 规则： - 身份信息区只回答“这是谁”。 - 不在此处塞入大量次级画像或品牌信息。 - 若地区 / 语言仅有其一，则仅展示可用项，不占双字段空位。 #### 4.2.2 摘要指标区 固定展示四个摘要指标： - 粉丝量 - 最近发布时间 - 平均曝光量 - 平均互动率 规则： - 指标卡横向等权排列。 - 先体现近期内容表现，再进入下方细分模块。 - 不在页头区引入 Nox 评分、频道质量、合作价格等高依赖模型。 - 所有摘要指标必须在首屏可见，不能被折叠到“查看更多”。 #### 4.2.3 动作区 保留通用动作位： - 收藏 - 其他已有通用动作入口 - 已确认关联频道的平台切换入口 规则： - 收藏入口继续保留，但不在 `741` 中重定义收藏业务。 - `联系网红` 仅保留未来承接空间，不在本版页头中强塞为主动作。 - 平台切换入口仅在已确认存在同主体关联频道时显示。 - 若无已确认关联频道，不保留空切换位。 动作排序建议： 1. 收藏 2. 站内既有通用动作 3. 关联平台切换 4. 其他次级工具位 动作区设计原则： - 使用现有频道详情页的图标按钮密度。 - 不将动作区扩展为第二组信息区。 - 动作按钮数量过多时，优先合并次级工具，不压缩收藏入口。 - 平台切换作为“已确认关联关系”的能力入口，应弱于当前平台身份、强于普通次级工具。 #### 4.2.3A 关联平台切换规则 - 仅展示已确认存在关联关系的平台，不展示“可能存在”的平台占位。 - 当前所在平台保持选中或高亮，其他平台作为可点击切换项。 - 切换行为为“跳转到对应平台的频道详情页”，不是在当前页内切换字段集。 - 若目标平台详情页不可访问，则该平台不出现在切换区中。 ### 4.2.4 页头首屏层级 详情页首屏的阅读顺序固定为： 1. 身份信息 2. 摘要指标 3. Tab 导航 4. 当前 Tab 的首屏内容 第一屏必须先让用户完成“确认对象 + 快速判断”，再进入深层分析。 ### 4.2.5 页头字段显隐优先级 #### 身份信息区 1. 头像 2. 频道名 3. `@handle` 4. 地区 5. 语言 #### 摘要指标区 1. 粉丝量 2. 最近发布时间 3. 平均曝光量 4. 平均互动率 规则： - 四个摘要指标默认必须全显。 - 若极端情况下空间不足，优先压缩卡片内部留白，不减少指标数量。 - 地区 / 语言允许只显示其一，但不新增“更多信息”折叠。 ### 4.2.6 摘要卡内部规则 - 每张摘要卡固定包含： - 指标名 - 主值 - 可选的弱说明 - 指标名使用同一字号层级，不出现单卡标题过大的情况。 - 主值使用页头中最强层级字号，但四张卡保持统一强度，不人为突出某一张。 - 弱说明仅用于解释时间窗或口径，不用于输出新的分析结论。 ### 4.3 Tab 导航 Tab 顺序固定为： 1. 数据总览 2. 受众数据 3. 内容数据 4. 品牌数据 视觉规则： - 复用现有频道详情页 Tab 样式。 - 当前激活 tab 使用橙色高亮与底部激活线。 - 四个 tab 都保留并可点击。 ### 4.4 Tab 切换行为 - 切换 tab 时，页头区保持不动，只刷新下方内容区。 - tab 切换不改变当前详情页路由参数，只改变页面内视图。 - 若某 tab 为轻量占位页，仍需展示与其他 tab 一致的激活态与容器结构。 - 切换后默认滚动定位到 tab 内容起始处，不要求回到页面顶部。 ### 4.5 详情页模块间距 - Tab 内容区与页头之间保持明显段落间距。 - 各模块间统一使用 `16px` 到 `24px` 的垂直节奏。 - 同一模块内部的图表、卡片、说明文案遵循“标题 > 内容 > 辅助说明”的固定顺序。 ### 4.5.1 详情页首屏版面优先级 详情页首屏的版面优先级固定为： 1. 页头身份确认 2. 页头摘要指标 3. 当前 tab 的第一判断模块 4. 当前 tab 的第二解释模块 对应到不同 tab： - 数据总览： - 第一判断模块：基本数据卡 - 第二解释模块：增长趋势 - 受众数据： - 第一判断模块：状态说明 - 第二解释模块：统一的敬请期待模板 - 内容数据： - 第一判断模块：内容表现卡 - 第二解释模块：标签或发布时间规律 - 品牌数据： - 第一判断模块：状态说明 - 第二解释模块：未来预留容器 ### 4.5.2 首屏禁止事项 - 不将多个重量级图表并排塞满首屏。 - 不让低优先级模块挤占页头下方的第一判断位。 - 不在首屏同时出现两个以上需要长时间阅读的复杂模块。 ### 4.6 详情页加载态版式 - 页头使用骨架屏，但保留既有页头结构轮廓： - 左侧身份区骨架 - 中部 4 张摘要卡骨架 - 右侧动作区骨架 - Tab 导航可提前出现，并保持默认首个 tab 激活。 - Tab 内容区根据当前 tab 展示对应模块骨架，不使用整页统一灰块覆盖。 --- ## 5. 数据总览 Tab 设计 ### 5.1 模块顺序 数据总览采用以下顺序： 1. 基本数据卡 2. 增长数据 3. 可选扩展区（若有稳定数据） ### 5.2 基本数据卡 设计规则： - 使用四宫格或等价卡片结构。 - 每张卡只表达一个核心结论。 - 卡片下方允许有一句解释性辅助说明，不写成长文。 推荐首版卡片： - 平均曝光量 - 平均互动率 - 内容数 / 发帖活跃度 - 曝光量 / 粉丝量或等价判断值 设计补充： - 卡片标题使用业务名词，不使用内部计算口径缩写。 - 卡片主值优先显示结论值，次级说明用于补充时间窗或解释。 - 不对缺失数据使用彩色评价标签。 布局建议： - 四张卡在桌面首屏优先排成单行。 - 若实际容器不足，再降级为 `2 x 2` 网格。 - 不为首屏卡片区再增加二级 tab 或切换器。 ### 5.3 增长数据 设计规则： - 以一张主趋势图承担增长判断，不拆成过多弱图表。 - 图表上方保留时间窗选择位，若暂时无多时间窗，则固定单一时间窗。 - 若时间序列不足，降级为简化趋势摘要卡。 - 趋势图默认突出单一主折线或单一主柱系，不做多指标争抢。 图表规范： - 横轴优先表达时间，不混入过多业务标签。 - 纵轴优先表达单一量纲，不将比例和绝对值强行塞进同一图表。 - 若仅支持单指标趋势，不额外制造双轴或图例复杂度。 ### 5.4 数据总览状态 | 状态 | 触发条件 | UI 表现 | |------|---------|---------| | 完整态 | 指标与趋势都有 | 指标卡 + 趋势图区完整展示 | | 部分态 | 部分指标缺失 | 保留可用卡片，缺失项显示“暂无数据” | | 轻降级态 | 仅有基础指标，无稳定时序 | 趋势区改为摘要卡，不留空白大图区 | ### 5.5 数据总览布局建议 - 基本数据卡位于首屏上半区。 - 增长图位于基本数据卡下方，占据整行主宽度。 - 若存在可选扩展区，始终放在增长图之后，不得插入到首屏判断区之前。 ### 5.6 数据总览首屏视觉重点 - 首屏最先被看到的应是“4 张基础判断卡”，不是趋势图。 - 趋势图承担解释与验证职责，不抢首屏主标题。 - 若增长数据较弱，仍需保持基本数据卡作为首屏主内容，不因图表能力不足破坏首屏结构。 --- ## 6. 受众数据 Tab 设计 ### 6.1 定位 - 受众数据 Tab 在本期保留并可访问。 - 但本期不交付真实受众画像能力。 ### 6.2 第一版设计 - 进入 tab 后展示完整占位页。 - 占位页与品牌数据共用同一模板，只更换标题。 - 不展示真实地区、语言、年龄、性别图表。 建议文案： - 标题：`受众数据敬请期待` - 说明：`当前 Twitter 受众画像相关能力正在建设中，后续版本将提供更完整的受众分析。` ### 6.3 占位页规则 - 受众数据 Tab 正常可点击，不置灰。 - 占位页结构与品牌数据占位页保持同构。 - 占位页不展示部分真实画像卡片，避免与“未交付”状态冲突。 ### 6.3 占位页规则 - 受众数据 Tab 正常可点击，不置灰。 - 占位页结构与品牌数据占位页保持同构。 - 占位页不展示部分真实画像卡片，避免与“未交付”状态冲突。 --- ## 7. 内容数据 Tab 设计 ### 7.1 模块顺序 内容数据采用以下顺序： 1. 基本数据 2. 内容标签 3. 发布时间频率分析 4. 全量内容列表 ### 7.2 基本数据 - 使用摘要卡表达内容层面核心指标。 - 卡片数控制在 3 到 4 张，不把该区域做成第二个“数据总览”。 - 指标更偏内容表现，不重复页头含义。 推荐首版卡片： - 平均点赞量 - 平均评论量 - 平均互动率 - 近 N 条内容数 卡片排列建议： - 与数据总览相同，优先单行排布。 - 若内容数据页首屏空间紧张，优先保留 3 张最关键卡，不做拥挤四卡。 ### 7.3 内容标签 - 使用词云 + Top 标签列表或等价组合。 - 标签目标是帮助用户快速理解“这个账号主要发什么”。 - 不做过度学术化解释。 - 若标签稳定性不足，优先展示 Top 标签列表，不强行展示词云。 ### 7.4 发布时间频率分析 - 至少表达两个维度： - 发帖频率 - 发布时间分布 - 延续现有频道详情页的图表密度和留白习惯。 - 若仅有原始发布时间数据，先保证“能看懂规律”，不要求复杂算法解释。 ### 7.5 全量内容列表 #### 7.5.1 工具条 工具条包含： - 日期筛选 - 文本匹配搜索 - 排序下拉 排序项： - 按发布日期 - 按点赞量 - 按评论量 - 按互动率 默认： - 按发布日期倒序 #### 7.5.2 卡片流 单条内容卡片固定包含： - 正文摘录 - 首图（若存在） - 发布日期 - 观看量 - 点赞量 - 评论量 设计规则： - 默认采用双列或三列高密度卡片流，视容器宽度调整。 - 卡片优先保证“看得懂内容 + 看得见指标”。 - 文本内容超长时截断为 2 到 4 行。 - 无图卡片保持统一高度体系，不做过高空白卡。 卡片内部顺序固定为： 1. 首图或文本首屏区 2. 正文摘录 3. 日期 4. 指标行 指标行顺序固定为： `观看量 → 点赞量 → 评论量` 字段显隐优先级： 1. 正文摘录 2. 发布日期 3. 首图 4. 点赞量 5. 评论量 6. 观看量 规则： - 有媒体时，首图优先级高于部分指标，应尽量保留。 - 首图缺失不影响卡片成立。 - 正文与发布日期永远不隐藏。 - 当卡片空间被压缩时，优先弱化观看量，再保留互动指标。 #### 7.5.3 内容卡悬停与点击 - 内容卡默认不承担进入新详情页的主链路。 - 悬停卡片时允许出现轻微阴影或边框强化，用于提示“可浏览”而非“整卡强跳转”。 - 若后续需要接站外 Tweet 或站内内容详情，应在后续版本单独定义，不在本版先埋隐式热区。 #### 7.5.4 内容列表状态 | 状态 | 触发条件 | UI 表现 | |------|---------|---------| | 完整态 | 有内容、有指标 | 正常卡片流 | | 无图态 | 内容无媒体 | 使用文本卡，不留媒体占位空白 | | 低指标态 | `views` 大量为 0 或不稳定 | 仍显示指标，但不附带表现好坏色彩判断 | | 空内容态 | 无可展示 Tweet | 空状态说明 + 返回上层判断提示 | #### 7.5.5 内容列表空态文案建议 - 标题：`暂无可展示内容` - 说明：`当前账号暂未返回可用于分析的 Tweet 内容，请稍后再试或查看其他模块。` #### 7.5.6 内容列表工具条交互 - 日期筛选与文本匹配搜索并列显示。 - 文本匹配搜索默认支持回车触发。 - 已应用的筛选条件需在工具条中直接可见，不隐藏到二级面板。 - 排序控件切换后只刷新列表，不回滚到其他 tab。 #### 7.5.7 内容数据首屏版面优先级 - 内容数据首屏优先回答“最近内容表现如何”，其次才是“主要发什么”和“什么时候发”。 - 因此首屏模块顺序保持为： 1. 基本数据卡 2. 内容标签 3. 发布时间频率分析 - 全量内容列表默认位于首屏之后，作为下钻层，不抢占首屏判断区。 #### 7.5.8 列表区信息密度基准 - 内容列表卡片密度要高于详情页上方图表模块，但低于搜索结果页的纯列表密度。 - 单卡应支持用户在不点开的情况下完成“看内容 + 看日期 + 看三项指标”。 - 列表区列数变化只影响横向排布，不改变卡片内部字段顺序。 --- ## 8. 品牌数据 Tab 设计 ### 8.1 定位 品牌数据第一版只保留结构位，不以厚模块为目标。 ### 8.2 第一版设计 - 进入 tab 后展示轻量占位页。 - 页面可包含： - 标题 - 一句说明 - 若有稳定最小数据，则补一块轻量列表 / 摘要卡 建议文案： - 标题：`品牌数据建设中` - 说明：`当前 Twitter 品牌合作相关数据仍在完善，后续版本将补充更完整的品牌分析能力。` 占位页结构建议： 1. 状态标题 2. 状态说明 3. 保留一个轻量容器位，用于未来最小列表或摘要卡接入 版式规则： - 占位页位于正常 tab 内容容器内，不单独做整页空白页。 - 容器宽度与其他 tab 主模块保持一致，避免“像报错页”。 - 轻量容器位可用虚线框或普通白卡表示未来扩展位，但不能模拟真实数据。 ### 8.3 禁止事项 - 不展示低可信度演示数据。 - 不把占位页做得像完整分析页。 --- ## 9. 路由、直达访问与页面状态 ### 9.1 详情页访问规则 - 搜索结果进入详情页时，使用可唯一定位账号的路由参数跳转。 - `@handle` 用于展示与识别，但是否承担路由角色仍待产品最终确认。 ### 9.2 页面状态 | 状态 | 触发条件 | UI 表现 | |------|---------|---------| | 正常态 | 路由参数可识别且有数据 | 正常详情页 | | 产品空态 | 路由参数可识别但暂无展示数据 | 显示产品级空态页，不走 404 | | 404 | 非法参数或不可识别 | 标准 404 | | 加载态 | 详情页初次请求 | 页头骨架屏 + Tab 内容骨架 | ### 9.3 详情页空态与 404 文案建议 #### 9.3.1 产品空态 - 标题：`该账号暂时没有可展示的数据` - 说明：`我们已识别到该 Twitter 账号，但当前尚未生成可用于展示的频道分析内容。` - 辅助动作：`返回搜索结果` 版式规则： - 产品空态采用站内标准内容空态，不使用错误页风格。 - 顶部仍保留页面基础框架感，但主体内容区切换为空态容器。 - 结构顺序固定为： 1. 状态图 2. 标题 3. 说明 4. 辅助动作 - 若能识别当前账号名，可在说明中弱化带出账号名，帮助用户确认不是链路错误。 #### 9.3.2 404 - 标题：`页面不存在` - 说明：`当前访问的 Twitter 频道链接无效，或该账号暂不支持访问。` - 辅助动作：`返回搜索页` 版式规则： - 404 使用平台统一错误页风格，不沿用产品空态样式。 - 视觉语气更明确，但不制造过强的故障感。 - 结构顺序固定为： 1. 错误图 2. 标题 3. 说明 4. 主动作 - 主动作默认仅保留一个：`返回搜索页`。 --- ## 10. 后续动作边界 - 收藏： - 入口保留 - 视觉延续现有逻辑 - 本版不重定义收藏业务流程 - 联系网红： - 作为后续版本 TODO 保留 - 本版不把其设计成主闭环动作 --- ## 11. Pencil 原型建议范围 第一轮原型只覆盖以下页面： 1. Twitter 搜索页 - 顶部搜索与筛选区 - 结果列表首屏 - 结果卡媒体卡 / 文本卡双形态 2. Twitter 详情页 - 页头 + 数据总览首屏 - 内容数据首屏 - 品牌数据占位页 ### 11.1 原型优先级 第一优先： - 搜索页顶部搜索与筛选区 - 搜索结果首屏 - 详情页页头 + 数据总览首屏 第二优先： - 内容数据首屏 第三优先： - 品牌数据占位页 --- ## 12. 设计自检结论 - 已复用旧框架与现有详情页骨架，没有另起视觉体系。 - 已把截图参考抽象为“必须复用 / 按场景改写 / 禁止照搬”。 - 已把搜索与详情页的主要状态、空态、降级态落成明确设计规则。 - 品牌数据、收藏、联系网红的边界已保持与 `spec_v1.md` 一致。