光束照进细节：一次交互改版的前后对比与思考

站点内容稳定之后，我开始注意到一些“不影响打开、但影响读完”的问题：长文章没有目录，读到一半不知道还剩多少；移动端菜单要滚回顶部才能打开；搜索框藏在页面底部。

这些问题单独看都很小，但加在一起，会让阅读变得不顺畅。于是我花了两个周末做了一次交互改版。

改了什么

改版集中在五处：

1. 文章目录固定在侧边，长文滚动时保持可见；
2. 阅读进度条，显示当前读到的位置；
3. 搜索入口前置，桌面端放在导航栏，移动端放在菜单顶部；
4. 移动端菜单重做，从底部弹出，支持手势关闭；
5. 相关文章，在文末推荐同标签的两篇。

这些改动都不涉及内容结构，目标只有一个：减少阅读过程中的中断。

前后对比

我没有做严格的 A/B 测试，样本太小，结论不可靠。只看了一些粗略的数据：

这些数字只能说明“方向可能对了”，不能证明因果。阅读时长增加，也可能是因为那段时间发的文章更长。

真正有用的反馈来自三个朋友的试用。我请他们各自打开一篇文章，读到一半，然后完成“找到另一篇同主题文章”的任务，同时把过程说出来。

三个被指出来的问题

第一，目录遮挡内容。 我一开始把目录固定在右侧，宽度设得比较大，在小屏幕上盖住了正文。后来改成只在宽屏显示，窄屏收进一个可展开的按钮。

第二，进度条让人焦虑。 我原本觉得进度条能帮助读者判断剩余长度，但一位朋友说，她看到进度条走得很慢，反而想关掉页面。后来我把进度条做得更细、颜色更淡，只作为参考，不抢注意力。

第三，相关文章推荐不准。 我按标签匹配，结果同一标签下文章太多，推荐的内容和当前文章关系不大。后来改成“标签 + 时间接近”两条规则，并限制只推荐两篇。

退回去的改动

不是所有改动都留下了。

我试过给标题加滚动动画，试过在文章末尾加“点赞”按钮，也试过把导航做成全屏覆盖。前两个被删掉了，因为它们增加了动效和交互，却没有帮助阅读；全屏导航保留了下来，但降低了动画时长，避免打开时的那一下停顿。

这次改版让我重新确认一个原则：交互应该服务阅读，而不是证明设计能力。 读者来这里是看内容的，任何需要学习才能使用的交互，都在增加成本。

灰度与回滚

改版没有一次性全量上线。我先在自己的常用设备上用了两周，再让三个朋友试用，最后才替换线上版本。

替换时保留了旧版样式文件，出问题可以快速切回。实际上确实切回过一次：移动端菜单在某个旧版浏览器上无法关闭，回滚之后才修好。

这个流程很笨，但对个人站点来说，比“改完直接上线，出问题再说”稳妥得多。

最后

这次改版的收益不大，也没有让站点“焕然一新”。它只是让几个具体的摩擦点变小了一点：找目录更容易，知道读到哪，搜索更顺手。

交互改版最容易陷入的误区，是把“改动”本身当成目标。对我来说，好的交互应该是隐形的：读者不会注意到它，只会觉得读起来顺畅。

光束照进细节，不是为了照亮自己，而是为了让读者看清内容。