Mona 的基准测试
Mona 测量的一切，附带数据和方法。使用 Mona 不需要读这些：这是给想要核实的人看的。
0,68视线：与真实视线的相关性之前 0.66 · 平均热力图 0.43
0,64元素检测器：F1（文字、按钮、图片）之前 0.59
5.5 分仅凭图片的评分差之前 8.1 · 相关性 0.82
0,995浏览器对比 Python：视线热力图屏幕评分差：0.1 分
视线落在哪里
Mona 预测一张热力图：前 3 秒视线经过的区域。我们把它与真实的人类热力图（UEyes，62 人）以及一个简单基准比较：平均热力图，也就是习惯看上方和中间。Imp1k 从未用于训练。
- 平均热力图
- 之前的 Mona
- 现在的 Mona
查看数值
| 平均热力图 | 之前的 Mona | 现在的 Mona | |
|---|---|---|---|
| UEyes（测试） | 0,43 | 0,66 | 0,68 |
| Imp1k 网页 | 0,32 | 0,49 | 0,56 |
| Imp1k 手机屏幕 | 0,37 | 0,43 | 0,47 |
- UEyes，验证集
- Imp1k 网页（dev）
查看数值
| 训练轮次 | UEyes，验证集 | Imp1k 网页（dev） |
|---|---|---|
| 1 | 0,643 | 0,539 |
| 2 | 0,693 | 0,485 |
| 3 | 0,707 | 0,539 |
| 4 | 0,706 | 0,562 |
| 5 | 0,705 | 0,559 |
| 6 | 0,713 | 0,564 |
| 7 | 0,704 | 0,531 |
| 8 | 0,708 | 0,529 |
| 9 | 0,706 | 0,522 |
| 10 | 0,704 | 0,504 |
| 11 | 0,703 | 0,508 |
| 12 | 0,703 | 0,497 |
| 13 | 0,705 | 0,509 |
| 14 | 0,705 | 0,510 |
| 15 | 0,704 | 0,510 |
读取界面
当 Mona 从图片（设计稿、截图）开始时，无法读取页面代码：一个自研检测器会识别文字、按钮、图片、输入框和图标。它在约 1500 个公开网站上训练，标签来自页面代码。本测试使用的是它从未见过的网站。
- 之前
- 现在
查看数值
| 类别 | 之前：召回率 / 精确率 | 现在：召回率 / 精确率 | 之前的 F1 | 现在的 F1 |
|---|---|---|---|---|
| 文字 | 0,59 / 0,64 | 0,72 / 0,75 | 0,61 | 0,73 |
| 按钮 | 0,51 / 0,59 | 0,59 / 0,59 | 0,55 | 0,59 |
| 图片 | 0,65 / 0,57 | 0,61 / 0,60 | 0,61 | 0,60 |
| 输入框 | 0,24 / 0,38 | 0,38 / 0,70 | 0,29 | 0,49 |
| 图标 | 0,15 / 0,34 | 0,31 / 0,43 | 0,21 | 0,36 |
图片的评分
为了判断从图片读取是否足够可靠，我们计算两次评分：一次用页面代码（作为参照），一次只用检测器在图片上看到的内容。平均相差 5.5 分（中位数 3.3）；80% 的屏幕相差不到 10 分。
- 之前
- 现在
- 使用精确框
查看数值
| 之前 | 现在 | 使用精确框 | |
|---|---|---|---|
| 全部 | 8,1 | 5,5 | 3,8 |
| 对比度 | 18,7 | 6,0 | 5,9 |
| 字号 | 24,9 | 14,9 | 10,9 |
| 按钮 | 9,5 | 6,3 | 1,8 |
| 信息过载 | 0,0 | 0,0 | 0,0 |
| 文字量 | 8,3 | 5,0 | 3,4 |
| 层次 | 25,4 | 13,3 | 7,7 |
大脑
一个模型预测视觉皮层 20 个区域对图片的反应，基于核磁共振测量训练（THINGS-fMRI）。它已在照片上验证，但未在网页上验证：在报告中仅供参考，不计入评分。
查看数值
| 区域 | 数值 |
|---|---|
| V1 | 0,68 |
| V2 | 0,59 |
| V3 | 0,51 |
| V4 | 0,31 |
| V3ab | 0,47 |
| LO | 0,51 |
| MT | 0,57 |
| VO | 0,31 |
| FFA 人脸 | 0,61 |
| OFA 人脸 | 0,59 |
| EBA 身体 | 0,63 |
| STS 社交 | 0,32 |
| PPA 场所 | 0,60 |
| RSC 场所 | 0,41 |
| TOS 场所 | 0,52 |
| LOC 物体 | 0,52 |
| IT 物体 | 0,51 |
| 注意力 FEF IPS | 0,35 |
| OFC 价值 | 0,08 |
| vmPFC 价值 | 0,00 |
Mona 做了什么，毫无隐瞒
每个步骤、每份数据、每个局限。如果这里缺了什么，那是这个页面的缺陷。
分析的步骤
- 截图（服务器）。服务器在 Chrome 中打开网址（1440 × 900），等待入场动画结束，最多滚动 12 个屏幕，并记录每个屏幕的文字、尺寸、颜色和按钮。它把图片和这些记录发回，然后忘掉一切。
- 视线（你的浏览器）。两个小型 ONNX 模型（合计约 8 MB）预测前 3 秒视线落在哪里。Mona 取它们热力图的平均值。
- 大脑（你的浏览器）。一个约 6 MB 的模型预测视觉皮层 20 个区域的反应，并与约 500 个网页比较。它不计入评分。
- 可读性（你的浏览器）。六条规则：文字对比度（权重 2）、字号（1）、主按钮是否显眼（2.5）、信息过载（1.5）、文字量（1）、层次结构（1.5）。
- 评分。按屏幕加权平均，满分 100；第一屏占一半，其余屏幕占另一半。
- 报告。保存在你的浏览器存储中（IndexedDB）。可随时导出 JSON、打印 PDF 或删除。
模型以半精度存储，体积减半；结果完全相同（与真实热力图的视线相关性：无论是否半精度都是 0.681）。规则的 JavaScript 版本已与 Python 版本核对：视线热力图相关性 0.995，屏幕评分相差不超过 0.1 分。
使用的数据
| 来源 | 用于 | 详情 |
|---|---|---|
| UEyes（Jiang 等，CHI 2023） | 训练视线模型 | 1980 个界面，62 人。CC BY 4.0。 |
| Imp1k（Fosco 等，2020） | 仅用于测量 | 200 个网页和 200 个手机屏幕，带有重要性标注。从未用于训练；一半用于挑选模型，另一半用于公布结果。 |
| THINGS-fMRI（Hebart 等） | 训练大脑模型 | 3 人观看的 8740 张图片。数据为 CC0；THINGS 图片仅限研究使用。 |
| 约 1500 个公开网站（Tranco 榜单） | 训练元素检测器 | 每个网站 3 个屏幕，标签自动取自页面代码。已排除成人、赌博和盗版网站。截图不公开。 |
哪些会发送出去，哪些留在本地
- 截图服务器在分析期间会看到你提供的网址和页面内容。它不保存任何图片、文字或报告。为防止滥用，它会在内存中按 IP 地址保留一个计数器，为时一小时。
- 视线、大脑、规则和评分都在你的浏览器中计算。截图收到后，不会再发出任何东西。
- 没有账号，没有 Cookie，没有访问统计。字体和代码库由本网站提供，而不是第三方。页面的托管服务商（Vercel）和所有托管服务商一样能看到访问。
- 服务器会拒绝内部地址（localhost、私有网络）、不常见的端口以及指向它们的重定向。
Mona 做不到的事
- 判断页面是否讨人喜欢。它衡量视线和可读性，而不是审美，也不能代替真人测试。
- 视线模型学习的是前 3 秒的自由浏览：它不预测寻找特定信息时的视线。
- 大脑层尚未在网页上验证（已在照片上验证）。仅供参考。
- 从图片开始时，界面读取的可靠性低于读取页面代码。测得的评分差距见上方图表。
- 画在图片里的文字不会被读取。每个屏幕只在某一瞬间被查看：轮播图、视频和稍后弹出的窗口不在分析范围内。
- 需要登录、有遮挡横幅或有反机器人保护的页面只能得到部分报告。最多分析 12 个屏幕。
- Mona 不能代替完整的无障碍审核：它只检查对比度和字号，不检查键盘导航和读屏软件。
总结
给只想知道 Mona 是否适合自己、不想看图表的人。
它可靠吗？
对于视线和可读性的快速初步意见，可靠。替你做决定，不行。
Mona 在从未见过的页面和屏幕上进行了测试，并与真实测量结果比较。它擅长找出吸引视线的地方和妨碍阅读的地方。它不知道什么讨人喜欢。
可以，值得信赖
对于直接测量的内容：
- 视线落在哪里。Mona 能找出真人所看内容的大部分：满分 1 分得 0.68，而“习惯看上方和中间”这一简单规律只有 0.43。在从未见过的网页上：0.56 对 0.32。
- 妨碍阅读线上网站的因素。字太小、对比度太低、文字太多、按钮不明显：这些都是严格执行的明确规则。在你浏览器中的计算结果与原始版本相同（满分 100 分，相差 0.1 分）。
可以，但要谨慎
有用，但不精确：
- 图片或设计稿的评分。没有页面代码时，Mona 会猜测文字和按钮。结果：评分与使用代码时相差约 ±5.5 分（一半情况下相差不到 3.3 分；每 100 个屏幕中有 80 个相差不到 10 分）。就像一支会偏差几度的温度计。
- 小元素。图标和输入框经常被漏掉（满分 1 分，分别为 0.4 和 0.5）。它们不计入评分。
- 大脑反应。它是基于照片而不是网页预测的，而且不计入评分：把它当作一个有趣的参考就好。
不，这不是它的职责
Mona 不能：
- 判断你的页面是否讨人喜欢，也不能判断它是否让人想购买或注册。它衡量的是视线和可读性，而不是审美。
- 代替真人测试。它帮你在展示之前筛选想法，而不是一锤定音。
- 进行完整的无障碍审核。它只检查对比度和字号，不检查键盘操作和读屏软件。
- 读取需要密码的页面，也不能读取原生手机应用。
具体有什么用
- “我的主按钮被看到了吗？”Mona 会显示热力图：红色是最初几秒视线经过的地方。如果按钮在冷色区域，你就知道了。
- “我的文字好读吗？”它会找出太小或太淡的文字，并告诉你在哪里。
- “我应该先改什么？”它按重要程度逐屏排列问题，并给出满分 100 的评分。
- “我的新版本更好吗？”分析旧版和新版：比较两个评分和两张热力图。
适合谁
适合你，如果……
- 你在制作或改进网站、销售页、落地页或设计稿；
- 你是设计师、开发者、自由职业者、学生，或者负责一个小机构的网站；
- 你想在展示作品之前，或在两个方案之间做选择时，获得快速、免费的意见；
- 你没有做眼动追踪测试的预算。
不够用，如果……
- 你要做一个代价高昂的决定（大规模改版）：请同时做真人测试；
- 你需要证明符合无障碍法规；
- 你的页面需要登录，或者是原生手机应用；
- 你想知道人们是否会购买：Mona 不衡量这个。
数字的通俗解释
- 相关性，例如 0.68
- 衡量 Mona 的热力图与真人热力图的相似程度：0 = 毫无关系，1 = 完全相同。0.68 表示“明显相似”；“习惯看上方中间”这一简单规律只有 0.43。
- 相差 5.5 分
- 如果一个页面的“真实”评分是 70，Mona 只读取图片时，一半情况下会落在 67 到 73 之间，十次中有八次落在 60 到 80 之间。
- F1（元素检测器）
- 一个 0 到 1 的分数，表示 Mona 能否找对文字、按钮和图片，而不凭空捏造。文字为 0.73：大部分都能找到，偶有错误。
- “训练时从未见过”
- 测试使用的是 Mona 从未见过的页面，就像用全新题目考试：这正是数字可信的原因。
如果只记住一点：Mona 是一个快速、免费的第一眼，告诉你什么吸引视线、什么不好读。用它修改，再找真人验证。