界面信息的展示系統(tǒng)和方法
【專利摘要】一種界面信息的展示系統(tǒng)和方法，其應(yīng)用于服務(wù)器和用戶的客戶端之間，客戶端包括：顯示模塊，用于客戶端將其從服務(wù)器接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端顯示界面上的不同位置；卷動模塊，用于客戶端將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。該界面信息的展示系統(tǒng)和方法更加合理。
【專利說明】
界面信息的展示系統(tǒng)和方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種界面信息的展示系統(tǒng)和方法。
【【背景技術(shù)】】
[0002]隨著互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，人們的生活與互聯(lián)網(wǎng)愈來愈緊密，人們通過各種硬件設(shè)備瀏覽網(wǎng)絡(luò)頁面，當(dāng)人們使用觸摸屏設(shè)備時，通常情況下，展示在用戶眼前的界面信息從上至下分為三部分:標(biāo)題欄、展示區(qū)和功能欄，當(dāng)用戶瀏覽完當(dāng)前界面所展示的信息后，便可將界面向上滑動，這時瀏覽過的信息隨著向上移動，未被展示的信息從界面下方展示出來并隨著用戶的向上滑動操作，這部分內(nèi)容會繼續(xù)向上移動，用戶便可不斷地瀏覽展示區(qū)所展示的信息。
[0003]然而在現(xiàn)有技術(shù)中，當(dāng)展示區(qū)的信息向上移動時，標(biāo)題欄的展示情況通常有兩種:一種情況是展示區(qū)的信息向上移動的同時，標(biāo)題欄的信息也會與其同步向上移動直至消失于界面中，這種界面信息展示的方法只能將標(biāo)題欄的信息短暫地呈現(xiàn)在用戶眼前，展示區(qū)的信息隨著下拉欄的向下滑動而占據(jù)了整個界面，此刻標(biāo)題欄的重要信息被隱藏而無法隨時看到；另一種情況是展示區(qū)的信息向上移動時，標(biāo)題欄的信息保持原本的狀態(tài)不變，這種界面信息展示的方法中展示區(qū)在界面上的展示范圍沒有達到最大化。
【
【發(fā)明內(nèi)容】
】
[0004]為了克服現(xiàn)有技術(shù)中界面信息顯示不合理的問題，本發(fā)明提供了一種合理的界面信息的展示系統(tǒng)和方法。
[0005]本發(fā)明解決技術(shù)問題的方案是提供一種界面信息的展示系統(tǒng)，其應(yīng)用于服務(wù)器和用戶的客戶端之間，其特征在于:客戶端包括:顯示模塊，用于客戶端將其從服務(wù)器接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端顯示界面上的不同位置；卷動模塊，用于客戶端將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。
[0006]本發(fā)明解決技術(shù)問題的又一方案是提供一種界面信息的展示方法，其應(yīng)用于服務(wù)器和用戶的客戶端之間，其特征在于:包括以下步驟:步驟S1:客戶端將其從服務(wù)器接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端顯示界面上的不同位置；步驟S2:客戶端將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。
[0007]優(yōu)選地，客戶端的顯示界面包括標(biāo)題欄和展示區(qū)，在步驟S2中，當(dāng)向上滑動客戶端界面時，標(biāo)題欄的信息同步向上卷動且按比例縮小。
[0008]優(yōu)選地，在步驟S2中，當(dāng)向下滑動客戶端顯示界面時，標(biāo)題欄的信息同步向下卷動且按比例放大，標(biāo)題欄的信息始終保留在界面上。
[0009]優(yōu)選地，客戶端的界面進一步包括一功能欄，在步驟S2中，當(dāng)用戶在向上滑動客戶端界面時，功能欄消隱于顯示界面中。
[0010]優(yōu)選地，在步驟SI中，初始狀態(tài)標(biāo)題欄的信息高度占顯示界面高度的15%?50%o
[0011]優(yōu)選地，在步驟S2中，當(dāng)標(biāo)題欄的信息向上卷動而縮小到最小值時，其高度占顯示界面高度的1%?10%。
[0012]優(yōu)選地，在界面卷動過程中，標(biāo)題欄被縮放的高度與展示區(qū)被縮放的高度相等。
[0013]優(yōu)選地，在界面卷動過程中，展示區(qū)的寬度不變，其高度增加至最高為顯示界面高度的90%?99%。
[0014]與現(xiàn)有技術(shù)相比，本發(fā)明第一實施例界面信息的展示系統(tǒng)和第二實施例界面信息的展示方法通過卷動模塊將標(biāo)題欄的信息進行大小控制，當(dāng)用戶向上滑動界面時，展示區(qū)的信息向上移動的同時，標(biāo)題欄的信息同步向上移動并進行縮放最后保留在界面之上，這種界面信息的展示方法將標(biāo)題欄的信息動態(tài)呈現(xiàn)在用戶眼前，且不會隨著展示區(qū)的信息向上滾動而使標(biāo)題欄的信息不被隱藏且可以隨時看到。當(dāng)標(biāo)題欄向上卷動而逐漸縮小時，展示區(qū)的高度逐漸增加，當(dāng)用戶在客戶端向上滑動操作時，滑動模塊將該指令發(fā)送至顯示模塊，這時顯示模塊將功能欄消隱于界面中，使展示區(qū)展示信息的空間更大一些，展示區(qū)在界面上的展示范圍可以達到最大化。
【【附圖說明】】
[0015]圖1是本發(fā)明第一實施例界面信息的展示系統(tǒng)的模塊結(jié)構(gòu)示意圖。
[0016]圖2是本發(fā)明第一實施例界面信息的展示系統(tǒng)應(yīng)用于客戶端的界面第一狀態(tài)展示示意圖。
[0017]圖3是本發(fā)明第一實施例界面信息的展示系統(tǒng)應(yīng)用于客戶端的界面第二狀態(tài)展示示意圖。
[0018]圖4是本發(fā)明第二實施例界面信息的展示方法流程圖。
【【具體實施方式】】
[0019]為了使本發(fā)明的目的，技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施實例，對本發(fā)明進行進一步詳細說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0020]請參閱圖1，本發(fā)明界面信息的展示系統(tǒng)I應(yīng)用于服務(wù)器11和用戶的客戶端13之間，客戶端13與服務(wù)器20之間通過通信網(wǎng)絡(luò)進行雙向通信，該通信網(wǎng)絡(luò)可以是因特網(wǎng)、一個或多個內(nèi)部網(wǎng)、局域網(wǎng)(LAN)、廣域網(wǎng)(WLAN)、存儲局域網(wǎng)(SAN)等，或其適當(dāng)組合，其通信協(xié)議可由應(yīng)用程序開發(fā)商任意選擇。服務(wù)器11包括信息模塊111和發(fā)送模塊112:
[0021]信息模塊111，用于存儲各種網(wǎng)絡(luò)信息。
[0022]發(fā)送模塊112，用于將信息模塊111存儲的信息發(fā)送至客戶端13。
[0023]當(dāng)客戶端13為觸摸屏設(shè)備時，該客戶端13的內(nèi)部包括接收模塊131、顯示模塊132、滑動模塊133和卷動模塊134:
[0024]接收模塊131，用于客戶端13將發(fā)送模塊112發(fā)送過來的信息進行接收。
[0025]顯示模塊132，用于將接收模塊131從服務(wù)器11接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端13顯示界面上的不同位置。
[0026]滑動模塊133，用于分析處理用戶對界面的滑動操作。
[0027]卷動模塊134，用于客戶端13將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。
[0028]請參閱圖2，客戶端13的界面上展示的內(nèi)容從上至下依次包括:
[0029]標(biāo)題欄135，用于展示文章標(biāo)題和/或廣告內(nèi)容和/或其他重要信息，如在交友軟件中，該標(biāo)題欄135用于顯示用戶的個人資料。
[0030]展示區(qū)136，用于展示與標(biāo)題欄135相關(guān)的內(nèi)容，如在交友軟件中，該展示區(qū)136用于顯示用戶上傳的照片和/或用戶的最新動態(tài)和/或其他文字信息。
[0031]功能欄137，用于展不界面的功能列表，其尚度為顯不界面尚度的5%?15%。
[0032]指示欄138，用于指示界面的卷動情況。
[0033]指示欄138右邊包括一指示塊1381，該指示塊1381用于指示界面卷動的位置。
[0034]請進一步參閱圖3，本發(fā)明界面信息的展示系統(tǒng)I的工作原理為:
[0035]服務(wù)器11發(fā)送網(wǎng)絡(luò)信息。服務(wù)器11的信息模塊111將其內(nèi)存儲的網(wǎng)絡(luò)信息通過發(fā)送模塊112發(fā)送至客戶端13。
[0036]客戶端13展示界面信息?？蛻舳?3的接收模塊131接收到服務(wù)器11發(fā)送的網(wǎng)絡(luò)信息后通過顯示模塊132將其顯示在界面上，顯示模塊132根據(jù)信息的類型分別將其顯示在界面中的標(biāo)題欄135和展示區(qū)136處，此時標(biāo)題欄135的信息高度占顯示界面高度的15%?50%，最佳值為30%，此為顯示界面的初始狀態(tài)。
[0037]用戶滑動界面，功能欄137消隱。用戶在客戶端13向上滑動操作時，滑動模塊133將該指令發(fā)送至顯示模塊132，這時顯示模塊133將界面中的功能欄137消隱；同時滑動模塊133將用戶的向上滑動操作指令發(fā)送至卷動模塊134，卷動模塊134進行分析處理后反饋給顯示模塊132。
[0038]界面卷動。隨著用戶向上滑動界面，顯示模塊132接收到卷動模塊132的反饋消息后，界面中標(biāo)題欄135的信息向上移動，整個標(biāo)題欄135的高度逐漸縮小，展示區(qū)136隨其同步向上移動，這時展示區(qū)136的高度逐漸增大，消隱的功能欄137所在區(qū)域擴展為展示區(qū)136的一部分，展示區(qū)136中已展示的信息向上移動的同時未被展示的信息從界面下方展示出來。當(dāng)展示區(qū)136占滿時，已展示的信息會隨著展示區(qū)136下面信息的出現(xiàn)而消隱于展示區(qū)136的上面。在界面卷動過程中，標(biāo)題欄135向上移動的高度與展示區(qū)136向上移動的高度相等，展示區(qū)136的寬度不變，標(biāo)題欄135的信息是等比例縮小的，即其寬度的縮小比例與高度的縮小比例相同。標(biāo)題欄135會一直保留在界面上，當(dāng)標(biāo)題欄135的信息向上卷動而縮小到最小值時，其高度占顯示界面高度的I %?10%，最佳值為5%，展示區(qū)136由于標(biāo)題欄135的縮小其高度增加至占顯示界面高度的75%?94%，由于消隱的功能欄137擴展為展示區(qū)136的一部分，該部分使展示區(qū)136的高度又增加了顯示界面高度的5%?15%，整體來看，展示區(qū)136的高度增加至顯示界面高度的90%?99%，指示欄138的指示塊1381指示界面卷動的位置。
[0039]同理，當(dāng)用戶要回放展示區(qū)136的信息時，在客戶端13進行向下滑動操作，這時標(biāo)題欄135和展示區(qū)136的信息同步向下移動，在界面卷動過程中，標(biāo)題欄135向下移動的高度與展示區(qū)136向下移動的高度相等，展示區(qū)136的寬度不變，標(biāo)題欄135的信息是等比例放大的，即其寬度的放大比例與高度的放大比例相同，當(dāng)標(biāo)題欄135的信息向下卷動而放大到最大值時，其高度占整個界面高度的15%?50%。
[0040]作為一種變形，當(dāng)客戶端13為需要用鼠標(biāo)控制界面的硬件設(shè)備(比如電腦)時，界面右邊的指示欄138用于用戶對界面上展示的信息進行滑動操作，指示塊1381為用戶對界面上的信息進行上下卷動時的操控點，其位置可上下移動。當(dāng)用戶向下拉動指示塊1381時，界面上的信息向上移動；當(dāng)用戶向上拉動指示塊1381時，界面上的信息向下移動，界面的卷動狀況和觸摸屏客戶端13的卷動狀況相同。
[0041]在界面展示中，標(biāo)題欄135、展示區(qū)136和功能欄137的位置可互換，標(biāo)題欄135被縮放后在界面上保留的位置不作限定。
[0042]請參閱圖4，本發(fā)明第二實施例界面信息的展示方法2，其應(yīng)用于服務(wù)器11和用戶的客戶端13之間，以下方法中提到的結(jié)構(gòu)請參閱本發(fā)明第一實施例界面信息的展示系統(tǒng)I的視圖和編號，其包括以下步驟:
[0043]步驟S1:服務(wù)器11發(fā)送網(wǎng)絡(luò)信息。服務(wù)器11的信息模塊111將其內(nèi)存儲的網(wǎng)絡(luò)信息通過發(fā)送模塊112發(fā)送至客戶端13。
[0044]步驟S2:客戶端13展示界面信息。客戶端13的接收模塊131接收到服務(wù)器11發(fā)送的網(wǎng)絡(luò)信息后通過顯示模塊132將其顯示在界面上，顯示模塊132根據(jù)信息的類型分別將其顯示在界面中的標(biāo)題欄135和展示區(qū)136處，此時標(biāo)題欄135的信息高度占顯示界面高度的15%?50%，最佳值為30%，此為顯示界面的初始狀態(tài)。
[0045]步驟S3:用戶滑動界面，功能欄137消隱。用戶在客戶端13向上滑動操作時，滑動模塊133將該指令發(fā)送至顯示模塊132，這時顯示模塊133將界面中的功能欄137消隱；同時滑動模塊133將用戶的向上滑動操作指令發(fā)送至卷動模塊134，卷動模塊134進行分析處理后反饋給顯示模塊132。
[0046]步驟S4:界面卷動。顯示模塊132接收到卷動模塊132的反饋消息后，界面中標(biāo)題欄135的信息隨著用戶向上滑動界面而同步向上卷動，展示區(qū)136的信息同步向上移動，展示區(qū)136中已展示的信息向上移動的同時未被展示的信息從展示區(qū)136下方展示出來。當(dāng)展示區(qū)136占滿時，已展示的信息會隨著展示區(qū)136下面信息的出現(xiàn)而消隱于展示區(qū)136的上面。在界面卷動過程中，標(biāo)題欄135向上移動的高度與展示區(qū)136向上移動的高度相等，展示區(qū)136的寬度不變，標(biāo)題欄135的信息是等比例縮小的，即其寬度的縮小比例與高度的縮小比例相同。標(biāo)題欄135會一直保留在界面上，當(dāng)標(biāo)題欄135的信息向上卷動而縮小到最小值時，其高度占顯示界面高度的I %?10%，最佳值為5%，展示區(qū)136由于標(biāo)題欄135的縮小其高度增加至占顯示界面高度的75%?94%，由于消隱的功能欄137擴展為展示區(qū)136的一部分，該部分使展示區(qū)136的高度又增加了顯示界面高度的5%?15%，整體來看，展示區(qū)136的高度增加至顯示界面高度的90%?99%，指示欄138的指示塊1381指示界面卷動的位置。同理，當(dāng)用戶要回放展示區(qū)136的信息時，在客戶端13進行向下滑動操作，這時標(biāo)題欄135和展示區(qū)136的信息同步向下卷動，在界面卷動過程中，標(biāo)題欄135向下移動的高度與展示區(qū)136向下移動的高度相等，展示區(qū)136的寬度不變，標(biāo)題欄135的信息是等比例放大的，即其寬度的放大比例與高度的放大比例相同，當(dāng)標(biāo)題欄135的信息向下卷動而放大到最大值時，其高度占整個界面高度的15%?50%，最佳值為30%。
[0047]本發(fā)明第一實施例界面信息的展示系統(tǒng)I和第二實施例界面信息的展示方法2應(yīng)用于手機APP中的交友軟件時，界面上從上至下依次為:標(biāo)題欄135、展示區(qū)136和功能欄137，界面中的標(biāo)題欄135顯示用戶的個人資料，展示區(qū)136顯示用戶上傳的照片和/或用戶的最新動態(tài)和/或其他文字信息，功能欄137顯示該交友軟件的功能列表，當(dāng)手機用戶向上滑動界面時，功能欄137消隱于界面中，隨著手機用戶向上滑動界面，用戶的個人資料保留在界面上，其整體等比例縮小并整體向上移動，用戶上傳的照片和/或用戶的最新動態(tài)和/或其他文字信息也同步向上移動并保持寬度不變，其向上移動的高度與用戶的個人資料向上移動的高度相等。用戶上傳的照片和/或用戶的最新動態(tài)和/或其他文字信息占滿展示區(qū)136時，已展示的信息會隨著展示區(qū)136下面信息的出現(xiàn)而消隱于展示區(qū)136的上面，當(dāng)用戶的個人資料整體高度占界面高度的1%?10%時，其保留在界面上方，大小和位置不再隨著用戶向上滑動界面而變化。當(dāng)用戶要回放展示區(qū)136的信息時，其向下滑動界面，這時用戶的個人資料整體高度向下延伸且其寬度與高度等比例放大，展示區(qū)136的信息同步向下移動，其高度減小的同時寬度不變，在界面卷動過程中，展示區(qū)136向下移動的高度與標(biāo)題欄135向下移動的高度相等，當(dāng)標(biāo)題欄135的信息向下卷動而放大到其高度占顯示界面高度的15%?50%時，其保留在界面上方，大小和位置不再隨著用戶向下滑動界面而變化。
[0048]與現(xiàn)有技術(shù)相比，本發(fā)明第一實施例界面信息的展示系統(tǒng)I和第二實施例界面信息的展示方法2通過卷動模塊134將標(biāo)題欄135的信息進行大小控制，當(dāng)用戶向上滑動界面時，展示區(qū)136的信息向上移動的同時，標(biāo)題欄135的信息同步向上移動并進行縮放最后保留在界面之上，這種界面信息的展示方法2將標(biāo)題欄135的信息動態(tài)呈現(xiàn)在用戶眼前，且不會隨著展示區(qū)136的信息向上滾動而使標(biāo)題欄135的信息不被隱藏且可以隨時看到。當(dāng)標(biāo)題欄135向上卷動而逐漸縮小時，展示區(qū)136的高度逐漸增加，當(dāng)用戶在客戶端13向上滑動操作時，滑動模塊133將該指令發(fā)送至顯示模塊132，這時顯示模塊133將功能欄137消隱于界面中，使展示區(qū)136展示信息的空間更大一些，展示區(qū)136在界面上的展示范圍可以達到最大化。
[0049]以上所述僅為本發(fā)明的較佳實施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的原則之內(nèi)所作的任何修改，等同替換和改進等均應(yīng)包含本發(fā)明的保護范圍之內(nèi)。
【主權(quán)項】
1.一種界面信息的展示系統(tǒng)，其應(yīng)用于服務(wù)器和用戶的客戶端之間，其特征在于:客戶端包括: 顯示模塊，用于客戶端將其從服務(wù)器接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端顯示界面上的不同位置； 卷動模塊，用于客戶端將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。2.—種界面信息的展示方法，其應(yīng)用于服務(wù)器和用戶的客戶端之間，其特征在于:包括以下步驟: 步驟S1:客戶端將其從服務(wù)器接收的信息分析處理并根據(jù)信息的類型分別對應(yīng)顯示在客戶端顯示界面上的不同位置； 步驟S2:客戶端將其顯示界面上展示的部分信息進行縮放并將被縮放的信息保留在顯示界面上。3.如權(quán)利要求2所述的界面信息的展示方法，其特征在于:客戶端的顯示界面包括標(biāo)題欄和展示區(qū)，在步驟S2中，當(dāng)向上滑動客戶端界面時，標(biāo)題欄的信息同步向上卷動且按比例縮小。4.如權(quán)利要求3所述的界面信息的展示方法，其特征在于:在步驟S2中，當(dāng)向下滑動客戶端顯示界面時，標(biāo)題欄的信息同步向下卷動且按比例放大，標(biāo)題欄的信息始終保留在界面上。5.如權(quán)利要求2所述的界面信息的展示方法，其特征在于:客戶端的界面進一步包括一功能欄，在步驟S2中，當(dāng)用戶在向上滑動客戶端界面時，功能欄消隱于顯示界面中。6.如權(quán)利要求2所述的界面信息的展示方法，其特征在于:在步驟SI中，初始狀態(tài)標(biāo)題欄的信息高度占顯示界面高度的15%?50%。7.如權(quán)利要求3所述的界面信息的展示方法，其特征在于:在步驟S2中，當(dāng)標(biāo)題欄的信息向上卷動而縮小到最小值時，其高度占顯示界面高度的1%?10%。8.如權(quán)利要求7所述的界面信息的展示方法，其特征在于:在界面卷動過程中，標(biāo)題欄被縮放的高度與展示區(qū)被縮放的高度相等。9.如權(quán)利要求8所述的界面信息的展示方法，其特征在于:在界面卷動過程中，展示區(qū)的寬度不變，其高度增加至最高為顯示界面高度的90 %?99 %。
【文檔編號】G06F3/0481GK105988656SQ201510076843
【公開日】2016年10月5日
【申請日】2015年2月13日
【發(fā)明人】彭明鑫
【申請人】深圳積友聚樂科技有限公司