觸摸屏顯示器頁面處理方法、裝置及電子設(shè)備的制作方法
【專利摘要】本申請涉及一種觸摸屏顯示器頁面處理方法、裝置及電子設(shè)備，該方法包括：將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。本申請技術(shù)方案通過檢測手勢可以方便對頁面進行操作，準(zhǔn)確地瀏覽預(yù)期的內(nèi)容。
【專利說明】觸摸屏顯示器頁面處理方法、裝置及電子設(shè)備
【技術(shù)領(lǐng)域】
[0001]本申請涉及頁面處理方法，尤其是一種觸摸屏顯示器頁面處理方法、裝置及電子設(shè)備。
【背景技術(shù)】
[0002]手機經(jīng)常會采用很長的頁面甚至無盡列表來展示內(nèi)容，人們在手機上瀏覽一些很長的頁面，比如小說，無盡列表的List等時，對于用戶來說，有快速越過某些內(nèi)容去看后續(xù)內(nèi)容的需求，比如:想快速翻看小說后面的內(nèi)容，或者想跳過某些購物應(yīng)用程序的寶貝列表翻看下面的列表內(nèi)容，但這時需要滑動很久才能看到想瀏覽的內(nèi)容。
[0003]現(xiàn)有技術(shù)通常移植PC上的設(shè)計，而忽略了手機與PC的區(qū)別以及手機自身的特性。比如通過類似PC上側(cè)邊滾動條的方式來快速瀏覽頁面，但存在以下缺陷:
[0004]手機屏幕較小，側(cè)邊滾動條的方式較難操作，并且不容易定位，容易超過預(yù)期內(nèi)容；
[0005]有的側(cè)邊滾動條為了方便手指操作，會做成比較大的方塊的樣式，這樣有時候會無意中觸碰到，從而引起誤操作。
[0006]另外，側(cè)邊滾動條的存在會影響對內(nèi)容的瀏覽。

【發(fā)明內(nèi)容】

[0007]本申請要解決的技術(shù)問題時提供一種觸摸屏顯示器頁面處理方法、裝置及電子設(shè)備，以解決用戶無法準(zhǔn)確瀏覽預(yù)期內(nèi)容的問題。
[0008]為解決上述技術(shù)問題，本申請?zhí)峁┝艘环N觸摸屏顯示器頁面處理方法，該方法包括以下步驟:
[0009]將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；
[0010]顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；
[0011]檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
[0012]為解決上述技術(shù)問題，本申請?zhí)峁┝艘环N觸摸屏顯示器頁面處理裝置，用于具有觸摸顯示屏的電子設(shè)備，該裝置包括:
[0013]頁面分割模塊，用于將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；
[0014]手勢檢測模塊，用于當(dāng)顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；
[0015]頁面處理模塊，當(dāng)檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
[0016]為解決上述技術(shù)問題，本申請還提供了一種電子設(shè)備，該電子設(shè)備包括觸摸顯示屏，該設(shè)備還包括如上所述的觸摸屏顯示器頁面處理裝置。
[0017]為解決上述技術(shù)問題，本申請還提供了另一種電子設(shè)備，所述設(shè)備包括:[0018]觸摸顯示屏；
[0019]存儲器，用于存儲指令；
[0020]處理器，與所述存儲器耦合，該處理器被配置為執(zhí)行存儲在所述存儲器中的指令，其中，所述存儲器中存儲的指令以及所述處理器被配置為用于實現(xiàn)如上所述的方法。
[0021]本申請技術(shù)方案將頁面分割為由多個頁面容器展示的頁面部分，檢測到手勢時，通過對頁面容器的處理實現(xiàn)對頁面的操作，使用戶可準(zhǔn)確瀏覽預(yù)期內(nèi)容，尤其可以利用捏合或撐開手勢模仿現(xiàn)實生活中的折疊或褶皺，將想要快速瀏覽的內(nèi)容折起，從而可以更快地看到預(yù)期的內(nèi)容。這種流暢的方式被應(yīng)用到快速瀏覽長頁面上會達(dá)到方便自然的效果，解決了側(cè)邊滾動條的諸多缺點，同時撐開、捏合的幅度可以控制折起內(nèi)容的多少，自然方便，貼近生活，且適合手機操作，更具有生活性、情感化，更容易理解和操作。
[0022]本申請技術(shù)方案尤其適用于手機等小屏幕的電子設(shè)備上，不占空間，不易引起誤操作。
【專利附圖】

【附圖說明】
[0023]圖1是本申請觸摸屏顯示器頁面處理方法實施例1的示意圖；
[0024]圖2是本申請規(guī)則折線狀的折疊效果示意圖；
[0025]圖3是本申請規(guī)則波浪狀的褶皺效果示意圖；
[0026]圖4是本申請觸摸屏顯示器頁面處理方法實施例2的示意圖；
[0027]圖5是具有折疊或褶皺效果區(qū)域的示意圖，其中僅顯示頁面容器數(shù)據(jù)；
[0028]圖6是具有折疊或褶皺效果區(qū)域的又一示意圖，其中，小于預(yù)定閾值時顯示頁面內(nèi)容和頁面容器，大于預(yù)定閾值時僅顯示頁面容器；
[0029]圖7是實施例1和2中判斷所述捏合或撐開手勢作用區(qū)域是否達(dá)到該捏合或撐開手勢的作用極限的流程示意圖；
[0030]圖8是當(dāng)手勢作用區(qū)域的頁面內(nèi)容為無折疊的撐開狀態(tài)，且手勢為捏合手勢時，響應(yīng)捏合或撐開手勢的過程示意圖；
[0031]圖9至11是執(zhí)行相應(yīng)代碼內(nèi)容的操作示意圖；
[0032]圖12、13是觸摸顯示屏顯示淘寶列表頁面時，對捏合或撐開手勢響應(yīng)的效果圖；
[0033]圖14是觸摸屏顯示器頁面處理裝置實施例的模塊結(jié)構(gòu)示意圖。
【具體實施方式】
[0034]下文中將結(jié)合附圖對本發(fā)明的實施例進行詳細(xì)說明。需要說明的是，在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。
[0035]實施例1
[0036]本申請觸摸屏顯示器頁面處理方法實施例1，該方法用于具有觸摸屏顯示器的電子設(shè)備,如圖1所示，具體包括以下步驟101-103:
[0037]步驟101:將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；
[0038]本申請適用于任何應(yīng)用程序的頁面，應(yīng)用程序包括但不限于電子郵件應(yīng)用程序、博客應(yīng)用程序、網(wǎng)絡(luò)瀏覽應(yīng)用程序、網(wǎng)絡(luò)購物應(yīng)用程序(比如淘寶)或小說閱讀應(yīng)用程序坐寸O
[0039]本申請所述的電子設(shè)備只要具備能感知手勢的觸摸屏顯示器即可，包括但不限于手機、平板電腦等。
[0040]步驟102:顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；
[0041 ] 本申請所說的手勢,包括但不限于點擊、觸點間有效距離的變化或觸點移動的特定軌跡(直線或圓)。
[0042]本申請將觸點間有效距離逐漸增大的手勢稱為撐開手勢，觸點間有效距離逐漸減小的手勢稱為捏合手勢。捏合和撐開手勢可為兩觸點或多觸點手勢，根據(jù)不同的使用習(xí)慣，可采用筆觸或指觸的方式實現(xiàn)。
[0043]步驟103:當(dāng)檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
[0044]可理解地，頁面容器尺寸在允許的極限范圍內(nèi)縮小或增大。
[0045]所述手勢作用區(qū)域按照預(yù)定算法確定。
[0046]以撐開或捏合手勢為例，可直接根據(jù)捏合或撐開手勢觸點確認(rèn)當(dāng)前頁面內(nèi)容捏合或撐開手勢作用區(qū)域，比如，捏合或撐開手勢的觸點起始位置之間的頁面內(nèi)容為捏合或撐開手勢作用區(qū)域，或?qū)?dāng)前頁面內(nèi)容劃分為多個區(qū)域，并根據(jù)捏合或撐開手勢觸點起始位置確定觸點對應(yīng)的區(qū)域，并以該手勢觸點區(qū)域的邊界來確定作用區(qū)域，比如對于上下折疊的方式，以捏合或撐開手勢的上觸點對應(yīng)的區(qū)域的上邊界作為作用區(qū)域的上邊界，同時以捏合或撐開手勢的下觸點對應(yīng)的區(qū)域的下邊界作為作用卻與的下邊界，可替換地，也可以手勢兩觸點對應(yīng)區(qū)域的上邊界界定作用區(qū)域。
[0047]檢測到觸點間的有效距離逐漸減小的手勢時，縮小該手勢作用區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，增大該手勢作用區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢作用區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
[0048]觸點間的有效距離的變化值越大，相應(yīng)地，作用區(qū)域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
[0049]頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或?qū)㈨撁嫒萜飨嗷クB加。該頁面處理可以根據(jù)用戶需要在手勢作用區(qū)域使所述頁面具有折疊或褶皺效果。
[0050]頁面處理使得頁面根據(jù)手勢變化顯示動態(tài)效果或手勢結(jié)束后顯示最終結(jié)果。
[0051]進行頁面處理后的頁面數(shù)據(jù)包括頁面內(nèi)容數(shù)據(jù)和頁面容器數(shù)據(jù)或僅包括頁面容器數(shù)據(jù)，所述頁面容器數(shù)據(jù)調(diào)整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區(qū)域呈現(xiàn)折疊或褶皺效果。
[0052]若當(dāng)前頁面為上下瀏覽方式顯示，連續(xù)的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替；
[0053]若當(dāng)前頁面為左右瀏覽方式顯示，連續(xù)的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替
[0054]在極限范圍內(nèi)響應(yīng)檢測到的捏合或撐開手勢，包括對捏合或撐開手勢作用區(qū)域的頁面內(nèi)容進行處理，若為捏合手勢，則該處理使捏合或撐開手勢作用區(qū)域產(chǎn)生或增大折疊或褶皺的效果，同時顯示面積縮小，若為撐開手勢，則該處理使捏合或撐開手勢作用區(qū)域減小或消除折疊或褶皺的效果，同時顯示面積增大。
[0055]本申請所說的極值范圍是指針對相同頁面內(nèi)容或頁面區(qū)域從顯示面積最小至顯示面積最大的范圍。
[0056]可理解地，根據(jù)設(shè)置和需求，可通過設(shè)定不同折疊或褶皺模式來產(chǎn)生不同的折疊或褶皺效果，具體的折疊或褶皺模式由折疊或褶皺的方向效果、形狀效果和視覺效果決定等。折疊或褶皺方向效果包括左右折疊或褶皺、上下折疊或褶皺、對角折疊或褶皺或四周向中心的折疊或褶皺。
[0057]折疊或褶皺形狀效果包括規(guī)則折線狀(如圖2所示)、不規(guī)則折線狀、規(guī)則波浪狀(如圖3所示)和不規(guī)則波浪狀。
[0058]折疊或褶皺視覺效果包括平面視覺效果和立體視覺效果。
[0059]上文所述有效距離是在縮小或放大方向上的距離。可理解地，若實現(xiàn)左右折疊或褶皺，則在左右方向上的距離為有效距離，若實現(xiàn)對角折疊或褶皺，則在對角方向上的距離為有效距離。
[0060]有效距離的變化值決定了縮放比例，S卩，在極值范圍內(nèi)，所述有效距離的變化值越大，相應(yīng)地，頁面容器縮小或放大的比例越大。
[0061]實施例2
[0062]本申請觸摸屏顯示器頁面處理方法實施例2用于具有觸摸屏顯示器的電子設(shè)備，如圖4所示，具體包括以下步驟:
[0063]步驟401:將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；
[0064]步驟402:當(dāng)顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；
[0065]步驟403:當(dāng)檢測到所述手勢時，對手勢作用區(qū)域和手勢牽連區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域或手勢牽連區(qū)域的頁面容器尺寸。
[0066]所述手勢作用區(qū)域或手勢牽連區(qū)域按照預(yù)定算法確定。
[0067]檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢牽連區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢牽連區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢牽連區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
[0068]觸點間的有效距離的變化值越大，相應(yīng)地，作用區(qū)域和牽連區(qū)域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
[0069]根據(jù)具體的設(shè)置和需求，進行頁面處理后的頁面數(shù)據(jù)包括頁面內(nèi)容數(shù)據(jù)和頁面容器數(shù)據(jù)。所述頁面容器數(shù)據(jù)用以調(diào)整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區(qū)域呈現(xiàn)平面、立體、規(guī)則或不規(guī)則的折疊或褶皺效果。這種情況下，頁面內(nèi)容數(shù)據(jù)也將被處理以與顯示的頁面容器相適應(yīng)。
[0070]簡化地，進行頁面處理后的頁面數(shù)據(jù)也可僅包括頁面容器數(shù)據(jù)，此種情況下，所有相對于正常顯示縮小的區(qū)域可僅顯示頁面容器，此時顯示區(qū)域的頁面容器呈現(xiàn)出折疊或褶皺效果，而隱藏相應(yīng)的頁面內(nèi)容(如圖5所示)，或當(dāng)縮小到預(yù)定閾值時，隱藏相應(yīng)頁面內(nèi)容，僅顯示頁面容器，當(dāng)放大超過該預(yù)定閾值時，顯示相應(yīng)頁面內(nèi)容和頁面容器(如圖6所示)O[0071]或?qū)⑦M行頁面處理后的頁面原數(shù)據(jù)保存，并備份，將備份的數(shù)據(jù)處理為位圖數(shù)據(jù)(即僅有圖片效果，沒有超鏈接，是一種被處理后的特殊的頁面內(nèi)容數(shù)據(jù))，僅對該位圖數(shù)據(jù)進行變形并疊加頁面容器數(shù)據(jù)，當(dāng)該折疊或褶皺效果消失后，再顯示該頁面區(qū)域的原數(shù)據(jù)。
[0072]在具體實現(xiàn)時，若當(dāng)前頁面內(nèi)容為上下瀏覽方式顯示，優(yōu)選地，所述頁面容器數(shù)據(jù)具有以下特點:
[0073]使得觸摸屏顯示器顯示的頁面內(nèi)容以上寬下窄的倒梯形和下寬上窄的梯形交替的方式體現(xiàn)規(guī)則的立體折疊效果；或，使得觸摸屏顯示器顯示的頁面內(nèi)容的以左傾斜平行四邊形和右傾斜平行四邊形交替的方式體現(xiàn)規(guī)則的立體折疊效果；
[0074]若當(dāng)前頁面內(nèi)容為左右瀏覽方式顯示，優(yōu)選地，所述頁面容器數(shù)據(jù)具有以下特
占-
^ \\\.[0075]使得觸摸屏顯示器顯示的頁面內(nèi)容以左寬右窄的倒梯形和右寬左窄的梯形交替體現(xiàn)規(guī)則的立體折疊效果，或使得觸摸屏顯示器顯示的頁面內(nèi)容以上傾斜平行四邊形和下傾斜平行四邊形交替體現(xiàn)規(guī)則的立體折疊效果。
[0076]以上為折線狀折疊效果，還可實現(xiàn)波浪狀褶皺效果。
[0077]本申請中，產(chǎn)生或增加折疊效果也稱為收起，減小或消除折疊效果也稱為撐開，如圖7所示，實施例1和實施例2中判斷所述捏合或撐開手勢作用區(qū)域是否達(dá)到該捏合或撐開手勢的作用極限的步驟包括以下步驟:
[0078]步驟701:判斷手勢作用區(qū)域是否有折疊/褶皺；
[0079]步驟702:判斷是 撐開手勢還是捏合手勢，若有折疊/褶皺且為捏合手勢，則執(zhí)行步驟703，若有折疊/褶皺且為撐開手勢；或無折疊/褶皺且為捏合手勢，則執(zhí)行步驟704，若無折疊/褶皺且為撐開手勢，則保持不變，即不響應(yīng)；
[0080]步驟703:判斷作用區(qū)域達(dá)到折疊或褶皺極限，若是認(rèn)為達(dá)到作用極限，保持不變，即不響應(yīng)手勢，否則執(zhí)行步驟704 ；
[0081]步驟704:認(rèn)為未達(dá)到作用極限，在極限范圍內(nèi)響應(yīng)所述撐開或捏合手勢。
[0082]以下以立體折疊效果為例，當(dāng)手勢作用區(qū)域的頁面內(nèi)容為無折疊的撐開狀態(tài)，且手勢為捏合手勢時，響應(yīng)捏合或撐開手勢的過程，如圖8所示，包括以下步驟:
[0083]步驟801:將頁面內(nèi)容平均分為N段；
[0084]步驟802:將所述N段順序放入數(shù)組中；
[0085]步驟803:判斷作用區(qū)域各段在數(shù)組中序號的奇偶性，若為奇數(shù)則執(zhí)行步驟804，否則執(zhí)行步驟805 ；
[0086]步驟804:將奇數(shù)段數(shù)據(jù)處理為適于上寬下窄的梯形顯示的數(shù)據(jù)；
[0087]步驟805:將偶數(shù)段數(shù)據(jù)處理為適于下寬上窄的梯形顯示的數(shù)據(jù)。
[0088]可理解地，該作用區(qū)域的奇偶段內(nèi)容組合后顯示立體折疊效果。
[0089]以上處理過程可通過代碼實現(xiàn):
[0090](I)使用perspective將x/y軸進行旋轉(zhuǎn),模擬3D效果,如圖9所示；
[0091](2)HTML代碼對內(nèi)容進行分塊，假設(shè)分為四塊，將奇、偶數(shù)塊分別進行變化，即可得到折疊效果，奇數(shù)塊變化如圖10所示，偶數(shù)塊變化如圖11所示；
[0092](3) javascript進行展開、收起判斷。[0093]采用捏合的手勢，可將當(dāng)前內(nèi)容向上折起，其下內(nèi)容向上拉出，在當(dāng)前屏就可以快速看到第N屏的內(nèi)容。捏合的動作越大，則折起的內(nèi)容越多，同樣拉開的內(nèi)容也更多。繼續(xù)采取同樣的操作，則下方內(nèi)容繼續(xù)折起，將之前折起的內(nèi)容頂出屏幕外，依此類推，直到看到自己想看的內(nèi)容。圖12、13給出了觸摸顯示屏顯示淘寶列表頁面時，對捏合或撐開手勢響應(yīng)的效果圖。
[0094]同理，若想回到前面的內(nèi)容，則在折疊處采用撐開的手勢，或者在展開處采用捏合手勢，則上方內(nèi)容向下拉出，下方內(nèi)容向下折起，同樣可以通過手勢的幅度控制內(nèi)容拉開的多少。
[0095]為實現(xiàn)上述觸摸屏顯示器頁面處理方法，本申請還提供一種觸摸屏顯示器頁面處理裝置，用于具有觸摸顯示屏的電子設(shè)備，如圖14所示，該裝置包括:
[0096]頁面分割模塊，用于將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示；
[0097]手勢檢測模塊，用于當(dāng)顯示所述頁面時，檢測觸發(fā)頁面處理的手勢；
[0098]頁面處理模塊，用于基于檢測到的手勢進行頁面處理，對應(yīng)于方法實施例1，當(dāng)檢測到所述手勢時，頁面處理模塊對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
[0099]所述手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡(直線或圓)，所述手勢作用區(qū)域或手勢牽連區(qū)域按照預(yù)定算法確定。
[0100]本申請將觸點間有效距離逐漸增大的手勢稱為撐開手勢，觸點間有效距離逐漸減小的手勢稱為捏合手勢。
[0101]具體地，檢測到觸點間的有效距離逐漸減小的手勢時，所述頁面處理模塊縮小該手勢作用區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，所述頁面處理模塊增大該手勢作用區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢作用區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
[0102]對應(yīng)于方法實施例2，當(dāng)檢測到所述手勢時，所述頁面處理模塊還對手勢牽連區(qū)域進行頁面處理:檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢牽連區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢牽連區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢牽連區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
[0103]優(yōu)選地，觸點間的有效距離的變化值越大，相應(yīng)地，作用區(qū)域和牽連區(qū)域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
[0104]優(yōu)選地，頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或?qū)㈨撁嫒萜飨嗷クB加。該頁面處理可以根據(jù)用戶需要在手勢作用區(qū)域使所述頁面具有折疊或褶皺效果O
[0105]具體地，進行頁面處理后的頁面數(shù)據(jù)包括頁面內(nèi)容數(shù)據(jù)和頁面容器數(shù)據(jù)或僅包括頁面容器數(shù)據(jù)，所述頁面容器數(shù)據(jù)用以調(diào)整頁面容器的形狀、尺寸、顏色和/或顯示位置，以使該頁面區(qū)域呈現(xiàn)折疊或褶皺效果。
[0106]頁面處理使得頁面根據(jù)手勢變化顯示動態(tài)效果或手勢結(jié)束后顯示最終結(jié)果。
[0107]具體地，若當(dāng)前頁面為上下瀏覽方式顯示，連續(xù)的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替；
[0108]若當(dāng)前頁面為左右瀏覽方式顯示，連續(xù)的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
[0109]若為捏合手勢，則頁面處理模塊對頁面進行處理使所述捏合手勢作用區(qū)域產(chǎn)生或增大折疊或褶皺的效果，同時縮小顯示面積，若為撐開手勢，則頁面處理模塊對頁面進行處理使所述撐開手勢作用區(qū)域減小或消除折疊或褶皺的效果，同時增大顯示面積。
[0110]如上文所述，所述折疊或褶皺效果折疊或褶皺效果包括折疊或褶皺的方向效果、形狀效果和視覺效果。
[0111]除上述觸摸屏顯示器頁面處理裝置外，本申請還提供了 一種具備上述觸摸屏顯示器頁面處理裝置和觸摸顯示屏的電子設(shè)備。
[0112]另外，本申請還提供了如下的電子設(shè)備，該電子設(shè)備包括:
[0113]觸摸顯示屏；
[0114]存儲器，用于存儲指令；
[0115]處理器，與所述存儲器耦合，該處理器被配置為執(zhí)行存儲在所述存儲器中的指令，其中，所述存儲器中存儲的指令以及所述處理器被配置為用于實現(xiàn)前述任一種觸摸屏顯示器頁面處理方法及上述處理方法的變形方案。
[0116]本申請技術(shù)方案將頁面分割為由多個頁面容器展示的頁面部分，檢測到手勢時，通過對頁面容器的處理實現(xiàn)對頁面的操作，使用戶可準(zhǔn)確瀏覽預(yù)期內(nèi)容，尤其可以利用捏合或撐開手勢模仿現(xiàn)實生活中的折疊或褶皺，將想要快速瀏覽的內(nèi)容折起，從而可以更快地瀏覽預(yù)期的內(nèi)容。這種流暢的方式被應(yīng)用到快速瀏覽長頁面上會達(dá)到方便自然的效果，解決了側(cè)邊滾動條的諸多缺點，同時撐開、捏合的幅度可以控制折起內(nèi)容的多少，自然方便，貼近生活，且適合手機操作，更具有生活性、情感化，更容易理解和操作。
[0117]本申請技術(shù)方案尤其適用于手機等小屏幕的電子設(shè)備上，不占空間，不易引起誤操作。
【權(quán)利要求】
1.一種觸摸屏顯示器頁面處理方法，其特征在于，該方法包括以下步驟: 將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示； 顯示所述頁面時，檢測觸發(fā)頁面處理的手勢； 檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
2.如權(quán)利要求1所述的方法，其特征在于:所述手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡。
3.如權(quán)利要求1所述的方法，其特征在于:檢測到觸點間的有效距離逐漸減小的手勢時，縮小該手勢作用區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，增大該手勢作用區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢作用區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
4.如權(quán)利要求1所述的方法，其特征在于:當(dāng)檢測到所述手勢時，該方法還包括對手勢牽連區(qū)域進行頁面處理。
5.如權(quán)利要求4所述的方法，其特征在于:檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢牽連區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢牽連區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢牽連區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
6.如權(quán)利要求3或5所述的方法，其特征在于:觸點間的有效距離的變化值越大，作用區(qū)域和牽連區(qū)域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
7.如權(quán)利要求1所述的方法，其特征在于:頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或?qū)㈨撁嫒萜飨嗷クB`加。
8.如權(quán)利要求7所述的方法，其特征在于:進行頁面處理后的頁面數(shù)據(jù)包括頁面內(nèi)容數(shù)據(jù)和頁面容器數(shù)據(jù)或僅包括頁面容器數(shù)據(jù)，所述頁面容器數(shù)據(jù)用以調(diào)整頁面容器的形狀、尺寸、顏色和/或顯示位置。
9.如權(quán)利要求1所述的方法，其特征在于:頁面處理使得頁面根據(jù)手勢變化顯示動態(tài)效果或手勢結(jié)束后顯示最終結(jié)果。
10.如權(quán)利要求1所述的方法，其特征在于: 若當(dāng)前頁面為上下瀏覽方式顯示，連續(xù)的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替； 若當(dāng)前頁面為左右瀏覽方式顯示，連續(xù)的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
11.一種觸摸屏顯示器頁面處理裝置，其特征在于，該裝置包括: 頁面分割模塊，用于將頁面分割為多個頁面部分，所述多個頁面部分分別由多個頁面容器加載展示； 手勢檢測模塊，用于當(dāng)顯示所述頁面時，檢測觸發(fā)頁面處理的手勢； 頁面處理模塊，當(dāng)檢測到所述手勢時，對手勢作用區(qū)域進行頁面處理，包括縮小或增大手勢作用區(qū)域的頁面容器尺寸。
12.如權(quán)利要求11所述的裝置，其特征在于:所述手勢為點擊、觸點間有效距離的變化或觸點移動的特定軌跡。
13.如權(quán)利要求11所述的裝置，其特征在于:檢測到觸點間的有效距離逐漸減小的手勢時，所述頁面處理模塊縮小該手勢作用區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，所述頁面處理模塊增大該手勢作用區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢作用區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
14.如權(quán)利要求11所述的裝置，其特征在于，當(dāng)檢測到所述手勢時，該頁面處理模塊還用于對手勢牽連區(qū)域進行頁面處理:檢測到觸點間的有效距離逐漸減小的手勢時，增大該手勢牽連區(qū)域內(nèi)頁面容器在有效距離減小方向上的尺寸；檢測到觸點間的有效距離逐漸增大的手勢時，減小該手勢牽連區(qū)域內(nèi)頁面容器在有效距離增大方向上的尺寸，手勢牽連區(qū)域包括一個頁面容器或多個連續(xù)相鄰的頁面容器。
15.如權(quán)利要求13或14所述的裝置，其特征在于:觸點間的有效距離的變化值越大，作用區(qū)域和牽連區(qū)域的頁面容器縮小或放大的比例越大，所述有效距離是指在縮小或放大方向上的距離。
16.如權(quán)利要求11所述的裝置，其特征在于:頁面處理還包括改變頁面容器的形狀、顯示位置、顏色和/或?qū)㈨撁嫒萜飨嗷クB加。
17.如權(quán)利要求16所述的裝置，其特征在于:進行頁面處理后的頁面數(shù)據(jù)包括頁面內(nèi)容數(shù)據(jù)和頁面容器數(shù)據(jù)或僅包括頁面容器數(shù)據(jù)，所述頁面容器數(shù)據(jù)用以調(diào)整頁面容器的形狀、尺寸、顏色和/或顯示位置。
18.如權(quán)利要求11所述的裝置，其特征在于:頁面處理使得頁面根據(jù)手勢變化顯示動態(tài)效果或手勢結(jié)束后顯示最終結(jié)果。
19.如權(quán)利要求11所述的裝置，其特征在于: 若當(dāng)前頁面為上下瀏覽方式顯示，連續(xù)的多個頁面容器為上寬下窄的倒梯形和下寬上窄的梯形交替；或，以左傾斜平行四邊形和右傾斜平行四邊形交替； 若當(dāng)前頁面為左右瀏覽方式顯示，連續(xù)的多個頁面容器為左寬右窄的倒梯形和右寬左窄的梯形交替，或上傾斜平行四邊形和下傾斜平行四邊形交替。
20.一種電子設(shè)備，該電子設(shè)備包括觸摸顯示屏，其特征在于:該設(shè)備還包括如權(quán)利要求11至19中任一項所述的觸摸屏顯示器頁面處理裝置。
21.一種電子設(shè)備，其特征在于，所述設(shè)備包括: 觸摸顯示屏； 存儲器，用于存儲指令； 處理器，與所述存儲器耦合，該處理器被配置為執(zhí)行存儲在所述存儲器中的指令，其中，所述存儲器中存儲的指令以及所述處理器被配置為用于實現(xiàn)如權(quán)利要求1至10中任一項所述的方法。
【文檔編號】G06F3/0488GK103777876SQ201210401741
【公開日】2014年5月7日 申請日期:2012年10月19日 優(yōu)先權(quán)日:2012年10月19日
【發(fā)明者】王琪琦 申請人:阿里巴巴集團控股有限公司