用数据发现了用户在哪里流失，然后我重写了自己的 UX 准则

用自己做的工具分析自己的工具

最近用自己的 GA4 + GSC 分析技能 做了一次 metool 的完整数据审查。这个技能会自动拉取 Google Analytics 和 Search Console 的数据，分析用户行为路径，找出实际用户行为和预期目标之间的落差。

数据里有一个细节让我停下来认真想了很久：工具页面的跳出率比我预期的高很多，而且用户停留时间集中在前 10 秒。

10 秒。用户打开了工具页面，扫了一眼，然后就离开了。

我重新打开了几个自己做的工具页面，第一次以"用户"而不是"作者"的视角去看。结论让我有点不舒服：很多工具页面，在我没有上传任何文件之前，页面几乎是空的。

一个上传框，一段描述文字，仅此而已。用户不知道上传之后会发生什么，不知道有哪些配置选项，不知道最终结果长什么样子。唯一的选择是上传并等待——这需要一定的信任成本。

而用户不愿意在信任成本上赌注的时候，他们就直接离开了。

提炼两条 UX 准则

这次体验让我重新想了工具类产品的交互逻辑，最后沉淀成两条准则。

能力先于数据（Capability-First UX）

界面的结构与能力应独立于用户数据而完整存在。 数据的有无只改变状态，不改变界面的骨架与可见范围。

具体来说：

• 零数据可读性：即使没有任何用户输入，界面本身就是工具能力的完整说明书
• 结构恒定，状态渐进：页面不因数据到达而从一种布局跳变为另一种布局
• 入口即全貌：用户首次进入时所见 ≈ 工作中所见，消除「上传后才知道能做什么」的认知黑箱

因果并列（Cause-Effect Juxtaposition）

输入区与输出区在桌面端应并列放置，让用户一眼感知因果关系。 上下堆叠的布局迫使用户滚动才能看到操作的结果，打断了「操作 → 反馈」的认知流。

具体来说：

• 空间换认知：桌面端屏幕宽度充裕时，优先用横向空间并列展示「输入 → 输出」
• 结果常驻可见：输出区域使用 sticky 定位，在用户调整配置或滚动时始终停留在视口内
• Demo 与正式态视觉分离：示例内容必须在视觉上与正式操作态有明确区分，避免用户误判

拿 iPhone 拼长图工具做验证

想清楚这两条准则之后，我选了 metool 上的 iPhone 拼长图 工具来做重构验证，因为这个工具的原始版本是一个典型的反例。

老版本：上传之后才能看见

下面是老版本在用户没有上传任何图片时的页面：

老版本的问题：

1. 上传区域之下的设置项（格式、品质、是否保持比例）和结果预览，只有上传图片之后才会出现
2. 用户在上传前完全无法判断这个工具「有多少配置项」「结果长什么样」
3. 整个页面是典型的垂直堆叠：上传 → 设置 → 结果，用户需要滚动才能看到操作结果
4. 点击「开始拼接」之后，需要向下滚动才能看到结果

这是一个用户必须「先投入，才能了解」的工具。信任门槛很高。

新版本：首屏即全貌

下面是新版本在用户没有上传任何图片时的页面：

新版本的变化：

1. 桌面端并列布局：左侧是上传区 + 设置栏，右侧是结果预览区，不需要滚动就能同时看到
2. 设置栏始终可见：格式选择、品质滑块、自动去重叠开关，在上传前就能看见（视觉上淡化但结构完整）
3. 结果区始终可见：右侧结果区在无数据时以占位图展示，sticky 定位固定在视口内
4. Demo 模式：首次进入时自动加载示例图片并展示拼接结果，用户一进门就能看到完整的「输入 → 结果」链路
5. Demo 视觉分离：示例内容用虚线边框、降低饱和度、灰色 sparkle 标签标注，明确与正式操作态区分；上传入口始终保持可见

关键细节：Demo 上方保留上传入口

这里有一个微妙的设计决策：Demo 内容和上传入口不能相互遮挡。

如果 Demo 内容填满了上传区，用户反而找不到「我要上传自己的图片」入口。所以新版本的处理是：Demo 状态下，上传 FileDropZone 在上，Demo 缩略图展示在下，用户随时都能直接拖拽上传，不需要先"退出"Demo 模式。

┌─────────────────┐  ┌──────────────────┐
│  📁 拖拽上传    │  │  ✦ Demo 结果预览 │
│                 │  │                  │
│  [FileDropZone] │  │  [stitched img]  │
│                 │  │                  │
├─────────────────┤  │  ↑ sticky 固定   │
│  ✦ DEMO         │  └──────────────────┘
│  [示例缩略图]   │
│  → Demo 结果   │
├─────────────────┤
│  格式  品质  □  │  ← 设置栏始终可见
└─────────────────┘

这两条准则的本质

回头看，这两条准则本质上在解决同一个问题：降低用户的认知税。

用户的认知资源是有限的。如果用户需要先上传、先等待，才能推断出「这个工具大概能做什么」，这个推断过程本身就是认知税。而工具类产品的用户通常是来解决具体问题的，他们不愿意把认知资源花在搞清楚界面上。

「能力先于数据」把这份认知税降为零——界面自己就是说明书。 「因果并列」把操作反馈的延迟降为零——结果就在输入旁边。

两者加在一起，用户的"我能做什么？""做完之后是什么样？"这两个问题，在进入页面的第一秒就有了答案。

接下来的节奏

这次重构完成了拼长图工具，接下来会陆续把这两条准则应用到 metool 上其他的工具页面。优先处理那些「零数据状态下几乎是空白页」的工具。

同时继续用 GA4 数据来验证假设——这次改动是否真的降低了跳出率，用户停留时间是否有变化。数据说了算。