E Ink 模式開發分享

今天要來分享一下兩年半前我用Max Lumi開發的前端網頁程式：E Ink模式。

一直以來我都認為網際網路是一個知識量非常豐富的圖書館（可參考此連結 ）裡面有著各式各樣的知識待我們去學習與挖掘。但是以往透過發光螢幕來看這些知識的體驗並不好，一個問題是發光螢幕對眼睛的刺激，讓我無法長時間閱讀網路知識，另一個問題是電子閱讀的體驗很差，許多知識型網站還沿用著過去滑鼠、鍵盤輸入時代的使用者介面來呈現內容，例如網頁的內容如果超出頁面時是以滾動式呈現（滑鼠滾輪的操作），到了觸控時代這些內容呈現方式還是滾動式，變成我們要在觸控裝置上用手不停的滑啊滑，但這些滑動動畫效果會增加眼睛的負擔，也很難專心。另外我們在閱讀這些網頁內容時，也無法像紙本書這樣看到重點把它給標注起來，甚至看一看有些感想直接在空白處寫上自己的想法與心得。總之，即便很多學術論文出版社(Elsevier、PubMed、Science Direct等）、雜誌出版社（國家地理、科學人等）、報社（聯合報、經濟日報等）把它們的內容給數位化，而且還開始採用訂閱制、會員制，透過發光螢幕線上瀏覽這些網站的操作體驗與閱讀體驗還是很差的。（心中OS：都付錢訂閱了還是這種介面說的過去嗎？開發人員是否該好好的拿來實際閱讀體驗一下）

2018年開始，我正式體會到電子墨水技術(E Ink）這種仿傳統紙張的技術才是未來人類數位閱讀最好的媒介，雖然礙於技術E Ink目前呈現的色彩效果還不是很理想，但是這種顯示技術呈現出來的效果就跟閱讀一般紙本印刷品無異，長時間閱讀下來眼睛不會像看發光螢幕那麼累，我們才真正可以像在圖書館中看書一樣來「閱讀」網際網路。可惜就如同上面所提到，目前的HTML技術思維還停留在發光螢幕這個媒介上，網頁前端開發人員大部分也都還停留在發光螢幕的使用者介面(UI)思維，因此拿電子紙來看上述這些出版社的電子化內容，體驗也是很差，拿來看維基百科、部落格，所有這些網站的UI都是傳統思維，閱讀體驗都好不到哪去，怪不得那些比較傳統紙張與電子閱讀的研究會得出傳統紙張理解力比較好的結論，可以參考此篇討論。

2021年初，我跟Daniel Kao討論到「閱讀網際網路」這一塊，我的構想是，三十年來舊有的網站內容畢竟都已經用舊有的前端技術架構好了，因此不太可能去改變這一塊，這一塊的解決方式比較可能是在未來透過AI來即時運算處理呈現各個不同尺寸裝置適合的排版（AI總編輯），也可以依照使用者喜歡的排版風格去合適每個人，再加上選項去微調（嘿，Siri，我想要時尚雜誌排版，照片用復古風！）。當時Daniel提出的解決方案是「仿翻頁」瀏覽器，那就是雖然網頁內容的呈現還是滾動式，但是可以透過程式去偵測屏幕尺寸並在使用者點上一頁或下一頁時直接滾動屏幕的高度距離，看起來的視覺效果就很像是真的翻頁。他跟我提到他個人當時為了讓網頁內容適合在電子紙上閱讀，已經有開發了這個瀏覽器的原型，他自己有在使用，但還有一些功能要修改，他覺得透過瀏覽器，可以解決「閱讀網際網路」這一部份，於是他把這個瀏覽器繼續優化後，上架了EinkBro瀏覽器，因此今日我們E Ink使用者才有這麼好用的東西可以拿來瀏覽網際網路。真的非常非常的感謝他這一路以來無償的辛勞與付出，以及無私的分享。這個瀏覽器目前還在持續進化著，很多功能真的都非常的棒，也讓許多網站本來不適合用電子紙看，透過調整後都變得超適合，是我的E Ink裝置必安裝的App。

我當時認為雖然透過「仿翻頁」瀏覽器可以讓網站內容更適合電子紙閱讀，但還是無法到很完美，因為這種「仿翻頁」技術的缺點，就是有可能翻頁後文字或圖片剛好卡在頁面邊緣處，有一部分被切掉，無法完整呈現，而且觸控翻頁區域有時會擋到該處的超連結無法點按，必須要把觸控翻頁區給暫時關閉。因此我認為，E Ink瀏覽器是過渡時期的權宜之計，最根本還是要改變整個前端設計的思維，讓新的網站內容可以用最適合未來媒介的方式呈現，舊的網站內容未來用AI來處理；這就像要過渡到全世界都使用電動車前，會需要很多年的時間，這段時間會有一些權宜的方案，但最終整個人類文明還是得要往純電邁進。因此，我當時著手開發前端E Ink模式，我快速的將未來網際網路閱讀應該要有的一些功能與元素在Max Lumi上透過Blogger編輯器給實作下來（因為我的眼睛受傷無法長時間看發光螢幕，所以我選擇在電子紙上開發），debug 才將Lumi接電腦透過瀏覽器的Devtools觀看，也因為只有Blogger編輯器，我就只單純用javaScript，而沒有採用其他的框架。這些功能的雛形兩年前都已經大致完成了，還有一些bug需要修改，而且我是快速寫下構想的，因此還未將其給模組化，但後來因為大寶出生，及陸陸續續許多事情要忙，就耽擱著，一直到現在我都還沒有將這個 E Ink模式給正式放上我的部落格。不過透過以下的影片示範，我可以給各位看一下我覺得適合「閱讀」網站知識的前端介面，希望能讓其他人或是前端開發人員有不一樣的想法。

E Ink模式介紹

E Ink模式主要有以下的功能：

• 網站不再只提供傳統滾動的呈現方式，就像現在網站有「桌面版」連結或按鈕，點下去後網站呈現方式會以桌面版來呈現，E Ink模式也是如此，頁面上會有一個按鈕，提供E Ink的使用者以適合E Ink裝置的方式呈現內容。（我開發的功能會自動偵測裝置，如果發現是Eink 裝置會自動進入此模式，但為了示範我將此功能給關閉。）
• E Ink模式會把網頁內容「自動重排」，變成一頁一頁的模式，因為內容有重排來分頁，因此不會有文字或圖片被頁面邊緣切到的問題。另外，因為不需要觸控翻頁區，就不會有超連結被觸控區域擋住的問題。
• 支援各種手勢：為了保持頁面乾淨，許多功能都支援手勢，另外可以透過手勢快速跳到頁首或頁尾、或是文章目錄處。
• 翻頁效果支援藍芽翻頁器，即不管手邊所使用的翻頁器是透過左右鍵、上下鍵或是音量鍵來達成翻頁操控，都可以正常使用。
• 註解會直接跳出，方便觀看，也可以跳到文末註解區。（已將此功能放上我的部落格網站）


傳統的滑動閱讀會一直有動畫，文字的位置也一直在改變。使用EinkBro瀏覽器的觸控翻頁功能，可以讓畫面不會一直變動，更適合閱讀，可惜分頁受限於網頁內容，沒辦法切的剛剛好，很多時候文字或圖片會卡在頁面邊緣被截掉。使用E Ink模式，頁面內容會自動重排，就不會有以上問題。另外支援手勢動作，向上滑可以回到頁首，向下滑可以滑到頁尾，由左下往右上滑可以跳到文章目錄處，方便讀者查找。
E Ink模式支援藍芽翻頁器，註解會顯示在畫面上，不需要跳到頁尾，但是若要跳到頁尾註解區，也可以透過按鈕跳往該處。即便畫面內容有更動（例如目錄的選單被點開），內容會自動重新分頁。另外點文章中的超連結，不用再擔心會被翻頁觸控區遮擋問題，因爲要翻下一頁就是點文章右側，翻上一頁就是點文章左側。
• 手寫功能：因為是在「紙上」閱讀網頁內容，就應該要像以前閱讀紙本時，拿筆起來隨時都可以寫字，這樣才更像紙的體驗，因此網頁上是可以隨意亂畫的。這個功能的好處是，畫好重點後，可以透過截圖或列印傳給其他人看。
• 標注功能：理由同上，但透過標注畫重點或佳句比較整齊好看。


示範自動偵測E Ink裝置並進入E Ink模式。示範手寫功能，手寫功能要叫出來只需要手勢從左上往右下滑， 就可以在頁面上任意位置寫字註記。有手寫工具懸浮球可以改變筆畫顏色、粗細，也可以使用橡皮擦擦除。另外懸浮球的位置可以隨意拖移，避免擋到文字。透過手勢從右上往左下滑，可以叫出螢光筆模式，可以直接在文字的任意處劃線標註，甚至在同個位置多畫幾次，螢光筆的濃度會變深來更加強調重點，螢光筆一樣有懸浮球工具，有不同顏色的筆可使用。畫面上的重點註記可以透過截圖或是導出PDF的方式將部分文章（截圖）或是整篇文章（導出PDF）分享給其他人閱讀，這樣他人就知道你的重點為何。
要在圖片上標註也是可以的
• 文字放大與縮小，這個功能雖然一般瀏覽器都有內建，但是透過E Ink模式的放大與縮小功能會讓內容自動重排做分頁，透過瀏覽器調整的話，就必須要按refresh鍵才會讓內容重整。
• 隨時可以切換回滾動模式，在滾動模式下也隨時可以透過手勢由左往右滑來回到E Ink模式。


要進入E Ink模式，並不一定要靠按鈕，也可以在文章中的任何位置由左往右滑，就會進入E Ink模式。長按畫面會叫出功能選單，可以透過功能選單來隨時回到捲動瀏覽模式。另外功能選單中有放大、縮小文章文字的按鈕，文字放大縮小後，頁面內容會自動重排，可以仔細看EinkBro右下角的頁碼在文字放大後，由47頁變成56頁。
• 放大圖片：透過手勢可以放大圖片，圖片也支援直接跳到要觀看處，不透過滑動方式。


示範在Max Lumi上觀看，可以明顯看出沒有Boox Super Refresh技術(BSR)的加持下，滑動速度會卡頓，但並不是所有廠牌的閱讀器都有這種能力，因此更需要翻頁瀏覽的E Ink Mode，才不會讓滑動的卡頓感破壞閱讀心情。另外如果碰到自動排版把圖片大小縮太小，可以用雙指拉開，就會進入放大模式，在放大模式下，一樣不需要滑動屏幕（避開卡頓感），直接在縮小視窗中點按就會跳到該位置。
• 屏幕轉向的自動分頁重排功能：當屏幕從橫的變成直的，或是直的變成橫的，都會自動重排內容進行分頁。


在E Ink模式下，旋轉屏幕的方向會讓內容自動重排進行分頁。
• 在Eink 模式下透過左往右滑或是右往左滑，可以快速翻頁，滑動加速度越快翻頁速度速度越快，看到想要的內容時按住頁面就會停止快速翻頁。
E Ink模式其實並不是只適合電子墨水裝置，就連用發光螢幕裝置如iPad來閱讀，滑動的體驗都沒有翻頁來得好。在iPad上手寫註記，可以使用Apple Pencil，但因為我錄影當下沒帶到Apple Pencil (已經躺在抽屜幾個月了），因此就用手指觸控也行。在iPad上寫字的流暢度更加的順暢，因為少了電子墨水的成像處理機制。在電子墨水裝置上若要讓手寫流暢，軟體必須對接適當的E Ink Interface，才有可能更快速的驅動硬體。有人會說滑動的可以快速查找位置，其實用E Ink模式一樣可以快速翻頁的，手指快速的由右往左滑，或由左往右滑，就可以快速翻頁，滑動的加速度會決定翻頁速度，當發現目標頁面出現時趕快按住螢幕就會停止。（好像在玩俄羅斯轉盤？）此功能其實是給發光螢幕用的，實際上電子紙的快速查找還是以光桌為主（尚未開發）。

以上的部分是目前已開發完成的功能，也是我覺得比較重要的功能，其實還有更多的功能跟想法等著被開發，不過因為上述功能還有bug要修，以及尚未模組化，因此目前現階段就是修bug與模組化後再放上github與我的部落格給各位利用與體驗一下效果。剛好現在是年末，我現在會寫這篇文章並分享的原因主要就是希望我自己不要再耽擱了，給自己的新年新目標：希望在明年底前上線這個 E Ink模式。放上來分享就會有壓力，希望各位給我督促一下啦😆。（現在又剛多了二寶，感覺此任務更加的艱鉅啊...，不過現在TUCP能使用更好的IDE開發工具，再加上功能強大的Mira，不用再土法煉鋼啦!）

放上來分享的另一個原因也是希望能給其他前端開發者一些想法與啟發，這兩年來我一直在看這些走數位訂閱會員制的出版社網站版面是否有些創新，但看來看去都還是既有的瀏覽思維模式，覺得非常的可惜。其實我的E Ink模式就算是拿來給發光螢幕（電腦、手機、平板）觀看，翻頁與使用上的體驗都比傳統滾動式好，尤其在iPad上用Apple Pencil手寫，完全不會延遲啊... (TUCP都還會有點延遲，當然這是因為手寫模組沒有利用Boox SDK的問題）。

在電腦上使用E Ink模式觀看文章的效果，一樣比滑動瀏覽畫面動來動去來的舒適很多。另外視窗大小的縮放也會讓畫面自動重排，沒有圖片、文字被切掉的問題。

示範在iPhone上使用E Ink mode的體驗，可以發現其實點按翻頁還是比滑動要來的舒服許多。

分享後，也許在我完成前，就有人開發出更好的東西了，但這也是我所樂見的，畢竟我的程式碼本來就是打算走Open Source MIT License，而且寫code並非我的專業，我只是非常業餘又不專業的寫寫，就當作是興趣，我知道專業人員能夠做的更棒更好，希望有人能像Daniel大這樣推出超棒的東西，這樣我明年就可以輕鬆玩爐石啦😆！最後也希望網上各位專業的大神能給點意見或想法，不同的想法交流也許可以擦出新的火花，不吝指教，感謝！