本發(fā)明涉及移動互聯(lián)網(wǎng)技術領域，具體涉及一種界面顯示處理方法、裝置及設備。

背景技術：

目前，隨著智能移動終端技術的不斷發(fā)展，用戶愈加喜歡使用移動終端瀏覽各種網(wǎng)頁內容，例如新聞、視頻、圖片等。移動終端一般通過各種瀏覽器顯示各種網(wǎng)頁內容。

相關的瀏覽器顯示網(wǎng)頁內容的頁面，例如顯示新聞資訊時，有一種方式是采用常見的瀑布流的方式展現(xiàn)內容，這些內容可以簡稱為信息流。由于終端屏幕的限制，這些信息流一般是部分內容顯示在當前界面，部分內容未顯示，如果檢測到用戶滑動屏幕，再將未顯示的內容顯示在當前界面。

但是，一般瀏覽器的顯示界面中，顯示的內容可能比較多，例如既有新聞資訊內容，又有導航欄和搜索入口等，因此對于這些不同功能的顯示內容，在檢測到用戶使用手勢操作瀏覽器界面時，需要提供一種處理方法使得能根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換。

技術實現(xiàn)要素：

為解決上述技術問題，本發(fā)明提供一種界面顯示處理方法、裝置及設備，能根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換。

根據(jù)本發(fā)明的一個方面，提供一種界面顯示處理方法，包括：

檢測當前界面的手勢操作，所述當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域；

在所述手勢操作符合預定手勢時，切換進入包含所述第一區(qū)域的 內容的新界面。

優(yōu)選的，所述第一區(qū)域包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中，所述內容區(qū)域為信息流。

優(yōu)選的，所述信息流包含多個頻道內容的集合，且在當前界面呈現(xiàn)至少一個頻道內容的集合。

優(yōu)選的，所述新界面為信息流的首頁。

優(yōu)選的，在所述手勢操作符合預定手勢時，切換進入包含所述第一區(qū)域的內容的新界面包括：在所述手勢操作符合預定手勢且所述手勢位于所述第一區(qū)域時，切換進入包含所述第一區(qū)域的內容的新界面。

優(yōu)選的，所述手勢操作為上滑手勢或下拉手勢；及，

所述切換進入包含所述第一區(qū)域的內容的新界面包括：切換進入包含所述第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面。

優(yōu)選的，所述切換進入包含所述第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面包括：在所述手勢操作為下拉手勢時，切換進入包含所述第一區(qū)域后臺刷新后的內容及新加入的第三區(qū)域的內容的新界面。

優(yōu)選的，所述切換進入包含所述第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面包括：

在所述手勢操作為上滑手勢時，所述第一區(qū)域的內容跟隨所述手勢向上移動，與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面；或，

在所述手勢操作為下拉手勢時，所述第一區(qū)域的內容跟隨所述手勢向下移動同時進行后臺刷新，再反彈向上移動，所述后臺刷新后的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

優(yōu)選的，所述第三區(qū)域為信息流的標題欄區(qū)域。

優(yōu)選的，所述方法還包括：

當檢測到所述上滑手勢的移動距離大于或等于設定距離閾值，或所述上滑手勢的移動速度大于或等于設定速度閾值時，所述第一區(qū)域的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界 面；或，

當檢測到所述下拉手勢釋放后，所述第一區(qū)域的內容再反彈向上移動與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

優(yōu)選的，所述在頂部位置顯示的新加入的第三區(qū)域的內容是在頂部位置自上而下、自左向右或自右向左滑入顯示。

優(yōu)選的，所述在所述手勢操作為上滑手勢時，所述第一區(qū)域的內容跟隨所述手勢向上移動包括：在所述手勢操作為上滑手勢時，將所述第一區(qū)域截圖后的截圖內容跟隨所述手勢向上移動。

優(yōu)選的，所述方法還包括：在所述將所述第一區(qū)域截圖后的截圖內容跟隨所述手勢向上移動時，所述第二區(qū)域的內容顯示蒙版效果并被所述第一區(qū)域的內容和所述第三區(qū)域的內容覆蓋。

優(yōu)選的，在所述上滑手勢的移動速度大于或等于設定速度閾值時，所述第一區(qū)域的內容與所述第三區(qū)域的內容拼接時顯示反向回彈動畫。

優(yōu)選的，在所述第一區(qū)域的內容與所述第三區(qū)域的內容拼接時，在連接的邊緣區(qū)域顯示逐漸淡入的外陰影。

優(yōu)選的，所述在所述手勢操作為下拉手勢時，所述第一區(qū)域的內容跟隨所述手勢向下移動同時進行后臺刷新包括：

在所述手勢操作為下拉手勢時，所述第一區(qū)域的內容跟隨所述手勢向下移動，所述第二區(qū)域的內容逐漸消失并在所述第二區(qū)域的位置顯示刷新提示，后臺對第一區(qū)域的內容進行內容刷新。

優(yōu)選的，所述第二區(qū)域的內容逐漸消失包括：將所述第二區(qū)域的下邊緣向下進行拉伸變形，同時所述第二區(qū)域的內容逐漸消失。

優(yōu)選的，所述將所述第二區(qū)域的下邊緣向下進行拉伸變形包括：將所述第二區(qū)域的下邊緣采用二次貝塞爾曲線方式向下進行拉伸變形。

優(yōu)選的，所述第一區(qū)域的內容跟隨所述手勢向下移動包括：所述第一區(qū)域的內容跟隨所述手勢向下移動到設定距離閾值后停止移動。

優(yōu)選的，所述切換進入包含所述第一區(qū)域的內容的新界面時還包 括:在新界面的工具欄區(qū)域中顯示所述當前界面的工具欄的各個圖標中的其中一個圖標。

優(yōu)選的，在檢測到所進入的新界面的工具欄區(qū)域中的返回主頁圖標被觸摸后，返回的主頁中所述第一區(qū)域顯示對應新界面顯示頻道的內容。

根據(jù)本發(fā)明的另一個方面，提供一種界面顯示處理裝置，包括：

檢測模塊，用于檢測當前界面的手勢操作，所述當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域；

切換模塊，用于在所述檢測模塊檢測到的所述手勢操作符合預定手勢時，切換進入包含所述第一區(qū)域的內容的新界面。

優(yōu)選的，所述檢測模塊包括：

第一檢測子模塊，用于檢測所述手勢操作是否符合預定手勢；

第二檢測子模塊，用于檢測所述手勢是否位于所述第一區(qū)域；

所述切換模塊在所述第一檢測子模塊檢測到所述手勢操作符合預定手勢，且所述第二檢測子模塊檢測到所述手勢位于所述第一區(qū)域時，切換進入包含所述第一區(qū)域的內容的新界面。

優(yōu)選的，所述切換模塊包括：

獲知子模塊，用于獲知所述檢測模塊檢測到的所述手勢操作為上滑手勢或下拉手勢；

處理子模塊，用于切換進入包含所述第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面。

優(yōu)選的，所述切換模塊還包括：

刷新子模塊，用于對所述第一區(qū)域內容進行后臺刷新；

所述處理子模塊在所述獲知子模塊獲知所述手勢操作為下拉手勢時，切換進入包含所述第一區(qū)域經所述刷新子模塊后臺刷新后的內容及新加入的第三區(qū)域的內容的新界面。

優(yōu)選的，所述處理子模塊包括：

第一處理模塊，用于在所述獲知子模塊獲知所述手勢操作為上滑手勢時，將所述第一區(qū)域的內容跟隨所述手勢向上移動，與在頂部位 置顯示的新加入的第三區(qū)域的內容拼接形成新界面；或，

第二處理模塊，用于在所述獲知子模塊獲知所述手勢操作為下拉手勢時，將所述第一區(qū)域的內容跟隨所述手勢向下移動同時進行后臺刷新，再反彈向上移動，將所述后臺刷新后的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

優(yōu)選的，所述第一處理模塊在所述獲知子模塊獲知所述檢測模塊檢測到所述上滑手勢的移動距離大于或等于設定距離閾值，或所述上滑手勢的移動速度大于或等于設定速度閾值時，將所述第一區(qū)域的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面；或，

所述第二處理模塊在所述獲知子模塊獲知所述檢測模塊檢測到所述下拉手勢釋放后，將所述第一區(qū)域的內容再反彈向上移動與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

優(yōu)選的，所述第一處理模塊在所述獲知子模塊獲知所述手勢操作為上滑手勢時，將所述第一區(qū)域截圖后的截圖內容跟隨所述手勢向上移動。

優(yōu)選的，所述第二處理模塊在所述獲知子模塊獲知在所述手勢操作為下拉手勢時，將所述第一區(qū)域的內容跟隨所述手勢向下移動，將所述第二區(qū)域的內容進行逐漸消失處理并在所述第二區(qū)域的位置顯示刷新提示，由后臺對第一區(qū)域的內容進行內容刷新。

優(yōu)選的，所述切換模塊還包括：

工具欄處理模塊，用于在切換進入包含所述第一區(qū)域的內容的新界面時，在新界面的工具欄區(qū)域中顯示所述當前界面的工具欄的各個圖標中的其中一個圖標；或，

在檢測到所進入的新界面的工具欄區(qū)域中的返回主頁圖標被觸摸后，在返回的主頁中所述第一區(qū)域顯示對應新界面顯示頻道的內容。

根據(jù)本發(fā)明的另一個方面，提供一種處理設備，包括：

存儲器，用于存儲程序，

處理器，用于執(zhí)行所述存儲器存儲的以下程序：

檢測當前界面的手勢操作，所述當前界面預先劃分為跟隨手勢移 動的第一區(qū)域和不隨手勢移動的第二區(qū)域；

在所述手勢操作符合預定手勢時，切換進入包含所述第一區(qū)域的內容的新界面。

可以發(fā)現(xiàn)，本發(fā)明實施例的技術方案，預先定義了各種不同手勢操作對應的含義，當前界面也預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域，那么通過檢測當前界面的手勢操作，在所述手勢操作符合預定手勢時，就可以切換進入包含所述第一區(qū)域的內容的新界面，從而根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換，提高用戶使用體驗。

附圖說明

通過結合附圖對本公開示例性實施方式進行更詳細的描述，本公開的上述以及其它目的、特征和優(yōu)勢將變得更加明顯，其中，在本公開示例性實施方式中，相同的參考標號通常代表相同部件。

圖1是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法的示意性流程圖；

圖2是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中上滑操作處理的示意性流程圖；

圖3是根據(jù)本發(fā)明的一個實施例的界面區(qū)域顯示示意圖；

圖4是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中上滑操作處理的截圖及蒙版示意圖；

圖5是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中下拉操作處理的示意性流程圖；

圖6是根據(jù)本發(fā)明的一個實施例的下拉操作處理的界面變化示意圖；

圖7是根據(jù)本發(fā)明的一個實施例的下拉操作處理的另一界面變化示意圖；

圖8是本發(fā)明的一種界面顯示處理裝置的示意性方框圖；

圖9是本發(fā)明的一種界面顯示處理裝置中的檢測模塊的一個示意 性方框圖；

圖10是本發(fā)明的一種界面顯示處理裝置中的切換模塊的一個示意性方框圖；

圖11是本發(fā)明的一種處理設備的示意性方框圖。

具體實施方式

下面將參照附圖更詳細地描述本公開的優(yōu)選實施方式。雖然附圖中顯示了本公開的優(yōu)選實施方式，然而應該理解，可以以各種形式實現(xiàn)本公開而不應被這里闡述的實施方式所限制。相反，提供這些實施方式是為了使本公開更加透徹和完整，并且能夠將本公開的范圍完整地傳達給本領域的技術人員。

本發(fā)明提供一種界面顯示處理方法，能根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換。

圖1是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法的示意性流程圖。

如圖1所示，包括：

步驟101、檢測當前界面的手勢操作，當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域。

本發(fā)明預先定義各種不同手勢操作對應的含義，如上滑操作與下拉操作等，因此該步驟中將檢測用戶在當前界面的手勢操作。另外，當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域。

步驟102、在手勢操作符合預定手勢時，切換進入包含第一區(qū)域的內容的新界面。

其中，第一區(qū)域可以包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中內容區(qū)域可以為信息流。

其中，信息流包含多個頻道內容的集合，且在當前界面呈現(xiàn)至少一個頻道內容的集合；新界面可以為信息流的首頁。

其中，在手勢操作符合預定手勢時，切換進入包含第一區(qū)域的內 容的新界面包括：在手勢操作符合預定手勢且手勢位于第一區(qū)域時，切換進入包含第一區(qū)域的內容的新界面。

其中，手勢操作可以為上滑手勢或下拉手勢；及，切換進入包含第一區(qū)域的內容的新界面可以包括：切換進入包含第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面。

其中，在手勢操作為上滑手勢時，第一區(qū)域的內容跟隨手勢向上移動，與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面；或，在手勢操作為下拉手勢時，第一區(qū)域的內容跟隨手勢向下移動同時進行后臺刷新，再反彈向上移動，后臺刷新后的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

可以發(fā)現(xiàn)，本發(fā)明實施例的技術方案，預先定義了各種不同手勢操作對應的含義，當前界面也預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域，那么通過檢測當前界面的手勢操作，在所述手勢操作符合預定手勢時，就可以切換進入包含所述第一區(qū)域的內容的新界面，從而根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換，提高用戶使用體驗。

以下進一步更具體介紹本發(fā)明的技術方案。

圖2是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中上滑操作處理的示意性流程圖。

如圖2所示，包括：

步驟201、檢測當前界面的手勢操作。

其中，當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域。

其中，第一區(qū)域可以包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中內容區(qū)域可以為信息流。

其中，信息流可以包含多個頻道內容的集合，且在當前界面呈現(xiàn)至少一個頻道內容的集合，例如是信息流的體育、科技等頻道的內容的集合。

步驟202、在手勢操作為上滑手勢時，將第一區(qū)域截圖后的截圖 內容跟隨手勢向上移動。

本發(fā)明的第一區(qū)域包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中，所述內容區(qū)域為信息流，也即資訊信息流。本發(fā)明利用截圖方式對當前界面的第一區(qū)域內容進行截圖操作，那么可以將第一區(qū)域截圖后的截圖內容跟隨手勢向上移動，可以保持當前界面作為底層不需變化。

本發(fā)明在手勢上滑時是用截圖跟隨手勢移動來替換真實的信息流內容的移動，使用戶從視覺上感覺實現(xiàn)無縫移動切換。也就是說，跟隨用戶手勢上滑的其實是截圖的信息流內容，在截圖下方是實際的當前界面。

步驟203、在頂部位置顯示新加入的第三區(qū)域內容。

本發(fā)明的第三區(qū)域為信息流的標題欄區(qū)域。該步驟將標題欄區(qū)域內容在頂部位置顯示。需說明的是，在頂部位置顯示的新加入的第三區(qū)域的內容可以是在頂部位置自上而下、自左向右或自右向左滑入顯示，或者不做滑入動作直接顯示，根據(jù)需要可以在不同平臺進行設置。例如可以在安卓平臺設置為自上而下滑入，在IOS(蘋果公司開發(fā)的移動操作系統(tǒng))平臺設置為直接顯示等，本發(fā)明不加以限定。

也就是說，隨著上滑手勢的移動，當前界面的頂部位置可以自動下落一排標題欄內容，其中設置有不同的資訊頻道名稱，例如推薦、體育、科技等頻道，標題欄內容可以是藍色背景。需說明的是，此處只是以標題欄內容為藍色背景舉例說明，也可以是其他顏色背景。下落的藍色背景的信息流的標題欄內容和自下而上移動的信息流的內容形成相互輝映的視覺效果，使得用戶在感知上感覺在高于底層界面的層次上，由上下兩個區(qū)域部分合并成了一個新界面，很自然地切換進入了新界面瀏覽，該新界面為信息流的首頁。

需說明的是，步驟202和203沒有必然的順序關系。

步驟204、在將第一區(qū)域截圖后的截圖內容跟隨手勢向上移動時，第二區(qū)域的內容顯示蒙版效果并被第一區(qū)域的內容和第三區(qū)域的內容覆蓋。

該步驟在第二區(qū)域的內容顯示蒙版效果，使得視覺上讓信息流內容和其它部分分開，并且形成信息流內容浮在底層之上一層的效果。

而且，該蒙版效果處理過程可以展示漸變動畫，例如作為底層的第二區(qū)域的內容隨手勢微上滑而顯示蒙版漸漸加深的效果，作為底層的界面作為整體背景區(qū)域，可以增加一層從0％～50％漸變的黑色遮罩模仿景深效果，該效果可以通過設置背景遮罩透明度實現(xiàn)，這樣讓整個手勢上滑過程伴隨滑動自然順暢的效果。同時，伴隨信息流內容的上移和標題欄內容的下落，第二區(qū)域的內容的面積不斷縮小直到被覆蓋而消失。

步驟205、切換進入由第一區(qū)域的內容與新加入的第三區(qū)域的內容拼接形成的新界面。

該步驟包括：當檢測到上滑手勢的移動距離大于或等于設定距離閾值，或上滑手勢的移動速度大于或等于設定速度閾值時，第一區(qū)域的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

該步驟中，如果信息流內容跟隨手勢向上滑動距離超過或等于設定距離閾值，例如超過或等于總可滑動距離的1/5，則信息流內容向上吸附標題欄內容，切換進入新界面也即信息流多頻道界面的首頁。其中，總可滑動距離是指即初始的信息流區(qū)域內容與標題欄內容之間的間距，該間距主要根據(jù)當前信息流區(qū)域內容所在的位置決定?；蛘撸畔⒘鲄^(qū)域內容跟隨手勢向上快速滑動的速度超過或等于設定速度閾值，例如超過或等于2000像素/秒(Android內的速度單位)，則信息流區(qū)域內容向上吸附標題欄內容，拼接成新界面。除上述兩種情況外的其余情況，隨著手勢的釋放，則界面展開恢復初始狀態(tài)。

另外，在將第一區(qū)域內容與第三區(qū)域內容吸附拼接形成新界面時，若上滑手勢的移動速度大于或等于設定速度閾值，將第一區(qū)域內容與第三區(qū)域內容吸附拼接時顯示反向回彈動畫，即在信息流區(qū)域內容與標題欄內容并攏后會展示反向的動畫，模擬一種柔性回彈的效果，回彈初始速度與信息流區(qū)域內容剛接觸標題欄內容的速度相同，回彈距 離可以為回彈速度的1/6但不局限于此。

本發(fā)明可以使用一個ValueAnimator類來實現(xiàn)反向動畫，一般使用ValueAnimator類，是將其由一個值變化為另外一個值，然后根據(jù)值的變化，按照一定的規(guī)則，動態(tài)修改視圖View的屬性，例如View的位置、透明度、旋轉角度、大小等，就可完成動畫的效果。因此本發(fā)明只需在更新界面顯示進度的時候修改信息流區(qū)域內容和標題欄內容的排版layout參數(shù)就可以實現(xiàn)回彈效果。

該步驟中，將第一區(qū)域內容與第三區(qū)域內容吸附拼接形成新界面時，還可以將第一區(qū)域內容與第三區(qū)域內容的邊緣區(qū)域顯示逐漸淡入的外陰影，即滑動過程中，將信息流區(qū)域內容與標題欄內容的上下邊緣按0％～100％顯示淡入的外陰影效果，從而可以豐富整體立體感。

另外，該步驟中，還可以將當前界面的工具欄區(qū)域的各個圖標向中間收攏并顯示為一個圖標。具體的，在手勢上滑的滑動過程中，將當前界面的底部工具欄的圖標逐漸收攏，例如底部工具欄為5個圖標時，5個圖標都往中間移動，顯示100％～0％的淡出效果，并顯示100％～95％的縮放效果，最終將5個圖標合并只顯示其中1個圖標，例如只顯示返回主頁圖標，展示在形成的新界面的底部，也即融合到信息流多頻道界面中。

需說明的是，上述是以工具欄區(qū)域變化為只顯示1個圖標舉例說明但不局限于此，也可以根據(jù)需要設置顯示2個圖標或不顯示圖標等，也可以不改變工具欄區(qū)域的變化。本發(fā)明可以根據(jù)不同平臺進行上述設置，例如在安卓平臺將工具欄的5個圖標合并為只顯示一個返回主頁圖標，在IOS平臺不改變工具欄區(qū)域圖標等。

還需說明的是，本發(fā)明還可以在檢測到所進入的新界面的工具欄區(qū)域中的返回主頁圖標被觸摸后，返回的主頁中第一區(qū)域顯示對應新界面顯示頻道的內容。例如，切換進入新界面后，如果用戶在查看新界面的娛樂頻道的內容，在點擊返回主頁圖標后，在返回的主頁中，第一區(qū)域即信息流區(qū)域顯示的也是剛才顯示的娛樂頻道中的內容，從而也可以提高用戶體驗。

可以發(fā)現(xiàn)，該發(fā)明實施例檢測到用戶的上滑手勢操作時，將當前界面的信息流內容進行截圖，將截圖跟隨手勢向上移動，并在頂部位置顯示標題欄內容，由信息流內容和標題欄內容自然銜接形成新界面，從而根據(jù)上滑手勢操作實現(xiàn)界面顯示的自然過渡切換，提高用戶使用體驗。

圖3是根據(jù)本發(fā)明的一個實施例的界面區(qū)域顯示示意圖。

如圖3所示，顯示界面包括4個區(qū)域(也稱為視圖View)：信息流區(qū)域100、標題欄區(qū)域200、底層背景區(qū)域300、工具欄區(qū)域400。另外信息流區(qū)域100設有邊緣陰影500。

在手勢上滑的過程中，假設手指的移動距離為Δy，速度為Δv。根據(jù)手指的移動距離Δy，信息流區(qū)域100跟隨手指向上移動，標題欄區(qū)域200同步從界面頂部下滑，最后信息流區(qū)域100與標題欄區(qū)域200吸附拼接形成新界面。

上述4個區(qū)域中，工具欄的區(qū)域可以保持不變即不向上移動，信息流區(qū)域100、標題欄區(qū)域200、底層背景區(qū)域300這3個區(qū)域的移動可以按照以下方式處理：

可以通過手指的移動距離Δy與信息流區(qū)域100到標題欄區(qū)域200之間距離(即前述的總可滑動距離)的比例計算出移動百分比，再根據(jù)移動百分比計算出信息流區(qū)域100、標題欄區(qū)域200、底層背景區(qū)域300這3個區(qū)域也即3個視圖View需移動的距離。

其中，對于底層背景區(qū)域300，可以設置為以1/2手指移動速度Δv/2向上移動并縮小但不局限于此，也可以設置為以其他速度移動和縮小。

移動時，可以通過直接設置各個視圖View的排版layout參數(shù)來實現(xiàn)移動的效果。

例如，對標題欄區(qū)域mTitleView可以設置其左右及上下的坐標位置實現(xiàn)移動：mTitleView.layout(left,top,right,bottom)。

而對于邊緣陰影500，可以在滑動過程中將信息流區(qū)域內容與標題欄內容的上下邊緣按0％～100％漸變顯示淡入的外陰影效果。

圖4是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中上滑操作處理的截圖及蒙版示意圖。

如圖4所示，最底下的一層是實際的當前界面，上層移動的是信息流區(qū)域內容的截圖部分，標題欄區(qū)域在上層的頂部滑入，信息流區(qū)域內容與標題欄區(qū)域的中間區(qū)域所對應的底層界面，顯示蒙版效果。

圖5是根據(jù)本發(fā)明的一個實施例的界面顯示處理方法中下拉操作處理的示意性流程圖；

如圖5所示，包括：

步驟501、檢測當前界面的手勢操作。

其中，當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域。

其中，第一區(qū)域可以包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中內容區(qū)域可以為信息流。

其中，信息流可以包含多個頻道內容的集合，且在當前界面呈現(xiàn)至少一個頻道內容的集合，例如是信息流的體育、科技等頻道的內容的集合。

步驟502、在手勢操作為下拉手勢時，第一區(qū)域的內容跟隨所述手勢向下移動同時進行后臺刷新。

一般用戶在首頁界面看到有資訊內容時，如果想刷新內容，一般會采用下拉手勢希望可以刷新資訊。因此，該步驟在所述手勢操作符合下拉手勢時，將當前界面的第一區(qū)域內容向下移動并觸發(fā)第一區(qū)域內容的后臺刷新操作。

步驟503、第二區(qū)域的內容逐漸消失并在第二區(qū)域的位置顯示刷新提示。

需說明的是，步驟502和503沒有必然的順序關系。

該步驟中，可以讓第二區(qū)域內容，例如有天氣、搜索和導航入口的區(qū)域部分進行微弱的下移和顯示漸漸消失效果，并顯示設定顏色例如藍色作為背景顏色，同時在該位置顯示刷新提示，告訴用戶刷新并會進入新界面。

其中，第二區(qū)域的內容逐漸消失處理包括：將第二區(qū)域內容的下邊緣向下進行拉伸變形，同時第二區(qū)域內容逐漸消失。

其中，將第二區(qū)域內容的下邊緣向下進行拉伸變形包括：將第二區(qū)域區(qū)域內容的的下邊緣采用二次貝塞爾曲線方式向下進行拉伸變形。例如將界面中有天氣、搜索和導航入口的區(qū)域部分向下拉伸進行變形過渡。

另外，將當前界面的第一區(qū)域內容向下移動到設定距離閾值后停止移動，此時可以設置只有左右滑動可以生效。

步驟504、在頂部位置顯示新加入的第三區(qū)域內容。

本發(fā)明的第三區(qū)域為信息流的標題欄區(qū)域。該步驟將標題欄區(qū)域內容在頂部位置顯示。需說明的是，在頂部位置顯示的新加入的第三區(qū)域的內容可以是在頂部位置自上而下、自左向右或自右向左滑入顯示，或者不做滑入動作直接顯示，根據(jù)需要可以在不同平臺進行設置。例如可以在安卓平臺設置為自右向左滑入，在IOS平臺設置為直接顯示等，本發(fā)明不加以限定。

隨著標題欄內容的各頻道逐個出現(xiàn)，可以進一步讓用戶感知即將進入的新界面。

需說明的是，步驟502和504沒有必然的順序關系。

步驟505、在檢測到下拉手勢釋放后，切換進入由第一區(qū)域的內容與新加入的第三區(qū)域的內容拼接形成的新界面。

該步驟中，檢測到下拉手勢松手后，信息流區(qū)域內容可以直接采用快速動畫效果，反彈向上移動，頂走其它部分的內容后吸附到標題欄內容，形成新界面，從而切換進入新界面。

另外，該步驟還可以將當前界面的工具欄區(qū)域的各個圖標向中間收攏并顯示為一個圖標。

具體的，在手勢上滑的滑動過程中，將當前界面的底部工具欄的圖標逐漸收攏，例如底部工具欄為5個圖標時，5個圖標都往中間移動，顯示100％～0％的淡出效果，并顯示100％～95％的縮放效果，最終將5個圖標合并只顯示其中1個圖標，例如只顯示返回主頁圖標， 展示在形成的新界面的底部，也即融合到信息流的多頻道界面中。

需說明的是，上述是以工具欄區(qū)域變化為只顯示1個圖標舉例說明但不局限于此，也可以根據(jù)需要設置顯示2個圖標或不顯示圖標等，也可以不改變工具欄區(qū)域的變化。本發(fā)明可以根據(jù)不同平臺進行上述設置，例如在安卓平臺將工具欄的5個圖標合并為只顯示一個返回主頁圖標，在IOS平臺不改變工具欄區(qū)域圖標等。

還需說明的是，本發(fā)明還可以在檢測到所進入的新界面的工具欄區(qū)域中的返回主頁圖標被觸摸后，返回的主頁中第一區(qū)域顯示對應新界面顯示頻道的內容。例如，切換進入新界面后，如果用戶在查看新界面的娛樂頻道的內容，在點擊返回主頁圖標后，在返回的主頁中，第一區(qū)域即信息流區(qū)域顯示的也是剛才顯示的娛樂頻道中的內容，從而也可以提高用戶體驗。。

可以發(fā)現(xiàn)，該發(fā)明實施例檢測到用戶的下拉手勢操作時，將當前界面的信息流區(qū)域內容跟隨手勢向下移動并刷新信息流區(qū)域內容，在頂部顯示標題欄內容，由刷新后的信息流區(qū)域內容和標題欄內容自然銜接形成新界面，從而根據(jù)下拉手勢操作實現(xiàn)界面顯示的自然過渡切換，提高用戶使用體驗。

圖6是根據(jù)本發(fā)明的一個實施例的下拉操作處理的界面變化示意圖。

如圖6所示，跟隨手勢下拉操作，先是將當前界面第二區(qū)域內容的下邊緣向下進行拉伸變形的過程中對第二區(qū)域內容進行逐漸消失處理并顯示藍色作為背景顏色；然后在該位置顯示刷新提示，告訴用戶刷新并會進入新界面；最后，下拉手勢釋放后，信息流區(qū)域內容直接采用快速動畫效果頂走其它部分的內容后吸附到標題欄內容，形成新界面。

圖7是根據(jù)本發(fā)明的一個實施例的下拉操作處理的另一界面變化示意圖。

如圖7所示，主要顯示下拉手勢過程中，將當前界面第二區(qū)域內容的的下邊緣采用二次貝塞爾曲線方式向下進行拉伸變形的過程。

對于下拉手勢，可以分為以下階段處理：

在第一階段即均勻下拉階段，根據(jù)手指的移動距離Δy，保持信息流區(qū)域內容隨手勢向下移動，并將第二區(qū)域內容的下邊緣向下進行拉伸變形，在該拉伸變形過程中，該第二區(qū)域內容的中的元素例如文字和圖標等在跟隨向下移動的同時變小和淡出，最后過渡在該區(qū)域位置顯示刷新提示和刷新圖標。

在第二階段即下拉阻尼階段，隨著手指繼續(xù)下拉，此時信息流區(qū)域內容可以以1/3手指移動速度Δv/3向下移動，以此模擬拉扯的阻力效果。需說明的是，此處只是以移動速度Δv/3舉例說明但不局限于此，也可以以其他速度移動。這個過程，界面中心的刷新提示和刷新圖標，以及信息流區(qū)域內容均以低速緩慢下移。

在第三階段即下拉邊界階段，手指下拉到達下拉閾值后，也即信息流區(qū)域內容向下移動到設定距離閾值后，手指向下再滑動將不再使信息流區(qū)域內容下移，此時可以設置只有左右滑動可以生效。

上述可以將當前界面第二區(qū)域內容的的下邊緣采用現(xiàn)有的二次貝塞爾曲線方式向下進行拉伸變形。如圖顯示了起始點600、結束點700、控制點800。控制點800也就是手指觸摸界面的觸摸點，控制點800的坐標也即手指觸摸位置的坐標。在下拉過程中，起始點和結束點以較慢的速度跟隨手指Δy下移，控制點以較快的速度下移。當控制點與起始點和結束點的距離越大時，曲線的弧度就越明顯。

本發(fā)明可以通過一個自定義視圖View重寫onDraw函數(shù)的方法，并通過一個路徑Path對象實現(xiàn)曲線區(qū)域的繪制和填充，在手指下拉移動的過程觸發(fā)這個View的重繪，從而保持曲線區(qū)域的跟手操作。

上述詳細介紹了本發(fā)明的界面顯示處理方法，相應的，本發(fā)明還提供一種界面顯示處理裝置。

圖8是本發(fā)明的一種界面顯示處理裝置的示意性方框圖。

如圖8所示，裝置包括：檢測模塊81、切換模塊82。

檢測模塊81，用于檢測當前界面的手勢操作，當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域。

其中，第一區(qū)域包含導航區(qū)域及內容區(qū)域或僅包含內容區(qū)域，其中內容區(qū)域為信息流。其中，信息流可以包含多個頻道內容的集合，且在當前界面呈現(xiàn)至少一個頻道內容的集合；新界面可以為信息流的首頁。

切換模塊82，用于在檢測模塊81檢測到的手勢操作符合預定手勢時，切換進入包含第一區(qū)域的內容的新界面。

其中，切換模塊82在手勢操作符合預定手勢且手勢位于第一區(qū)域時，切換進入包含第一區(qū)域的內容的新界面。

可以發(fā)現(xiàn)，本發(fā)明實施例的技術方案，預先定義了各種不同手勢操作對應的含義，當前界面也預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域，那么通過檢測當前界面的手勢操作，在所述手勢操作符合預定手勢時，就可以切換進入包含所述第一區(qū)域的內容的新界面，從而根據(jù)手勢操作實現(xiàn)界面顯示的自然過渡切換，提高用戶使用體驗。

圖9是本發(fā)明的一種界面顯示處理裝置中的檢測模塊的一個示意性方框圖。

如圖9所示，檢測模塊81包括：第一檢測子模塊811和第二檢測子模塊812。

第一檢測子模塊811，用于檢測手勢操作是否符合預定手勢。

第二檢測子模塊812，用于檢測手勢是否位于所述第一區(qū)域。

切換模塊82在第一檢測子模塊811檢測到手勢操作符合預定手勢，且第二檢測子模塊812檢測到手勢位于第一區(qū)域時，切換進入包含第一區(qū)域的內容的新界面。

圖10是本發(fā)明的一種界面顯示處理裝置中的切換模塊的一個示意性方框圖。

如圖10所示，切換模塊82包括：獲知子模塊821和處理子模塊822。

獲知子模塊821，用于獲知檢測模塊81檢測到的手勢操作為上滑手勢或下拉手勢。

處理子模塊822，用于切換進入包含第一區(qū)域的內容及新加入的第三區(qū)域的內容的新界面。

優(yōu)選的，切換模塊82還包括：刷新子模塊823。

刷新子模塊823，用于對第一區(qū)域內容進行后臺刷新。

處理子模塊822在獲知子模塊821獲知手勢操作為下拉手勢時，切換進入包含第一區(qū)域經刷新子模塊823后臺刷新后的內容及新加入的第三區(qū)域的內容的新界面。

進一步的，所述處理子模塊822包括：第一處理模塊8221和第二處理模塊8222。

第一處理模塊8221，用于在獲知子模塊821獲知手勢操作為上滑手勢時，將第一區(qū)域的內容跟隨手勢向上移動，與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

第二處理模塊8222，用于在獲知子模塊821獲知手勢操作為下拉手勢時，將第一區(qū)域的內容跟隨手勢向下移動同時進行后臺刷新，再反彈向上移動，將后臺刷新后的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

其中，第三區(qū)域為信息流的標題欄區(qū)域。

進一步的，第一處理模塊8221在獲知子模塊821獲知檢測模塊81檢測到上滑手勢的移動距離大于或等于設定距離閾值，或上滑手勢的移動速度大于或等于設定速度閾值時，將第一區(qū)域的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

第二處理模塊8222在獲知子模塊821獲知檢測模塊81檢測到下拉手勢釋放后，將第一區(qū)域的內容再反彈向上移動與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

其中，在頂部位置顯示的新加入的第三區(qū)域的內容是在頂部位置自上而下、自左向右或自右向左滑入顯示。

進一步的，第一處理模塊8221在獲知子模塊821獲知手勢操作為上滑手勢時，將第一區(qū)域截圖后的截圖內容跟隨手勢向上移動。

其中，第一處理模塊8221將第一區(qū)域截圖后的截圖內容跟隨手勢 向上移動時，第二區(qū)域的內容顯示蒙版效果并被第一區(qū)域的內容和第三區(qū)域的內容覆蓋。

進一步的，第二處理模塊8222在獲知子模塊821獲知在手勢操作為下拉手勢時，將第一區(qū)域的內容跟隨手勢向下移動，將第二區(qū)域的內容進行逐漸消失處理并在第二區(qū)域的位置顯示刷新提示，由后臺對第一區(qū)域的內容進行內容刷新。

其中，第二區(qū)域的內容逐漸消失包括：將第二區(qū)域的下邊緣向下進行拉伸變形，同時第二區(qū)域的內容逐漸消失。

其中，將第二區(qū)域的下邊緣向下進行拉伸變形包括：將第二區(qū)域的下邊緣采用二次貝塞爾曲線方式向下進行拉伸變形。

進一步的，切換模塊82還包括：工具欄處理模塊824。

工具欄處理模塊824，用于在切換進入包含第一區(qū)域的內容的新界面時，在新界面的工具欄區(qū)域中顯示當前界面的工具欄的各個圖標中的其中一個圖標；或，

在檢測到所進入的新界面的工具欄區(qū)域中的返回主頁圖標被觸摸后，在返回的主頁中第一區(qū)域顯示對應新界面顯示頻道的內容。

進一步的，本發(fā)明還提供一種處理設備。

圖11是本發(fā)明的一種處理設備的示意性方框圖。

如圖11所示，處理設備包括：存儲器111和處理器112。

存儲器111，用于存儲程序，

處理器112，用于執(zhí)行所述存儲器111存儲的以下程序：

檢測當前界面的手勢操作，所述當前界面預先劃分為跟隨手勢移動的第一區(qū)域和不隨手勢移動的第二區(qū)域；

在所述手勢操作符合預定手勢時，切換進入包含所述第一區(qū)域的內容的新界面。

處理器112還用于執(zhí)行所述存儲器111存儲的以下程序：

在所述手勢操作為上滑手勢時，所述第一區(qū)域的內容跟隨所述手勢向上移動，與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面；或，

在所述手勢操作為下拉手勢時，所述第一區(qū)域的內容跟隨所述手勢向下移動同時進行后臺刷新，再反彈向上移動，所述后臺刷新后的內容與在頂部位置顯示的新加入的第三區(qū)域的內容拼接形成新界面。

需說明的是，存儲器111存儲的其他程序，具體參見前面方法流程中的描述，此處不再贅述，處理器112還用于執(zhí)行存儲器111存儲的其他程序。

上文中已經參考附圖詳細描述了根據(jù)本發(fā)明的技術方案。

此外，根據(jù)本發(fā)明的方法還可以實現(xiàn)為一種計算機程序，該計算機程序包括用于執(zhí)行本發(fā)明的上述方法中限定的上述各步驟的計算機程序代碼指令。或者，根據(jù)本發(fā)明的方法還可以實現(xiàn)為一種計算機程序產品，該計算機程序產品包括計算機可讀介質，在該計算機可讀介質上存儲有用于執(zhí)行本發(fā)明的上述方法中限定的上述功能的計算機程序。本領域技術人員還將明白的是，結合這里的公開所描述的各種示例性邏輯塊、模塊、電路和算法步驟可以被實現(xiàn)為電子硬件、計算機軟件或兩者的組合。

附圖中的流程圖和框圖顯示了根據(jù)本發(fā)明的多個實施例的系統(tǒng)和方法的可能實現(xiàn)的體系架構、功能和操作。在這點上，流程圖或框圖中的每個方框可以代表一個模塊、程序段或代碼的一部分，所述模塊、程序段或代碼的一部分包含一個或多個用于實現(xiàn)規(guī)定的邏輯功能的可執(zhí)行指令。也應當注意，在有些作為替換的實現(xiàn)中，方框中所標記的功能也可以以不同于附圖中所標記的順序發(fā)生。例如，兩個連續(xù)的方框實際上可以基本并行地執(zhí)行，它們有時也可以按相反的順序執(zhí)行，這依所涉及的功能而定。也要注意的是，框圖和/或流程圖中的每個方框、以及框圖和/或流程圖中的方框的組合，可以用執(zhí)行規(guī)定的功能或操作的專用的基于硬件的系統(tǒng)來實現(xiàn)，或者可以用專用硬件與計算機指令的組合來實現(xiàn)。

以上已經描述了本發(fā)明的各實施例，上述說明是示例性的，并非窮盡性的，并且也不限于所披露的各實施例。在不偏離所說明的各實施例的范圍和精神的情況下，對于本技術領域的普通技術人員來說許 多修改和變更都是顯而易見的。本文中所用術語的選擇，旨在最好地解釋各實施例的原理、實際應用或對市場中的技術的改進，或者使本技術領域的其它普通技術人員能理解本文披露的各實施例。