讓網頁更加適合閱讀的Eink模式
![]() |
維基百科用Eink模式觀看的效果 |
什麼是Eink模式?
Eink模式顧名思義,就是網站特別為E
Ink裝置的使用者提供的網頁瀏覽模式。它的設計目的是希望將網站的內容以最適合電子墨水裝置的方式來呈現,並且讓使用者在觀看網站內容的同時,能夠有種類似在紙本書上閱讀的沈浸式體驗,讓上網的行為透過Eink模式與電子紙的呈現後,不再只是瀏覽,而更加適合閱讀。
目錄
直接體驗Eink 模式
為了讓您更直觀的了解Eink 模式的好處,直接使用體驗是最快的方式。本網頁已經支援Eink模式,因此可以透過此模式來呈現,我將逐一的介紹Eink模式的特色與操作方式,如果您手邊有能夠使用瀏覽器的電子墨水裝置,如開放式閱讀器[註一]、電子紙手機、平板、顯示器,可以試著用它們來閱讀此網頁。不過在使用之前,建議先把刷新模式調成快速刷新模式,因為有些功能在快速刷新模式下,會有比較好的使用體驗。
Eink標誌與進入Eink模式
首先,當您看到網站上有Eink圖示時,表示此網站有提供Eink模式,適合用電子墨水裝置來觀看。當部分網頁讀取完畢時,這個圖示會變成一個按鈕,此時您可以點擊該圖示,或在網頁任一位置從左向右滑動(如果您目前是使用臉書的內建瀏覽器觀看,只能透過點擊按鈕進入此模式,因為臉書App的滑動手勢會產生干擾,因此建議您使用外部瀏覽器開啟來觀看此網頁,會有更佳的體驗),即可進入Eink模式。如果您是使用電子紙顯示器,但螢幕不支援觸控,則可以透過滑鼠點擊Eink圖示進入此模式,或在網頁任一位置長按滑鼠左鍵來進入此模式。
![]() |
如果網頁有支援Eink模式,可以看到一個eink的圖示
|
成功進入Eink模式後,您將看到操作說明畫面。這不僅為不熟悉此模式的使用者提供簡易的操作指引,也提醒使用者已進入Eink模式,操作方式將與一般網頁的滾動式瀏覽方式不同,讓使用者有心理準備。如果網路速度較慢或網頁資料量較大,說明畫面右上角會顯示讀取中(Loading...)的圖示。當讀取圖示消失並顯示x按鈕時,點選說明畫面的任意地方或該按鈕即可關閉說明並進入網頁主體。
Eink模式下的網頁瀏覽方式
Eink
模式的特色是會將網頁的內容以分頁式的方式進行重排,讓內容就像書本這樣以一頁一頁的方式來呈現。點擊螢幕右側,會跳到下一頁,點擊螢幕左側,會跳到上一頁,因此有別於以往的上下持續滑動來瀏覽網頁,Eink模式的使用體驗非常的像在看電子書。也因為希望讓使用者看網頁就像是在看書,因此畫面的設計力求簡潔,盡可能的隱藏所有使用者操作的介面,而以呈現內容為主。唯一出現在畫面上的介面,是右下角的頁碼圖示,讓使用者知道網頁大概有多少內容,以及目前正在網頁的哪個位置。這個頁碼的作用,就跟傳統滑動式網頁右側的滾動條一樣,但是頁碼也同時兼具提醒使用者目前是在使用分頁式的Eink模式而非滑動式來瀏覽網頁。
支援豐富的手勢操作
目前大多數的E
Ink裝置,為手持式的行動裝置,大小就像是書本的尺寸,因此Eink模式預設的使用者使用情境,就是拿在手上,或是平放在桌上透過觸控的方式來操作。而為了要讓使用者操作更加的快速與方便,Eink模式其實設計了非常多的手勢操作。除了剛剛說的左右點按翻頁外,透過手勢由下往上滑,可以直接跳至網頁開頭處,而由上往下滑,則可以跳至網頁頁尾處。另外還有更多的手勢,我會在以下說明Eink模式特色的同時,順帶講解相關手勢的操作方式。
支援豐富的鍵盤快捷鍵
如果您是使用電子紙顯示器的用戶,Eink模式也提供了非常多的鍵盤快捷鍵與滑鼠動作,讓您可以更方便快速的操作。例如以上所說的點按翻頁,只要按鍵盤的右鍵,就會往下一頁,按鍵盤的左鍵,就會往上一頁;而按下鍵盤的上鍵,會回到頁首,按下鍵盤的下鍵,會跳至頁尾。至於其他的快捷鍵,我會在以下說明Eink模式特色的同時,順帶講解。
E Ink模式的特色
防止超連結與圖片的誤觸
首先要先說明的是,Eink模式的預設是會將網頁中超連結與圖片的點按行為給關閉,以免網頁中超連結跟圖片很多時,使用者在點擊翻下一頁的時候容易誤觸超連結而被導離網站,但是這並不代表超連結與圖片就不能夠點按,而是改為長按超連結或圖片,待出現瀏覽器預設的選單後,再點選要另開分頁或是另存圖片等動作。因此在使用Eink模式時,您可以放心的在頁面中的任一位置點按翻頁,而不用擔心超連結誤觸而離開網頁。
網頁文字大小調整
現今社會結構逐漸邁向高齡化,網頁若能夠調整文字的大小,對於高齡族群而言是非常友善的。因此Eink模式也提供了能夠非常快速方便調整網頁字體大小的方式:只要透過兩指縮放的方式,就可以放大與縮小字體,而放大與縮小字體後並不會讓文字或是圖片被切到,這點有別於傳統的滑動式網頁。傳統的滑動式網頁透過雙指放大後,文字雖然變大了,但是卻讓許多文字與圖片被畫面的邊緣切到,而無法完整的瀏覽整行文字,變成使用者要透過手勢在螢幕畫面上滑來滑去以移動文字的位置來觀看,非常的麻煩與不便。您現在可以試著雙指縮放看看,文字會快速的縮放大小,透過手指開闔的程度調整到適合的文字大小後再放開即可。畫面中的文字與圖片完全不會被畫面切到邊,這是因為網頁快速重新排列後的結果。因此這時若點按下一頁,會出現提醒的指標提示,告訴您網頁重排後,下一頁繼續閱讀的位置,讓您不需要費心找尋繼續閱讀的位置。
對於電腦版的用戶而言,Eink模式支援瀏覽器原生的縮放字體功能,因此Mac的使用者,按下Cmd + 或是 Cmd - ,Windows與Linux的使用者,按下Ctrl + 或是 Ctrl - ,即可讓Eink模式的網頁字體與圖片等進行重排。
跳至目錄
除了兩指縮放手勢外,您可以試著由左下往右上滑,就會跳至文章的目錄位置,在此處,可以點按想要觀看的子標題而做快速跳頁閱讀的動作,點按子標題後會跳至子標題所在的那一頁,並且一樣會出現繼續閱讀的標誌,讓使用者在跳頁後可以快速找到閱讀起始點。
如果您正在使用桌上型電腦或筆電,要快速跳至目錄的方式就是透過快捷鍵,Mac使用者可按下Ctrl + c,而Windows使用者則是按下Alt + c即可。
使用螢光畫註
現在您可以由畫面的左上角往右下角滑,就會叫出螢光筆,此時在畫面右側會出現一個螢光筆的圖示,提示您現在處於螢光畫註狀態。看到圖示後,將手指放在想要標示的文字段落起始位置,拖移就會開始螢光畫註,手指離開螢幕就會停止畫註。此時,點按螢幕仍然可以翻至上一頁或下一頁。您可能會發現一段話是可以重複畫註的,顏色會疊加而越來越深,這是模仿紙本書螢光畫註時墨水疊加的狀態,因為有些人習慣用此方式來強化重點,以此來區分重點的等級。
如果您正在使用桌上型電腦或筆電,要快速的使用螢光畫註,Mac使用者只要按著Cmd 鍵(Windows按Ctrl鍵),然後將滑鼠移動到要開始畫註的位置,按下滑鼠左鍵,並將滑鼠拖移到段落結尾。記得過程中要持續按著Cmd/Ctrl,如果放開Cmd/Ctrl,又會回到選取文字的狀態。
手勢換色
如果想要不同的螢光筆顏色該怎麼辦呢?Eink模式提供基本的紅、綠、藍三種不同的螢光筆顏色,如果您所使用的Eink裝置尺寸夠大,而且支援三指以上的多點觸控,則可以直接使用手勢更換螢光筆顏色。做法很簡單,兩指輕點螢幕,就會換上綠色螢光筆,三指輕點螢幕,就會換上紅色螢光筆,四指輕點螢幕,就會換上藍色螢光筆,五指輕點,就會換上螢光筆橡皮擦。
如果您正在使用桌上型電腦或筆電,要快速的切換螢光筆顏色,Mac使用者可以按下Ctrl + 1 ~ 3,Windows使用者則是按下Alt + 1 ~ 3。
,數字的顏色分別是:1綠色、2紅色、3藍色。若要擦除螢光筆的標註顏色,Mac使用者只要按下Alt鍵,而Windows使用者則是按下Start鍵,滑鼠鼠標就會變成橡皮擦,持續按住Alt/Start鍵與滑鼠左鍵並拖動滑鼠,滑鼠軌跡經過的螢光畫註皆會被擦除。
懸浮球工具換色
如果您是使用小螢幕,如手機等,不方便將五指全部擠在一起點按,或是說您的裝置並不支援兩指以上的多點觸控,這時該怎麼換色呢?其實剛剛介紹的螢幕右側出現的螢光筆圖示,同時也是一個懸浮球工具列(有點類似iOS的輔助觸控按鈕),點按圖示後會展開懸浮球,再點選想要的螢光筆顏色即可。若您覺得懸浮球的位置會擋到文字,只要按住懸浮球,就可以把它拖動到畫面中任何位置。點按懸浮球工具後,除了看到各色螢光筆與橡皮擦外,還會看到一個筆記本的圖示,這個是什麼呢?點下去看看吧!(點下去後要返回此畫面請由右往左滑即可)
如果您正在使用桌上型電腦或筆電,要如何叫出懸浮球工具列呢?只要長按滑鼠左鍵,就會出現工具選單,點選螢光筆的圖示,就會出現懸浮球工具列了。使用滑鼠操作的方式就跟手指觸控類似,點開懸浮球,就會看到筆記本的圖示。不過這個圖示剛剛在工具選單中也有,所以其實點按工具選單中的圖示也可以。另外,如果要讓懸浮球消失,進入純閱讀模式,只要在鍵盤按下Esc鍵,懸浮球就會消失了。
![]() |
螢光筆的圖示其實是個懸浮球工具按鈕,點開可以看到其他的螢光筆工具
|
螢光畫註筆記本
這個筆記本(同樣是以翻頁式呈現),就是搜集您剛剛所使用螢光筆所畫註的內容,有點像是以前剪報記事本的概念,您在網頁上螢光畫註的內容將被整理並收集於此處,依照螢光筆的顏色做分類,並以條列式一點一點的列出。另外,圖片與影片也是可以被畫註的!
如果您剛剛試用時,有使用螢光筆畫註圖片或影片,圖片與影片也將會被收集到此處。假如您一段句子有重複畫註,則該段句子在這個筆記本中會呈現螢光畫註,也就是精華中的精華的意思。看到這裡,也許您會問,這些重點畫註是在網頁上,又不能夠儲存,收集有什麼用呢?其實,您只要透過瀏覽器提供的列印功能(電腦版快捷鍵Ctrl + P),或是存成PDF功能(EinkBro
瀏覽器具備此功能),就可以將這個螢光畫註筆記本給儲存成PDF檔。PDF檔的畫面分頁方式將會跟筆記本所呈現的方式一模ㄧ樣,而且會有網頁出處的連結。因此,您就可以將此PDF直接放入本機裝置中做儲存,或是上傳筆記軟體如Evernote、Notion等去管理。[註二]
那該如何回到本來的頁面?只要將手指從右往左滑,就會回到原本的文章內容。如果您是使用電腦版的話,鍵盤按下Esc鍵,就會回到原來的畫面。另外,電腦版也有快捷鍵可以快速進入這個筆記本,Mac使用者只要按下Ctrl + n,而Windows使用者按下Alt + n即可。
跨頁畫註
有人可能會想到:如果想要畫註的文字段落很長,結尾在下一頁時,該如何跨頁畫線呢?
Eink模式的做法很簡單,就跟您在看紙本書時畫線的方式是一樣的,您只需要正常的將螢光筆畫註畫到本頁的最後一個字即可,然後翻到下一頁,繼續畫註到段落結尾。這個時候,螢光畫註會自動的結合在一起,除非碰到上一頁最後的螢光畫註結尾是標點符號時,如果在下一頁的起頭螢光畫註,就會跳出對話方塊,詢問您是否將上一頁結尾的螢光畫註做結合,如果想結合在一起按「是」即可。結合的螢光畫註在筆記本中呈現時仍是單獨的一條,不會變成兩點分列。
離開螢光註記模式
要離開螢光註記模式,點選懸浮工具列中的X圖示,就可以關閉螢光筆,回到正常網頁的文字選取匡模式,或是,透過雙指長按螢幕的手勢,待懸浮球消失即可。
使用塗鴉模式
接下來,如果在閱讀模式下透過手勢由螢幕右上方往左下滑,會出現一個畫筆的圖示,此時,就可以在網頁畫面上隨意的塗鴉,在畫筆模式下一樣可以靠點按螢幕的左側或右側翻上下頁,但無法做其他的滑動手勢,因為這些滑動都會被視為是在(電子)紙上作畫。在懸浮工具列中點按顏色的圖形,會出現其他顏色可供選則,總共有紅、綠、藍、黑、灰五種顏色。這些顏色的選擇一樣支援手勢切換,用雙指輕點螢幕會選擇藍色、三指紅色、四指綠色、五指黑色。
在畫筆的懸浮工具列中可以看到線條的圖示,點下去之後可以做畫筆線條粗細的切換,總共有粗、中、細三種線條供選擇,預設是細的線條。
同樣的,在畫筆模式下,只要透過雙指長按,即可離開畫筆模式,或是透過點按懸浮球工具列中的書本圖示即可進入一般閱讀模式。
如果您是使用電腦版,因為使用滑鼠並不好寫字或做畫,因此叫出畫筆的功能在電腦版並沒有快捷鍵,如有需要,可以透過工具選單叫出畫筆懸浮球。
手寫筆的支援
大部分的Eink閱讀器以及平板,在購買時都會附贈手寫筆,因為有「紙」,當然就要有「筆」,在電子墨水裝置上寫字,因為其表面成像原理與反射性質非常接近紙墨的性質,所以閱讀體驗非常的好。Eink模式的開發宗旨就是要讓存在於網際網路中的知識變成一本一本的書,讓使用者透過"紙"與筆的媒介與之互動,因此自然要對手寫筆有所支援。若您的手邊剛好有手寫筆,無論是WACOM電磁感應手寫筆,或是您目前是使用iPAD在閱讀此網頁,也可以拿起手邊的Apple
Pencil,「直接」在網頁上寫字。直接的意思就是,您並不需要透過上文介紹畫筆模式時所說的右上往左下手勢叫出畫筆工具懸浮球,而是可以拿起筆就直接在網頁上書寫。
使用手寫筆有個好處,那就是此時網頁仍然是支援手勢滑動的,也就是您仍然可以透過手勢上滑到頁首,以及下滑到頁尾,而這些手勢並不會被辨識成筆畫。您甚至仍然可以長按點選網頁中的任何圖片、超連結並將其開啟,或是透過長按選取您想要查詢或是翻譯的文字。[註三]
若您已經使用手寫筆在網頁上作畫了,可能會發現Eink模式其實是支援壓力感應功能的,也就是說您並不需要去切換線條的粗細,只要透過筆尖壓力的輕重就可以改變線條的粗細。甚至,手寫筆上若有內建的橡皮擦按鈕,如筆尾的按鈕,或是側方的按鈕,都可以直接用來擦除筆畫。因此我非常的推薦用手寫筆來使用此模式,搭配Eink裝置的類紙呈現,會讓您明明在看網頁卻有種在紙書上看書的錯覺。
![]() |
用電子紙搭配Eink模式看網頁部落格,有種在紙上閱讀的感覺。
|
![]() |
Eink mode也支援Apple Pencil
|
關於手寫的順暢度
至於手寫功能的順暢度,如果您的閱讀器有支援最新的快刷技術,例如文石的Boox Super
Refresh(BSR)或是Bigme的Xrapid等,只要使用極速模式,基本上手寫延遲是在可以接受的範圍,雖然比不上原生軟體的手寫流暢度,但是足以拿來做一些文章的標註與簡易的心得註記等。如果您的閱讀器沒有類似的快刷技術,那就建議先不要使用手寫功能。畢竟,即便無法使用手寫功能,Eink模式翻頁式的閱讀方式還是適合您的閱讀器使用高品質的刷新模式(如普通模式、高清模式、最佳化、Regal模式)來閱讀網頁。[註四]
要能夠有原生手寫的流暢度,必須要有原廠開放第三方軟體手寫支援才有辦法做到。雖然目前無法做到原廠的手寫流暢度,但是,我相信直接在網頁上書寫,仍然是比原廠的全域手寫功能在操作上要來得方便不少,而且使用Eink
Mode是可以將手寫筆記直接存成整份PDF檔保存的,而非以一張張單獨的截圖照片保存。
若您想要在Eink模式上更流暢的手寫,而且您剛好是使用文石閱讀器的用戶,目前是有一個做法,就是利用類似文石優化第三方手寫的方式,在App的上層再執行一個手寫優化程式,就可以達到如原生手寫筆記的順暢度,目前github上有人提供這種手寫優化程式供使用,App名稱叫做Boox
Rapid Draw,有興趣的人可以到此處下載此軟件安裝:https://github.com/sergeylappo/boox-rapid-draw/releases。用此種做法雖然手寫流暢度跟原廠手寫軟體一樣,但是仍是有一些缺點:
-
筆畫會先呈現黑色,之後才會變成原本的顏色。
-
沒有辦法使用壓力感應
-
目前這個App還不太穩定,挺容易會突然crash的。
因此,若要讓Eink模式的手寫更順暢,就看未來官方或是這個手寫優化軟體是否能夠提供相關的支援了。
至於其他發光螢幕平板的用戶,例如iPad的使用者,在Eink模式下使用Apple pencil 手寫的順暢度是非常流暢的,我想在網頁上直接手寫,還是比蘋果原生的safari 標註要來得快速方便許多。
Eink mode下使用Boox Rapid Draw的手寫流暢度
其他觸控手勢
另外,還有幾個觸控手勢沒有介紹到:
-
由左往右滑:現在您可以試著從左往右滑,就會叫出工具選單,工具選單上的項目大部分都可以用手勢來啟動,例如縮放字體、螢光筆、畫筆等,這些我上文皆有提及。在功能選單出現後,任意點按畫面的任一個地方,就可以將功能選單給關閉。功能選單的設計是給忘記手勢操作的使用者,一個簡單可以使用各種功能的方式。
-
右下往左上滑:叫出螢光畫註筆記本。
所見即所得的列印(儲存PDF)功能
一般要列印網頁時,瀏覽器會有預設的分頁演算法,將網站的內容基於列印紙張的大小重排,讓圖片不至於被頁面的邊界給切到,但是這個分頁的畫面並不是針對使用者目前所使用裝置的大小進行分頁,而是以紙張有的尺寸,例如A4、A3、B5的大小進行分頁,因此若小螢幕裝置下載PDF時,使用A4的尺寸,則用PDF閱讀軟體開啟後,文字會過小難以閱讀,一樣要縮放觀看,但就跟一般網頁縮放時面臨一樣的問題:無法整行文字呈現,要一直左右移動螢幕畫面。
在Eink模式下,若按下列印按鍵,列印的畫面跟螢幕的呈現畫面是一模ㄧ樣的,雖然紙張的大小可能會更大而周遭留白,但是只要透過電子紙廠商提供的閱讀軟體,如文石的Neoreader來自動切除白邊,就會讓PDF所呈現的畫面跟網站上所看到的畫面一致。網站所有的螢光註記、手寫筆記都將會被保留在同樣的頁面位置,即網站所見,即PDF所得,讓使用者可以方便儲存並事後再度用同樣的裝置複習與觀看內容,沒有文字過小不適合閱讀的問題。
提示:在列印的時候,請在「顯示更多設定」的地方,確定有勾選「列印背景圖形」的選項,這樣螢光畫註才會正常的顯示。
提示二:EinkBro的用戶可以在列印時選擇尺寸最小的紙張,如A9,就可以讓列印畫面跟螢幕大小吻合。iOS用戶如果發現畫面超過紙張大小,可以選擇Size大一點的紙張,就可以正常顯示。
![]() |
網頁所見的頁面呈現方式
|
![]() |
存成PDF時或列印時的畫面跟網頁呈現一致
|
回到傳統的滾動瀏覽模式
Eink模式是網站提供給Eink
裝置的使用者另一種瀏覽網站的方式,當然大部分網站還是會保留目前主流的滾動式瀏覽設計,但要如何切換到傳統網站的滾動式瀏覽模式呢?只要在Eink模式下,透過由右往左滑的手勢,就會回到傳統的滾動式瀏覽方式了。會提供這個回到傳統頁面的方式給Eink的使用者是基於以下幾點:
-
當網站上有些互動式元件會被翻頁點按的行為干擾時,可以切換回滾動瀏覽正常使用。一般網站可能會有一些按鈕或表單,在Eink模式下若無法正常操作時,可以切換回滾動瀏覽模式來進行操作。原則上網站的設計者應該要確保各種元件要能夠在兩種模式下都能正常運作,但因為Eink模式仍然處於開發初期,許多網頁設計的相容性還未能考慮周全,因此能夠隨時切換回滾動瀏覽還是有其必要性。
-
想以不同的尺寸儲存PDF。如果您不想要以Eink模式的所見即所得方式來進行列印,例如今天如果您想要把網頁儲存成A4尺寸,改天再用13吋閱讀器來觀看文章時,就可以回到滾動瀏覽模式後再按列印鍵,選擇A4尺寸讓瀏覽器內建演算法來自動進行分頁。
在滾動瀏覽模式下,從Eink模式中所畫的螢光註記皆會被保留下來,但是手寫的部分,因為對位不同,而不會出現在滾動瀏覽模式中,但是別擔心,重返Eink模式後,仍然可以看到手寫筆記的部分。
另外如果您是使用桌上型電腦或筆電,該如何回到傳統的滾動瀏覽模式呢?那就是按下鍵盤的ESC鍵,即可回到滾動瀏覽模式。
支援藍牙翻頁器與音量翻頁鍵
另外,也有許多電子紙用戶習慣將電子紙裝置放在支架上觀看,並用藍牙翻頁器翻頁,因此,Eink
Mode有特別設計支援藍牙翻頁器,讓用戶可以透過藍牙翻頁器的按鍵翻頁。而對於小屏幕裝置如手機型閱讀器的用戶而言,單手持時要翻頁最方便的做法其實不是用手點按螢幕左右側,而是透過音量鍵來翻頁,因此Eink
Mode也有做特別的調校,去支援能夠以音量鍵翻頁的EinkBro網頁瀏覽器。只要用戶是使用EinkBro上網,透過手機的音量鍵即可翻頁。
Eink 模式在EinkBro瀏覽器下支援音量鍵翻頁
Eink模式支援藍牙翻頁器翻頁。可以搭配高畫質模式(Regal)遠距離觀看。
Eink 模式的瀏覽器相容性
Eink 模式的開發因為是為了使用E
Ink的用戶而生,因此在瀏覽器相容性方面,第一優先會是以能夠在EinkBro瀏覽器上正常運作為主,其次是Chrome與Safari的相容性。但目前在相容性測試上,此模式對於Chrome與Safari的相容性都很好,因此除了Android用戶外,也非常適合Apple的用戶使用此模式瀏覽網頁。對於IE或是其他比較少見的瀏覽器用戶而言,如果您發現無法正常使用Eink
模式瀏覽網頁時,您可以切換成傳統的滾動瀏覽模式,或是換成chrome來瀏覽網頁。
如果您是E Ink裝置的使用者,但還不知道或不曾用過EinkBro這個專門為E Ink用戶設計的瀏覽器,可以到此處下載:https://github.com/plateaukao/einkbro/releases
開發中的功能
以上所介紹的,是目前已開發完畢的功能,但其實還有許多的功能正在開發進行中。相信目前所提供的這些功能,足以讓您在Eink裝置上有更加良好的網站閱覽體驗。如果您對於這個模式有什麼意見與回饋,歡迎寫信到以下信箱與我溝通:jacks101311@gmail.com。
若您是開發人員,也可以造訪此模組的Github網站,提供Issue或是feedback。https://github.com/jack101311/EinkMode
為什麼要使用Eink模式?
也許有人會問,現在電子紙技術已經有快速刷新技術,能夠加速螢幕更新率,讓電子紙足以拿來看影片、上網,因此使用傳統的滾動式瀏覽網頁的方式完全沒有問題,何必使用Eink模式瀏覽網頁?雖然如此,Eink模式其實才是真正符合電子紙特性的軟體設計方式。使用Eink模式主要有以下的優點:
-
更加符合電子紙的靜態展示特性,更節省電力:
電子紙比發光螢幕還具有優勢的地方在於畫面不更動時,顯示完全不耗電,它就像是噴墨列印一樣,把墨水分子移動到定位後,墨水就會一直在該處,只要有自然光,就會持續顯示,並不需要再消耗電力。但是,如果畫面一直持續更動,例如傳統網頁上下滑動的動畫,那墨水粒子就必須要一直快速的被電場驅動改變位置,因此就會相對的耗電。
我曾經做過一個實驗,那就是測試使用翻頁式或滾動式瀏覽網頁一小時,同一台電子紙的耗電量比較:我使用文石的Tab Ultra C
Pro快刷平板(簡稱TUCP),在充飽電的情況下,使用網頁瀏覽器,透過程式持續的滾動頁面,以兩秒鐘滾動一頁的方式,持續滾動一小時,而另一組對照組是用相同的機器,一樣在充飽電的情況下,使用Eink模式,透過程式以兩秒鐘翻一頁的方式,持續翻頁一小時。實驗結果:以持續滾動的方式瀏覽網頁,TUCP一小時會消耗12%的電力,而以翻頁式的方式瀏覽網頁,TUCP一小時只消耗8%的電力,電力消耗比持續滾動節省了33%,算是相當的可觀,這讓持續上網使用的續航力一下從8小時延長為12小時,足足多了四小時的時間。
模擬使用滑動瀏覽模式觀看網頁一小時會消耗多少電力
模擬使用翻頁模式觀看網頁一小時會消耗多少電力。
![]() |
使用滑動模式一小時後電池用量12% |
![]() |
使用翻頁模式一小時後電池用量8% |
-
可以用畫質好的模式閱讀網頁:
在電子紙裝置上,如果我們像一般電腦那樣用「滑動」的方式瀏覽網頁,就必須使用「快速刷新模式」。但這種模式會讓畫面變差,因為它不是真的顯示很多種顏色,而是用一種叫「抖色」的演算法來調色,所以畫面會看起來有顆粒感和網點。而且一直滑動也會讓舊型電子紙機種出現許多殘影,即使新的裝置有自動消除殘影的功能,此功能一直運作也會比較耗電。如果想要深入了解電子紙在不同刷新模式下的畫質呈現,可以參考我寫的此篇文章:《電子紙該買彩色的還是黑白的?解析度篇》
但如果我們讓網頁像電子書一樣,用「翻頁」的方式來看,就可以用比較慢但畫質更好的模式。這就是為什麼像 Kindle
這樣的電子書閱讀器,畫面看起來很乾淨的原因。它們只用來閱讀電子書(翻頁),不用來上網或用App(滑動),所以可以一直用最好的畫質模式。如果網頁也能像電子書一樣顯示,我們就能使用高畫質模式觀看網頁了。
![]() |
快速模式使用抖色演算法,雖然刷新速度快,但會讓畫質降低
|
即便Pubook Pro的硬體性能與快刷技術不夠強,不適合手寫,但是用Eink mode使用高畫質模式來閱讀網頁還是可以有不錯的體驗。
-
Eink模式加上電子墨水顯示器的呈現,能讓閱讀網頁的體驗更接近閱讀紙本書:
如果網頁能夠以適合E Ink裝置的方式來呈現,用E Ink裝置上網閱讀的接受度就會提高,也因此可以讓使用者在閱讀網頁時,能夠以類似紙張的顯示效果來呈現數位資訊,而不是以傳統的發光螢幕來閱讀,這種紙質的呈現方式,可以增加閱讀的時間,並且減少眼睛接受到的藍光量,長時間閱讀網頁時能夠達到護眼的效果。加上Eink模式本身對於手寫筆的支援以及可以隨時在網頁的任何一個地方寫字筆記的這種設計,讓人真正可以好好的沉浸閱讀、學習與吸收網頁所提供的知識,而非只是快速的瀏覽網頁知識。
-
以分頁的方式呈現資訊能提高理解力,並更容易記憶知識:
有許多的研究論文顯示,以滾動的方式來呈現資訊,會讓讀者吸收知識的速度變慢,因為使用滾動模式來瀏覽網頁時,讀者的注意力必須要同時分給掌握文字目前變動後的滾動位置以及理解資訊兩部分,因而分散了大腦資源,另外滾動式的文字連續特性較不利於記憶,因為大腦擅長靠頁面的位置當記憶資訊的錨定點,而滾動式的模式較難讓人產生心智地圖。[1][2][3][4]
-
文字可以自由縮放大小,讓閱讀網頁更加的省力:
雖然桌機版的瀏覽器大多支援調整文字打小的功能,但許多手機版網頁卻沒有提供方便的文字大小調整方式。如果使用雙指縮放,往往會造成文字和圖片被截斷,必須不斷滑動才能看完完整內容,嚴重影響閱讀體驗。Eink模式提供的文字大小調整方式,就跟流式電子書調整字體大小的方式一樣,會讓文字重排,不會被切邊,對於許多閱讀小字覺得吃力的人很有幫助。
![]() |
能夠輕易縮放文字的大小對高齡族群閱讀網頁而言更加的友善
|
-
互動設計更符合現今閱讀網頁的載體:傳統網站的滾動式瀏覽設計是在行動裝置、觸控螢幕還不發達的桌上型電腦時代而生,因為當時人們必須透過放在桌上的電腦螢幕,搭配鍵盤滑鼠來瀏覽網頁,因此滑鼠是當時瀏覽網頁的主流輸入裝置,滾動式瀏覽的設計是配合當時的滑鼠滾輪的設計,讓使用者只要透過滑鼠滾輪,就可以移動網頁文字的位置,來觀看超出視窗可視區域的文字內容。但是2007年、2011年智慧型手機與平板相繼問世後,這15年來,瀏覽網頁的主要媒介已從桌上型電腦、筆電裝置慢慢地轉移成使用平板、手機甚至是電子墨水裝置。行動裝置的主要輸入裝置是觸控螢幕,而近年來電磁觸控感應與主被動電容觸控感應技術的成熟,觸控筆也成為不可或缺的行動輸入裝置。因此,網頁的設計應當配合現今主流裝置的輸入方式,也就是應能夠支援許多手勢操控以及支援觸控筆的手寫,才會讓使用者的使用體驗更流暢快速。Eink模式支援許多手勢以及支援觸控筆的即時書寫,能夠讓使用者不需再特別地將網頁內容下載到本機後再用特定的App開啟來書寫,讓閱讀網頁知識就像是閱讀存在自己電腦中的電子書,少了這些額外的繁瑣操作,更能夠達到不間斷的沈浸式閱讀,增加資訊的理解與吸收。
Eink模式與線上閱讀EPUB模組或是一般的閱讀軟體有何不同?
E
Ink模式是專為電子墨水顯示器設計的網頁瀏覽形式。它旨在通過將動態網頁轉化為靜態、翻頁格式來重現類似紙張的閱讀體驗。它還整合了豐富的手勢操控方式、手寫筆支援和螢光畫註工具等功能。線上EPUB閱讀器和軟體則專為電子書格式量身定制。它們提供用於管理和顯示電子書的專用功能,例如可自訂的文字排版與版面配置。雖然呈現方式乍看之下可能相似,但它們之間存在根本上的差異,詳述如下:
-
資訊是否能夠流通:電子書格式,無論是固定版面格式如PDF,或是流動版面格式如EPUB,皆是封裝的檔案格式,如EPUB是XHTML格式,被封裝在密閉的容器中,如.zip,因此電子書的內容是寫死的,無法跟外界溝通並且動態更新內容。雖然電子書可以通過單向的點擊超連結,並透過瀏覽器造訪超連結內容,但是電子書無法讀取外部的內容進來,也無法跟後端伺服器與資料庫溝通。 相反的,Eink 模式所呈現的資訊就是網站內容本身,並未封裝進密閉的容器中,因此可以自由的跟外界伺服器溝通,動態並即時的更動網頁內容,也因此仍然完全支援所有的網頁前後端程式如Javascript、PHP等,並且內容隨時可以被後端伺服器做更新。
-
內容形式的多樣性與互動性:由於Eink 模式中的內容就是網站上的內容,與外界資訊溝通仍可以採取Https協定,因此支援跨網域讀取資料。使用者表面上看起來像是在看書,但是卻可以觀看與操作Youtube的影片,甚至跟Google 地圖、互動式教材、遊戲、其他前端元件做互動,使用者一樣可以正常的登入網站、填寫表單、輸入文字並傳送出去,網站提供者仍然可以依照使用者的屬性動態的投放廣告,而且甚至可以像紙本書的雜誌這樣刊登「全頁廣告」。
雖然感覺像在看書,但可以跟許多網頁元件做互動,Google地圖等。
-
Eink 模式屬於一種響應式網頁設計(Responsive Web Design, RWD):對於網頁的前端開發者而言,可以把Eink模式想成是RWD 的一種做法。2007年以前的網頁前端開發者,只需要考量網站在桌上型電腦上的螢幕上的呈現效果如何,但是當iphone、iPad這樣的行動裝置大量的流行後,RWD變成是主流,前端開發者必須考量到他們的網站在行動裝置上是否仍能呈現良好的樣式與可讀性,而Eink模式就是為了E Ink裝置而生的RWD,當未來的世界有越來越多人在使用E Ink裝置時,網頁前端開發者也務必需要考量到他們的網站在E Ink 裝置上是否能夠提供相同且良好的使用體驗。
-
網站樣式的相容性:目前的電子書標準並無法完全支援網站與瀏覽器所使用的CSS語法,因此即便許多瀏覽器插件(如Evernote、Pocket APP)或是瀏覽器本身(如EinkBro)能夠擷取網站的內容或是下載成EPUB與PDF格式,仍然有可能造成網站樣式跑掉或內容無法正常顯示,而Eink 模式本身就在網站上,是前端設計的RWD模組,因此完全支援網站中的CSS樣式表,算繪的引擎仍然是瀏覽器引擎,而且呈現的樣貌就是網站開發者本身想要在這個裝置上呈現的樣貌。(Eink 模式的樣式設定可以透過Media Query來指定,即在CSS樣式表中使用@Media eink,如果您是前端開發者,有興趣如何使用此模組,請參考此模組的Github網站,或是線上參考文件:Eink Mode Documentation)
Eink模式的普適性
Eink 模式適合各種裝置。雖然說Eink模式是為了E Ink的使用者與而生,但是這種翻頁式的瀏覽模式以及手勢操作的特性一樣非常適合傳統發光螢幕的行動裝置,因此無論是iPhone、iPad或是其他使用Android的平板,都可以使用Eink
模式來瀏覽網站,使用體驗甚至不會比手指需要一直滑來滑去來得差。雖然使用發光銀幕裝置並不適合長時間閱讀,容易造成眼睛乾澀與刺痛、灼熱等電腦視覺症候群的症狀,但是短時間閱讀篇幅較短的網路文章,用發光螢幕裝置使用Eink模式閱讀仍然可以得到相對不錯的閱讀體驗。
桌上型電腦或是筆記型電腦的使用者,在使用Eink模式閱讀網頁時,甚至不需要滑鼠,透過藍牙鍵盤或是翻頁器,就可以透過上下鍵,以一次一整頁更動的方式,輕鬆閱讀網頁資訊,因此可以坐遠一點,與螢幕保持適當的距離,減緩眼睛肌肉的緊繃不適。
Eink模式對於網站商業廣告的支援度
對以上這些電子紙裝置有興趣的人,可以參考以下網站:
您上一頁所看到的,就是一個全篇幅的商業廣告。
就如同上文有提及,Eink模式並非開啟封閉式檔案格式的軟體,而是網站本身的一種響應式網頁設計,因此對於現有的網站廣告,都是可以正常呈現並且支援的,但是分頁式的網站設計架構,將可以對於廣告投放開啟新的觀點與新的思維,無論是廣告的性質、位置、呈現篇幅、互動方式等,都可以有著與以往滾動式瀏覽時有著不同的呈現方法。
由於Eink模式提供使用者一種如同閱讀電子書般的使用體驗,讓使用者隨時可以在網頁上標示螢光註記、筆記重點等,而這些螢光註記、筆記重點中的網頁內容正是使用者最在乎的資訊,因此廣告內容的投放就可以更加的精準與明確集中在使用者真正感興趣的部分。另外,當使用者有螢光註記、筆記重點後,一般會偏好將自己已閱讀完畢的文章,尤其是有重點註記的文章,存成PDF檔下載到本機中儲存,或是儲存在知識管理軟體中,因此,網站中的廣告也會變成PDF檔的一部分被儲存起來,每當使者者在複習相關文章時,廣告又會被反覆觸及,增長該廣告與使用者接觸的時間,而廣告超連結仍然是會被儲存下來,使用者透過閱讀軟體,一樣可以跳轉瀏覽器開啟廣告連結的網站。
知識內容網站的提供者,甚至可以設定儲存PDF時,會不會自動清除廣告,供已付費訂閱的會員下載無廣告的PDF版本,而無付費的會員下載有廣告的PDF版本,以此提供不同的閱讀方便性給不同的讀者客群。
適合使用Eink模式的網站型態
如上所述,Eink模式既然是一種為Eink裝置而生的響應式網頁設計,因此理論上可以用在所有的網站上,無論是企業網站、線上購物、社群論壇等,全部都可以使用。此模式的核心目標之一是將傳統網站的滾動式瀏覽方式變成適合電子紙呈現的翻頁式瀏覽,因此只要透過精心的設計,各種網站應該都能夠在此呈現模式下,給予使用者良好的使用體驗。如果有些情境真的不適合翻頁式呈現時,網站開發者可以主動引導使用者切換回滾動式瀏覽模式,或是自動切換回滾動式瀏覽模式,這種能夠隨時在滾動與翻頁式瀏覽切換的方式,提供網站對於各種裝置最大的相容性,就如同現今許多網站或瀏覽器仍提供桌機版網頁的呈現方式給行動裝置的使用者般,讓行動裝置的使用者在需要時,仍能切換回桌機版模式。
以下所列出的網站類型,是我認為最適合提供此模式的網站(列舉順序與重要性無關)
-
教育、線上教學網站
- 部落格
-
想要提供給讀者沈浸式閱讀體驗的知識內容平台:如維基百科、科學人、國家地理等。
-
新聞媒體如聯合報、經濟日報、商周等
-
IT的線上文檔(Documentation)、學術線上文獻、論文資料庫
-
線上小說、書城
為了讓您能感受看看Eink模式套用在其他的網站上的樣貌,在此拿維基百科做個示範:(我盡可能讓網站樣式維持原本的樣式,但是要做到一模一樣非常的困難...)
Eink模式的未來應用
Eink模式有許多潛在的應用方式,舉例如下:
- 支援折疊式裝置的設計:為了能夠更佳方便的攜帶大尺寸螢幕,近年來許多廠商都在開發折疊式手機、平板。而折疊式裝置因為折線會把螢幕分成兩邊,因此網頁或軟體若能支援分頁式的設計對使用者而言在瀏覽、操作性都會更佳,因為手指只要點其中一側的螢幕,就可以像翻書一樣將左右側的螢幕畫面給更新。對電子紙裝置而言,折疊式的設計更加的理想,因為軟性電子紙屏幕本身就可以有一定的韌性能夠彎曲。而折疊式設計對電子紙的好處在於,如果今天能做到四頁折疊,當使用者在觀看其中兩頁時,另外兩頁因為看不見,就可以緩慢的刷新,屏幕再怎麼閃爍對使用者而言都沒有影響,這對Gallery 3這種全彩技術而言,只要能有充分的刷新時間,顏色呈現就能達到六萬色。
![]() |
這一台是元太與讀墨剛發表的摺疊機,展示在2025年的Touch Taiwan。可以看到如果軟體設計沒有分頁,在中線的文字部分會不好閱讀。看網頁時如果能夠分成左右兩頁,會比滑動一邊時兩邊都在滾動更理想。 |
- 更佳精準的廣告投放:當Eink模式與後端資料庫做結合時,因為能夠分析使用者在瀏覽網頁時所重視的部分(螢光畫註、手寫註記),就可以更佳精準依照使用者重視的部分給予廣告投放或內容推薦。
- 瀏覽器插件:因為模組所使用的語言是javaScript,因此未來可以開發成瀏覽器的插件,即便網站沒有提供此模式,使用者也可以使用。而瀏覽器插件可以結合AI應用做到更多的變化。
Eink模式完全免費,並且開源
Eink模式採用MIT授權,是一個完全免費且開源的模組,提供給網站的開發者,讓其能夠快速的套用Eink模式至其所開發的網站,進而讓Eink的使用者有更佳的瀏覽網站體驗。開源的另一目的是希望對此模組專案有興趣的工程師,能夠一起協作開發,讓這個模組的功能更健全更好用,畢竟我原先的專業並非前端程式設計,仍有許多技術與知識需要協助與學習。
另外,這個開源專案對於使用模組的人有一項唯一的請求:希望套用Eink模式的網站,能夠在網站頁面上容易注意到的地方保有eink的文字或圖示,此目的是希望提示Eink裝置的使用者,網站本身有支援此模式,讓其知道可以善加利用此種瀏覽方式。這就跟有些網站會提供電腦版連結是一樣的效果,或是用一段文字註明本網站支援Eink裝置也行。畢竟,我開發此模式的初衷,就是希望給所有Eink裝置的使用者在瀏覽網站時,能夠有舒適的體驗。
歡迎有興趣的人,到以下的github網址下載模組使用:https://github.com/jack101311/EinkMode
如有任何意見或是問題,歡迎寄信到我的信箱:jacks101311@gmail.com
關於我的故事
我是一位牙醫師,而非程式設計師。但因為我非常喜歡物理學、電機與程式設計,因此我在下班時間會利用許多線上教學網站來進修這些知識。我在2016年到2018年這段期間,每天透過iPad與Apple
Pencil來學習MITx的課程,拿了許多證書,但是每天眼睛近距離的使用iPad來書寫筆記、閱讀上課講義與數學計算,讓我的眼睛在這段期間非常的酸澀刺痛,我當時對此不以為意,以為只要休息就好了。但是某天我的眼睛出現了許多黑色的小點,像蚊子般在眼前飛來飛去,我非常的緊張,去看眼科後發現原來我的視網膜產生許多破洞,如果不即時用雷射固定,會造成視網膜剝離而失明。眼科醫師告訴我不能再長時間觀看3C螢光幕了。但這對我來說非常的痛苦,因為我想要透過網路大量且豐富的知識來學習、來充實自我,我也喜歡花很長的時間挑戰程式設計的難題,但這些似乎將離我遠去。
後來,我發現了E Ink,它並不會像一般的液晶螢幕需要將光線直射入你的眼睛,它反而像紙張一樣,透過環境反射光來成像,畫面非常的柔和,長時間閱讀的感覺就像在看紙本書一樣,並不會造成眼睛酸澀與刺痛。因此,我改用E
Ink閱讀器與平板來學習這些線上知識,並且透過E Ink來寫程式。這些年下來,我真正感受到E Ink對人類所帶來的幫助是如此巨大。它不但能保護眼睛,讓眼睛能長時間閱讀大量的數位資訊外,在能源使用上也是非常省電的技術。
加入E Ink的臉書與線上社群後,我才發現原來有非常多人跟我同病相憐,這些人都是因為眼睛出問題,無法再長時間使用發光螢光幕的人,有電腦視覺症候群(又稱數位眼睛疲勞,即眼睛乾澀、刺痛)、飛蚊症、視網膜剝離、黃斑部病變、青光眼等。對這些人而言,E
Ink是他們在數位時代的救贖。因此我希望,將網際網路中這些豐富的知識與資訊,變成適合用類似紙張般的E Ink裝置來呈現,這樣,這些眼睛受傷的人,就可以透過E
Ink來上網學習知識。未來我們的孩子,勢必處在遠距學習與線上教學的時代,他們會需要一個安全且恰當的載體來學習這些數位化之後的知識,保護他們的眼睛,畢竟,眼睛是靈魂之窗,而他們是我們未來的希望。
因此,我減少看診的時間,努力打造這個能讓網頁呈現方式更適合E Ink裝置的模組,這個模組的誕生,就是希望幫助到以上這些人,也希望未來人類在透過數位資訊來學習時,能夠使用對眼睛更友善、對環境更友善的E Ink裝置。
引用
-
Klyszejko el al. Mode of Text Presentation and Its Influence On Reading Efficiency: Scrolling versus Pagination. January 2014. Studia Psychologica 56(4):309-322. Doi: 10.21909/sp.2014.04668
-
Sanchez CA, Wiley J. To Scroll or Not to Scroll: Scrolling, Working Memory Capacity, and Comprehending Complex Texts. October 2009. October 2009. Human Factors The Journal of the Human Factors and Ergonomics Society 51(5):730-8 DOI:10.1177/0018720809352788
-
Brady K, et al.Is Scrolling Disrupting While Reading? https://repository.isls.org/bitstream/1/497/1/18.pdf
-
Nurmahanani, I. (2024). The effect of text display in mobile reading to reading comprehension, attention, and cognitive. International Journal of Instruction, 17(2), 29-48. https://doi.org/10.29333/iji.2024.1723a

之前在日本旅行的時候,我身上只帶這台Boox Tab Ultra C Pro 電子紙平板在身上,透過遠端桌面,在旅館也可以寫程式與部落格。透過自然的環境光線來觀看螢幕上如紙般呈現的資訊,眼睛不在刺痛,是一種享受。對此電子紙裝置有興趣的人,可以查看以下連結:
Boox Tab Ultra C Pro Tablet
註解
註一、所謂開放式閱讀器,是指其作業系統採用Andoird系統,並且能讓使用者直接或間接的安裝App到裝置中。封閉式閱讀器,則是使用者無法自行安裝其他App到該裝置中。⤴️
註二、Eink模式是提供一個前端模組給開發者,但是只要網站有結合後端的資料庫帳號管理系統,就可以將這些畫註給儲存於使用者的帳號中⤴️
註三、iOS的瀏覽器暫時不支援使用Apple pencil 的同時並選取文字或圖片。這個特色目前是針對使用電子紙的Android用戶設計,特別是使用EinkBro瀏覽器的用戶。⤴️
註四、我曾經拿Pubu Pro 的Chrome瀏覽器來做手寫測試,雖然這台閱讀器的硬體性能號稱媲美文石的Tab Ultra C,但是實際上即便使用快速模式,手寫的延遲還是慘不忍睹。⤴️
留言
張貼留言