交互式讲解页面设计最佳实践

一页只答一个问题

最强的讲解页只回答一个问题，然后停手。「刹车卡钳如何工作？」是一页；「盘式刹车如何工作，外加如何更换刹车片，再加刹车油种类」是伪装成一页的三页。当主题开始蔓延，就把它拆开并互相链接——这对读者更好，对搜索也更好。

让图解占据空间

图就是论点。它应当是页面上最大、最安静的元素，而文字则围绕它排布、去支撑它，而不是与它竞争。两栏布局——一侧是宽大的图解，另一侧是简短的部件清单与核心原理——能让视线在两者之间移动，而不必做一次漫长的滚动。

标注是内容，不是装饰

图上的每个标注，都是读者——以及搜索引擎——可以读到的一个词。把标注写成 SVG 里真正的文本，而不是轮廓化的形状，并让词语保持简短、具体：写部件的名字，而不是关于它的一段说明。提示卡与悬浮卡可以补充细节，但永远取代不了可见的标注。

• 对比度保持在 4.5:1 以上。灰色小字标注是惯犯；把它调暗到通过为止。
• 一个部件一个名字。图解、清单和正文里用同一个词，否则读者会去找一个并不存在的对应。
• 不必标两次。如果图形本身已经暗示，就别再另外标注。

控件应当几乎隐身

最好的交互页，感觉像一张碰巧会响应的图，而不是一台带控制面板的机器。把界面装饰降到最低：一个缩放／适配切换、一种揭示部件的方式，就足够了。除非内容确实离了它就读不懂，否则避免播放、重置、设置与模式按钮。

真正存在交互的地方，要宽容一些。悬停某个部件，它高亮；悬停清单里对应的那一行，同一个部件高亮；点击不应破坏读者在页面上的位置。经验法则是：每个控件都要靠"让讲解更清楚"来赢得自己的位置，否则就删掉。

先让它在没有 JavaScript 时也能工作

把页面做成：关掉 JavaScript 后，它依然是一篇完整的文章——有带标注的图解、有写好的讲解、有常见问题。然后再把交互叠加在上面。这不仅是对网络不佳的读者友善——它也正是搜索爬虫与许多辅助工具初次见到页面的方式。如果页面只有脚本运行才可用，那它就没有完工。