尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

Jev 聊天助手官网设计全解:信息架构、视觉语言与 App 源码级还原 AI 应用大模型交互助手RAG【免费下载链接】jev-chat-jarvis装在手机上的对话副驾在 QQ / X / 飞书里读懂对方、给出候选回复、一键填入输入框发不发由你。非侵入只读屏幕不 hook 不改包。项目地址https://gitcode.com/gh_mirrors/je/jev-chat-jarvis点击查看免费下载本篇技术指南以开源仓库 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 写一段强」然后立刻讲信任最后才是支持范围与安装它到底做什么首屏演示一条消息进来到回复填进输入框它凭什么比直接让 AI 写一段强01 先看懂同一个「嗯」7 道判断题和其他做法比中间发生了什么02 怎么工作哪一步在手机上哪一步发往你配置的接口它读我的聊天数据去了哪03 数据去向我的 App 能不能用电脑呢04 支持的 App怎么装05 开始使用还有什么要提前知道的06 常见问题 现在还做不到的转化目标页面唯一的核心转化是让访客进入主仓库的「开始使用 Jev」区选择 Android、Windows 或 macOS。官网没有 APK 直下入口——所有获取、安装教程、交流与更新入口静态写入 GitHub 项目主页不带 README 章节锚点无 JS 时也可用用户进入仓库首页后再分流。三端获取卡片同级展示其后是简短的 Star 支持提示入口区最后提供安装教程与交流更新。首屏和收尾色带提供同一 GitHub 获取按钮。3. 信息架构从首屏到页脚的问答链十二个区块的完整结构#节锚点这一节回答的问题节尾的下一步—首屏#top它是什么用起来是什么样前往 GitHub 获取 Jev、「聊天内容去了哪里」01先看懂#read为什么先判断再写判断些什么和别的做法差在哪接下来看它怎么工作02怎么工作#how从屏幕到输入框经过哪几步哪步在本机、哪步发出去接下来聊天内容去了哪里03数据去向#privacy读了什么、发给谁、存在哪、怎么删、从不做什么读完整隐私政策04支持的 App#appsQQ / X / 飞书 / 其它 App / 网页 / iOS 各是什么状态前往三端获取区05开始使用#start三端各怎么获取Android 装包、填密钥、开权限各怎么做三端同级卡片 → Star 提示 → 安装教程与交流更新06常见问题#faq8 个问题 8 条已知限制提 Issue 或公众号私信07联系与交流#contact去哪里交流、反馈问题主仓库交流区、Issue—收尾色带—选择平台前往 GitHub 获取 Jev—页脚—产品 / 资源 / 社区链接、许可、免责声明—排序依据与隐私前置排序逻辑是这套架构的灵魂先让人看到那一刻首屏演示再讲「先看懂」这个差异点然后立刻把信任问题讲清楚——它读聊天这是用户心里的头一道坎所以隐私放在第 3 节而不是页底是这一版相对旧版结构上改动最大的地方。之后才是支持范围、安装和问答。页面高度本地实测浅色中文1440 宽375 宽旧版7,913px12,308px旧版在 375 宽下横向溢出到 443px新版9,443px英文 10,098px15,720px无横向溢出新版保留了会动的首屏演示、「同一个嗯」对照、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 源码的值页面文字版用加深色保证对比度令牌浅色深色用途与对比度WCAG--bg#FBFCFE#0B1120页面底--bg-tint#F2F5FA#0E1628交替节背景--card#FFFFFF#121B2E卡片--ink#0E1726#E8EDF6正文17.5:1 / 16.0:1--ink-2#475467#AAB5C7次要文字7.7:1 / 9.0:1--ink-3#5D6B82#8C98AE注释5.0:1在 tint 底上/ 5.4:1--blue#2F6BE6#6F9BFF图形、描边、主按钮底浅色--blue-ink#2458C9#8FB2FF蓝色文字和链接6.3:1 / 9.0:1--btn-bg/--btn-ink#2F6BE6 / #FFF#9DBBFF / #0B1120主按钮4.8:1 / 9.9:1--safe/--warn/--risk#15803D / #B45309 / #B91C1C#4ADE80 / #FBBF24 / #F87171危险等级文字均 ≥ 5:1深色不是反色深色主题不是简单反色而是重新演绎「夜里回消息」的场景浅色是「白天的聊天」首屏右上一团蓝色光、左上一点暖色光深色是「夜里回消息」底色为深海军蓝主按钮从实蓝换成浅蓝底深字深底上更亮收尾色带换成更沉的蓝。手机样机里的聊天界面跟着主题变深色但 Jev 悬浮窗始终是浅色——App 里的面板本来就是浅色的深色下它从聊天上浮出来反而更像真机。二维码始终白底保证能扫。字体与中文排版中文只用系统字体苹方 / 鸿蒙 / MiSans / 微软雅黑 / 思源黑体不下载中文字体FigtreeGoogle Fonts可变字重 400–800只下拉丁子集用于英文、数字和标题里的拉丁字母mediaprint onload非阻塞加载加载不到时退回系统字体中文版面不受影响site/index.html 可见这段非阻塞加载手机样机用系统 UI 字体模拟真机命令行用系统等宽字体。中文排版参数正文 16.5px、行高 1.75段落限宽 32–46emline-break: strict标题text-wrap: balancetext-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%。注意演示里的数值来自宣传片的模拟场景不是某次真实调用的输出页面已明确标注。四步剧情消息进来悬浮球由绿变红看懂意图标签、意图、要什么依次亮起三条候选依次出现由你发送点「填入」回复逐字进输入框发送键被虚线圈出、不被按下。一轮约 12.6 秒循环。批注卡在宽屏时位于手机右边脚本量出目标元素位置让虚线引线正好落在悬浮球 / 危险标签 / 第 1 条候选 / 发送键旁边窄屏时放在手机下方。可控与渐进增强可控四个步骤是按钮点哪一步就停在哪一步的完整状态有「暂停演示」按钮满足 WCAG 2.2.2离开视口或切到后台自动暂停渐进增强没有 JS、开了「减弱动态效果」、社交平台抓取时看到的都是收尾状态——悬浮窗全开、第 1 条被选中、输入框已填、发送键被圈出、批注写着「发送键不动」。减弱动效时点步骤按钮仍可逐步看只是没有过渡英文演示里的对话和悬浮窗文字跟着翻成英文说明里写明「App 本身的界面是中文」。官网分享封面图site/assets/og.png正是按这个「收尾状态」重画的左边 logo、中英名称、口号、一句话说明、三个标签右边是悬浮窗收尾状态的手机6. 关键决策十条设计取舍DESIGN.md第 5 节记录了改版中最关键的十条决策全部有明确理由不用旧的悬浮窗截图改为按源码重画。旧版首屏和 og 图用的assets/overlay.webp是早期截图聊天界面看起来是已停用平台的界面绿色气泡、绿色发送键面板半透明处还能看到一条带作者真名的 提及两条都与硬规矩冲突overlay.webp、settings.webp已在上线时删除。设置页截图换成示意卡。旧的settings.webp是 v1.2 的单密钥设置页和「判断 / 回复 / 视觉三路接口」的说法对不上「填密钥」一步改用标着「示意」的三路接口卡标签文字取自 App 设置页源码。首屏标题换成宣传片口号「回消息之前先看懂对方」。旧标题「任何聊天里都有个副驾」在支持范围收窄到 QQ / X / 飞书 手动识别之后有点过「对话副驾」定位保留在副标题、页脚和收尾里。信任前置。数据去向单独成节放在第 3 位一张边界图手机 → 只在分析那一刻 → 你配置的接口作者服务器「没有这一环」 五问读了什么、发给谁、存在哪、怎么删、从不做什么。开头就写明「这不是一个『什么都不收集』的产品」和隐私政策原文口径一致不写任何安全承诺。「怎么工作」的节点拆成六步标出每一步在哪里发生。旧版把「Jev 判断」和「生成模型起草」画在同一格隐私政策写的是「判断完成后起草候选回复」所以拆成先后两步采集屏幕消息 → Jev 判断 → 生成模型起草 → Jev 排序 → 悬浮窗展示 → 复制 / 填入。已知限制不折叠。旧版藏在末尾一个问答里新版放在问答旁边的独立卡片宽屏时吸顶跟随。中英单一来源。所有文案在i18n.jsindex.html里的中文由tools/check-i18n.mjs --fix写入?langen直接打开英文并记住选择。privacy.html保持中文英文模式下所有隐私链接都指向它页底已有的#en-summary。产品获取链接静态写入 GitHub 项目主页不带 README 章节锚点无 JS 时也可用download/旧文件保留供既有外链访问页面不提供直下。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只改i18n.js中英两个字典一起改跑node site/tools/check-i18n.mjs --fix把中文写进index.html再跑一遍不带--fix的检查看到「✓ 中英文案一致没有缺键和孤儿键」再提交本地预览python -m http.server中文、?langen各看一遍。文案口径硬规矩与作者历次拍板一致写文案前必须对照不出现已停止支持的那个聊天 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_intentconfirm_you_care / vent_anger / request_action / seek_explanation / casual_chat / close_topic 六选危险等级打分danger_level0–9 十级打分0 轻松闲聊、9 已经闹翻对方要什么选择she_needs道歉 / 具体行动 / 解释 / 你的在乎 / 不用做什么该不该马上回是非should_reply_now下一句该不该给实质内容下一步怎么做选择best_action翻聊天记录 / 先道歉 / 给承诺 / 解释清楚 / 接住情绪 / 少说两句 / 定个安排话里有没有话是非literal_question字面意思还是试探、反讽、暗示紧张缓和了没是非tension_resolved对方已经接受、又开起玩笑还是还在等你表态题面注释说明这套题目「port from tools/jev/questions.pycalibration 过的措辞」并且 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.kt04 节「支持的 App」状态表QQ 9.3.50 全链路、X 12.25 中文界面、飞书 OCR 兜底、任意 App 手动识别、网页端规划中、iOS 暂不支持对应ChatAppAdapter接口extract把各 App 的聊天窗口转成中立的ChatSnapshot之后判断、悬浮窗、填入全部与具体 App 无关。QQ 用资源 id 采集气泡com.tencent.mobileqq:id/mjnX 的 Compose UI 消息整体在contentDescription里需要解析parseXDesc飞书正文是绘制而非 View 布局走「气泡矩形 逐块离线 OCR」的混合方案——这就是「一套内核多平台新增一个 App 只需几十行适配器」的实现。流程示意App 仓库自带的这张核心流程示意图正好对应官网 02 节「从屏幕上的一条消息到输入框里的一句话」的六步叙事——读屏/OCR 在本机文字发往自配接口生成候选后由人选择、人手发送12. 可复用的方法论site/DESIGN.md虽然只写了 Jev 官网这一件事但它的决策过程对任何「产品官网 开源 App」双轨项目都有直接参考价值用「访客问题」而非「产品功能」组织页面先回答「它是什么」→ 差异点 → 信任 → 支持范围 → 安装 → 限制隐私前置到第 3 节官网视觉从产品本体长出来气泡尾巴、危险等级刻度、实心/虚线记号全部取自 App 悬浮窗源码不另造图形系统设计即代码审计首屏演示逐项对照OverlayController.kt判断题目对照JevQuestions.kt支持范围对照ChatAppAdapter.kt——官网永远不会和 App 脱节单一事实来源文案只在i18n.jscheck-i18n.mjs强制中英一致、无孤儿键改版前读DESIGN.md、改文案看MAINTAINING.md职责清晰渐进增强与无障碍是硬需求无 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 应用大模型交互助手RAGJev 聊天助手jev-chat-jarvisAndroid 端架构与源码解析无障碍采集、Jev 判断、OCR 兜底与安全回填全链路指南Jev 聊天助手jev chat jarvisAndroid 端架构与源码解析无障碍采集、Jev 判断、OCR 兜底与安全回填全链路指南 Jev 聊天助手AI 应用大模型交互助手RAGJev 聊天助手扩展开发如何用 30 行代码接入一个新的聊天 AppJev 聊天助手扩展开发如何用 30 行代码接入一个新的聊天 App Jev 聊天助手jev chat jarvis是一款装在手机上、只读屏幕的「对话副驾AI 应用大模型交互助手RAG创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表