← #805

以你的经验，墨水屏 UI 开发有哪些靠谱的规范？

文章摘要

提问者 BoxOfRain 最近换到了一台黑白墨水屏智能手机（Bigme Hibreak Pro BW），动机是「多少从注意力经济里抽身出来」，他形容这是一件真正很酷的硬件。日常需求这台设备基本都能满足，但有几件事在墨水屏上表现很糟，于是他打算自己写两个项目来补上这些缺口：一个专为墨水屏做的 Lemmy 前端，和一个同样面向墨水屏的 OpenRouter 前端。两者都走浏览器路线而非原生应用——一是为了最大化兼容性（他虽然拿 Bigme 举例，但希望兼容面尽量宽），二是因为他对 Web 远比对 Android 开发熟悉。

他明确说自己想先把墨水屏 UI 设计的原则学明白再动手，以免做出一堆没法用的垃圾。核心困惑有两层：其一，如何把「刷新」当作设计中的一等公民来对待——尤其是在浏览器里根本无法直接控制刷新的前提下；其二，当目标是一块灰度、高对比度的屏幕时，怎样才算是可理解的 UI 惯例。

他列了三个开门就撞上的具体问题：

流式输出的 LLM 文本对墨水屏几乎是最坏情况。 他需要做缓冲、分块绘制，同时又不能让使用体验变得难以忍受。
残影（ghosting）是个严重问题。 在这台设备上浏览 HN 就是极其典型的例子。他理想中的方案是尽可能避免滚动、改用分页，但又担心分页做不好会变得很烦人。
既然只能靠版式与字体来承载整个 UI，哪些设计语言最擅长强调这两点？ 他的直觉是早期 Mac OS 版本会是不错的起点——考虑到早期 Mac 的显示器约束，这个类比看上去很相关。

他最后说明，这纯粹是挠自己的痒，做完之后会以 GPL 放到公众手里。这个提问拿到了 214 分和 72 条评论，回复的质量相当高，其中一位（dredmorbius）多年前就整理过一份「墨水屏设计原则」，在这条串里再次贴了出来。

HN 评论精华

dredmorbius 给出了整条讨论中最凝练的一份清单——这是他早年因为找不到任何墨水屏 UI/UX 开发指南而自己写下的《E-Ink Design Principles for Web and Applications》的要点：① 持久是免费的；② 像素是廉价的；③ 绘制是昂贵的；④ 刷新是缓慢的；⑤ 颜色有限乃至不存在；⑥ 分页优于滚动；⑦ 整页（或局部）全刷优于平移；⑧ 反射式而非自发光；⑨ 尽量少动画；⑩ 线稿或半调网点优于渐变色阶（图像）。前三条与第四条合在一起就是整套设计哲学的地基：改变状态才有代价，维持状态没有代价。
jeffnash（正在把 Excalidraw 移植到 reMarkable Pro）的长回复被提问者称作最有帮助的一条。核心观点是：布局要尽可能单调（monotonic），尤其在没有用户交互时——应用自己绝不能主动破坏此前的渲染结果，除非是要清空整页。而在用户交互时，要减少交互产生的中间状态数量；但这不等于「干脆不渲染中间状态」，而是让交互本身不需要中间反馈。当确实必须有连续反馈时，就用一个降级的、廉价的临时表示，等动作提交时再刷新。他把这总结成墨水屏的根本权衡：每次交互都是残影与延迟之间的取舍。他自己反复回到同一种模式——中间状态优先保延迟、容忍残影，直到 UI 动作「完成」，这样刷新就与「尘埃落定」的满足感绑定在一起。具体做法：调整图形大小时只用快速更新模式画出轮廓，等用户抬起手指或触控笔、再略等一小会儿（留出「哎呀再大／小一点点」的余地），然后对新旧区域并集做局部刷新；轮廓本身故意画得很淡，这样增量小的时候刷新也不必太剧烈。他还补了一句很妙的观察：这些做法很多都是在向计算机图形性能不足的年代的老 UI 范式回归。如果某个操作注定要触发刷新，它就应当发生在用户已经理解为「语义边界」的时刻。
freeone3000 建议干脆换个参照系：参考印刷排版的可读性指南，而不是计算机 UI 指南——5Hz 的墨水屏更像一份会动的报纸，而不是一台慢电脑。他的具体建议是：不要指望任何东西会刷新；不要动画、不要过渡；把元素预先摆到最终位置再填内容；为输出预留固定的白色区域，然后往里填黑（这比反过来效果好得多）；对于耗时很久的处理，值得放到第二次页面加载之后。
FabCH 是把墨水屏当主力机的人——ssh 进 tmux 进 vim 在墨水屏上写代码，UI 全用 Rust 和 Ratatui 写，效果很好。他给 Web 版翻译成五条：0）不要动画。你只有大约 0.3 fps，动画可能会戳瞎别人的眼睛。1）不要滚动，只用分页。2）用真实的可视元素来指示输入焦点／光标／选中项，别靠颜色或字重——放个星号、Unicode 箭头之类的东西。3）直接动作控件：按钮就该做事，别给我一个按钮打开下拉再打开菜单才能做事。4）把整块屏幕用满！保持一个像素的开关状态不花钱，只有改变才花钱。所以留白就是在牺牲屏幕面积、并逼迫更频繁的变更。第 3 条引来了 iwjxjwjdjw 的反驳：屏幕面积有限、触控适配成本高，不能把界面塞满按钮——在触控精度差的设备上，一次误触的代价远高于两次正确点击。FabCH 承认这一点，并说这正是设计者的工作：好设计与坏设计的区别就在于把这些取舍做对。
ramses0 从优化视角给出了一套很有画面感的原则：规则 #1——你永远不可能把一件事做得更快，你只能少做一点事；规则 #2——先优化最慢的部分。落到墨水屏上就是：① 少做：交互时少画像素。② 保持上下文：用代理图形／线框、「首字母」和粗笔画。③ 分层填充：想想「迭代式蒙娜丽莎」和渐进式 JPEG。④ 实际更慢是可以接受的，只要最终「感觉更快」或者「看起来更酷」。他举了个例子：滚动墨水屏上的通讯录时，快速滚动阶段只写出（版式恰当的）名和姓的首字母，等大约 500ms 没有移动之后，才把剩下的字母、电话号码、图标补齐。「对交互式墨水屏来说，每一个你写下（缓慢且昂贵）却又被滚出屏幕的像素，都是被浪费的时间。」他的总结是：拥抱墨水屏的缺陷与怪癖，让它们显得是刻意为之，而不是去模仿 60fps、1600 万色。
quicklywilliam 提出了这条串里最系统的交互范式改造。他先下判断：绝大多数墨水屏 UI 都只是把智能手机的交互模式硬塞了进来。他认为拖拽在墨水屏上是彻底的反模式——延迟和触控精度都达不到我们被手机训练出的预期，最常见的糟糕体验是「你小心翼翼划好了一段高亮，结果手指抬起的瞬间它跳到了错的词上」；而且拖拽本身在趴着用设备时姿势就很别扭。他主张改成离散的模式切换 + 模态精修控件：① 长按短暂停留进入选择模式；② 选择模式在当前选区周围弹出大按钮来精修选区，精修靠点击而不是拖拽；③ 通过另一次点击显式退出，确认是显式的而不是隐式的。进阶版还可以在选择模式里保留拖拽手势用于快速圈大段，再用按钮细调；以及提供上下文推断的智能控件——比如已经高亮了半个段落，就出现一个「高亮完这一段」的按钮，接着再出现「高亮相邻段落」的按钮。
dredmorbius 在这条下面补充了背景：很多墨水屏设备本身就是 Android（或基于 Android），所以这种继承有很强的技术原因。他的实感是 Android 是手机优先的；平板对屏幕面积的利用本来就不如手机；而墨水屏在此之上还叠加了响应慢、色阶少、残影、以及滚动／平移／重动画设计的糟糕结果。关于触控精度他给的解法是：很多墨水屏设备支持触控笔，笔远优于手指；而选择／高亮在所有触控界面上都是老大难，他自己的办法是装一个带方向键的软键盘（如 Hacker’s Keyboard）或者接蓝牙键盘，用光标键 + Shift 来选内容。
blululu 给了两条针对性很强的视觉规范：墨水屏的对比度低于任何现代 LCD／OLED，所以要避开或修改那些为了风格而刻意降低对比度的 UI 体系——凡是可读性重要的地方就把对比度拉满；这一点几乎所有现代 Web/移动设计系统都在反着做，你可能得手动去调。第二，你不能用颜色作为强调手段（大量 UI 靠它来做提交按钮），必须定义一套一致的替代强调模式，比如描边／边框或反白。他还提到风格上锐利的内容在墨水屏上比柔和的好看。提问者回应说他在用「普通」Web 应用时确实撞上了这一点，默认深色模式会让情况更糟。
Marsymars 提了一条容易被忽略的可用性原则：触控目标要大。因为 UI 本身极慢，点丢目标的代价被成倍放大，尤其是当误触的结果是一次刷新、而你还得再撤销一次才能重试。NetMageSCW 接着补刀：更糟的是那种会造成重大上下文切换、需要更多交互才能回到原处的动作——「说的就是你，Kindle，那个小小的三点书籍菜单按钮是最差的。」他同时也对 freeone3000 的「绝不动画」加了个修正：如果某个操作无法很快完成，那么有某种动画反而更好，哪怕它比本就很慢的屏幕刷新还要慢，至少让用户知道有事情在发生。Animats 一句话概括：进度条仍然有效，无谓的动画没有。
philosopherNoob 从阅读连续性的角度提了几个想法：翻页时最令人烦躁的是「找不到自己刚读到哪」，所以翻页距离应当可调（100% 屏高、95%、80%，各留下不同大小的重叠区）；触控设备上也许可以做「按住拖动滚动」，按下时不给任何反馈，只在抬手时刷新屏幕；以及一个「滚动撤销」按钮，专门用于误操作后回到原位。seemack 在此基础上建议：在翻页前给最后一行加个标记／反色，翻页后帮助定位、过一会儿自动消失，比重新扫读全文快得多。skydhash 则指出，因为终端历来很慢，TUI 里已经积累了大量可复用的模式——整页／半页滚动而非逐行，以及像 less 和 emacs 那样「整屏减去可配置行数」的滚动。
ianbicking 贡献了一个来自 Oberon 操作系统的绝妙交互：点击滚动条上的某个位置，就把那个位置滚到顶部——点正中间就正好上滚半页，右键反向，中键跳到绝对位置。读东西时这意味着你可以挑一个段落作为断点、点在它旁边，那个段落就成了新一页的开头。他指出这对墨水屏特别合适，因为它基本上不是交互式的：你不需要按住、来回微调，一次点击就能可靠地得到一个精确的滚动位置。WillAdams 补充 NeXT 也有「点击滚到此处」，macOS X 把它做成了可选项。
关于「早期设备参考」这条线，tracker1 建议除了早期 Mac OS 之外还要看前智能机时代的设备：Palm Pilot、功能机，它们会告诉你在低分辨率屏幕上能做到什么；同时看优秀的 TUI 应用（不是渲染路径，而是整体结果）——分块／留白、清晰的控件、层级更浅、条目更少的简化菜单。DANmode 更直白：「去买个 Palm Pilot，或者翻翻老 PalmOS 的截图。不是开玩笑。」ckz（日常主力设备就是一台单色 PDA）也持同样看法，并抛出一句金句式的判断：数字日历的 UX 大约在 1999–2000 年的 PalmOS 3.5 上达到了顶峰（尤其是后期的 Handspring Visor）。他还转述了教授的一句话——好的 logo 必须通过「传真机测试」，认为这在墨水屏语境下同样适用；并顺手贴了 PalmOS 的 UI 指南。不过 dredmorbius 给这条参考路线加了重要的限定：早期单色设备大多是液晶而非电泳显示，两者差异明显——LCD 分辨率低得多且常是段码式而非像素式，但响应极快、没有残影，而对比度反倒更低（依赖偏振滤光片）。教训可以借鉴，但介质确实不同。
工具与资源方面：ronakjain90（TRMNL 员工，已披露）贴出 TRMNL 最近开源的专为电子纸设计的 CSS 框架 trmnl-framework 及其开源固件；blululu 推荐了 epaper-components 这个 React 组件仓库；appendjeff 指出 einkbro 浏览器和 Boox 设备设置里埋着不少有启发的设计思路，dredmorbius 力挺 einkbro 是他在 Android 上找到的最好的应用（除 Termux 外），并特别怀念它「把网页保存并追加进一个 ePub」的功能——它一次解决了好几个问题：把一组文档收进同一个封面下、剥掉页眉页脚侧边栏动画等 Web 杂物只留线性正文、结果可以翻页而非滚动、可以书签／批注／高亮、ePub 本质是一组 HTML 因而可增删改、并且完全按自己的偏好设定样式。storywatch 提出了一个硬件层面的观点：很多时候墨水屏本身能承受高得多的刷新率，垃圾的是驱动板和软件，并推荐去看 Modos 的清白设计；ckz 证实 Modos 的高刷新率墨水屏「实际用起来相当顺滑，几乎诡异地像一块带墨水屏观感的普通 LED 屏」。
samschooler 提供了一个实战案例：他给朋友们做了个 Partiful 风格的活动邀请站，其中一个最早做的功能就是自动分页的滚动组件，在 The Minimal Phone 上以 PWA 形式跑得很好。他顺带抱怨了一个真实痛点：他真希望这些墨水屏手机能正确响应 CSS 的 monochrome 媒体查询，但它们并不会。
pshc（用 reMarkable Paper Pro 做实验）的经验是：增量上墨效果很好——只要是在往页面上加黑色墨迹，一切都很跟手；但一旦要异步推送其他更新、或者（更糟）要擦除什么，就有覆盖掉用户笔迹的危险。他没有更深的洞见，只坚持「在更新任何东西之前等待人的确认」。他也很想知道能否检测到笔尖「离开」了页面附近——如果知道这个，就知道什么时候更新 UI 是安全的。他的最终选择是：完全不用滚动，一切分页，并把输入区放在设备垂直方向的中间位置以便手部舒适。
GICodeWarrior 提了个实用小技巧：虽然比不上一次正经刷新，但用黑白交替绘制可以帮助清理某块区域的残影。dredmorbius 补充了另一条思路：用等宽字体或分段式（segment）字形，让数值／文本更新时只翻转固定的那些像素块——七段、九段、十四段、十六段数码管就是这个道理；等宽字体略逊一筹，但也能把残影限制在字符元素的范围内，他发现这使得在墨水屏上跑相当快速滚动的终端也还能忍受。
关于「不要动画」，讨论意外地跑偏成了对现代 UI 的集体控诉。a2ff6eeb0：「我真希望普通 UI 也这么做。」被追问为什么之后，他的理由非常具体——「我老是点错按钮，因为某个动画把它挪走了，某个对话框弹出来盖住了东西，或者某条通知觉得此刻正适合遮住我正要操作的地方。动画让一切显得迟钝，而且它们甚至并不好看。」当有人辩护说规范执行的动画能帮用户建立直觉时，他直接回：「我口吃了吗？我要它们全部消失。我希望所有视觉元素都直接出现在最终位置，不要缩放，除非是直接响应用户操作。」rjh29 从另一侧给出了公允的反驳：这些东西是做过用户测试的，很多人在 UI 瞬间变化时会困惑，比如侧边栏收起时按钮换了位置，动画告诉了用户按钮去了哪里；你大概是观察力更强、视觉处理更好的人，所以对你来说动画是多余的。cyberax 的立场最激进，他认为唯一说得通的动画是聚焦在中央凹视野内的小动画（基本上只剩按钮按下效果），并把 Material Design 3 当作「如何不要做 UI」的典型，说它是为「叛逆感」和「懂行感」这类指标优化的，而不是为可用性。