Skip to content

Latest commit

 

History

History
272 lines (223 loc) · 21.5 KB

appilot-ui.md

File metadata and controls

272 lines (223 loc) · 21.5 KB

Appilot — MVP 设计文档

所属:Appilot MVP 设计文档集 | 状态:重新定位中 | 日期:2025-07-14 | 修订:2026-08-16(发布工作台替代 Release 重审视图) 姊妹文件:产品规格 · 架构设计 · UI 设计 · 构建计划 · 横切关注点 · 评审记录 本文档定义 Appilot 的用户界面:设计语言(副驾驶主题)、全局布局、9 个界面(含空态、错误态、明暗两套、成本读数、信号灯语义)。

8. UI 设计

8.0 设计语言:副驾驶(Co-Pilot)

Appilot = "App 的副驾驶"。视觉不做字面化驾驶舱(假铆钉、圆形仪表、3D 光泽),而是把驾驶舱的本质翻译成三件事:全局态势感知(仪表读数)、一眼看到该做什么(副驾驶简报)、需要拍板的事被点亮(信号灯)。

色彩 Token(双主题自适应,跟随系统)

Token 深色 浅色 用途
背景 #0A0E18 #F6F7F9 基础底色
表面 #111827 #FFFFFF 卡片
描边 #1D2432 #E5E8EE 分隔线 / 边框
主文字 #E9EDF4 #1A2030 正文
次文字 #8A94A6 #697386 次要信息
琥珀(信号) #F5B53F #B45309 唯一强调色 = 指示灯

语义色(只在状态上出现):涨 #34D399 / 跌 #F87171。

字体(两个角色)

  • 正文:系统无衬线(SF Pro / Segoe UI),不炫技
  • 数据:等宽(SF Mono / JetBrains Mono)——排名、下载、成本、token 用 mono,制造「仪表读数」质感

信号灯语义(颜色 = 状态,不是装饰)

颜色 含义
琥珀 需关注 / 待你确认 / 前 10 排名 / 本周行动
绿 上涨 / 健康
红 下跌 / 异常
灰 未进榜 / 无数据

副驾驶口吻(文案规范)

  • 用副驾驶对机长说话的口气:简洁、主动、给行动而非给数字
  • 词汇:本周航线 / 推荐动作 / 待你确认 / 本月已消耗 / 检测到新 Release
  • 动作按钮用主动语态且名字贯穿全程(「采纳」→ toast「已采纳」)

8.1 全局布局

┌───────────────────────────────────────────────────────────────────┐
│ [Appilot] [GloWalk · iOS ▾] │ 总览 | 发布 | 排名 | 评论 | 趋势  │
│                                  [本月 AI $0.42] [⋯]             │
├───────────────────────────────────────────────────────────────────┤
│                    当前视图的内容区                              │
│                    (发布工作台为「参考栏 + 工作区」双栏)        │
└───────────────────────────────────────────────────────────────────┘
  • 全局统一顶栏:品牌 + 项目切换下拉 + 页面导航分段标签 + 成本胶囊 + 「⋯」菜单
  • 页面导航常驻(总览 / 发布 / 排名 / 评论 / 趋势),悬停显示全称(发布工作台、关键词排名、长期效果)
  • 项目切换保持下拉按钮:项目列表(多产品选择器)+ 添加项目 + 管理项目
  • 顶栏使用半透明毛玻璃质感;主题切换在「设置 → 外观」,任务中心与设置收进「⋯」菜单
  • 内容区为当前视图;发布工作台使用「左侧固定参考栏 + 右侧工作区」的双栏布局
  • 明暗自适应:跟随系统 system 主题,可手动覆盖

8.2 项目选择器

│ 项目                                          [+ 添加项目]   │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │  ● GloWalk · Path of Light        iOS   前10关键词 2 个   │ │
│ │     ▸ 下载 +38% ↗   ▸ 本月成本 $1.12                     │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │  ○ AI Pulse · Coding Cost Tracker  macOS 前10关键词 0 个  │ │
│ │     ⚠ 待重审:检测到 v1.2.0 Release                      │ │
│ └──────────────────────────────────────────────────────────┘ │
│                                                              │
│  空态:还没有项目                                              │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │  还没有项目。添加第一个,副驾驶帮你看路。  [添加项目]      │ │
│  └──────────────────────────────────────────────────────────┘ │

8.3 添加项目(产品定位向导)

│ 添加项目                                            1/2 步骤   │
│  ① 选本地仓库                                              │
│     [选择文件夹]   ~/develop/GloWalk                        │
│  ② AI 只读分析(自动识别)                                  │
│     产品类型: iOS ▸     从 README 发现 App Store 链接 ✓      │
│     名称: GloWalk: Path of Light   bundleId: wang.xingyu.glowalk │
│     支持语言: en-US · zh-Hans · ...                          │
│                                            [完成] [重新分析] │
  • 链接发现:README 正则优先,找不到时 AI 兜底;多链接(mt=12 macOS / mt=8 iOS)时让用户选平台
  • 这一阶段只建立产品档案,不生成关键词;关键词提交进入「发布工作台」,关键词跟踪进入「发布后管理」

8.4 项目总览(副驾驶简报 = hero)

│ GloWalk · Path of Light      iOS ▾      [上次同步 2 分钟前]   │
│ ┌─ 副驾驶简报 · 本周航线 ──────────────────────────────────┐  │
│ │ 这周做这 3 件事                                          │  │
│ │ ① 把 "night walk" 加进副标题         [采纳] [忽略]        │  │
│ │    为什么:搜索量上升,而你未覆盖;预期:0 → 前 20         │  │
│ │ ② 更新截图强调「夜间」场景            [采纳] [忽略]        │  │
│ │ ③ 回复 2 条关于手电筒亮度的差评       [采纳] [忽略]        │  │
│ └──────────────────────────────────────────────────────────┘  │
│  仪表读数   下载 +38% ↗   前10关键词 2 个   评分 4.8          │
│ ┌─ 检测到新 Release ───────────────────────────────────────┐  │
│ │ ⚠ v1.2.0 已发布 · 发布工作台已生成 → [打开发布工作台]     │  │
│ └──────────────────────────────────────────────────────────┘  │
  • hero 是「副驾驶简报」,不是图表——图表是佐证
  • 「采纳」→ toast「已采纳」,并记录到长期效果时间线

8.5 关键词排名

│ 关键词排名(本页只做跟踪;商店提交关键词由发布工作台负责)     │
│ 语言:[英文(全局)★] [简体中文★] [德文]   [为所选语言生成]   │
│ ┌────────────┬──────────┬──────────┬──────────┬────┐        │
│ │ 关键词       │ 美国 14:02 │ 新加坡 13:47 │ 香港 …  │ 操作│ │
│ │ night walk 全│ 3 ▲2      │ 8 ▼1      │ —        │ ✕ │ │
│ │ 记账         │ 12        │ 5 进榜     │ 22 ▼3    │ ✕ │ │
│ │ deep link   │ 200+      │ 200+      │ —        │ ✕ │ │
│ └────────────┴──────────┴──────────┴──────────┴────┘ │
│  行=关键词,列=该语言下商店;格子=排名+小号变化;前10琥珀     │
│  「200+」=已查询但不在前200;「—」=未查询;悬停看精确时间/结果量│
│  「全局」徽标 = 来自全局(en)关键词集;列头时间=该商店最近查询  │
│  各商店独立采集,时间可能不同;超过36h整列降透明并标「过期」    │
│  [点某词 → 展开该词在当前商店的排名趋势折线]                   │
  • 语言点亮制:默认点亮界面语言,可加「全局」;「为所选语言生成」只对点亮语言生成
  • 「为所选语言生成 / 整理」:该语言无词时直接生成;已有词时进入复盘模式,弹出「关键词整理建议」面板(建议移除/新增,逐条采纳或忽略)
  • 「提交内容」浮层:按当前语言只读展示名称/副标题/商店关键词,可「抽取候选词」并按来源分组(商店/名称/副标题)逐条删除或一键加入跟踪,已存在词显示对勾;矩阵中按来源显示徽标
  • 排名数字用 mono,前 10 琥珀高亮,未进榜灰「—」,200 名后显示「200+」
  • 列头显示该商店最近查询时间;超过 36h 整列降透明并标「过期」;单元格悬停显示精确查询时间与结果量
  • 全局(en)关键词在每个语言视图中出现,带「全局」徽标标注来源
  • 不再提供商店下拉与手动采集按钮;商店平铺为矩阵列,排名由调度任务采集
  • 点某词展开该词在当前语言所有商店的排名趋势折线(一个商店一条线)
  • 「已删除 / 已暂停关键词」折叠区:自动暂停词(连续 10 次未在榜)显示原因并可恢复/删除,已删除词可恢复/清空

8.6 素材能力(暂不单设素材中心)

发布工作台中的「推广角度」就是当前素材能力的入口。第一阶段只生成角度和文案 brief,不单独建设素材中心;后续如果图像/视频生成成为真实闭环,再决定是否重新引入独立素材库。

8.7 发布工作台(RELEASE_DRAFT.md → App Store 提交准备)

│ 发布工作台 · GloWalk                       [立即检查发布]    │
│                               [iOS] [macOS] [立即检查发布]   │
│                                 ← 平台标签在检查按钮左侧      │
│ ┌────────── 参考 ──────────┐ ┌─ 商店提交工作单 ────────────┐ │
│ ▾ 预发布公告 v1.2.0 ✓       │ │ 语言:[英文✓][简体中文]...  │ │
│ (Markdown 渲染,栏内滚动)  │ │ 软件名称 [单行输入] 18/30    │ │
│ ▸ README · 完整 Markdown   │ │ 副标题   [单行输入] 21/30    │ │
│ ▾ 历史文案 · 3 个版本       │ │ 推广文本 [单行输入] 45/170   │ │
│  v1.1.0 [当前]   7 天前     │ │ 商店关键词 [单行输入] 68/100 │ │
│  v1.0.2          30 天前    │ │ 软件描述 [多行文本域] 820/…  │ │
│  v1.0.1          60 天前    │ │ 新增内容 [多行文本域] 210/…  │ │
│  ↳ 语言切换 + 结构化字段     │ │ [确定文案]                  │ │
│  (左栏 sticky,展开不推页) │ │ 驳回意见 → 重新生成          │ │
└─────────────────────────────┴──────────────────────────────┘
│ ┌─ 推广角度(发布工作台内)─────────────────────────────────┐ │
│ │ 角度1 夜间场景升级       [生成文案] [生成海报 brief]        │ │
│ │ 角度2 星座路径记录       [生成文案] [生成海报 brief]        │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌─ 被驳回时(同一工作单继续迭代,不新建 Release)───────────┐ │
│ │ 驳回意见:元数据提到尚不支持的功能                         │ │
│ │ [根据驳回意见重新生成]                                     │ │
│ └──────────────────────────────────────────────────────────┘ │
│ 历史发布                                                     │
│  v1.1.0   08-02   正式发布 · 已停止生成文案 ✓                 │
  • 以仓库根目录 RELEASE_DRAFT.md 的存在为主信号;仓库删除文件后不再生成文案
  • 明确标注「仓库只读」;README 过时只提示,不自动修改仓库
  • 同一「公告修改时间 + 产品」只保留一个提交工作单;驳回后更新草稿,不生成新 Release
  • 页面为「左侧固定参考栏 + 右侧工作区」的双栏布局:参考栏 sticky,展开面板只在该栏内滚动,不会把右侧工作区推出屏幕
  • 预发布公告与 README 以完整 Markdown 渲染(README 展示完整内容,不再截断);历史文案按版本归并(同一 releaseTag 只显示一条,不同语言合并进该版本),每个版本带语言徽标;点击版本后在右侧查看区展示完整结构(明显标注「历史文案 · 版本 · 更新时间」,版式与当前工作单一致、可切换语言、只读),不会覆盖当前工作单;「当前文案」是参考区的独立条目,可随时切回
  • 多平台时用横向分段标签切换(只显示平台名 iOS / macOS),置于「检查发布」按钮左侧,不使用下拉列表
  • 文案按语言分成标签页,点击切换
  • 文案确认分两步:先生成并「确定母本语言」(锁定母本字段、解锁其他语言的翻译入口),各语言逐一翻译完成后点击「确定文案(完成整批)」,整批作为统一的多语言版本只读;两步状态随草稿持久化,重新生成后重置
  • 语言标签与确认按钮同置于工作单底部一组:母本未定时按钮为「确定母本语言」,母本确定后按钮变为「确定整个文案」并解锁翻译,整批确定后该位置显示「文案已确定」;不再使用右上角「只读参考」标签
  • 软件描述不再强制插入「──── 介绍 ────」分隔行;推广文本统一以 > 开头作为缩进式引导行
  • 每个标签页顺序为:软件名称、副标题、推广文本、软件描述、新增内容、关键词
  • 软件名称按「具体名称: 描述性短句」生成(如 GloWalk: Path of Light),与副标题、关键词一起作为 ASO 整体考虑;关键词只补充名称/副标题未覆盖的词
  • 长度限制:名称 30、副标题 30、推广文本 170、软件描述 4000、新增内容 4000、关键词 100
  • 单行字段(名称/副标题/推广文本/关键词)使用普通高度的单行输入框;多行字段(软件描述/新增内容)使用可调高度的文本域
  • 推广文本在商店中显示于软件描述之前,中间没有分隔
  • 「推广文本」未来接 App Store Connect API 后可自动更新;当前生成后复制手动更新
  • 每条内容都是可编辑、可复制、可追溯的字段;用户确认后状态推进到 prepared → submitted → in_review → released
  • 推广角度不直接算商店字段,而是保留在发布工作台内

8.8 评论洞察

│ 评论洞察 · AI Pulse                       [刷新评论]         │
│  AI 聚类出的主题(评论 RSS 免费拉取 · 无成本)               │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 🔥 用户要「支持更多 AI 工具」(12条) → 建议强调支持范围     │ │
│ │ ⚠ 抱怨「价格不透明」(4条)        → 建议改描述措辞         │ │
│ │ 👍 好评「本地运行」(9条)          → 建议加进副标题         │ │
│ └──────────────────────────────────────────────────────────┘ │

8.9 长期效果

│ 长期效果 · 过去 90 天                                        │
│   下载 +38% ↗    前10关键词 2 → 7 个    本月成本 $8.40      │
│ ┌ 增长时间线 ─────────────────────────────────────────────┐  │
│ │ 下载 ▲                     ●采纳关键词   ●v1.2发布       │  │
│ │     │           ●v1.1发布 ╱╲            ╱╲              │  │
│ │     │          ╱╲       ╱  ╲          ╱  ╲             │  │
│ │     └────────────────────────────────────────── 时间 →   │  │
│ └──────────────────────────────────────────────────────────┘ │
│  琥珀圆点 = 你的动作(采纳建议 / 发布版本)                   │
│  → 直观看到「采纳 → 增长」的因果,回答「这工具帮上忙了吗」    │

8.10 设置 & AI 成本

│ 设置                                                        │
│ ┌ AI 配置 ────────────────────────────────────────────────┐ │
│ │ 供应商 [OpenAI ▾]   URL [               ]   Key [•••]    │ │
│ │ [测试连接]                                                │ │
│ │ 模型路由:                                                │ │
│ │   抽取/分类(便宜) [gpt-4o-mini ▾]                       │ │
│ │   诊断/规划(强)   [gpt-4o ▾]                            │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌ AI 用量 & 成本 ─────────────────────────────────────────┐ │
│ │ 本月 $8.40                                                │ │
│ │   分析 $1.20 · 文案 $3.10 · 海报方案 $2.40 · 视频脚本 $1.70│ │
│ │   (图像/视频生成 API 未接入)                            │ │
│ │ 成本历史(曲线)                                          │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ┌ 外观 ────────────────────────────────────────────────────┐ │
│ │ 主题 [跟随系统 ▾](浅色 / 深色 / 系统)                  │ │
│ └──────────────────────────────────────────────────────────┘ │

8.11 状态与语义

空态(每个界面都是「行动的邀请」,而非孤零零的「无数据」)

  • 项目选择器空态:「还没有项目。添加第一个,副驾驶帮你看路。」+ [添加项目]
  • 关键词空态:「还没有关键词。[AI 建议] 或 [手动添加]」
  • 发布工作台空态:「在仓库中创建本地发布交班文档后,确认生成商店提交文案」

错误态

  • 说明出了什么问题 + 怎么修,不道歉、不含糊
  • 例:「AI 分析失败:API Key 无效。去 [设置] 重新配置。」而非「出错了」

动效规格(Apple 风格,克制)

  • 默认 spring damping: 1.0(临界阻尼,无回弹),响应 0.4s
  • 只有「抛掷/拖拽」这类带惯性的交互才加一点 bounce(damping: 0.8)
  • 尊重系统「减少动态效果」设置(reduced motion)

注:2026-07 旧设计的 UI(GitHub + Twitter 时代的项目设置向导、Composer、收件箱、统计仪表盘)已随本次重新定位移除,可在 git 历史中查阅。