FruitServer/docs/plans/2026-10-20-K28-ui-wireframe.md

2026-10-20 K28 客户端 UI 重构（按简图）

来源：用户 2026-10-19 提供的 5 屏 + 4 面板手绘简图。 原则：先出 UI，再划分功能任务；本批不改后端契约、不伪造接口、不放假按钮的“可用”承诺。 设计语言沿用现有深色主题（Obsidian Flare），简图只定结构与层级。

一、信息架构

底部 4 Tab：

Tab	页面	说明
首页	home	浏览型首页（Banner + 继续观看 + 热门漫剧）
剧场	theater	分类 + 语言筛选 + 两列剧库 + 搜索
创作	create	AI 制作 / 上传发布 两个入口
我的	mine	账户、金币、会员、菜单

播放页改为推入式全屏页（保留现有 PlayerPage 双模式能力），从首页 Banner/卡片、“继续观看”、剧场卡片、选集进入。

二、分屏口径

01 首页

• 顶栏：搜索框（占满剩余宽度）+ 头像入口 + 星期文案（周一…周日）。
• 频道 Tab：热门 / 免费 / 新剧 / 榜单，选中项主色下划线/胶囊；榜单 跳剧场榜单区。
• Hero Banner：封面图、剧名（大字号 Outfit）、一句文案、底部页码点；自动轮播 + 手势切换。
• 继续观看：标题行 + 「查看全部」；卡片含封面、剧名、第 n 集 · 还剩 m 分钟、播放按钮。
• 热门漫剧：标题行 + 「查看更多」；两列卡片，封面 + 标题 + 题材 + 免费/集数 + 热度。
• 无数据时用现有 EmptyState；下拉刷新可选（本批可不加）。

02 剧场

• 顶栏：搜索框 + 头像（与首页一致）。
• 分类 chips：全部 + 服务端分类；语言 chips：全部语言 / 中文 / 印尼语 / 马来语 / 英语。
• 两列剧卡：封面（原图比例铺满）、标题、题材、免费 角标、集数、热度。
• 搜索：保留现有搜索输入与结果页；点击页面失焦。
• 下拉刷新保留。
• 语言筛选：当前接口未下发 language，本批只做 UI 选中态，不做数据过滤；在任务清单标注为后端缺口。

03 创作

• 标题「创作」+ 副标题「让故事成为漫剧」。
• 卡 1「AI 制作」：从故事或想法开始，右侧箭头。
• 卡 2「上传发布」：发布已完成的漫剧，右侧箭头。
• 入口行为：本批统一进入「敬请期待 / 入驻申请」的诚实占位页，不做假上传、假 AI 生成。
• 后续功能任务单列（见第五节）。

04 我的

• 头像 + 昵称 + 签名/身份文案 + 右侧箭头。
• 三快捷入口：收藏/追剧、观看历史、本地下载。
• 金币卡：金币余额 + 数值 + 充值 按钮（跳现有钱包/充值页）。
• 会员卡：开通会员，解锁更多精彩内容（跳现有 VIP 页；无 C 端商品时展示“暂未开放”）。
• 菜单：我的作品、创作者中心、消息通知（支持红点）、设置、帮助与反馈。
• 未登录：头像区显示登录入口，金币/会员/菜单保持可点但需登录。

05 竖屏播放

• 顶栏：返回、更多（右上）。
• 右侧互动 rail：点赞（含数量）、评论（含数量）、收藏、分享。
• 底部：剧名、第 n 集、题材标签 + 关注、简介、进度条 + 当前/总时长、选集、更多。
• 中心播放按钮：仅暂停时显示（已定口径）。
• 清屏：保留现有清屏/退出清屏与“清屏状态跨集保持”。

面板

1. 选集：标题「选集」+ 剧名 + 共 n 集 + 关闭；6 列等宽网格，当前集主色，锁定集显示锁图标，点击切集。
2. 评论：标题 评论 (n) + 关闭；列表项（头像、昵称、时间、内容、点赞数、回复）；底部输入框 + 发送。
3. 更多操作：倍速（当前值）、清晰度（自动）、下载到本地、文字大小、投诉；行尾箭头/当前值。
4. 内容解锁：金币解锁、看广告解锁、查看会员内容三条；底部说明「具体方式以作品而定」；仅展示可行入口，不可用项明确禁用/说明。

二·五 视觉风格 v2（浅色暖橙，2026-10-20 用户指定）

用户提供两张参考图（剧场页、竖屏剧集页），以此为准；K28 各屏不再沿用深色主题。

色板

用途	值
页面背景	#FFF8F0（顶部带 #FFE9D6 暖色渐变）
卡片/弹层	#FFFFFF
主色（按钮/选中/图标）	#FF7A1A
主色渐变（中央按钮）	#FF9A3D → #FF6A00
主文字	#1F1B16
次要文字	#8C837B
弱文字/占位	#B3AAA1
分割线/描边	#F0E4D6
粉色角标底	#FFE3EC（文字 #FF6A8A）
深色角标（锁定数）	#33000000 + 白字

组件

• 圆角：卡片 16、封面 16、弹层 20、chips 999（胶囊）、按钮 999。
• 阴影：0x14FF8A3D，blur 18，y 6；卡片不使用重描边。
• 分类 chips：选中为橙色实心 + 白字；未选中为白底 + 深色字，间距 10。
• 剧卡：大封面（原图比例或 3:4）、左上「桃花源」粉色胶囊、右上锁图标 + 数量、封面右下「全 24 集 / 大结局」米色胶囊、标题 15–16 粗体、副行「更新至 18 集 · 09-04」12px 灰字、右下橙色圆形「+」。
• 底部导航：白/米色毛玻璃，保持 4 槽（首页 / 剧场 / 创作 / 我的），选中图标与文字为橙色；参考图中间的橙色「+」不实现。
• 播放/剧集页：大标题 24 粗体 + 橙点、副标题 14 灰、右侧「…」与圆形按钮；Hero 大图 20 圆角 + 右上题材胶囊 + 分页点；下方横向剧集卡（第 01 集 初遇 / 更新中胶囊）。

落地方式

1. 先改 AppColors/AppTheme/AppDimens 全局 token，使现有组件整体切换为浅色暖橙。
2. AppBottomNav 保持 4 项（首页/剧场/创作/我的），只做视觉换肤；不新增中央按钮/nav-center-action。
3. K28-A1 先完成结构；样式统一由 K28-S 批次落地，后续 A2/B/C 直接使用新 token。

三、复用与约束

• 底部导航复用 AppBottomNav（需支持 4 项）。
• 主题色/字号沿用 AppColors/AppDimens；标题 Outfit、正文 Plus Jakarta Sans。
• 所有新增文案走 l10n（en/zh/id），禁止硬编码。
• 所有手写 Dart 首行 // Author: fruit.com.cn；public 类/方法有文档注释。
• Key 约定：tab-home / tab-theater / tab-create / tab-mine；home-channel-*；theater-language-*；create-ai / create-upload；mine-wallet / mine-vip；播放面板沿用 player-episodes / player-comments / player-more-* / player-unlock-*。
• 单文件 ≤500 行：现有 player_view.dart 已超限，本批允许拆文件，不新增超大文件。

四、实施批次（先 UI）

批次	范围	验收
K28-A	4 Tab IA + 首页 + 剧场	4 Tab 可切换；首页/剧场结构与简图一致；既有播放/详情链路可达；dart analyze 零告警 + flutter test 全过
K28-B	创作 + 我的	两个新页面结构与简图一致；金币/会员/菜单入口可达；未登录态正确
K28-C	竖屏播放 UI + 四面板	播放页结构与简图一致；四面板可开合；选集切集/评论/倍速/清屏回归通过
K28-D	回归与门禁	l10n 三语齐全；全部测试通过；APK 构建成功；PROGRESS 留痕

五、UI 之后的功能任务（待排期）

1. 首页频道真实数据（热门/免费/新剧/榜单）与 Banner 数据补齐。
2. 剧场语言筛选：后端 VO 下发 language 后再接真实过滤。
3. 创作：AI 制作与上传发布需 C 端创作接口/资质（当前契约缺口，见 INBOX 顶部）。
4. 金币充值：支付通道接入前保持入口隐藏或明确“暂未开放”。
5. 会员：C 端会员商品/订阅接口缺失。
6. 看广告解锁：需要广告平台账号、广告位 ID 与发奖校验接口。
7. 播放清晰度：接口仅下发 AUTO，多清晰度需后端补齐。
8. 文字大小：需全局字号偏好与持久化。

六、风险 / 待确认

• 简图为浅色线稿，实际落地为现有深色主题；如需要浅色版需另出视觉稿。
• 「创作」两个入口在后端能力缺失时只做诚实占位，不做假流程。
• 首页频道与周几文案涉及新增 l10n key，需三语翻译。