TWI599944B - Touch Screen Display Page Processing Method, Device and Electronic Device - Google Patents

Touch Screen Display Page Processing Method, Device and Electronic Device Download PDF

Info

Publication number
TWI599944B
TWI599944B TW102109491A TW102109491A TWI599944B TW I599944 B TWI599944 B TW I599944B TW 102109491 A TW102109491 A TW 102109491A TW 102109491 A TW102109491 A TW 102109491A TW I599944 B TWI599944 B TW I599944B
Authority
TW
Taiwan
Prior art keywords
page
gesture
container
effective distance
displayed
Prior art date
Application number
TW102109491A
Other languages
English (en)
Other versions
TW201416963A (zh
Inventor
qi-qi Wang
Original Assignee
Alibaba Group Services Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Services Ltd filed Critical Alibaba Group Services Ltd
Publication of TW201416963A publication Critical patent/TW201416963A/zh
Application granted granted Critical
Publication of TWI599944B publication Critical patent/TWI599944B/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/017—Gesture based interaction, e.g. based on a set of recognized hand gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04808—Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen

Description

觸控螢幕顯示器頁面處理方法、裝置及電子設備
本申請案關於頁面處理方法，尤其是一種觸控螢幕顯示器頁面處理方法、裝置及電子設備。
手機經常會採用很長的頁面甚至無盡列表來展示內容，人們在手機上瀏覽一些很長的頁面，比如小說，無盡列表的List等時，對於用戶來說，有快速越過某些內容去看後續內容的需求，比如：想快速翻看小說後面的內容，或者想跳過某些購物應用程式的寶貝列表翻看下面的列表內容，但這時需要滑動很久才能看到想瀏覽的內容。
現有技術通常移植PC上的設計，而忽略了手機與PC的區別以及手機自身的特性。比如透過類似PC上側邊捲軸的方式來快速瀏覽頁面，但存在以下缺陷：手機螢幕較小，側邊捲軸的方式較難操作，並且不容易定位，容易超過預期內容；有的側邊捲軸為了方便手指操作，會做成比較大的方塊的樣式，這樣有時候會無意中觸碰到，從而引起誤操作。
另外，側邊捲軸的存在會影響對內容的瀏覽。
本申請案要解決的技術問題時提供一種觸控螢幕顯示器頁面處理方法、裝置及電子設備，以解決用戶無法準確瀏覽預期內容的問題。
為解決上述技術問題，本申請案提供了一種觸控螢幕顯示器頁面處理方法，該方法包括以下步驟：將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器載入展示；顯示所述頁面時，檢測觸發頁面處理的手勢；檢測到所述手勢時，對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸。
為解決上述技術問題，本申請案提供了一種觸控螢幕顯示器頁面處理裝置，用於具有觸摸顯示幕的電子設備，該裝置包括：頁面分割模組，用於將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器載入展示；手勢檢測模組，用於當顯示所述頁面時，檢測觸發頁面處理的手勢；頁面處理模組，當檢測到所述手勢時，對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸。
為解決上述技術問題，本申請案還提供了一種電子設 備，該電子設備包括觸控顯示幕，該設備還包括如上所述的觸控螢幕顯示器頁面處理裝置。
為解決上述技術問題，本申請案還提供了另一種電子設備，所述設備包括：觸控顯示幕；記憶體，用於存儲指令；處理器，與所述記憶體耦合，該處理器被配置為執行存儲在所述記憶體中的指令，其中，所述記憶體中存儲的指令以及所述處理器被配置為用於實現如上所述的方法。
本申請案技術方案將頁面分割為由多個頁面容器展示的頁面部分，檢測到手勢時，透過對頁面容器的處理實現對頁面的操作，使用戶可準確瀏覽預期內容，尤其可以利用捏合或撐開手勢模仿現實生活中的折疊或褶皺，將想要快速瀏覽的內容折起，從而可以更快地看到預期的內容。這種流暢的方式被應用到快速瀏覽長頁面上會達到方便自然的效果，解決了側邊捲軸的諸多缺點，同時撐開、捏合的幅度可以控制折起內容的多少，自然方便，貼近生活，且適合手機操作，更具有生活性、情感化，更容易理解和操作。
本申請案技術方案尤其適用於手機等小螢幕的電子設備上，不占空間，不易引起誤操作。
圖1是本申請案觸控螢幕顯示器頁面處理方法實施例 1的示意圖；圖2是本申請案規則折線狀的折疊效果示意圖；圖3是本申請案規則波浪狀的褶皺效果示意圖；圖4是本申請案觸控螢幕顯示器頁面處理方法實施例2的示意圖；圖5是具有折疊或褶皺效果區域的示意圖，其中僅顯示頁面容器資料；圖6是具有折疊或褶皺效果區域的又一示意圖，其中，小於預定閾值時顯示頁面內容和頁面容器，大於預定閾值時僅顯示頁面容器；圖7是實施例1和2中判斷所述捏合或撐開手勢作用區域是否達到該捏合或撐開手勢的作用極限的流程示意圖；圖8是當手勢作用區域的頁面內容為無折疊的撐開狀態，且手勢為捏合手勢時，回應捏合或撐開手勢的過程示意圖；圖9至11是執行相應代碼內容的操作示意圖；圖12、13是觸控顯示幕顯示淘寶列表頁面時，對捏合或撐開手勢回應的效果圖；圖14是觸控螢幕顯示器頁面處理裝置實施例的模組結構示意圖。
下文中將結合附圖對本發明的實施例進行詳細說明。 需要說明的是，在不衝突的情況下，本申請案中的實施例及實施例中的特徵可以相互組合。
實施例1
本申請案觸控螢幕顯示器頁面處理方法實施例1，該方法用於具有觸控螢幕顯示器的電子設備，如圖1所示，具體包括以下步驟101-103：
步驟101：將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器載入展示；
本申請案適用於任何應用程式的頁面，應用程式包括但不限於電子郵件應用程式、博客應用程式、網路瀏覽應用程式、網路購物應用程式(比如淘寶)或小說閱讀應用程式等。
本申請案所述的電子設備只要具備能感知手勢的觸控螢幕顯示器即可，包括但不限於手機、平板電腦等。
步驟102：顯示所述頁面時，檢測觸發頁面處理的手勢；
本申請案所說的手勢，包括但不限於點擊、觸點間有效距離的變化或觸點移動的特定軌跡(直線或圓)。
本申請案將觸點間有效距離逐漸增大的手勢稱為撐開手勢，觸點間有效距離逐漸減小的手勢稱為捏合手勢。捏合和撐開手勢可為兩觸點或多觸點手勢，根據不同的使用習慣，可採用筆觸或指觸的方式實現。
步驟103：當檢測到所述手勢時，對手勢作用區域進 行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸。
可理解地，頁面容器尺寸在允許的極限範圍內縮小或增大。
所述手勢作用區域按照預定演算法確定。
以撐開或捏合手勢為例，可直接根據捏合或撐開手勢觸點確認當前頁面內容捏合或撐開手勢作用區域，比如，捏合或撐開手勢的觸點起始位置之間的頁面內容為捏合或撐開手勢作用區域，或將當前頁面內容劃分為多個區域，並根據捏合或撐開手勢觸點起始位置確定觸點對應的區域，並以該手勢觸點區域的邊界來確定作用區域，比如對於上下折疊的方式，以捏合或撐開手勢的上觸點對應的區域的上邊界作為作用區域的上邊界，同時以捏合或撐開手勢的下觸點對應的區域的下邊界作為作用卻與的下邊界，可替換地，也可以手勢兩觸點對應區域的上邊界界定作用區域。
檢測到觸點間的有效距離逐漸減小的手勢時，縮小該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，增大該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
觸點間的有效距離的變化值越大，相應地，作用區域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或將頁面容器相互疊加。該頁面處理可以根據用戶需要在手勢作用區域使所述頁面具有折疊或褶皺效果。
頁面處理使得頁面根據手勢變化顯示動態效果或手勢結束後顯示最終結果。
進行頁面處理後的頁面資料包括頁面內容資料和頁面容器資料或僅包括頁面容器資料，所述頁面容器資料調整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區域呈現折疊或褶皺效果。
若當前頁面為上下瀏覽方式顯示，連續的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替；若當前頁面為左右瀏覽方式顯示，連續的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替
在極限範圍內回應檢測到的捏合或撐開手勢，包括對捏合或撐開手勢作用區域的頁面內容進行處理，若為捏合手勢，則該處理使捏合或撐開手勢作用區域產生或增大折疊或褶皺的效果，同時顯示面積縮小，若為撐開手勢，則該處理使捏合或撐開手勢作用區域減小或消除折疊或褶皺的效果，同時顯示面積增大。
本申請案所說的極值範圍是指標對相同頁面內容或頁面區域從顯示面積最小至顯示面積最大的範圍。
可理解地，根據設置和需求，可透過設定不同折疊或 褶皺模式來產生不同的折疊或褶皺效果，具體的折疊或褶皺模式由折疊或褶皺的方向效果、形狀效果和視覺效果決定等。折疊或褶皺方向效果包括左右折疊或褶皺、上下折疊或褶皺、對角折疊或褶皺或四周向中心的折疊或褶皺。
折疊或褶皺形狀效果包括規則折線狀(如圖2所示)、不規則折線狀、規則波浪狀(如圖3所示)和不規則波浪狀。
折疊或褶皺視覺效果包括平面視覺效果和立體視覺效果。
上文所述有效距離是在縮小或放大方向上的距離。可理解地，若實現左右折疊或褶皺，則在左右方向上的距離為有效距離，若實現對角折疊或褶皺，則在對角方向上的距離為有效距離。
有效距離的變化值決定了縮放比例，即，在極值範圍內，所述有效距離的變化值越大，相應地，頁面容器縮小或放大的比例越大。
實施例2
本申請案觸控螢幕顯示器頁面處理方法實施例2用於具有觸控螢幕顯示器的電子設備，如圖4所示，具體包括以下步驟：步驟401：將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器載入展示；步驟402：當顯示所述頁面時，檢測觸發頁面處理的 手勢； 步驟403：當檢測到所述手勢時，對手勢作用區域和手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域或手勢作用區域的頁面容器尺寸。
所述手勢作用區域或手勢作用區域按照預定演算法確定。
檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
觸點間的有效距離的變化值越大，相應地，作用區域和作用區域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
根據具體的設置和需求，進行頁面處理後的頁面資料包括頁面內容資料和頁面容器資料。所述頁面容器資料用以調整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區域呈現平面、立體、規則或不規則的折疊或褶皺效果。這種情況下，頁面內容資料也將被處理以與顯示的頁面容器相適應。
簡化地，進行頁面處理後的頁面資料也可僅包括頁面容器資料，此種情況下，所有相對於正常顯示縮小的區域可僅顯示頁面容器，此時顯示區域的頁面容器呈現出折疊或褶皺效果，而隱藏相應的頁面內容(如圖5所示)，或 當縮小到預定閾值時，隱藏相應頁面內容，僅顯示頁面容器，當放大超過該預定閾值時，顯示相應頁面內容和頁面容器(如圖6所示)。
或將進行頁面處理後的頁面原資料保存，並備份，將備份的資料處理為點陣圖資料(即僅有圖片效果，沒有超鏈結，是一種被處理後的特殊的頁面內容資料)，僅對該點陣圖資料進行變形並疊加頁面容器資料，當該折疊或褶皺效果消失後，再顯示該頁面區域的原資料。
在具體實現時，若當前頁面內容為上下瀏覽方式顯示，較佳地，所述頁面容器資料具有以下特點：使得觸控螢幕顯示器顯示的頁面內容以上寬下窄的倒梯形和下寬上窄的梯形交替的方式體現規則的立體折疊效果；或，使得觸控螢幕顯示器顯示的頁面內容的以左傾斜平行四邊形和右傾斜平行四邊形交替的方式體現規則的立體折疊效果；若當前頁面內容為左右瀏覽方式顯示，較佳地，所述頁面容器資料具有以下特點：使得觸控螢幕顯示器顯示的頁面內容以左寬右窄的倒梯形和右寬左窄的梯形交替體現規則的立體折疊效果，或使得觸控螢幕顯示器顯示的頁面內容以上傾斜平行四邊形和下傾斜平行四邊形交替體現規則的立體折疊效果。
以上為折線狀折疊效果，還可實現波浪狀褶皺效果。
本申請案中，產生或增加折疊效果也稱為收起，減小或消除折疊效果也稱為撐開，如圖7所示，實施例1和實 施例2中判斷所述捏合或撐開手勢作用區域是否達到該捏合或撐開手勢的作用極限的步驟包括以下步驟：步驟701：判斷手勢作用區域是否有折疊/褶皺；步驟702：判斷是撐開手勢還是捏合手勢，若有折疊/褶皺且為捏合手勢，則執行步驟703，若有折疊/褶皺且為撐開手勢；或無折疊/褶皺且為捏合手勢，則執行步驟704，若無折疊/褶皺且為撐開手勢，則保持不變，即不回應；步驟703：判斷作用區域達到折疊或褶皺極限，若是認為達到作用極限，保持不變，即不回應手勢，否則執行步驟704；步驟704：認為未達到作用極限，在極限範圍內回應所述撐開或捏合手勢。
以下以立體折疊效果為例，當手勢作用區域的頁面內容為無折疊的撐開狀態，且手勢為捏合手勢時，回應捏合或撐開手勢的過程，如圖8所示，包括以下步驟：步驟801：將頁面內容平均分為N段；步驟802：將所述N段順序放入陣列中；步驟803：判斷作用區域各段在陣列中序號的奇偶性，若為奇數則執行步驟804，否則執行步驟805；步驟804：將奇數段資料處理為適於上寬下窄的梯形顯示的資料；步驟805：將偶數段資料處理為適於下寬上窄的梯形顯示的資料。
可理解地，該作用區域的奇偶段內容組合後顯示立體折疊效果。
以上處理過程可透過代碼實現：(1)使用perspective將x/y軸進行旋轉，類比3D效果，如圖9所示；(2)HTML代碼對內容進行分塊，假設分為四塊，將奇、偶數塊分別進行變化，即可得到折疊效果，奇數塊變化如圖10所示，偶數塊變化如圖11所示；(3)javascript進行展開、收起判斷。
採用捏合的手勢，可將當前內容向上折起，其下內容向上拉出，在當前屏就可以快速看到第N屏的內容。捏合的動作越大，則折起的內容越多，同樣拉開的內容也更多。繼續採取同樣的操作，則下方內容繼續折起，將之前折起的內容頂出螢幕外，依此類推，直到看到自己想看的內容。圖12、13給出了觸控顯示幕顯示淘寶列表頁面時，對捏合或撐開手勢回應的效果圖。
同理，若想回到前面的內容，則在折疊處採用撐開的手勢，或者在展開處採用捏合手勢，則上方內容向下拉出，下方內容向下折起，同樣可以透過手勢的幅度控制內容拉開的多少。
為實現上述觸控螢幕顯示器頁面處理方法，本申請案還提供一種觸控螢幕顯示器頁面處理裝置，用於具有觸控顯示幕的電子設備，如圖14所示，該裝置包括：頁面分割模組，用於將頁面分割為多個頁面部分，所 述多個頁面部分分別由多個頁面容器載入展示；手勢檢測模組，用於當顯示所述頁面時，檢測觸發頁面處理的手勢；頁面處理模組，用於基於檢測到的手勢進行頁面處理，對應於方法實施例1，當檢測到所述手勢時，頁面處理模組對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸。
所述手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡(直線或圓)，所述手勢作用區域或手勢作用區域按照預定演算法確定。
本申請案將觸點間有效距離逐漸增大的手勢稱為撐開手勢，觸點間有效距離逐漸減小的手勢稱為捏合手勢。
具體地，檢測到觸點間的有效距離逐漸減小的手勢時，所述頁面處理模組縮小該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，所述頁面處理模組增大該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
對應於方法實施例2，當檢測到所述手勢時，所述頁面處理模組還對手勢作用區域進行頁面處理：檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或 多個連續相鄰的頁面容器。
較佳地，觸點間的有效距離的變化值越大，相應地，作用區域和作用區域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
較佳地，頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或將頁面容器相互疊加。該頁面處理可以根據用戶需要在手勢作用區域使所述頁面具有折疊或褶皺效果。
具體地，進行頁面處理後的頁面資料包括頁面內容資料和頁面容器資料或僅包括頁面容器資料，所述頁面容器資料用以調整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區域呈現折疊或褶皺效果。
頁面處理使得頁面根據手勢變化顯示動態效果或手勢結束後顯示最終結果。
具體地，若當前頁面為上下瀏覽方式顯示，連續的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替；若當前頁面為左右瀏覽方式顯示，連續的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
若為捏合手勢，則頁面處理模組對頁面進行處理使所述捏合手勢作用區域產生或增大折疊或褶皺的效果，同時縮小顯示面積，若為撐開手勢，則頁面處理模組對頁面進行處理使所述撐開手勢作用區域減小或消除折疊或褶皺的 效果，同時增大顯示面積。
如上文所述，所述折疊或褶皺效果折疊或褶皺效果包括折疊或褶皺的方向效果、形狀效果和視覺效果。
除上述觸控螢幕顯示器頁面處理裝置外，本申請案還提供了一種具備上述觸控螢幕顯示器頁面處理裝置和觸控顯示幕的電子設備。
另外，本申請案還提供了如下的電子設備，該電子設備包括：觸控顯示幕；記憶體，用於存儲指令；處理器，與所述記憶體耦合，該處理器被配置為執行存儲在所述記憶體中的指令，其中，所述記憶體中存儲的指令以及所述處理器被配置為用於實現前述任一種觸控螢幕顯示器頁面處理方法及上述處理方法的變形方案。
本申請案技術方案將頁面分割為由多個頁面容器展示的頁面部分，檢測到手勢時，透過對頁面容器的處理實現對頁面的操作，使用戶可準確瀏覽預期內容，尤其可以利用捏合或撐開手勢模仿現實生活中的折疊或褶皺，將想要快速瀏覽的內容折起，從而可以更快地瀏覽預期的內容。這種流暢的方式被應用到快速瀏覽長頁面上會達到方便自然的效果，解決了側邊捲軸的諸多缺點，同時撐開、捏合的幅度可以控制折起內容的多少，自然方便，貼近生活，且適合手機操作，更具有生活性、情感化，更容易理解和操作。
本申請案技術方案尤其適用於手機等小螢幕的電子設備上，不占空間，不易引起誤操作。

Claims (13)

  1. 一種觸控螢幕顯示器頁面處理方法，其特徵在於，該方法包括以下步驟：將頁面分割為多個頁面部分，該多個頁面部分分別由多個頁面容器載入展示；顯示該頁面時，檢測觸發頁面處理的手勢；及檢測到該手勢時，對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸，其中該手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡，該觸點間的有效距離的變化值越大，作用區域和作用區域的頁面容器縮小或放大的比例越大，該有效距離是指在縮小或放大方向上的距離，該頁面容器具有規則的立體折疊效果或褶皺效果，該頁面容器縮小到預定閾值時，僅顯示頁面容器，且該頁面容器具放大超過該預定閾值時，顯示相應頁面內容和該頁面容器。
  2. 如申請專利範圍第1項所述的方法，其中：檢測到觸點間的有效距離逐漸減小的手勢時，縮小該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，增大該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
  3. 如申請專利範圍第1項所述的方法，其中： 檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；及檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
  4. 如申請專利範圍第1項所述的方法，其中：頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或將頁面容器相互疊加。
  5. 如申請專利範圍第4項所述的方法，其中：進行頁面處理後的頁面資料包括頁面內容資料和頁面容器資料或僅包括頁面容器資料，該頁面容器資料用以調整頁面容器的形狀、尺寸、顏色和/或顯示位置。
  6. 如申請專利範圍第1項所述的方法，其中：若當前頁面為上下瀏覽方式顯示，連續的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替，或以左傾斜平行四邊形和右傾斜平行四邊形交替；及若當前頁面為左右瀏覽方式顯示，連續的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
  7. 一種觸控螢幕顯示器頁面處理裝置，其特徵在於，該裝置包括：頁面分割模組，用於將頁面分割為多個頁面部分，該 多個頁面部分分別由多個頁面容器載入展示；手勢檢測模組，用於當顯示該頁面時，檢測觸發頁面處理的手勢；及頁面處理模組，當檢測到該手勢時，對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸，其中該手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡，該觸點間的有效距離的變化值越大，作用區域和作用區域的頁面容器縮小或放大的比例越大，該有效距離是指在縮小或放大方向上的距離，該頁面容器具有規則的立體折疊效果或褶皺效果，該頁面容器縮小到預定閾值時，僅顯示頁面容器，且該頁面容器具放大超過該預定閾值時，顯示相應頁面內容和該頁面容器。
  8. 如申請專利範圍第7項所述的裝置，其中：檢測到觸點間的有效距離逐漸減小的手勢時，該頁面處理模組縮小該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，該頁面處理模組增大該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
  9. 如申請專利範圍第7項所述的裝置，其中，當檢測到該手勢時，該頁面處理模組還用於對手勢作用區域進行 頁面處理：檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢作用區域內頁面容器在有效距離減小方向上的尺寸；及檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢作用區域內頁面容器在有效距離增大方向上的尺寸，手勢作用區域包括一個頁面容器或多個連續相鄰的頁面容器。
  10. 如申請專利範圍第7項所述的裝置，其中：頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或將頁面容器相互疊加。
  11. 如申請專利範圍第10項所述的裝置，其中：進行頁面處理後的頁面資料包括頁面內容資料和頁面容器資料或僅包括頁面容器資料，該頁面容器資料用以調整頁面容器的形狀、尺寸、顏色和/或顯示位置。
  12. 如申請專利範圍第7項所述的裝置，其中：若當前頁面為上下瀏覽方式顯示，連續的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替，或以左傾斜平行四邊形和右傾斜平行四邊形交替；及若當前頁面為左右瀏覽方式顯示，連續的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
  13. 一種電子設備，該電子設備包括觸摸顯示幕，其特徵在於：該設備還包括觸控螢幕顯示器頁面處理裝置； 該觸控螢幕顯示器頁面處理裝置頁面包括：分割模組，用於將頁面分割為多個頁面部分，該多個頁面部分分別由多個頁面容器載入展示；手勢檢測模組，用於當顯示該頁面時，檢測觸發頁面處理的手勢；及頁面處理模組，當檢測到該手勢時，對手勢作用區域進行頁面處理，包括縮小或增大手勢作用區域的頁面容器尺寸，其中該手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡，該觸點間的有效距離的變化值越大，作用區域和作用區域的頁面容器縮小或放大的比例越大，該有效距離是指在縮小或放大方向上的距離，該頁面容器具有規則的立體折疊效果或褶皺效果，該頁面容器縮小到預定閾值時，僅顯示頁面容器，且該頁面容器具放大超過該預定閾值時，顯示相應頁面內容和該頁面容器。
TW102109491A 2012-10-19 2013-03-18 Touch Screen Display Page Processing Method, Device and Electronic Device TWI599944B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201210401741.1A CN103777876A (zh) 2012-10-19 2012-10-19 触摸屏显示器页面处理方法、装置及电子设备

Publications (2)

Publication Number Publication Date
TW201416963A TW201416963A (zh) 2014-05-01
TWI599944B true TWI599944B (zh) 2017-09-21

Family

ID=49514065

Family Applications (1)

Application Number Title Priority Date Filing Date
TW102109491A TWI599944B (zh) 2012-10-19 2013-03-18 Touch Screen Display Page Processing Method, Device and Electronic Device

Country Status (7)

Country Link
US (1) US20140115530A1 (zh)
EP (1) EP2909710A1 (zh)
KR (1) KR20150073170A (zh)
CN (1) CN103777876A (zh)
IN (1) IN2015DN02937A (zh)
TW (1) TWI599944B (zh)
WO (1) WO2014063045A1 (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105095216A (zh) * 2014-04-22 2015-11-25 深圳市志友企业发展促进中心 一种数据组装方法、装置及资源传播系统
US9898162B2 (en) * 2014-05-30 2018-02-20 Apple Inc. Swiping functions for messaging applications
US10795567B2 (en) * 2014-08-22 2020-10-06 Zoho Corporation Private Limited Multimedia applications and user interfaces
CN104899044A (zh) * 2015-06-18 2015-09-09 上海亿保健康管理有限公司 一种移动终端上的流程性操作实现方法及装置
KR20170029180A (ko) * 2015-09-07 2017-03-15 현대자동차주식회사 차량, 및 그 제어방법
CN110286840B (zh) * 2019-06-25 2022-11-11 广州视源电子科技股份有限公司 可触控设备的手势缩放控制方法、装置和相关设备
CN111290811A (zh) * 2020-01-20 2020-06-16 北京无限光场科技有限公司 页面内容显示方法、装置、电子设备及计算机可读介质
CN112631479B (zh) * 2021-03-08 2021-06-25 智者四海（北京）技术有限公司 一种实现滑动翻页无滚屏错觉的方法和系统
CN115079877A (zh) * 2021-03-15 2022-09-20 Oppo广东移动通信有限公司 窗口控制方法、终端及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200828089A (en) * 2006-12-29 2008-07-01 Inventec Appliances Corp Method for zooming image
CN102033698A (zh) * 2009-09-25 2011-04-27 苹果公司 滚动多节文档的方法和装置及多功能设备
CN102405462A (zh) * 2009-07-16 2012-04-04 索尼爱立信移动通信股份公司 信息终端，信息终端的信息呈现方法和信息呈现程序
US20120173976A1 (en) * 2011-01-05 2012-07-05 William Herz Control panel and ring interface with a settings journal for computing systems

Family Cites Families (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007067750A2 (en) * 2005-12-07 2007-06-14 3Dlabs Inc., Ltd. Methods for manipulating web pages
WO2007079425A2 (en) * 2005-12-30 2007-07-12 Apple Inc. Portable electronic device with multi-touch input
US7940250B2 (en) * 2006-09-06 2011-05-10 Apple Inc. Web-clip widgets on a portable multifunction device
US8065603B2 (en) * 2007-04-30 2011-11-22 Google Inc. Hiding portions of display content
JP5200641B2 (ja) * 2008-04-10 2013-06-05 ソニー株式会社 リスト表示装置及びリスト表示方法
CN101661376A (zh) * 2009-09-21 2010-03-03 宇龙计算机通信科技(深圳)有限公司 一种窗口信息显示方法、系统及显示终端
US9086756B2 (en) * 2009-11-18 2015-07-21 Opera Software Asa Snapping to text columns while scrolling
US9026932B1 (en) * 2010-04-16 2015-05-05 Amazon Technologies, Inc. Edge navigation user interface
US8977986B2 (en) * 2011-01-05 2015-03-10 Advanced Micro Devices, Inc. Control panel and ring interface for computing systems
KR20130052753A (ko) * 2011-08-16 2013-05-23 삼성전자주식회사 터치스크린을 이용한 어플리케이션 실행 방법 및 이를 지원하는 단말기
US9880640B2 (en) * 2011-10-06 2018-01-30 Amazon Technologies, Inc. Multi-dimensional interface
US20130097566A1 (en) * 2011-10-17 2013-04-18 Carl Fredrik Alexander BERGLUND System and method for displaying items on electronic devices
CN102722337B (zh) * 2012-06-11 2016-06-01 北京三星通信技术研究有限公司 滚动操作的折叠显示方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200828089A (en) * 2006-12-29 2008-07-01 Inventec Appliances Corp Method for zooming image
CN102405462A (zh) * 2009-07-16 2012-04-04 索尼爱立信移动通信股份公司 信息终端，信息终端的信息呈现方法和信息呈现程序
CN102033698A (zh) * 2009-09-25 2011-04-27 苹果公司 滚动多节文档的方法和装置及多功能设备
US20120173976A1 (en) * 2011-01-05 2012-07-05 William Herz Control panel and ring interface with a settings journal for computing systems

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
Baudisch P et al, "Collapse-to-Zoom: Viewing Web Pages on Small Screen Devices by Interactively Removing Irrelevant Content", 2004/10, http://research.microsoft.com/apps/pubs/default.aspx?id=69037 *

Also Published As

Publication number Publication date
US20140115530A1 (en) 2014-04-24
EP2909710A1 (en) 2015-08-26
TW201416963A (zh) 2014-05-01
KR20150073170A (ko) 2015-06-30
CN103777876A (zh) 2014-05-07
IN2015DN02937A (zh) 2015-09-18
WO2014063045A1 (en) 2014-04-24

Similar Documents

Publication Publication Date Title
TWI599944B (zh) Touch Screen Display Page Processing Method, Device and Electronic Device
JP4533943B2 (ja) 情報処理装置、表示制御方法およびプログラム
US8368699B2 (en) Displaying bar charts with a fish-eye distortion effect
JP5092255B2 (ja) 表示装置
US8239765B2 (en) Displaying stacked bar charts in a limited display area
JP6240619B2 (ja) 画面に表示された客体のサイズ調整方法及び装置
JP6171643B2 (ja) ジェスチャ入力装置
US11086496B2 (en) Approach for selecting a desired object on a small touch screen
KR20140092059A (ko) 플렉서블 디스플레이를 구비하는 휴대 장치의 제어 방법 및 그 휴대 장치
JP6016555B2 (ja) 情報処理装置及びその制御方法、並びにプログラムと記憶媒体
US8762840B1 (en) Elastic canvas visual effects in user interface
CN106897321B (zh) 显示地图数据的方法及装置
US9245362B2 (en) Displaying bar charts with a fish-eye distortion effect
JP2012133745A (ja) 情報処理装置およびその表示サイズ制御方法
TWI597653B (zh) 調整螢幕物件尺寸的方法、裝置及電腦程式產品
US10042445B1 (en) Adaptive display of user interface elements based on proximity sensing
KR101407329B1 (ko) 터치 화면을 구비하는 디스플레이 장치 및 그의 화면 제어 방법
JP2015138360A (ja) オブジェクト操作システム及びオブジェクト操作制御プログラム並びにオブジェクト操作制御方法
JP6711632B2 (ja) 情報処理装置、情報処理方法、及び、プログラム
JP2012216223A (ja) 表示装置
JP6372472B2 (ja) 表示装置
KR101251021B1 (ko) 터치스크린 출력화면 조정방법
KR101345847B1 (ko) 모바일 그래픽 유저 인터페이스 제공방법
JP6036598B2 (ja) 情報処理装置及び情報処理プログラム
JP5983367B2 (ja) 情報処理装置、およびプログラム