如果你最近關(guān)注過(guò) Ask HN可能會(huì)注意到一個(gè)提問(wèn)In your experience, what are sound conventions for e-ink UI development?翻譯過(guò)來(lái)就是在你們的實(shí)戰(zhàn)經(jīng)驗(yàn)里電子墨水屏 UI 開(kāi)發(fā)有哪些經(jīng)得起驗(yàn)證的約定提問(wèn)者大概率已經(jīng)被某種東西折磨過(guò)。有可能是第一次上屏后難以忍受的黑閃也可能是翻頁(yè)后越來(lái)越重的殘影又或者是一個(gè)在手機(jī)上很精致的頁(yè)面到了 Kindle 這類 e-ink 設(shè)備上連基本可讀性都保證不了。這些問(wèn)題不是個(gè)例。最近兩年e-ink 設(shè)備從“Kindle 專用”擴(kuò)展到了會(huì)議門(mén)牌、電子價(jià)簽、辦公桌面日歷、電子筆記本連“e-ink 小說(shuō)轉(zhuǎn)換器”這類個(gè)人工具都開(kāi)始流行但很多開(kāi)發(fā)者仍然在用普通顯示屏的思路做 UI然后反復(fù)踩同一個(gè)坑。我的判斷是e-ink UI 開(kāi)發(fā)的核心不是適配分辨率而是接受屏幕物理特性并據(jù)此重新設(shè)計(jì)刷新策略和交互模型。設(shè)備尺寸、字體、顏色都不是最難的最難的是你不再擁有“實(shí)時(shí)重繪”這個(gè)默認(rèn)能力。讀完這篇文章你會(huì)明白 e-ink 屏幕的基礎(chǔ)原理、主流的刷新模式、UI 設(shè)計(jì)約定和代碼骨架以及最常見(jiàn)的坑怎么避開(kāi)。1. 為什么 e-ink UI 開(kāi)發(fā)需要一套獨(dú)立的約定很多團(tuán)隊(duì)接到 e-ink 項(xiàng)目時(shí)第一反應(yīng)是“改個(gè)分辨率、調(diào)一下布局就行”這幾乎是最常見(jiàn)的誤區(qū)。普通顯示屏和電子墨水屏看起來(lái)都是屏幕但它們的內(nèi)核工作方式完全不同。普通 LCD/OLED 是主動(dòng)發(fā)光或透光顯示刷新率動(dòng)輒 60Hz 到 120Hz屏幕上的內(nèi)容可以每秒變化幾十次用戶幾乎感知不到延遲。電子墨水屏是反射式顯示它顯示一個(gè)畫(huà)面后能長(zhǎng)時(shí)間保持不需要持續(xù)供電刷新但代價(jià)是每次“畫(huà)面切換”需要執(zhí)行一個(gè)完整的驅(qū)動(dòng)波形這個(gè)過(guò)程中像素粒子被電場(chǎng)重新排布屏幕會(huì)出現(xiàn)肉眼可見(jiàn)的閃爍和延遲。下面這個(gè)對(duì)比可以解釋為什么 UI 約定會(huì)差這么多維度普通顯示屏e-ink 顯示屏發(fā)光方式主動(dòng)發(fā)光/背光反射環(huán)境光刷新能力每秒幾十到上百幀每秒通常不足 10 幀刷新有延遲畫(huà)面保持必須持續(xù)刷新靜態(tài)可長(zhǎng)期保持?jǐn)嚯姴粊G像素狀態(tài)可隨時(shí)改變改變需要完整驅(qū)動(dòng)波形殘影幾乎沒(méi)有局部刷新時(shí)會(huì)殘留影像功耗持續(xù)發(fā)光耗電靜態(tài)幾乎不耗電刷新才耗電正是這種差異決定了 e-ink UI 的約定不能直接沿用移動(dòng)端。移動(dòng)端可以接受滾動(dòng)列表、動(dòng)畫(huà)過(guò)渡、持續(xù)更新的時(shí)鐘e-ink 上如果這么做用戶會(huì)看到滿屏黑閃、殘影和極低的響應(yīng)速度。從工程角度講e-ink UI 開(kāi)發(fā)最需要建立的思維是把每次界面更新看成一次“印刷”而不是一次“渲染”。印刷前必須確定整張版面的內(nèi)容、層級(jí)和變化范圍上屏后盡量少動(dòng)動(dòng)作要利落。這個(gè)比喻會(huì)貫穿全文。2. 核心原理為什么電子墨水屏無(wú)法像 LCD 一樣刷新要寫(xiě)出靠譜的 UI 約定不能只停留在“它刷新慢”這個(gè)表象上。至少要理解一層物理原理。電子墨水屏的顯示結(jié)構(gòu)可以簡(jiǎn)化成無(wú)數(shù)個(gè)微小的透明膠囊膠囊里有帶正電的白色粒子、帶負(fù)電的黑色粒子以及透明液體。屏幕上下有電極。當(dāng)我們施加一個(gè)正向電場(chǎng)白色粒子被拉到上方黑色粒子被壓到下方觀察者看到白色反向電場(chǎng)則看到黑色。粒子移動(dòng)到目標(biāo)位置后即使斷電也會(huì)因靜電吸附或粘滯作用停在原地所以屏幕可以在靜態(tài)下長(zhǎng)期維持畫(huà)面這正是 e-ink 省電的原因。也正因?yàn)槿绱水?dāng)你要把屏幕從畫(huà)面 A 切換到畫(huà)面 B 時(shí)必須對(duì)目標(biāo)像素施加合適的電壓序列讓黑色和白色粒子完成一次“搬遷”。這個(gè)過(guò)程不是瞬間完成的驅(qū)動(dòng)波形的長(zhǎng)度直接決定刷新速度。刷新越快粒子越可能沒(méi)有完全到位畫(huà)面就越容易出現(xiàn)殘影、灰度不準(zhǔn)確。這里需要區(qū)分電子墨水屏和 LCD 的另一個(gè)關(guān)鍵點(diǎn)LCD 可以隨意改變?nèi)我庀袼仄聊粵](méi)有“記憶”電子墨水屏的每個(gè)像素當(dāng)前停在什么位置實(shí)際上會(huì)影響下一次更新效果。所以驅(qū)動(dòng)層處理不了太隨意的更新UI 層必須配合。另外灰度在 e-ink 上也是“有限狀態(tài)”。真正雙色屏只有黑和白多色屏?xí)泻诎准t、黑白黃或者是 16 級(jí)灰度。但 16 級(jí)灰度并不是一次激活的而是通過(guò)多次驅(qū)動(dòng)波形產(chǎn)生刷新更慢、殘影更明顯。因此在 UI 上不要默認(rèn)支持平滑漸變、半透明、模糊這些現(xiàn)代 Web 視覺(jué)它們要么無(wú)法表達(dá)要么會(huì)付出巨大的刷新代價(jià)。3. 刷新模式與更新策略全刷、局部刷新、A2既然一次刷新這么麻煩驅(qū)動(dòng)廠商就設(shè)計(jì)了多種刷新模式用不同驅(qū)動(dòng)波形換取不同速度。UI 開(kāi)發(fā)約定里最重要的一條就是根據(jù)場(chǎng)景選擇合適的刷新模式并配合必要的全刷。一般 e-ink 驅(qū)動(dòng)庫(kù)會(huì)提供以下常見(jiàn)模式刷新模式速度殘影程度黑閃適用場(chǎng)景全局刷新慢輕微可清殘影明顯整頁(yè)切換、首次上電、去殘影局部刷新中等會(huì)累積殘影較少翻頁(yè)、點(diǎn)擊、局部小區(qū)域變化A2/快速刷新較快明顯殘影少手寫(xiě)筆跡、簡(jiǎn)單動(dòng)畫(huà)、滾動(dòng)反饋灰度刷新慢視驅(qū)動(dòng)不同不確定需要 16 級(jí)灰度圖像時(shí)UI 層面的約定通常這樣落地第一次開(kāi)機(jī)或冷啟動(dòng)先做一次全局刷新把上一次殘留的物理狀態(tài)清干凈。用戶完成一個(gè)完整操作比如翻頁(yè)、切換章節(jié)、點(diǎn)擊按鈕用全局刷新做一次干凈切換。如果只是局部變化比如日歷上對(duì)某一天打了一個(gè)標(biāo)記用局部刷新更新那個(gè)矩形區(qū)域。手寫(xiě)或滑動(dòng)這種高頻輸入用 A2 快速刷新保證跟手但如果長(zhǎng)時(shí)間不停止殘影會(huì)積累必須找一個(gè)資源充足的時(shí)候補(bǔ)一次全局刷新。這里最容易忽略的是選擇刷新模式不只是驅(qū)動(dòng)層的事UI 層必須告訴驅(qū)動(dòng)層“這次變更影響哪個(gè)區(qū)域”。設(shè)計(jì) UI 時(shí)就應(yīng)該把頁(yè)面分成可局部刷新的模塊。如果你把所有更新都扔給全局刷新結(jié)果是每按一次鍵黑閃一次用戶會(huì)以為設(shè)備壞了。更關(guān)鍵的一個(gè)約定是“雙緩沖與全量提交”。不要逐行繪制、邊繪制邊提交。無(wú)論目標(biāo)設(shè)備支持多少種刷新模式建議先把整個(gè)頁(yè)面畫(huà)到后臺(tái)緩沖區(qū)確認(rèn)內(nèi)容完整后再一次性推給屏幕驅(qū)動(dòng)。逐像素或逐控件的更新會(huì)放大刷新次數(shù)和殘影問(wèn)題。4. 視覺(jué)設(shè)計(jì)約定顏色、字體、排版與抖動(dòng)界面好看與否在 e-ink 上的定義和普通屏幕完全不同。普通屏幕可以依賴豐富色彩、毛玻璃、陰影、動(dòng)畫(huà)來(lái)提升質(zhì)感e-ink 屏幕的質(zhì)感來(lái)自對(duì)比度、清晰度和信息層級(jí)。下面這些約定在多個(gè) e-ink 項(xiàng)目里被反復(fù)驗(yàn)證過(guò)。4.1 盡量使用純黑和純白如果設(shè)備是雙色墨水屏UI 主色就用純黑#000000和純白#FFFFFF不要用大面積淺灰作為背景。e-ink 的灰階需要驅(qū)動(dòng)多個(gè)電壓狀態(tài)刷新更慢顯示也不平穩(wěn)。想要層次感可以通過(guò)字體粗細(xì)、邊框和留白實(shí)現(xiàn)而不是通過(guò)大量灰階。三色屏黑白紅多用于價(jià)簽和海報(bào)可以讓紅色作為強(qiáng)調(diào)色但紅色元素不要太小。因?yàn)榧t色粒子和黑白粒子的驅(qū)動(dòng)方式不同步極小紅色文字容易發(fā)糊用戶會(huì)以為屏幕壞了。4.2 灰度與抖動(dòng)如果確實(shí)要顯示照片或漸變一定不要直接輸出 8 位灰度圖。很多 e-ink 驅(qū)動(dòng)對(duì)灰度的映射并不平滑直接用高分辨率灰度圖會(huì)出現(xiàn)色塊和條紋。比較穩(wěn)妥的做法是輸出前用 Floyd–Steinberg 等抖動(dòng)算法轉(zhuǎn)成 1-bit 或低灰度圖。抖動(dòng)會(huì)在微觀上產(chǎn)生噪聲點(diǎn)但視覺(jué)上比生硬色塊干凈得多。4.3 字體選擇與最小字號(hào)電子墨水屏是反射屏閱讀體驗(yàn)接近紙張但像素物理尺寸通常比較大。對(duì) UI 來(lái)說(shuō)正文最小字號(hào)要保證筆畫(huà)的垂直像素足夠。一個(gè)很實(shí)際的約定至少保證正文在設(shè)備物理像素里達(dá)到 12px 到 16px 以上并使用無(wú)襯線字體。手寫(xiě)體、極細(xì)體、連筆字應(yīng)直接禁用它們?cè)?16 級(jí)灰度下會(huì)變成一團(tuán)灰。反鋸齒問(wèn)題也需要單獨(dú)說(shuō)。普通屏幕渲染文字時(shí)反鋸齒讓邊緣更平滑但在雙色 e-ink 屏上如果 UI 層先把文字渲染成灰色邊緣再被驅(qū)動(dòng)層轉(zhuǎn)成黑白位圖很容易出現(xiàn)“發(fā)虛”或邊緣斷裂。雙色模式下嚴(yán)格做法是關(guān)閉抗鋸齒或者使用大號(hào)字體讓黑白二值化后的筆畫(huà)更穩(wěn)定。若設(shè)備支持灰度刷新可以保留抗鋸齒但要接受刷新變慢。4.4 避免大面積純色翻轉(zhuǎn)UI 狀態(tài)切換時(shí)不要讓整個(gè)屏幕背景從白變黑、從黑變白。這種大面積高對(duì)比度翻轉(zhuǎn)在 e-ink 上非常刺眼黑閃嚴(yán)重用戶反饋基本是“閃瞎了”。盡量保持背景色穩(wěn)定只改變局部?jī)?nèi)容。比如選中的 Tab 用下劃線或黑塊標(biāo)記而不是讓整個(gè)頭部背景反色。5. 交互設(shè)計(jì)約定靜態(tài)反饋、翻頁(yè)優(yōu)先、批量更新e-ink UI 最容易讓開(kāi)發(fā)者難受的地方是交互。按移動(dòng)端的習(xí)慣設(shè)計(jì)hover、拖拽、無(wú)限滾動(dòng)、實(shí)時(shí)搜索、光標(biāo)閃爍……這些交互在 e-ink 上幾乎全要改。第一個(gè)約定是靜態(tài)反饋。按鈕點(diǎn)擊后不需要“變亮再變暗”而應(yīng)該用明確的靜態(tài)狀態(tài)表達(dá)比如被選中項(xiàng)變成黑底白字。因?yàn)榉答伇旧頃?huì)讓屏幕刷新如果反饋動(dòng)畫(huà)包含多個(gè)中間態(tài)就要多次刷新用戶看到的不是流暢而是閃爍。第二個(gè)約定是翻頁(yè)優(yōu)于滾動(dòng)。長(zhǎng)內(nèi)容的瀏覽在 e-ink 上建議做成“整頁(yè)翻頁(yè)”而不是手指一拖動(dòng)就實(shí)時(shí)滾動(dòng)。實(shí)時(shí)滾動(dòng)只能靠快速刷新硬扛殘影會(huì)迅速堆積。如果必須支持滾動(dòng)也要把滾動(dòng)過(guò)程改成“松手后整頁(yè)刷新顯示終點(diǎn)位置”而不是逐像素實(shí)時(shí)渲染。第三個(gè)約定是異步反饋與刷新?tīng)顟B(tài)分離。點(diǎn)擊后如果系統(tǒng)需要耗時(shí)計(jì)算不要試圖用動(dòng)畫(huà)表達(dá) loading。先用一個(gè)靜態(tài)的“加載中”頁(yè)面或者“請(qǐng)稍候”文本上屏計(jì)算完成后再一次性切換結(jié)果頁(yè)。這樣用戶只看到兩次干凈的全刷而不是一次次局部跳動(dòng)。第四個(gè)約定是控制刷新時(shí)機(jī)。多數(shù) e-ink 設(shè)備允許在后臺(tái)批量更新。短時(shí)間內(nèi)多次點(diǎn)擊或狀態(tài)變化時(shí)應(yīng)該合并成一次刷新。典型做法是引入一個(gè) 100ms 到 300ms 的防抖把暫時(shí)性的變化合并最后一并提交。這樣既減少黑閃也降低功耗。第五個(gè)約定是輸入體驗(yàn)。中文輸入、密碼框、光標(biāo)閃爍是重災(zāi)區(qū)。如果系統(tǒng)必須支持軟鍵盤(pán)盡量不要讓光標(biāo)按傳統(tǒng)方式每秒閃爍。文本顯示區(qū)可以保持靜態(tài)把當(dāng)前輸入狀態(tài)用底部候選區(qū)或高亮塊表達(dá)而不是依賴閃動(dòng)。6. 開(kāi)發(fā)環(huán)境與前置條件e-ink 開(kāi)發(fā)沒(méi)有一個(gè)統(tǒng)包方案但常見(jiàn)的硬件和軟件組合有規(guī)律可循。這里把主流路線列一下方便按項(xiàng)目選擇。版本號(hào)請(qǐng)以實(shí)際項(xiàng)目為準(zhǔn)本文側(cè)重通用思路。方案一嵌入式開(kāi)發(fā)適合智能標(biāo)簽、會(huì)議門(mén)牌、桌面日歷硬件ESP32、STM32、樹(shù)莓派配合 e-Paper HAT 或裸屏驅(qū)動(dòng)板。語(yǔ)言C / MicroPython / Python。優(yōu)勢(shì)直接控制刷新模式最貼近物理層。需要關(guān)注驅(qū)動(dòng)庫(kù)、SPI/Arduino 引腳定義、波形配置。方案二Android 應(yīng)用適合 Boox、墨案等安卓墨水屏設(shè)備硬件采用 Android 系統(tǒng)的 e-ink 平板或閱讀器。語(yǔ)言Kotlin / Java或 WebView 內(nèi) HTML/CSS/JS。優(yōu)勢(shì)應(yīng)用生態(tài)成熟可以接入現(xiàn)有 App。需要關(guān)注廠商 SDK 的刷新模式設(shè)置、系統(tǒng)全局刷新配置。方案三Linux 或?qū)Ｓ瞄喿x器應(yīng)用適合 Kindle、Kobo 等硬件基于 Linux 的閱讀器設(shè)備。語(yǔ)言C/C、Python、原生框架。優(yōu)勢(shì)目標(biāo)用戶明確適合深度優(yōu)化的閱讀體驗(yàn)。環(huán)境準(zhǔn)備上如果是先做原型驗(yàn)證最經(jīng)濟(jì)的路線是用 Python 和 Pillow 生成預(yù)期畫(huà)面在電腦上預(yù)覽再借助一個(gè)開(kāi)發(fā)板或 e-ink 設(shè)備把圖畫(huà)上屏。這樣可以先驗(yàn)證排版和 UI 約定再處理驅(qū)動(dòng)細(xì)節(jié)。如果只是測(cè)試 UI 布局還可以先在普通屏幕上模擬 e-ink 效果強(qiáng)制界面黑白、關(guān)閉動(dòng)畫(huà)、低幀率截圖。這個(gè)模擬不能完全代替真機(jī)驗(yàn)證因?yàn)闅堄昂驼鎸?shí)刷新時(shí)序無(wú)法模擬但可以提前發(fā)現(xiàn)大量布局問(wèn)題。7. 完整示例三種場(chǎng)景下的 e-ink UI 骨架代碼這里用三個(gè)示例覆蓋最常見(jiàn)的開(kāi)發(fā)路徑。第一個(gè)示例Python Pillow 生成 1-bit 幀適合任何后續(xù)要上 e-ink 的設(shè)備。# convert_to_frame.py # 功能把文本頁(yè)面轉(zhuǎn)換成雙色墨水屏可用的 1-bit 位圖 from PIL import Image, ImageDraw, ImageFont # 以常見(jiàn) 800x480 雙色墨水屏為例 WIDTH, HEIGHT 800, 480 image Image.new(RGB, (WIDTH, HEIGHT), white) draw ImageDraw.Draw(image) # 注意請(qǐng)根據(jù)本機(jī)實(shí)際字體路徑替換也可用 ImageFont.load_default() title_font ImageFont.truetype(/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf, 36) body_font ImageFont.truetype(/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf, 22) draw.text((60, 60), Chapter 1: Getting Started, fillblack, fonttitle_font) draw.line((60, 115, 740, 115), fillblack, width2) draw.text((60, 150), This is an e-ink UI example., fillblack, fontbody_font) draw.text((60, 200), Keep it static, high contrast., fillblack, fontbody_font) # 雙色屏最終轉(zhuǎn) 1-bit加抖動(dòng)能減少邊緣鋸齒 frame image.convert(1) frame.save(frame_1bit.bmp) print(saved frame_1bit.bmp)運(yùn)行之后會(huì)得到一個(gè)黑白位圖。你可以先用圖片查看器打開(kāi)確認(rèn)排版再通過(guò)目標(biāo)設(shè)備的驅(qū)動(dòng)庫(kù)上屏。如果設(shè)備支持灰度刷新可以去掉最后的convert(1)改輸出L模式的 8 位灰度圖。實(shí)際操作里這一步應(yīng)該封裝成一個(gè)頁(yè)面渲染函數(shù)輸入章節(jié)內(nèi)容、字體和布局參數(shù)輸出幀緩沖區(qū)。第二個(gè)示例C 層驅(qū)動(dòng)接口設(shè)計(jì)示意體現(xiàn)了全刷/局部刷新的分層約定。/* epd_ui.h —— 示意接口具體實(shí)現(xiàn)需接入廠商驅(qū)動(dòng) */ typedef struct { uint16_t x; uint16_t y; uint16_t width; uint16_t height; } epd_rect_t; /* 全刷新適合整頁(yè)切換可清除殘影 */ void epd_full_update(const uint8_t *framebuffer); /* 局部刷新適合小區(qū)域變化速度快但殘影會(huì)累積 */ void epd_partial_update(const epd_rect_t *rect, const uint8_t *framebuffer); /* 進(jìn)入睡眠降低功耗 */ void epd_sleep(void); /* UI 層統(tǒng)一入口把整頁(yè)緩沖區(qū)提交給屏幕 */ void ui_commit_frame(const uint8_t *framebuffer, const epd_rect_t *changed_region) { if (changed_region NULL) { epd_full_update(framebuffer); } else { epd_partial_update(changed_region, framebuffer); } }這個(gè)示例的核心不在真實(shí) API而在于約定UI 層不直接操作波形它只需要聲明“全集更新還是部分更新”。真機(jī)驅(qū)動(dòng)換成廠商 SDK 后這個(gè)入口可以保持不變方便上層 UI 邏輯復(fù)用。很多驅(qū)動(dòng)庫(kù)會(huì)要求你在調(diào)用局部刷新前先調(diào)用某個(gè)“準(zhǔn)備局部刷新”的內(nèi)部函數(shù)這些細(xì)節(jié)應(yīng)該封裝在epd_partial_update內(nèi)部不讓 UI 層感知。第三個(gè)示例Web 前端針對(duì) e-ink 的樣式與刷新節(jié)奏控制適合 Android 類 e-ink 設(shè)備里的 WebView 或?yàn)g覽器場(chǎng)景。/* eink.css —— e-ink 設(shè)備建議調(diào)用的樣式 */ media (monochrome) { * { animation: none !important; transition: none !important; } body { background: #ffffff; color: #000000; } a, button { color: #000000; text-decoration: underline; } input, textarea { caret-color: #000000; } }// screen-controller.js —— 控制刷新節(jié)奏的示意邏輯 // 注意具體需要對(duì)接廠商 SDK 暴露的 native 方法 let localUpdateCount 0; const FULL_REFRESH_INTERVAL 10; function commitPage(offscreenCanvas) { const rect getChangedRect(offscreenCanvas); if (localUpdateCount % FULL_REFRESH_INTERVAL 0) { // 周期性全刷清掉局部刷新積累的殘影 nativeEPD.fullUpdate(offscreenCanvas); } else { nativeEPD.partialUpdate(rect, offscreenCanvas); } localUpdateCount; }Web 端適配有幾個(gè)注意點(diǎn)media (monochrome)只對(duì)單色設(shè)備的媒體查詢生效兼容性并不完美所以在生產(chǎn)環(huán)境更常見(jiàn)的是由系統(tǒng)判斷設(shè)備類型后通過(guò) JS 往 HTML 根節(jié)點(diǎn)加一個(gè)eink-mode類再套用有同樣效果的樣式。nativeEPD只是示意對(duì)象真機(jī)上要替換成廠商提供的 JS Bridge 或 Android WebView 注入對(duì)象。屏幕控制器里的getChangedRect也要在離屏 buffer 對(duì)比新舊內(nèi)容后計(jì)算不能隨便傳一個(gè)全屏矩形否則就退化成全刷。8. 效果驗(yàn)證與常見(jiàn)問(wèn)題排查代碼寫(xiě)完不能直接上線。e-ink 項(xiàng)目的驗(yàn)證重點(diǎn)不是“功能跑通”而是刷新效果和殘影是否可接受。下面是一套低成本驗(yàn)證流程先在普通屏幕用黑白模式預(yù)覽布局檢查對(duì)比度和信息層級(jí)。上真機(jī)后記錄每個(gè)操作觸發(fā)的刷新模式。啟動(dòng)時(shí)有全局刷翻頁(yè)時(shí)是局部刷還是全刷是否出現(xiàn)了不必要的中間態(tài)。連續(xù)執(zhí)行 20 次局部刷新然后立刻切到一個(gè)大面積白色頁(yè)面觀察是否出現(xiàn)明顯殘影。如果殘留嚴(yán)重說(shuō)明局部刷新次數(shù)過(guò)多或者缺少周期性全刷。測(cè)試低溫和高溫場(chǎng)景如果設(shè)備會(huì)戶外使用。溫度對(duì)電子墨水粒子運(yùn)動(dòng)影響很大低溫下刷新會(huì)明顯變慢UI 層需要有容錯(cuò)和重試機(jī)制。常見(jiàn)問(wèn)題與排查思路如下問(wèn)題現(xiàn)象可能原因排查方式解決方案每次點(diǎn)擊都全屏黑閃UI 層把所有更新都走了全局刷新打印刷新模式日志確認(rèn)每次操作的刷新類型小區(qū)域變化改用局部刷新整頁(yè)切換才全局刷新局部刷新后出現(xiàn)明顯殘影局部刷新次數(shù)過(guò)多而沒(méi)有全刷連續(xù)操作后觀察空白頁(yè)設(shè)置全刷間隔超過(guò) N 次后強(qiáng)制全刷文字邊緣發(fā)虛、斷線字體太小或灰度抗鋸齒被二值化截圖并放大檢查像素邊緣增大字號(hào)、關(guān)閉抗鋸齒或提前做抖動(dòng)圖片出現(xiàn)色塊/條紋直接把 8 位灰度圖交給雙色屏檢查驅(qū)動(dòng)接收的原圖模式使用抖動(dòng)算法轉(zhuǎn) 1-bit/低灰度滾動(dòng)列表卡頓、殘影嚴(yán)重使用了實(shí)時(shí)滾動(dòng)交互看是否有逐像素滾動(dòng)更新改整頁(yè)翻頁(yè)模型滾動(dòng)結(jié)束后一次性刷新電池耗電異?？焖⑿麓螖?shù)過(guò)多或經(jīng)常停留在局部刷新統(tǒng)計(jì)一段時(shí)間內(nèi)的刷新次數(shù)合并短時(shí)間更新加防抖靜態(tài)后讓屏幕睡眠點(diǎn)擊后狀態(tài)遲遲不更新混淆了全局刷新和局部刷新的耗時(shí)看日志中刷新時(shí)間戳交互提示狀態(tài)先上屏再執(zhí)行耗時(shí)的全局刷新排查時(shí)第一步永遠(yuǎn)是看刷新日志。讓驅(qū)動(dòng)層在每次更新時(shí)輸出模式、區(qū)域和時(shí)間戳你能很快定位是真機(jī)驅(qū)動(dòng)問(wèn)題還是 UI 層的錯(cuò)誤調(diào)用。如果設(shè)備沒(méi)有現(xiàn)成日志可以用示波器或電流監(jiān)測(cè)觀察刷新時(shí)的電流脈沖從功耗層面反推更新頻率。9. 最佳實(shí)踐與工程建議最后是團(tuán)隊(duì)真正能落地的建議。這些內(nèi)容不是官方文檔里的固定配置更多來(lái)自 e-ink 項(xiàng)目反復(fù)踩坑后的經(jīng)驗(yàn)總結(jié)。9.1 把頁(yè)面當(dāng)作“靜態(tài)位圖”來(lái)設(shè)計(jì)UI 架構(gòu)上建議采用“頁(yè)面緩沖區(qū) 提交”模式。組件不直接調(diào)用屏幕驅(qū)動(dòng)而是把繪制結(jié)果寫(xiě)到一塊整頁(yè)緩沖區(qū)最終由控制器決定全刷還是局部刷。這和移動(dòng)端“任意控件隨時(shí)重繪”的思路完全不同。9.2 設(shè)計(jì)階段就定義刷新節(jié)奏在原型圖中就標(biāo)注每個(gè)操作使用什么刷新模式。點(diǎn)按鈕局部刷翻章全刷手寫(xiě)A2并在停止手寫(xiě) 2 秒后補(bǔ)一次全刷。這樣寫(xiě)代碼時(shí)不會(huì)臨場(chǎng)亂選。9.3 用防抖合并高頻更新所有短時(shí)間內(nèi)的重復(fù)狀態(tài)變化都應(yīng)該合并后一次性提交。時(shí)間窗口常用 100ms 到 300ms具體取決于設(shè)備刷新速度和用戶操作的連續(xù)程度。如果用戶連續(xù)按音量鍵 10 次系統(tǒng)只需要把最終的音量等級(jí)顯示出來(lái)不需要每次按鍵都刷新屏幕。9.4 在 UI 層保存“上一次完整狀態(tài)”由于 e-ink 有殘影局部刷新時(shí)盡量把目標(biāo)區(qū)域的背景和變換都計(jì)算好不要把“從舊像素直接覆蓋”交給驅(qū)動(dòng)。很多驅(qū)動(dòng)不支持任意像素任意跳變先擦除再繪制會(huì)產(chǎn)生更嚴(yán)重的閃爍。處理好目標(biāo)區(qū)域每個(gè)像素的目標(biāo)狀態(tài)能顯著改善視覺(jué)。9.5 日志和監(jiān)控不只是看 bug還要看刷新健康度在開(kāi)發(fā)階段輸出每次刷新的模式、區(qū)域、耗時(shí)。到測(cè)試階段統(tǒng)計(jì)全刷與局部刷的比例。如果全刷占比過(guò)高回查設(shè)計(jì)方案如果局部刷過(guò)多警惕殘影投訴。養(yǎng)成看刷新日志的習(xí)慣后你會(huì)發(fā)現(xiàn)很多 UI 問(wèn)題其實(shí)在代碼提交前就能發(fā)現(xiàn)。9.6 關(guān)于 e-ink 小說(shuō)轉(zhuǎn)換器這類個(gè)人工具的提醒如果你正在做“小說(shuō)轉(zhuǎn)換器”這類把網(wǎng)頁(yè)或電子書(shū)內(nèi)容轉(zhuǎn)換為適合 e-ink 閱讀的工具排版約定比格式轉(zhuǎn)換更重要。轉(zhuǎn)換后不要直接輸出原始的彩色網(wǎng)頁(yè)結(jié)構(gòu)而是統(tǒng)一成一套高對(duì)比度、少動(dòng)畫(huà)的閱讀視圖。章節(jié)之間、頁(yè)面之間用全刷閱讀時(shí)的狀態(tài)標(biāo)記用局部刷。很多用戶抱怨轉(zhuǎn)換器“翻頁(yè)閃、殘影重”問(wèn)題核心通常不在格式轉(zhuǎn)換而在 UI 沒(méi)有按 e-ink 刷新約定來(lái)設(shè)計(jì)。9.7 安全與權(quán)限提醒如果項(xiàng)目涉及在用戶設(shè)備上安裝驅(qū)動(dòng)、設(shè)置系統(tǒng)刷新參數(shù)、修改系統(tǒng)級(jí)顯示配置一定要遵循最小權(quán)限原則。只申請(qǐng)與刷新控制相關(guān)的權(quán)限不要用 root/管理員權(quán)限去改系統(tǒng)其他顯示配置也不要把實(shí)驗(yàn)性刷新波形直接推給生產(chǎn)用戶。建議先在測(cè)試設(shè)備上驗(yàn)證波形參數(shù)再通過(guò)灰度更新逐步發(fā)布。如果你還沒(méi)有 e-ink 設(shè)備最快的方式是買(mǎi)一塊與主流開(kāi)源驅(qū)動(dòng)兼容的 e-Paper HAT用 Python 的示例庫(kù)把本文里的第一段腳本跑起來(lái)先感受一次全刷和局部刷的區(qū)別。如果你已經(jīng)有設(shè)備建議第一步不是堆功能而是打印一個(gè)刷新模式日志把現(xiàn)有界面重構(gòu)為“整頁(yè)緩沖 分區(qū)域提交”的結(jié)構(gòu)。這一步做完你對(duì) e-ink UI 的把握會(huì)超過(guò)大多數(shù)臨時(shí)接手的開(kāi)發(fā)者。