给电子墨水屏做网页前端，千万别用常规的 UI 思路去套

最近在尝试给 Bigme Hibreak Pro BW 适配几个轻量级的浏览器端前端（主要是 Lemmy 和 OpenRouter），在这个过程中我深刻意识到，电子墨水屏（e-ink）的显示逻辑与我们习惯的 OLED 或 LCD 完全相反。如果你试图把现代 Web 设计的那一套直接搬过去，结果往往是视觉上的灾难。

最让我头疼的是大模型（LLM）的流式输出。在常规屏幕上，字一个一个蹦出来的 Streaming 效果非常有科技感，但在 e-ink 屏幕上，这种高频的局部刷新会导致屏幕疯狂闪烁，不仅让人心慌，而且极其容易产生严重的残影（Ghosting）。在这种场景下，绝对不能采用实时渲染。我目前的解决方案是建立一套缓冲机制：前端不再实时显示每一个 Token，而是将内容在内存中攒够一个完整的自然段，再一次性触发渲染。虽然牺牲了一部分实时感，但换来了视觉上的稳定性，避免了屏幕在输出过程中不停地“抽风”。

在具体的 UI 适配上，我总结了几个实操方向，希望能给同样在折腾电子纸前端的朋友提供参考。

首先，必须彻底放弃滚动条，回归分页模式。滚动是 e-ink 的天敌，因为持续的局部刷新会让页面迅速变得“脏兮兮”的。虽然现在的设备大多自带快速刷新模式，但代价是功耗增加且对比度明显下降。最稳妥的方案是模仿电子书的翻页逻辑，每次加载新页面时触发一次全刷（Full Refresh），这样能保证对比度维持在最高水平，文字边缘也最清晰。

其次，视觉语言需要回归极简主义。在没有色彩、没有渐变的电子纸上，所有的信息层级必须依靠排版和字体粗细来支撑。我发现参考早期 Mac OS 的界面风格非常有效，因为那个时代的显示设备限制很多，主要通过强对比的实线和大面积留白来区分功能区域，而不是依赖现代 UI 常见的阴影或模糊效果。

最后是控制刷新频率。由于在浏览器环境下无法直接调用系统级的刷新 API，我们只能在前端逻辑层减少不必要的 DOM 更新。

如果你也想尝试为 e-ink 优化前端，建议在 CSS 策略上做彻底的精简。我目前使用的一套基础配置如下：

body {
  background-color: #ffffff;
  color: #000000;
  /* 选用高对比度衬线体，如 Georgia，能显著提升电子纸上的可读性 */
  font-family: "Georgia", serif; 
  /* 强制图像渲染为硬边缘，避免模糊导致灰阶混乱 */
  image-rendering: crisp-edges; 
}

.content-chunk {
  /* 彻底放弃 box-shadow，改用 2px 的纯黑实线区分区块 */
  border: 2px solid #000; 
  padding: 10px;
  margin-bottom: 20px;
}

目前我的重心放在 OpenRouter 的适配版上，重点攻克 LLM 文本的分块渲染问题。在电子纸上使用大模型，如果能通过分段缓冲解决闪烁，整体体验会有质的提升。总之，做 e-ink 前端需要一种“克制”的思维，把所有追求流畅度的动态效果全部砍掉，转而追求极致的静态对比度。