之前做墨水屏信息看板时我把普通网页的 UI 设计思路原样搬了过去结果几乎处处碰壁刷新时整屏黑闪、放下十几分钟后还留着上一帧的残影、小字号中文糊成一团、强光下浅灰色内容完全看不清。后来陆续做了几个电子墨水屏项目才慢慢沉淀出一套适合电泳显示设备的 UI 开发约定。这篇文章就把这些约定整理成一份系统教程围绕“电子墨水屏 UI 开发规范”展开覆盖显示原理、设计规则、刷新策略、Python 实战代码、常见故障排查和工程最佳实践。无论你是嵌入式开发者、前端开发者还是正在规划墨水屏 IoT 产品都能从里面找到可以直接落地的建议。1. 为什么电子墨水屏需要一套独立的 UI 规范1.1 电子墨水屏是什么电子墨水屏Electrophoretic Display简称 EPD业界常直接称为 e-ink是一种反射式显示技术。它不像 LCD 那样依赖背光也不像 OLED 那样自发光而是利用微胶囊中带电荷的黑白粒子在电场作用下的迁移在屏幕上形成图案。它的关键特性可以归纳为四点双稳态Bistable断电后画面不会消失这是电子书翻完一页就不再耗电的根本原因。反射式依靠环境光显示阳光直射下反而更清晰。低速刷新画面更新速度远低于普通屏幕全屏刷新一次通常需要 1 到 3 秒。有限灰度常见的是黑白 1 位色、4 级或 16 级灰度也有黑白红三色屏。这些特性决定了把普通 Web 或移动端 UI 的设计经验直接移植过来几乎必然踩坑。1.2 它解决什么问题电子墨水屏的核心价值在于“低频更新、静态展示、强光下可读、极低功耗”。典型应用场景包括电子书阅读器、墨水屏小说阅读装置。超市电子价签、医院叫号屏、公交站牌。桌面信息看板天气、日历、待办事项、智能家居状态。低功耗 IoT 设备温湿度显示、环境监测、房间门牌屏。如果你的产品需要在长时间不插电的情况下持续显示信息电子墨水屏几乎是性价比最高的方案。但反过来它也要求开发者接受一个前提你设计的不是“会动的界面”而是一张一张高质量的“静态画面”。1.3 什么是“电子墨水屏 UI 开发规范”这里说的规范不是某个官方标准而是实践沉淀下来的约定俗成总结起来无非三件事设计层字体、对比度、布局、颜色怎么选。驱动层全刷、局刷、休眠唤醒怎么配合。工程层代码怎么组织异常怎么排查功耗怎么控制。下面先从显示原理讲起搞清楚“为什么会有这些坑”后面的规范才不容易被推翻。2. 核心概念从显示原理理解 UI 约束2.1 微胶囊电泳与双稳态电子墨水屏的每个像素可以理解成一颗充满液体和带电粒子的微胶囊。胶囊内部有带正电荷的白色粒子和带负电荷的黑色粒子。当电极施加电场时白色粒子被吸引到顶部肉眼看到的就是白色反过来就是黑色。关键在于粒子一旦迁移到位即使电场撤掉它们也会停在原地。这就是双稳态。因此屏幕刷新一次后不再需要持续供电维持画面。从 UI 开发角度看双稳态带来一个隐性好处界面不需要像普通屏幕那样每帧重绘。你只需要定义“什么时候该更新内容”而不是“每 16 毫秒刷一帧”。2.2 全刷、局刷与鬼影真正让 UI 开发变得特殊的是刷新方式。全量刷新Full Refresh是最可靠的更新方式。为了消除屏幕上残留的电荷和旧粒子分布屏幕会先把所有像素驱动到黑色再驱动到白色最后写入新画面。这个过程视觉上表现为明显的“黑闪”或“整屏闪烁”耗时也较长。局部刷新Partial Refresh只驱动需要变化的区域速度明显更快也不会整屏闪烁。但它的代价是没有经过“复位”过程的粒子无法完全回到理想位置多次局部刷新后就会产生“上一帧内容的淡影”也就是鬼影Ghosting。理解这两者的关系是设定 UI 刷新策略的基础刷新方式速度画面质量适用场景全量刷新慢1~3 秒干净无鬼影页面切换、内容大面积变化、定期校准局部刷新快数百毫秒多次后出现鬼影时钟、电池电量、通知角标等小区域变化2.3 与传统屏幕的本质差异把电子墨水屏和 LCD/OLED 放在一起对比差异会更加清楚维度LCD / OLED电子墨水屏发光方式背光或自发光反射环境光刷新率60Hz 以上每秒最多几次功耗常亮常耗电静态画面零功耗色彩16M 色起灰度或黑白红三色动画流畅不可用对比度高中等偏上受环境光影响视角有极限接近全视角核心结论是电子墨水屏 UI 开发最重要的设计原则是“静态优先”。一切设计决策都要围绕“如何减少刷新次数、如何在刷新中保持可读性、如何延长整机续航”来展开。3. 可以落地的 UI 设计规范3.1 对比度与字体规范电子墨水屏没有背光对比度完全依赖反射率和墨水本身的浓度。实际开发中最常见的错误是设计者按照普通屏幕的习惯使用中灰色、浅灰色文字来区分层级。在墨水屏上这些浅色字在室内环境看起来就像一层淡淡的“脏底”可读性极差。推荐做法默认白底黑字。文字使用纯黑灰度 0背景使用纯白灰度 255。黑底白字在电子墨水屏上会因大面积电场反转而产生更明显的残影和耗电除非特殊场景否则不要大范围反色。辅助文字提高对比度。如果必须区分主次副文字选择深灰色灰度 90~120不要低于 150。深灰依旧保留“次要感”但不会糊在背景里。正文最小字号要有最小物理尺寸概念。许多大尺寸墨水屏的像素密度不高。以常见的 7.5 寸 800×480 黑白屏为例像素密度约为 124 PPI。正文至少要保证 3.5mm~4mm 的物理高度换算成像素在 20px 左右中文因为笔画密集建议 24px 起。如果是 300 PPI 的阅读器屏幕就需要用“物理字号 像素密度”换算而不是直接照搬像素值。只使用固定字号档位。在阅读器上字号选择通常是 8 档或者 9 档而不是连续缩放这是一条很实用的约定。部分电子墨水屏文字渲染在不额外缩放时边缘最清晰任意缩放容易出现笔画断裂或糊边。# 以 7.5 寸黑白屏为例预定义字号档位 FONT_TITLE 40 # 主标题约 8mm FONT_BODY 28 # 正文约 5.5mm FONT_CAPTION 20 # 辅助信息约 4mm正文优先使用粗体。1 位色屏没有抗锯齿细体字的竖笔和横笔在低 PPI 屏幕上很容易断。中文系统字体请使用 CJK 字体文件避免因缺少字体出现方框乱码。3.2 布局与内容层级在墨水屏上做布局核心思路是“把界面拆成固定区域变化的数据只在指定区域内发生”。推荐遵循以下布局约定使用网格化的固定模块。比如一个信息看板可以划分为顶部状态栏、左侧日历、右侧温湿度、底部待办区域。每个模块在多次刷新时必须保持位置不变这样用户不容易产生“内容跳来跳去”的混乱感。不允许滚动条。电子墨水屏不适合连续滚动。内容超出屏幕时采用分页或折叠展开。每次页面切换都视为一次完整的状态迁移。用间距和字号建立层级而不是用颜色。屏幕上最常见的视觉焦点应该是大标题其次是正文最后才是细小的角标信息。表格和列表要主动简化。宽表格在狭窄屏上很难一次展示完建议拆成卡片化的单列结构每张卡片表达一条完整信息。大块底色要少。大面积填充色块会增加刷新时的电荷负担并放大鬼影。需要区分区域时优先使用细边框、圆角框而不是粗重色块。3.3 色彩与灰度策略纯黑白屏只有 1 位色但这并不意味着界面必须粗糙。在实际项目中常用两种策略UI 元素全部使用 1 位色保证刷新快、字迹干净。进度条、按钮、边框都用黑或白表示。图片和装饰内容使用抖动Dithering模拟灰度让照片或插画有层次感。三色屏黑白红的红色一般只用于“强调”和“警示”例如报警信息、库存不足标记、日期红点。需要注意红色区域的刷新通常比黑白区域更慢不要在大范围内依赖红色做背景装饰。图片处理建议from PIL import Image # 先转灰度再做强对比度拉伸 img Image.open(photo.jpg).convert(L) img ImageOps.autocontrast(img, cutoff5) # 最后抖动成 1 位色适配黑白墨水屏 img_1bit img.convert(1, ditherImage.Dither.FLOYDSTEINBERG)注意不同 Pillow 版本的抖动常量写法不同。旧版本写Image.FLOYDSTEINBERGPillow 9.1 之后推荐Image.Dither.FLOYDSTEINBERG。请以你本机实际版本为准。3.4 交互模型离散状态替代连续动画普通 UI 的“流畅过渡”在墨水屏上不存在交互设计必须从“连续”转为“离散”。一个实用的约定是把整个应用看成有限个屏幕状态每次操作只触发一次“进入下一个状态”的更新。例如翻页当前页内容整屏全刷翻页动画变成一次可接受的“黑闪”。数据刷新时钟每分钟只对时间区域做局部刷新其他区域完全不动。设置确认点击按钮后不做动画反馈而是显示一个静态的“已保存”小图标或改变按钮边框样式。如果设备本身支持振动或声音可以把“操作反馈”交给触觉/音频而不是依赖屏幕动画。这也是墨水屏 UI 约定里很容易被忽视的一点。4. 刷新模式与状态机设计4.1 把屏幕生命周期做成状态机驱动电子墨水屏时直接调用“绘制 - 显示”看似简单但长期运行后很容易出现鬼影、黑闪、初始化失败等问题。更稳的做法是把屏幕生命周期抽象成一个状态机INIT上电执行控制器初始化。IDLE画面保持屏幕可进入休眠。UPDATE内容有变化时决定采用全刷还是局刷。DISPLAY将帧缓冲写入屏幕。SLEEP写入休眠指令降低功耗。WAKE需要再次更新时重新初始化并回到 UPDATE。状态机保证了“屏幕永远处于已知状态”避免跳过初始化直接刷屏导致的异常。4.2 什么时候使用全刷推荐在以下场景强制全量刷新整页内容切换例如菜单进入详情页。用户主动要求“刷新屏幕”或“清除残影”。局部刷新累计达到一定次数例如 10 次后主动做一次全刷校准。设备从休眠或异常中恢复后第一次显示。4.3 什么时候使用局部刷新局部刷新只适合“小范围、频繁、变化内容简单”的场景电子表盘上的时间分钟数。电池电量百分比。消息角标数量。温湿度传感器的数字读数。局部刷新前先在目标区域画一个白色矩形把旧内容擦掉再绘制新内容可以有效减少旧文字的残影。def update_partial(draw, image_region, x, y, w, h, render_content): # 1. 清除目标区域 draw.rectangle((x, y, x w, y h), fill255) # 2. 绘制新内容 render_content(draw, x, y) # 3. 交给驱动做局部刷新 epd.display_partial(image_region, x, y, w, h)这里epd.display_partial是示意性接口实际名称以你使用的驱动为准。4.4 用“累计计数”控制全刷间隔局部刷新不是免费的残影会随着次数累积。工程上常用计数器方案partial_count 0 FULL_REFRESH_INTERVAL 10 def refresh_time_area(epd, draw, image, time_text): global partial_count update_partial(draw, image, 20, 20, 200, 60, lambda d, dx, dy: d.text((dx, dy), time_text)) partial_count 1 if partial_count FULL_REFRESH_INTERVAL: epd.display(image) # 全刷 partial_count 0这种做法把“每隔多少次局刷后全刷一次”显式写进代码长期运行画面会更干净。5. 实战用 Python 实现一个墨水屏信息看板5.1 硬件与开发环境本文示例以一个常见的大尺寸黑白墨水屏模块为例比如 7.5 寸 800×480 或 4.2 寸 400×300。主控使用 Raspberry Pi 或任何能运行 Python 的开发板。需要准备的软件环境Python 3.8。Pillow 图像库。屏幕厂商提供的 Python 驱动或自己实现 SPI 驱动。不同厂商的驱动 API 各有差异下面的代码重点是“界面层”与“驱动层”的配合方式。实际运行时把epd相关的调用替换成你的驱动接口即可。5.2 工程结构ink-dashboard/ ├── main.py # 入口 ├── display_driver.py # 驱动封装层 ├── views.py # 页面绘制层 ├── assets/ │ └── NotoSansCJK-Bold.ttc # CJK 字体 └── requirements.txt5.3 驱动初始化先封装驱动层屏蔽不同厂商的差异# display_driver.py import time class InkDisplay: def __init__(self, epd): self.epd epd self.width epd.width self.height epd.height self.partial_count 0 self.full_interval 10 def init(self): self.epd.init() self.epd.Clear() def sleep(self): self.epd.sleep() def full_update(self, image): self.epd.display(self.epd.getbuffer(image)) self.partial_count 0 def partial_update(self, image, x, y, w, h): self.epd.displayPartial(self.epd.getbuffer(image), x, y, w, h) self.partial_count 1 if self.partial_count self.full_interval: self.full_update(image)这里getbuffer、display、displayPartial是 Waveshare 类驱动的常见接口。如果你的驱动不叫这些名字替换即可。full_update之后将计数器归零是保证画质的关键。5.4 绘制静态界面在views.py中定义页面绘制函数。先创建一帧 1 位色图像再绘制各个区域。# views.py from PIL import Image, ImageDraw, ImageFont FONT_TITLE 40 FONT_BODY 28 FONT_CAPTION 20 def load_font(size): return ImageFont.truetype(assets/NotoSansCJK-Bold.ttc, size) def draw_dashboard(width, height, weather, temperature, humidity): image Image.new(1, (width, height), 255) draw ImageDraw.Draw(image) font_title load_font(FONT_TITLE) font_body load_font(FONT_BODY) font_caption load_font(FONT_CAPTION) # 顶部标题 draw.text((40, 40), 今日看板, fontfont_title, fill0) # 左侧天气信息 draw.text((40, 150), f天气: {weather}, fontfont_body, fill0) draw.text((40, 210), f温度: {temperature} °C, fontfont_body, fill0) draw.text((40, 270), f湿度: {humidity} %, fontfont_body, fill0) # 右侧待办区域用矩形边框区分模块 draw.rectangle((420, 150, 740, 330), outline0, width2) draw.text((440, 170), 待办事项, fontfont_body, fill0) draw.text((440, 230), 1. 写周报, fontfont_caption, fill0) draw.text((440, 270), 2. 预约会议, fontfont_caption, fill0) return image这里的设计要点是标题和主要模块用粗体大字号辅助信息用小字号但保持深色区域之间用细边框而不是大色块区隔。5.5 局部刷新时间区域信息看板通常需要显示时间但整屏每分钟全刷一次既不必要也费电。更合理的做法是单独在固定区域做局部刷新。# main.py 中的局部刷新逻辑片段 def update_time(display, base_image): draw ImageDraw.Draw(base_image) # 时间区域固定左上角 (640, 40) 到 (780, 120) x, y, w, h 640, 40, 140, 80 # 先擦除旧内容 draw.rectangle((x, y, x w, y h), fill255) # 再绘制当前时间 now_str datetime.now().strftime(%H:%M) font_time load_font(FONT_BODY) draw.text((x 10, y 15), now_str, fontfont_time, fill0) # 局部刷新 display.partial_update(base_image, x, y, w, h)这段代码体现了前面说的两条约定动态内容固定在有限区域每次局刷前先绘制白色矩形清除旧内容。5.6 运行与验证主程序按“初始化 - 绘制全屏 - 进入循环 - 定时局部刷新 - 休眠”的流程组织# main.py import time from datetime import datetime from display_driver import InkDisplay def main(): epd_driver init_epd() # 根据厂商驱动创建对象 display InkDisplay(epd_driver) display.init() # 首屏全量刷新 first_image draw_dashboard( display.width, display.height, weather晴, temperature24, humidity55 ) display.full_update(first_image) # 每分钟只更新时间区域 while True: time.sleep(60) update_time(display, first_image) # 如果长时间没有按键进入休眠 if should_sleep(): display.sleep() break if __name__ __main__: main()预期效果是开机出现一张干净的信息看板之后每分钟只看到时间数字快速变化屏幕其余部分保持不动且不会频繁出现整屏黑闪。6. 常见问题与排查思路电子墨水屏项目的问题往往和“电气特性”相关现象相似但根因不同。下面整理几个高频问题。问题现象常见原因排查与解决思路每次刷新都整屏黑闪代码里始终调用全量刷新将小范围动态内容改为局部刷新接口局部刷新后出现上一屏残影局部刷新次数过多粒子残留累积局刷前先绘制白色矩形清除区域累计 N 次后强制全刷小字中文笔画断裂、发虚字号过小或使用细体字加大中文正文字号改用粗体保证物理尺寸 3.5mm 以上中文显示成方框乱码缺少 CJK 字体文件加载 NotoSansCJK、文泉驿等字体避免使用系统默认英文-only 字体照片显示一团黑或一团白未做灰度转换和对比度拉伸先转灰度再autocontrast最后抖动转 1 位色低温环境下刷新缓慢或画面发虚低温影响电泳粒子运动速度检查模块工作温度范围有条件时增加加热装置或降低局刷频次深色背景区域残影特别明显大面积反色导致电场负荷大改为白底黑字用边框代替大面积色块程序重启后屏幕花屏未执行完整初始化流程每次上电都执行完整复位 init 流程避免从异常状态直接写数据一个通用排查顺序是先看“是否全刷/局刷选错”再看“是否字体和对比度问题”最后检查“驱动初始化与环境温度”。多数疑难问题都能归结到这三类。7. 工程最佳实践7.1 界面层与驱动层分离做墨水屏应用时不要把绘制逻辑和硬件驱动写在一起。建议拆成三层驱动层负责 SPI 通信、init、display、sleep相当于硬件适配。页面绘制层输入数据输出 1 位色或灰度帧缓冲。应用层负责调度、定时器、数据获取、状态机切换。这样做的好处是更换屏幕型号时只改驱动层页面绘制代码可以复用反过来界面改版不会引入底层驱动错误。7.2 帧缓冲与内容差异计算始终在内存里维护一份“当前屏幕帧”和“上一帧”。每次更新前先比较两帧内容只把差异区域提交给局部刷新。这样既能减少刷新频率也能延长电池寿命。def get_diff_rect(previous_frame, current_frame): # 比较两帧的像素差异返回变化区域的 (x, y, w, h) diff previous_frame ^ current_frame bbox diff.getbbox() return bbox # None 表示没有变化如果getbbox()返回None说明内容没有变化直接跳过刷新即可。7.3 功耗管理电子墨水屏静态显示几乎不耗电功耗主要来自刷新和主控运行。工程上有几条约定值得遵守每次刷新完成后立即调用sleep()让屏幕进入低功耗状态。主控使用定时唤醒RTC或外部中断而不是空转轮询。批量处理数据更新。例如每分钟更新一次时间、每十分钟更新一次天气而不是天气接口一有变化就刷屏。内容没有变化时不重复刷新。很多看板项目在数据源未变化时反复重绘白白浪费电量。7.4 可靠性与恢复墨水屏设备经常在插座不稳定或电池供电的环境中运行。建议在代码里增加“上电后重新初始化”逻辑并保留一帧最后显示内容的备份。如果出现花屏用户可以按物理按键强制执行一次全屏校验更新def recovery_full_refresh(display): # 强制重新初始化重置内部状态 display.epd.reset() display.epd.init() display.full_update(last_known_good_image)在量产阶段最好在不同温度下做一轮“连续局刷鬼影测试”把全刷间隔调整到肉眼可接受的范围。8. 总结与学习路线电子墨水屏 UI 开发的核心可以浓缩成几条经验静态优先把界面设计成有限个离散状态而不是连续动画。白底黑字文字用高对比深色避免大面积反色。动态内容固定区域小范围用局部刷新定期用全刷校准。字号档位化按物理尺寸和 PPI 换算不任意缩放。刷新后马上休眠把功耗控制做到极致。下一步可以往三个方向继续深入第一阅读你手上屏幕的控制器数据手册理解全刷/局刷对应的驱动时序和查找表LUT设置第二学习图像抖动算法把彩色照片更好地转换成适合墨水屏的灰度或 1 位色图像第三研究 RTC 定时唤醒和低功耗主控选型把原型机做成真正能长时间离网运行的设备。电子墨水屏的 UI 开发并不难难的是打破“亮屏动画”的惯性思维。接受它的慢反而能做出续航惊人、观感安静的好产品。如果你手头正好有一块墨水屏模块建议从今天的信息看板例子开始先跑通一次全刷和一次局刷然后逐步加入自己的界面模块。遇到残影和黑闪对照文中的排查表逐项验证很快就能找到手感。