Jev 聊天助手官网设计全解：信息架构、视觉语言与 App 源码级还原

• AI 应用
• 大模型
• 交互助手
• RAG

本篇技术指南以开源仓库 site/DESIGN.md 为骨架，完整拆解 Jev 聊天助手官网（chatjevs.com）的设计体系：从读者问题驱动的信息架构、以「批注」为核心的视觉语言，到用 HTML/CSS 按 App 源码逐像素还原的首屏演示，再到无障碍、SEO 与旧版迁移策略。读完你不仅能复刻这套「先判断、再写作、只填不发」的产品叙事结构，还能掌握如何让官网设计与 App 源码（悬浮窗、判断题目、适配器）保持单一事实来源的工程方法。

1. 这份文档在项目里的位置

site/DESIGN.md是 Jev 官网（纯静态站，无框架、无构建步骤）的设计说明文档。文档开篇就划定了分工：

• 改版面之前先读DESIGN.md：它回答「为什么这么做」——信息架构、视觉语言、关键决策、旧版内容去向；
• 改文案或版本号看 site/MAINTAINING.md：它回答「怎么改」——文案单一来源、检查脚本、版本号维护规则；
• 后半部分的旧版迁移表保留为历史记录，现行规则以文档前两节和MAINTAINING.md为准。

官网的组成文件（见 site/MAINTAINING.md）也很轻：index.html（首页结构）、i18n.js（中英文案单一来源）、main.js（行为）、style.css（设计令牌与样式）、privacy.html（纯中文隐私政策）、tools/check-i18n.mjs（文案检查脚本）。这套「设计说明 + 维护说明 + 单一来源字典」的分层，是值得借鉴的静态站工程模式。

2. 官网要解决什么：读者、问题与转化目标

两类读者

DESIGN.md把访客分成两类，需求完全不同：

• 从公众号、短视频、朋友转发来的安卓用户：想知道「它能帮我做什么、安不安全、怎么装」，多数在手机上打开；
• 从 GitHub、英文 awesome 清单和 X 来的开发者：想知道「它怎么判断、数据怎么走、代码在哪」，多数在电脑上打开，一部分读英文。

页面按 7 个问题依次作答

页面结构严格按访客的心理顺序排列，先解决「它是什么」，再解决「凭什么比直接让 AI 写一段强」，然后立刻讲信任，最后才是支持范围与安装：

1. 它到底做什么？（首屏演示：一条消息进来，到回复填进输入框）
2. 它凭什么比直接让 AI 写一段强？（01 先看懂：同一个「嗯」，7 道判断题，和其他做法比）
3. 中间发生了什么？（02 怎么工作：哪一步在手机上，哪一步发往你配置的接口）
4. 它读我的聊天，数据去了哪？（03 数据去向）
5. 我的 App 能不能用？电脑呢？（04 支持的 App）
6. 怎么装？（05 开始使用）
7. 还有什么要提前知道的？（06 常见问题 + 现在还做不到的）

转化目标

页面唯一的核心转化是：让访客进入主仓库的「开始使用 Jev」区，选择 Android、Windows 或 macOS。官网没有 APK 直下入口——所有获取、安装教程、交流与更新入口静态写入 GitHub 项目主页（不带 README 章节锚点，无 JS 时也可用），用户进入仓库首页后再分流。三端获取卡片同级展示，其后是简短的 Star 支持提示，入口区最后提供安装教程与交流更新。首屏和收尾色带提供同一 GitHub 获取按钮。

3. 信息架构：从首屏到页脚的问答链

十二个区块的完整结构

排序依据与隐私前置

排序逻辑是这套架构的灵魂：先让人看到那一刻（首屏演示），再讲「先看懂」这个差异点，然后立刻把信任问题讲清楚——它读聊天，这是用户心里的头一道坎，所以隐私放在第 3 节而不是页底，是这一版相对旧版结构上改动最大的地方。之后才是支持范围、安装和问答。

页面高度（本地实测，浅色中文）

新版保留了会动的首屏演示、「同一个嗯」对照、7 道判断题、数据去向图和五问、单独展示的 8 条已知限制、3 个新问答；三端获取集中在 05 节。页面变长是刻意取舍——继续压就只能删内容（见第 9 节）。

4. 视觉语言：从 App 悬浮窗里长出来的「批注」

核心概念：批注

整个视觉系统围绕一个比喻展开：Jev 在聊天旁边做的事，像有人在对话边上写一张安静的批注——这句话是什么意思、有多危险、可以怎么接。页面把这个动作做成几种反复出现的元素，全部从 App 悬浮窗里长出来，不另造图形：

• 气泡尾巴标签：节标题上方的小标签（01 先看懂）、首屏批注卡、步骤编号，左下角都是尖的，像一个聊天气泡；
• 虚线引线：首屏右侧的批注卡用一条虚线连到手机里它说的那个位置（悬浮球、危险标签、第 1 条候选、发送键），跟着演示步骤移动；
• 危险等级刻度：0–9 十格刻度条，0–2 绿、3–5 橙、6–9 红，和 App 源码里dangerColor的分档一致，只用在「同一个嗯」对照里；
• 实心 / 虚线：实心蓝底 = 在你手机上发生；虚线描边 = 发往你配置的接口；斜线底 + 删除线 = 不存在的环节（作者服务器）。「怎么工作」和「数据去向」两节用同一套记号。

这套记号与 App 源码严格对齐：危险等级三色直接取自悬浮窗实现的dangerColor分档——app/src/main/java/com/jev/probe/overlay/OverlayController.kt 中lvl >= 6为红（#DC2626）、lvl >= 3为橙（#D97706）、其余为绿（#16A34A），与官网刻度「0–2 绿、3–5 橙、6–9 红」的分档完全一致。

色板（设计令牌）

蓝色系沿用旧站和 App（#2f6be6；悬浮窗按钮是#3a7afe，与 OverlayController.kt 中悬浮球的#3A7AFE相同）。危险等级三色用 App 源码的值；页面文字版用加深色保证对比度：

深色不是反色

深色主题不是简单反色，而是重新演绎「夜里回消息」的场景：浅色是「白天的聊天」（首屏右上一团蓝色光、左上一点暖色光）；深色是「夜里回消息」，底色为深海军蓝，主按钮从实蓝换成浅蓝底深字（深底上更亮），收尾色带换成更沉的蓝。手机样机里的聊天界面跟着主题变深色，但 Jev 悬浮窗始终是浅色——App 里的面板本来就是浅色的，深色下它从聊天上浮出来，反而更像真机。二维码始终白底，保证能扫。

字体与中文排版

• 中文：只用系统字体（苹方 / 鸿蒙 / MiSans / 微软雅黑 / 思源黑体），不下载中文字体；
• Figtree（Google Fonts，可变字重 400–800，只下拉丁子集）：用于英文、数字和标题里的拉丁字母，media="print" onload非阻塞加载，加载不到时退回系统字体，中文版面不受影响（site/index.html 可见这段非阻塞加载）；
• 手机样机用系统 UI 字体模拟真机；命令行用系统等宽字体。

中文排版参数：正文 16.5px、行高 1.75；段落限宽 32–46em；line-break: strict；标题text-wrap: balance+text-spacing-trim，段落text-wrap: pretty。英文行高 1.62，标题字距收紧。

栅格与组件

内容区宽度上限 1180px；边距 16 / 24 / 32px；节间距clamp(56px, 6.4vw, 92px)；圆角 10 / 16 / 22px。

组件清单：GitHub 获取主按钮、三端同级卡片、Star 支持提示、气泡尾巴标签、手机样机、批注卡、步骤进度条、对照卡、刻度条、题卡（选择 / 打分 / 是非三种色签）、对比表（首列吸附、横向可滚）、流程节点（实心 / 虚线）、数据边界图、问答定义表、状态表、命令块（可复制）、示意设置卡、权限开关、手风琴、已知限制卡、二维码卡、收尾色带。

5. 首屏演示：HTML/CSS 按 App 源码重画悬浮窗

做法：不是截图，是重画

手机样机和悬浮窗都是 HTML/CSS 画的，不是截图。悬浮窗的结构、文案格式、颜色、字号按 App 源码 app/src/main/java/com/jev/probe/overlay/OverlayController.kt 还原，逐项对应：

• 「未用知识库」提示行——对应源码render()中if (ctxNotes == 0 && ctxHistory == 0) "未用知识库"的提示逻辑（OverlayController.kt）；
• 「危险 8/9」红色标签 + 「很危险」——对应dangerBadge(lvl, maxLevel)生成「危险 $lvl/$max」白字徽标，配dangerWord的「很危险」文案（OverlayController.kt）；
• 「对方真实意图：…」+「把握 82%」——对应意图头条与置信度行（OverlayController.kt）；
• 「要… · … · …」一行——对应 needs / action / reply-now 三要素拼接的紧凑行（OverlayController.kt）；
• 「候选回复（Jev 排序）」+ 三张候选卡（第 1 张浅蓝底，「复制 / 填入」两个胶囊）——对应replyCard中第 1 张卡用#EAF1FF浅蓝底、其余#F3F4F6，胶囊按钮「复制」描边、「填入」实蓝（OverlayController.kt）。

聊天界面是通用样式，不仿任何具体 App。页面上写明「演示动画，对话为模拟；悬浮窗按 App 源码还原」。

剧情与数值

剧情用宣传片 v2.3 里已定稿的对话（对象说「你根本就不懂我」），判断和候选的数值也照宣传片：危险 8/9、确认你在不在乎、把握 82%、64% / 24% / 12%。这些数值在 site/i18n.js 的demo.*键里逐一对应（demo.badge: 危险 8/9、demo.conf: 把握 82%）。注意：演示里的数值来自宣传片的模拟场景，不是某次真实调用的输出，页面已明确标注。

四步剧情

1. 消息进来：悬浮球由绿变红；
2. 看懂意图：标签、意图、要什么依次亮起；
3. 三条候选：依次出现；
4. 由你发送：点「填入」，回复逐字进输入框，发送键被虚线圈出、不被按下。

一轮约 12.6 秒循环。批注卡在宽屏时位于手机右边，脚本量出目标元素位置让虚线引线正好落在悬浮球 / 危险标签 / 第 1 条候选 / 发送键旁边；窄屏时放在手机下方。

可控与渐进增强

• 可控：四个步骤是按钮，点哪一步就停在哪一步的完整状态；有「暂停演示」按钮（满足 WCAG 2.2.2）；离开视口或切到后台自动暂停；
• 渐进增强：没有 JS、开了「减弱动态效果」、社交平台抓取时，看到的都是收尾状态——悬浮窗全开、第 1 条被选中、输入框已填、发送键被圈出、批注写着「发送键不动」。减弱动效时点步骤按钮仍可逐步看，只是没有过渡；
• 英文：演示里的对话和悬浮窗文字跟着翻成英文，说明里写明「App 本身的界面是中文」。

官网分享封面图site/assets/og.png正是按这个「收尾状态」重画的（左边 logo、中英名称、口号、一句话说明、三个标签，右边是悬浮窗收尾状态的手机）：

6. 关键决策：十条设计取舍

DESIGN.md第 5 节记录了改版中最关键的十条决策，全部有明确理由：

1. 不用旧的悬浮窗截图，改为按源码重画。旧版首屏和 og 图用的assets/overlay.webp是早期截图：聊天界面看起来是已停用平台的界面（绿色气泡、绿色发送键），面板半透明处还能看到一条带作者真名的 @ 提及，两条都与硬规矩冲突；overlay.webp、settings.webp已在上线时删除。
2. 设置页截图换成示意卡。旧的settings.webp是 v1.2 的单密钥设置页，和「判断 / 回复 / 视觉三路接口」的说法对不上；「填密钥」一步改用标着「示意」的三路接口卡，标签文字取自 App 设置页源码。
3. 首屏标题换成宣传片口号「回消息之前，先看懂对方」。旧标题「任何聊天里，都有个副驾」在支持范围收窄到 QQ / X / 飞书 + 手动识别之后有点过；「对话副驾」定位保留在副标题、页脚和收尾里。
4. 信任前置。数据去向单独成节放在第 3 位：一张边界图（手机 → 只在分析那一刻 → 你配置的接口；作者服务器「没有这一环」）+ 五问（读了什么、发给谁、存在哪、怎么删、从不做什么）。开头就写明「这不是一个『什么都不收集』的产品」，和隐私政策原文口径一致；不写任何安全承诺。
5. 「怎么工作」的节点拆成六步，标出每一步在哪里发生。旧版把「Jev 判断」和「生成模型起草」画在同一格；隐私政策写的是「判断完成后起草候选回复」，所以拆成先后两步：采集屏幕消息 → Jev 判断 → 生成模型起草 → Jev 排序 → 悬浮窗展示 → 复制 / 填入。
6. 已知限制不折叠。旧版藏在末尾一个问答里；新版放在问答旁边的独立卡片，宽屏时吸顶跟随。
7. 中英单一来源。所有文案在i18n.js，index.html里的中文由tools/check-i18n.mjs --fix写入；?lang=en直接打开英文并记住选择。privacy.html保持中文，英文模式下所有隐私链接都指向它页底已有的#en-summary。
8. 产品获取链接静态写入 GitHub 项目主页，不带 README 章节锚点，无 JS 时也可用；download/旧文件保留供既有外链访问，页面不提供直下。
9. Star 数实时拉取 GitHub API，缓存 30 分钟；拉不到时显示静态兜底值——site/index.html 中<b>node site/tools/check-i18n.mjs # 只检查，有错误时退出码 1 node site/tools/check-i18n.mjs --fix # 先把 i18n.js 里的中文写进 index.html，再检查

   它会拦下：HTML 里用了但字典里没有的键、中英字典键不一致、HTML 里的中文和字典不一致、字典里没人用的孤儿键、重复键、空值、data-i18n嵌套；英文里混进汉字会给提醒（「切换到中文」「接口」「清空知识库与历史」三处是故意的——App 界面是中文，英文用户要照着找按钮）。

   改首页文案的标准流程（site/MAINTAINING.md）：

   1. 只改i18n.js，中英两个字典一起改；
   2. 跑node site/tools/check-i18n.mjs --fix把中文写进index.html；
   3. 再跑一遍不带--fix的检查，看到「✓ 中英文案一致，没有缺键和孤儿键」再提交；
   4. 本地预览（python -m http.server），中文、?lang=en各看一遍。

   文案口径（硬规矩）

   与作者历次拍板一致，写文案前必须对照：不出现已停止支持的那个聊天 App 的名字（中英文都不写）；兼容性只说「非侵入、只读屏幕、不改任何 App 的安装包、不走它们的接口或账号」，不写任何对抗检测类技术词；隐私只如实说「发给谁、发什么、存在哪、怎么删」，不写「什么都不收集」承诺、不写安全保证；不写效果数字（准确率、省多少时间）、不编 Star 数、下载量、用户数；署名只写 GitHub 账号；不写广告法极限词；二维码只有公众号一张。

   11. 源码级印证：悬浮窗还原与七道判断题

   官网叙述的「先判断再写」「7 道判断题」「适配器」都有 App 源码直接对应，这也是DESIGN.md「每一条都可以在 GitHub 仓库里对照源码核实」的底气。

   七道判断题：app/src/main/java/com/jev/probe/jev/JevQuestions.kt

   官网 01 节的 7 张题卡（选择 / 打分 / 是非三种色签）与源码judge()方法一一对应，一次请求问 7 道题，约 1 秒出结果，都带概率和把握度：

   题卡	类型	源码字段
   真实意图	选择	true_intent（confirm_you_care / vent_anger / request_action / seek_explanation / casual_chat / close_topic 六选）
   危险等级	打分	danger_level（0–9 十级打分，0 轻松闲聊、9 已经闹翻）
   对方要什么	选择	she_needs（道歉 / 具体行动 / 解释 / 你的在乎 / 不用做什么）
   该不该马上回	是非	should_reply_now（下一句该不该给实质内容）
   下一步怎么做	选择	best_action（翻聊天记录 / 先道歉 / 给承诺 / 解释清楚 / 接住情绪 / 少说两句 / 定个安排）
   话里有没有话	是非	literal_question（字面意思，还是试探、反讽、暗示）
   紧张缓和了没	是非	tension_resolved（对方已经接受、又开起玩笑，还是还在等你表态）

   题面注释说明这套题目「port from tools/jev/questions.py（calibration 过的措辞）」，并且 Jev 判断模型不写字、只在固定选项里选，回复由生成模型另写——这正是官网「大多数助手直接给你一段话。Jev 先判断这条消息到底是什么，再决定怎么回」的技术依据。rankQuestion则要求恰好 3 个候选，与官网「三条候选」的说法吻合。

   悬浮窗：OverlayController.kt

   官网首屏演示还原的每个细节都能在源码中找到：悬浮球是 52dp 圆形、#3A7AFE实底白字「Jev」，右上角带 12dp 危险指示灯（tintBubbleDanger按危险分数变色）；面板半透明可调（panelBg()透明度下限 150，让聊天透出来）；面板限高屏幕 40%、可滚动，避免盖住输入框和键盘；「填入」后面板自动收起（fill tapped后toggle()），让输入框可见——这些细节正是「发不发由你」交互承诺的实现。dangerWord分档「安全 / 留神 / 偏危险 / 很危险」与官网危险等级刻度完全同源。

   适配器：app/src/main/java/com/jev/probe/capture/ChatAppAdapter.kt

   04 节「支持的 App」状态表（QQ 9.3.50 全链路、X 12.25 中文界面、飞书 OCR 兜底、任意 App 手动识别、网页端规划中、iOS 暂不支持）对应ChatAppAdapter接口：extract把各 App 的聊天窗口转成中立的ChatSnapshot，之后判断、悬浮窗、填入全部与具体 App 无关。QQ 用资源 id 采集气泡（com.tencent.mobileqq:id/mjn），X 的 Compose UI 消息整体在contentDescription里需要解析（parseXDesc），飞书正文是绘制而非 View 布局，走「气泡矩形 + 逐块离线 OCR」的混合方案——这就是「一套内核，多平台，新增一个 App 只需几十行适配器」的实现。

   流程示意

   App 仓库自带的这张核心流程示意图，正好对应官网 02 节「从屏幕上的一条消息，到输入框里的一句话」的六步叙事——读屏/OCR 在本机，文字发往自配接口，生成候选后由人选择、人手发送：

   12. 可复用的方法论

   site/DESIGN.md虽然只写了 Jev 官网这一件事，但它的决策过程对任何「产品官网 + 开源 App」双轨项目都有直接参考价值：

   1. 用「访客问题」而非「产品功能」组织页面：先回答「它是什么」→ 差异点 → 信任 → 支持范围 → 安装 → 限制，隐私前置到第 3 节；
   2. 官网视觉从产品本体长出来：气泡尾巴、危险等级刻度、实心/虚线记号全部取自 App 悬浮窗源码，不另造图形系统；
   3. 设计即代码审计：首屏演示逐项对照OverlayController.kt，判断题目对照JevQuestions.kt，支持范围对照ChatAppAdapter.kt——官网永远不会和 App 脱节；
   4. 单一事实来源：文案只在i18n.js，check-i18n.mjs强制中英一致、无孤儿键，改版前读DESIGN.md、改文案看MAINTAINING.md，职责清晰；
   5. 渐进增强与无障碍是硬需求：无 JS / 减弱动效 / 读屏 / 键盘全部可用，对比度逐令牌标注 WCAG 数值。

   进一步阅读：设计总纲 site/DESIGN.md、维护流程 site/MAINTAINING.md、文案字典 site/i18n.js、检查脚本 site/tools/check-i18n.mjs、首页结构 site/index.html、悬浮窗实现 app/src/main/java/com/jev/probe/overlay/OverlayController.kt、判断题目 app/src/main/java/com/jev/probe/jev/JevQuestions.kt、适配器 app/src/main/java/com/jev/probe/capture/ChatAppAdapter.kt。

   赞分享
   • AI 应用
   • 大模型
   • 交互助手
   • RAG

   【免费下载链接】jev-chat-jarvis

   装在手机上的对话副驾：在 QQ / X / 飞书里读懂对方、给出候选回复、一键填入输入框，发不发由你。非侵入，只读屏幕，不 hook 不改包。

   项目地址：https://gitcode.com/gh_mirrors/je/jev-chat-jarvis

   点击查看免费下载

   相关推荐

   • 不 root、不 hook、不上传聊天：Jev 聊天助手隐私与安全设计完整解析

     不 root、不 hook、不上传聊天：Jev 聊天助手隐私与安全设计完整解析 Jev 聊天助手是一款装在手机上的「对话副驾」，在微信 / QQ / X / 飞

     AI 应用大模型交互助手RAG

   • Jev 聊天助手（jev-chat-jarvis）Android 端架构与源码解析：无障碍采集、Jev 判断、OCR 兜底与安全回填全链路指南

     Jev 聊天助手（jev chat jarvis）Android 端架构与源码解析：无障碍采集、Jev 判断、OCR 兜底与安全回填全链路指南 Jev 聊天助手

     AI 应用大模型交互助手RAG

   • Jev 聊天助手扩展开发：如何用 30 行代码接入一个新的聊天 App

     Jev 聊天助手扩展开发：如何用 30 行代码接入一个新的聊天 App Jev 聊天助手（jev chat jarvis）是一款装在手机上、只读屏幕的「对话副驾

     AI 应用大模型交互助手RAG