TWI692715B

TWI692715B - 電子系統及其運作方法

Info

Publication number: TWI692715B
Application number: TW107142672A
Authority: TW
Inventors: 莊俊賢
Original assignee: 中華電信股份有限公司
Priority date: 2018-11-29
Filing date: 2018-11-29
Publication date: 2020-05-01
Also published as: TW202020649A

Abstract

一種電子系統，係包括：一具有網頁層之顯示模組、一電性或通訊連接該顯示模組之筆跡模組以及一電性或通訊連接該顯示模組及該筆跡模組之畫布模組。藉由該網頁層將商品廣告呈現於網頁上，且該畫布模組之畫布及該筆跡模組之筆跡資訊會一併呈現於該網頁上，以透過該畫布上的筆跡資訊標示該商品廣告的重點，令該網頁所呈現之內容彷彿實體店面之服務人員所呈現之紙本文件，使網頁瀏覽者彷彿親臨實體店面之服務，以達到商品網頁與使用者之間的互動效果。

Description

電子系統及其運作方法

本發明係關於一種電子系統，尤指一種可提升網站瀏覽互動性的電子系統。

通常當民眾前往實體門市(如電信門市)申辦相關電信業務，門市服務人員會拿出許紙本文件協助申辦。由於紙本文件眾多，為了加速申辦流程，門市人員會使用鉛筆將需要「簽名」或需填寫「個人資料」之處圈出以指示民眾，使民眾(即申辦者)可快速找到填空處，以進行相關動作。

隨著科技進步，遂有門市人員透過電子裝置(如平板電腦)指示民眾於該電子裝置上進行「簽名」或填寫「個人資料」，而無需將紙本文件呈現予民眾。

習知電子裝置上，針對筆跡感應功能之系統一般係適用於特定的載具上，再透過觸控模組進行紀錄功能，以達到重點劃記的效果。

惟，於數位電子商店中，現今3C電子商品眾多，民眾所使用的載具亦多樣化，致使數位電子商店中所採用之電子商務系統並非全然符合民眾所使用之載具系統模式，且數位電子商店於電子商務上的商品所呈現的網頁資訊繁多，故民眾需瀏覽網頁而自行尋找需填寫資料之處，且劃記的重點往往隨著頁面的延伸而使民眾必須花更多的時間找尋。

再者，雖業界提出一種白板觸控螢幕系統，使民眾能快速抓取電子商務商品的標記重點，但此系統仍然受限於單一載具使用，且透過觸控及擦拭的功能，並不能將劃記的重點紀錄以重複播放。

或者，業界亦提出一種標籤註記的方式，將標記好的重點以標籤的方式標記在各式的載具上，並以圖片的形式多頁面地呈現給民眾，但靜態的電子筆跡系統僅能單純地標記重點，亦即將標註好重點的頁面，適性地存檔於各式載具上，故不僅增加系統之儲存資料負荷，且無法以動態互動方式呈現給民眾，因而大幅降低電子商務對於商品呈現的視覺豐富感。

因此，如何克服上述習知技術的種種問題，實已成目前亟欲解決的課題。

為解決前揭之問題，本發明之目的係提供一種用於分享網站瀏覽互動體驗的電子系統。

為達上述目的及其它目的，本發明之電子系統，係包括：顯示模組，係包含有一用以呈現於瀏覽器上之網頁層，該網頁層係用以顯示目標商品於該瀏覽器上；筆跡模組，係電性或通訊連接該顯示模組，且該筆跡模組包含有一於該瀏覽器中配置於該網頁層上之筆跡擷取層，其中，該筆跡擷取層係用以擷取於該瀏覽器上之筆跡資訊；以及畫布模組，係電性或通訊連接該顯示模組及該筆跡模組，且該畫布模組包含有一於該瀏覽器中配置於該網頁層與該筆跡擷取層之間的畫布，其中，該畫布係由複數繪製圖片層所組成，該繪製圖片層係將該筆跡資訊以圖片形式播放於至少一時間區段中。

前述之電子系統中，更包括電性或通訊連接該畫布模組與該筆跡模組之身分模組，係用以執行瀏覽或編輯的動作。

前述之電子系統中，更包括電性或通訊連接該畫布模組與該筆跡模組之調整模組，係配合該瀏覽器的捲軸調整該畫布。進一步，更包括電性或通訊連接該調整模組之跟讀模組，係配合該調整模組呈現於該瀏覽器上，且該畫布模組包含有兩個緩衝區及一個固定區。例如，該筆跡資訊於該瀏覽器上之X軸相對距離或Y軸相對距離位於該緩衝區時，該跟讀模組係將該X軸相對距離或該Y軸相對距離移動至該固定區。

前述之電子系統中，該畫布模組係能調整該繪製圖片層之透明度。

前述之電子系統中，該畫布模組更包含有至少一空白區域。

本發明亦提供一種前述之電子系統的運作方法，係包括一編輯機制及一展示機制，其中，該編輯機制係包括：進行權限確認，以確認執行瀏覽或編輯之權限；進行載具調整，以依據該載具調整瀏覽器之網頁參數；收集該筆跡資訊，以擷取該畫布上之筆跡特性；及進行文字檔編輯，以將該筆跡資訊轉成該文字檔，並儲存該文字檔；以及該展示機制係包括：展示該畫布，使該畫布覆蓋於該瀏覽器之網頁上；進行檔案讀取，以開啟該文字檔而讀取該筆跡資訊；根據該載具調整該筆跡資訊於該瀏覽器上之X軸相對距離或Y軸相對距離，以修正該畫布之播放；根據該畫布上的筆跡資訊設定複數時間區段，以設定播放筆跡點；及根據該筆跡資訊進行連續性跟隨動作，以作跟讀調整。

前述之運作方法中，該編輯機制更包括根據該載具所呈現之瀏覽器調整該畫布之總高度及根據該載具所呈現之瀏覽器之捲軸之長度，修正該X軸與該Y軸之位移。

前述之運作方法中，該畫布未限制其編輯範圍之範圍。

前述之運作方法中，該些時間區段能進行相對速度之調整。

前述之運作方法中，該跟讀調整更包含有緩衝區域移動及非緩衝區移動。

綜上所述，本發明之電子系統及其運作方法，主要利用動態標記筆跡之軌跡之方式，而非錄製影片的方式，將該畫布上的筆跡資訊配合時間區段以跟讀方式使民眾能快速得知電子商務之商品的重點，故相較於現有的靜態標籤註記的方式，本發明之電子系統能增加電子商務之商品的多元化，且以仿照實體商店的服務方式配合各式載具呈現給使用者，以提升使用者與數位電子商店之間的互動性。

再者，本發明所採用動態筆跡的方式，不僅可提升瀏覽電子商務商品的便利性，且由於採用讀取筆跡資訊所在的圖片層而非錄製影片的方式，故可減少該電子系統運行使用的容量，因而更可增加瀏覽的流暢度。

10‧‧‧電子系統

100‧‧‧顯示模組

101‧‧‧網頁層

102‧‧‧載具

103‧‧‧捲軸

110‧‧‧身分模組

200‧‧‧筆跡模組

201‧‧‧筆跡資訊

300‧‧‧畫布模組

301‧‧‧畫布

310‧‧‧調整模組

320‧‧‧跟讀模組

330、442‧‧‧緩衝區

340、443‧‧‧固定區

350‧‧‧空白區域

30‧‧‧編輯機制

40‧‧‧展示機制

S31~S35‧‧‧步驟

S41~S45‧‧‧步驟

t1~t4‧‧‧時間區段

請參閱有關本發明之詳細說明及其附圖，將可進一步瞭解本發明之技術內容及其目的功效；有關附圖為：第1圖為本發明之電子系統之網頁配置示意圖；第2圖為本發明之電子系統之畫布於網頁中所呈現之態樣示意圖；第3圖為本發明之電子系統之架構配置示意圖；第4圖為本發明之電子系統之其中一實施例於網頁中所呈現之態樣示意圖；第5圖為本發明之電子系統之畫布模組之其中一實施例於網頁中所呈現之態樣示意圖；第6A圖為本發明之電子系統所適用之載具之其中一實施例之平面示意圖；第6B圖為本發明之電子系統所適用之載具之另一實施例之平面示意圖；第7圖為本發明之電子系統於運作時之流程圖；第8圖為本發明之電子系統之畫布之其中一實施例於網頁中所呈現之態樣示意圖；第8A至8D圖為第8圖之時域分解示意圖；第9圖為本發明之電子系統之畫布之另一實施例於網頁中所呈現之態樣示意圖；以及第9A至9D圖為為第9圖之時域分解示意圖。

為了使本發明的目的、技術方案及優點更加清楚明白，下面結合附圖及實施例，對本發明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅用以解釋本發明，但並不用於限定本發明。

須知，本說明書所附圖式所繪示之結構、比例、大小等，均僅用以配合說明書所揭示之內容，以供熟悉此技藝之人士之瞭解與閱讀，並非用以限定本發明可實施之限定條件，故不具技術上之實質意義，任何結構之修飾、比例關係之改變或大小之調整，在不影響本發明所能產生之功效及所能達成之目的下，均應仍落在本發明所揭示之技術內容得能涵蓋之範圍內。同時，本說明書中所引用之如「上」及「一」等之用語，亦僅為便於敘述之明瞭，而非用以限定本發明可實施之範圍，其相對關係之改變或調整，在無實質變更技術內容下，當亦視為本發明可實施之範疇。

第1至3圖為本發明用於分享網站瀏覽互動體驗的電子系統10之示意圖。如第1至3圖所示，該電子系統10係包括：一顯示模組100、一電性或通訊連接該顯示模組100之筆跡模組200以及一電性或通訊連接該顯示模組100 及該筆跡模組200之畫布模組300。

所述之顯示模組100係包含有一網頁層101，一般電子商務之商品會透過各種載具上的瀏覽器之網頁層101呈現。

所述之筆跡模組200係包含有一筆跡擷取層，以擷取筆跡資訊201，其中，該筆跡擷取層係以相對於該網頁層101的顯示範圍覆蓋於該網頁層101上，故使用者可藉由在筆跡擷取層上以觸控或其它方式書寫或標記，即不直接書寫或標記在該網頁層101上，但透過該網頁層101上的顯示內容予以進行書寫或標記的動作。

所述之畫布模組300係包含有一畫布301，如第2圖所示，該畫布301之覆蓋範圍係與該網頁層101相對應，但該畫布301的長度可依需求加長，以增加書寫的範圍，其中，該畫布301係由複數繪製圖片層所組成，而該繪製圖片層係將該筆跡資訊201分別以圖片形式放置於該顯示模組100及該筆跡模組200之中。具體地，該繪製圖片層可自行調整其顯示的透明度，且藉由該畫布模組300的畫布301擷取該筆跡資訊201，再將各個筆跡資訊201以圖片的形式繪製儲存於多個時間區段中，並藉由連續播放時間區段的方式，將每一個圖片上的筆跡資訊201以動畫的方式呈現於網頁上。

如第3圖所示，本發明之電子系統10更包括一電性或通訊連接該畫布模組300與該筆跡模組200之身分模組110，令使用者需透過該身分模組110以進行權限的登入，亦即，只有擁有編輯權限的使用者能有效登入該筆跡模組200以進行書寫或標記的動作，而其它非具有編輯權限的使用者只能進入該畫布模組300進行瀏覽觀看的動作。

進一步，由於現今各種載具的普遍使用，使用者並非使用同一種載具或瀏覽器觀看電子商務之商品，故為了配合不同載具的作業系統模式或相容的介面模式，本發明之電子系統10更包括一電性或通訊連接該畫布模組300與該筆跡模組200之調整模組310，係用以將該畫布模組300中的畫布301配合相對應之載具的作業系統模式而適當調整並顯示於所用之載具中，並以該載具上的瀏覽器之捲軸調整該畫布301的總長度及總寬度。藉此，即使基於同樣的筆跡資訊201，將因該筆跡資訊201的相對X軸與相對Y軸的距離會依據所用之載具上的捲軸103的X軸與Y軸的距離而整合成另一相對X軸與Y軸的距離，故能在不同的載具上顯示出大致相同的筆跡資訊201。

再者，本發明之電子系統10更包括一電性或通訊連接該調整模組310之跟讀模組320，係基於使用者觀看或瀏覽的角度，將每一個筆跡資訊201調整於適當呈現的位置，並以連續播放此動畫的方式進行跟讀的動作。藉此，能吸引使用者的目光，並無形中產生使用者與電子商務之商品的互動效果。

如第4圖所示，由於該跟讀模組320係以跟讀的方式將配合該網頁層101之繪製圖片層上的筆跡資訊201連續播放，故為了配合各種載具，該調整模組310可先將該載具之顯示區域分為三個部分，係包含作為緩衝區330之上層與下層、及作為固定區340之中間層。因此，當下一個筆跡資訊201之X軸或Y軸相對距離未於該固定區340及該緩衝區330所包含的範圍時，該調整模組310會配合該載具上的捲軸及瀏覽器，快速移動該畫布301，使該筆跡資訊201往最近的緩衝區330移動；接著，當該筆跡資訊201之X軸或Y軸相對距離不在該固定區340而位於該緩衝區330時，該調整模組310會配合該載具上的捲軸及瀏覽器，慢速移動該畫布301，使該筆跡資訊201朝相鄰的固定區340移動；另一方面，若該筆跡資訊201之X軸或Y軸相對距離位於該固定區340時，該載具上的捲軸將靜止不動，但若接下來連續之筆跡資訊201的相對距離遠小於該固定區340的高度時，該載具上的捲軸會適性地將該繪製圖片層上之該些筆跡資訊201調整到符合該載具之顯示範圍內，以不移動該載具上之捲軸的方式，進行該筆跡資訊201的跟讀動作。

如第5、6A及6B圖，當使用者編輯或瀏覽該網頁層101時，該畫布模組300除了該畫布301外，亦配合對應的載具102，因而更包含有一空白區域350，故使用者可藉由觸控該空白區域350來對該畫布301下達移動或縮放的指令，且可藉由觸控或滑鼠操作於該畫布301區域進行書寫或標記的動作。例如，在如平板或電腦之載具102上，可用單指在該空白區域350移動該畫布301，亦可用雙指進行縮放該畫布301的動作，而在該畫布301區域內，可用單指作單一劃線的動作，亦可用雙指作劃雙線的動作。應可理解地，若該載具為個人電腦，亦可用滑鼠作出相似的上述動作。另一方面，由於載具的型式不同，故該畫布301及該空白區域350的總高度及/或總寬度會配合該載具上所顯示的範圍，再利用該捲軸103的方式進行X軸或Y軸相對距離的調整。

第7圖係為本發明之電子系統10用於製作分享網站瀏覽互動體驗的運作方法之流程圖。如第7圖所示，該運作方法係包括一編輯機制30及一展示機制40。

所述之編輯機制30係包含以下步驟S31~S34。於步驟S31中，進行權限確認，以確認執行瀏覽或編輯之權限。於步驟S32中，進行載具調整，以依據該載具調整瀏覽器之網頁參數。於步驟S33中，收集該筆跡資訊，以擷取該畫布上之筆跡特性。於步驟S34中，進行文字檔編輯，以將該筆跡資訊轉成該文字檔，並儲存該文字檔。

具體地，從初始介面中，可以透過權限的與否，來確認使用者執行編輯或瀏覽的動作，若使用者無編輯權限，即可跳過該編輯機制30，接著依據使用者所使用的載具進入欲書寫或標記的網頁層101上，本發明之電子系統10會先行調整其瀏覽或編輯該網頁層101的參數，亦即透過該載具之作業系統配合使用者當下的視窗大小，該載具能依據當時設定的畫布301之總高度或總寬度並搭配該載具之捲軸之長度修正顯示畫面中之X軸與Y軸之位移(如步驟S35)，並藉由從該網頁層101中透過各載具之程式碼載入特定的程式以顯示該畫布301。

例如：具編輯權限的使用者輸入「<div class=”content paint”>」之程式語言作為瀏覽器之網頁參數，以令該畫布301顯示於該網頁層101上，故使用者可開始在該畫布301上書寫或標記(須注意，具編輯權限之使用者在該畫布301上的編輯範圍可不限制於特定的範圍)，而該電子系統10會開始擷取該畫布301上之筆跡特性(如筆跡在該畫布301上之X軸或Y軸的相對距離、該畫布301在載具102上的相對距離、及各個筆跡的粗細、顏色、大小等特性)，並將各個筆跡以繪製圖片層儲存起來，其中，該繪製圖片層的筆跡資訊可以用文字檔的格式儲存，以減少儲存空間。

所述之展示機制40係包含以下步驟S41~S45。於步驟S41中，展示該畫布，使該畫布覆蓋於該瀏覽器之網頁上。於步驟S42中，進行檔案讀取，以開啟該文字檔而讀取該筆跡資訊。於步驟S43中，根據該載具調整該筆跡資訊於該瀏覽器上之X軸相對距離或Y軸相對距離，以修正該畫布之播放。於步驟S44中，根據該畫布上的筆跡資訊設定複數時間區段，以設定播放筆跡點。於步驟S45中，根據該筆跡資訊進行連續性跟隨動作，以作跟讀調整。

具體地，當具編輯權限之使用者編輯完成該畫布301時，任何使用者均可透過覆蓋在該網頁層101上的畫布301瀏覽或觀看該畫布301，且該畫布301會透過開啟其所儲存的筆跡資訊(即儲存之文字檔)以讀取各個繪製圖片層上的筆跡資訊，且根據當時使用者所使用之載具102配合其作業系統及當時所顯示之視窗大小，並依據當時該畫布301的X軸或Y軸配合捲軸103之相對距離，該電子系統10會自動微調其筆跡資訊之X軸相對距離或Y軸相對距離，以令該畫布301以合適的顯示方式呈現於該載具102之顯示螢幕上。

由於該載具上所顯示的畫布301上可能包含多個筆跡資訊，故具編輯權限之使用者可藉由設定欲播放之複數時間區段t1~t4(如第8圖所示之1~4秒)，以時間差的方式顯示各個時間區段t1~t4，進而決定每一個時間區段t1~t4可呈現的筆跡資訊201，且每一個時間區段t1~t4內的筆跡資訊201所顯示的相對速度都可進一步作調整，並將各一個時間區段t1~t4內的筆跡資訊201放置於合適的載具所顯示之畫面中，以便於自動跟讀模式的作業，進而有利於任何使用者瀏覽或觀看。

於本實施例中，該網頁層101係呈現如智慧型手機之商品廣告網頁，且該畫布301及其上之筆跡資訊201會依據該些時間區段t1~t4依序呈現(如第8A至8D圖所示)，令該載具102所呈現之內容彷彿實體店面之服務人員所呈現之紙本文件，使該載具的操作者彷彿面對實體店面之服務人員對於該商品之介紹。

於另一實施例中，如第9圖所示之商品合約網頁，為了減少使用者進行自動跟讀模式時畫面嚴重抖動，每一個時間區段t1~t4所包含的範圍可分為三個區域，如第9A至 9D圖所示之兩個緩衝區442分別在上層及下層而第三個區域為固定區443。其中，此三個區域可由使用者自行設定其範圍，以便作為步驟S45之跟讀調整作業的判別依據，且該跟讀調整作業係根據每一個筆跡資訊201產生跟隨的連續動作。

因此，當該筆跡資訊201僅存在於該固定區443時，該載具上的捲軸不會做任何微調之移動動作，以方便使用者瀏覽或觀看靜態的顯示畫面。

再者，當筆跡資訊201非僅存在該固定區443時，該載具上的捲軸會依據該筆跡資訊201相對於該固定區443的距離移動。例如，當該筆跡資訊201不在該緩衝區442與該固定區443時，該電子系統10在自動跟讀模式時會以非該緩衝區442移動之速度(如較快的速度)，調整其筆跡資訊201盡可能往該固定區443移動。或者，當該筆跡資訊201較大部分存在於該緩衝區442時，如第9B圖所示，該電子系統10在自動跟讀模式時會以該緩衝區442移動之速度(如較慢的速度)，調整其筆跡資訊201盡量容納於該固定區443內。藉此，在自動跟讀模式時，每一個時間區段t1~t4會以合適的速度自動跟讀，以增加使用者瀏覽或觀看的舒適度。

上列詳細說明乃針對本發明之一可行實施例進行具體說明，惟該實施例並非用以限制本發明之專利範圍，凡未脫離本發明技藝精神所為之等效實施或變更，均應包含於本案之專利範圍中。