一種布局用戶界面的方法、裝置和系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于人機(jī)交互領(lǐng)域，尤其涉及一種布局用戶界面的方法、裝置和系統(tǒng)。
【背景技術(shù)】
[0002]用戶界面(User Interface，UI)是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換。UI是介于使用者與硬件而設(shè)計(jì)彼此之間交互溝通相關(guān)軟件，目的在于使得用戶能夠方便有效率地去操作硬件以達(dá)成雙向之交互，完成所希望借助硬件完成的工作。UI定義廣泛，包含了人機(jī)交互與圖形使用者接口。凡參與人類與機(jī)械的信息交流的領(lǐng)域都存在著用戶界面。優(yōu)秀的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。
[0003]從用戶體驗(yàn)角度而言，用戶是希望經(jīng)?？吹礁潞妥兓腢I。從運(yùn)營(yíng)方角度而言，通過(guò)UI的改變來(lái)增加廣告位或者修改廣告位布局等需求也是合理的。因此，在UI產(chǎn)品上線后，如何按照用戶需求或喜好，隨時(shí)、高效地變換UI，是業(yè)界關(guān)注的課題。
[0004]現(xiàn)有的變換UI的方法往往是從程序內(nèi)部配置文件以加載界面布局文件，或者，在程序代碼里直接配置界面布局文件，待代碼運(yùn)行至配置界面布局文件的地方時(shí)，直接讀取界面布局文件，從而變換UI。
[0005]然而，由于程序代碼的固化，因此，上述現(xiàn)有的變換UI的方法，不僅使得UI的內(nèi)容信息是固定的，而且UI的布局也是固定的；一旦UI產(chǎn)品上線后，很難對(duì)UI的布局和內(nèi)容等做出改變。

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

[0006]本發(fā)明的目的在于提供一種布局用戶界面的方法、裝置和系統(tǒng)，旨在解決現(xiàn)有的UI變換方法在產(chǎn)品上線后很難對(duì)UI的布局和內(nèi)容等做出改變的技術(shù)問(wèn)題。
[0007]本發(fā)明是這樣實(shí)現(xiàn)的，一種布局用戶界面的方法，所述方法包括:
[0008]向服務(wù)器發(fā)送下載布局信息文件和內(nèi)容信息文件的請(qǐng)求；
[0009]從所述服務(wù)器下載所述服務(wù)器根據(jù)所述請(qǐng)求提供的布局信息文件和內(nèi)容信息文件；
[0010]對(duì)所述從服務(wù)器下載的布局信息文件和內(nèi)容信息文件進(jìn)行解析；
[0011]根據(jù)所述解析的結(jié)果在第一客戶端的當(dāng)前用戶界面布局元素。
[0012]本發(fā)明的另一目的在于提供一種布局用戶界面的裝置，所述裝置包括:
[0013]下載請(qǐng)求模塊，用于向服務(wù)器發(fā)送下載布局信息文件和內(nèi)容信息文件的請(qǐng)求；
[0014]下載模塊，用于從所述服務(wù)器下載所述服務(wù)器根據(jù)所述請(qǐng)求提供的布局信息文件和內(nèi)容信息文件；
[0015]解析模塊，用于對(duì)所述從服務(wù)器下載的布局信息文件和內(nèi)容信息文件進(jìn)行解析；
[0016]界面布局模塊，用于根據(jù)所述解析的結(jié)果在第一客戶端的當(dāng)前用戶界面布局元素。
[0017]本發(fā)明的另一目的在于提供一種布局用戶界面的系統(tǒng)，所述系統(tǒng)包括第一客戶端和服務(wù)器，所述第一客戶端包括下載請(qǐng)求模塊、下載模塊、解析模塊和界面布局模塊；
[0018]所述下載請(qǐng)求模塊，用于向所述服務(wù)器發(fā)送下載布局信息文件和內(nèi)容信息文件的請(qǐng)求；
[0019]所述下載模塊，用于對(duì)所述從服務(wù)器下載的布局信息文件和內(nèi)容信息文件進(jìn)行解析；
[0020]所述解析模塊，用于對(duì)所述服務(wù)器根據(jù)所述請(qǐng)求提供的布局信息文件和內(nèi)容信息文件進(jìn)行解析；
[0021]所述界面布局模塊，用于根據(jù)所述解析的結(jié)果在所述第一客戶端的當(dāng)前用戶界面布局元素；
[0022]所述服務(wù)器，用于存儲(chǔ)在第二客戶端編輯并通過(guò)所述二客戶端上傳的布局信息文件和內(nèi)容信息文件，在收到所述下載請(qǐng)求模塊發(fā)送的所述請(qǐng)求后，根據(jù)所述請(qǐng)求提供布局信息文件和內(nèi)容信息文件，向所述第一客戶端返回所述第一客戶端請(qǐng)求的布局信息文件和內(nèi)容信息文件。
[0023]從上述本發(fā)明實(shí)施例可知，在服務(wù)器收到請(qǐng)求后，可以根據(jù)請(qǐng)求提供布局信息文件和內(nèi)容信息文件供第一客戶端下載。由于布局信息文件和內(nèi)容信息文件可以事先隨時(shí)由運(yùn)維人員在第二客戶端編輯好后上傳至服務(wù)器，而不是被固化在程序代碼中，因此，相比于現(xiàn)有技術(shù)，本發(fā)明提供的方法，用于布局用戶界面的布局信息文件和內(nèi)容信息文件可以根據(jù)需要隨時(shí)更新，即使在UI產(chǎn)品上線后，用戶界面的變更也非常容易，不僅增強(qiáng)了 UI產(chǎn)品在布局用戶界面方面的靈活性，而且減小了 UI產(chǎn)品的運(yùn)維成本。
【附圖說(shuō)明】
[0024]圖1是本發(fā)明實(shí)施例一提供的布局用戶界面的方法的實(shí)現(xiàn)流程示意圖；
[0025]圖2是本發(fā)明實(shí)施例二提供的布局用戶界面的方法的實(shí)現(xiàn)流程示意圖；
[0026]圖3是本發(fā)明實(shí)施例三提供的布局用戶界面的方法的實(shí)現(xiàn)流程示意圖；
[0027]圖4是本發(fā)明實(shí)施例提供的場(chǎng)景布局中布局元素的示意圖；
[0028]圖5是本發(fā)明實(shí)施例四提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0029]圖6是本發(fā)明實(shí)施例五提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0030]圖7是本發(fā)明實(shí)施例六提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0031]圖8-a是本發(fā)明實(shí)施例八提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0032]圖8-b是本發(fā)明實(shí)施例九提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0033]圖8-c是本發(fā)明實(shí)施例十提供的布局用戶界面的裝置的結(jié)構(gòu)示意圖；
[0034]圖9是本發(fā)明實(shí)施例十一提供的布局用戶界面的系統(tǒng)的結(jié)構(gòu)示意圖；
圖10是本發(fā)明實(shí)施例提供的5X10階矩陣網(wǎng)格的場(chǎng)景布局、擺放4X3階矩陣網(wǎng)格的海報(bào)不意圖；
圖11是本發(fā)明實(shí)施例提供的遍歷尋找可以擺放4X3階矩陣網(wǎng)格的海報(bào)的位置示意圖；
圖12是本發(fā)明實(shí)施例提供的松手時(shí)元素落下的位置不能放置4X 3階矩陣網(wǎng)格的海報(bào)示意圖； 圖13是本發(fā)明實(shí)施例提供的尋找最近的可放置點(diǎn)將海報(bào)這一元素落下示意圖。
【具體實(shí)施方式】
[0035]為了使本發(fā)明的目的、技術(shù)方案及有益效果更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0036]本發(fā)明實(shí)施例提供一種布局用戶界面的方法，所述方法包括:向服務(wù)器發(fā)送下載布局信息文件和內(nèi)容信息文件的請(qǐng)求；從所述服務(wù)器下載所述服務(wù)器根據(jù)所述請(qǐng)求提供的布局信息文件和內(nèi)容信息文件；對(duì)所述從服務(wù)器下載的布局信息文件和內(nèi)容信息文件進(jìn)行解析；根據(jù)所述解析的結(jié)果在第一客戶端的當(dāng)前用戶界面布局元素。本發(fā)明實(shí)施例還提供相應(yīng)的布局用戶界面的裝置和系統(tǒng)。以下分別進(jìn)行詳細(xì)說(shuō)明。
[0037]請(qǐng)參閱附圖1，是本發(fā)明實(shí)施例一提供的布局用戶界面的方法的實(shí)現(xiàn)流程，主要包括以下步驟SlOl至步驟S104:
[0038]S101,向服務(wù)器發(fā)送下載布局信息文件和內(nèi)容信息文件的請(qǐng)求。
[0039]在本實(shí)施例中，布局信息文件包含場(chǎng)景布局的網(wǎng)格數(shù)(即mXn個(gè)矩形網(wǎng)格組成的mXn階矩陣)、每一個(gè)元素在mXn個(gè)網(wǎng)格構(gòu)成的場(chǎng)景布局中的位置信息、該元素的鄰居元素索引和該元素的元素版本號(hào)等，而內(nèi)容信息文件包含每個(gè)元素的模板類型、此模板需要包含的圖片地址、是否輪播、點(diǎn)擊事件等屬性以及和該元素的元素版本號(hào)等。
[0040]S102，從服務(wù)器下載所述服務(wù)器根據(jù)請(qǐng)求提供的布局信息文件和內(nèi)容信息文件。
[0041]在本實(shí)施例中，服務(wù)器并非只要收到客戶端的請(qǐng)求就向該客戶端提供布局信息文件和內(nèi)容信息文件。例如，有時(shí)客戶端當(dāng)前存有的布局信息文件和內(nèi)容信息文件是最新的，在此情形下，服務(wù)器沒(méi)有必要再向客戶端提供布局信息文件和內(nèi)容信息文件，因此，服務(wù)器根據(jù)客戶端發(fā)送的請(qǐng)求的內(nèi)容，從而提供布局信息文件和內(nèi)容信息文件被客戶端設(shè)備下載。
[0042]S103，對(duì)從服務(wù)器下載的布局信息文件和內(nèi)容信息文件進(jìn)行解析。
[0043]S104，根據(jù)步驟S103所解析的結(jié)果在第一客戶端的當(dāng)前用戶界面布局元素。
[0044]需要說(shuō)明的是，本實(shí)施例中，第一客戶端和第二客戶端是不同設(shè)備上的兩個(gè)客戶端，其中，第一客戶端用于在用戶界面顯示這些布局完成的元素，而本發(fā)明實(shí)施例涉及的第二客戶端，是另一設(shè)備上供運(yùn)維人員用于生成布局信息文件和內(nèi)容信息文件并上傳至服務(wù)器的應(yīng)用程序。如前所述，布局信息文件所包含場(chǎng)景布局以mXn個(gè)矩形網(wǎng)格組成的mXn階矩陣表示。在本實(shí)施例中，元素就是mXn階矩陣網(wǎng)格中的任意一個(gè)矩形網(wǎng)格。當(dāng)根據(jù)步驟S103所解析的結(jié)果在第一客戶端的當(dāng)前用戶界面布局這些元素時(shí)，就可以變換成新的用戶界面。具體地，根據(jù)所解析的結(jié)果中的布局、內(nèi)容等信息進(jìn)行繪制，在用戶按上下左右鍵時(shí)，可以按照布局信息中元素之間的鄰居關(guān)系進(jìn)行焦點(diǎn)跳轉(zhuǎn)，用戶點(diǎn)擊某個(gè)元素后，根據(jù)元素內(nèi)容的響應(yīng)規(guī)則，啟動(dòng)新應(yīng)用并傳參。
[0045]從上述附圖1示例的布局用戶界面的方法可知，，在服務(wù)器收到第一客戶端發(fā)送的請(qǐng)求后，可以根據(jù)請(qǐng)求提供布局信息文件和內(nèi)容信息文件供第一客戶端下載。由于布局信息文件和內(nèi)容信息文件可以事先隨時(shí)由運(yùn)維人員在第二客戶端編輯好后上傳至服務(wù)器，而不是被固化在程序代碼中，因此，相比于現(xiàn)有技術(shù)，本發(fā)明提供的方法，用于布局用戶界面的布局信息文件和內(nèi)容信息文件可以根據(jù)需要隨時(shí)更新，即使在UI產(chǎn)品上線后，用戶界面的變更也非常容易，不僅增強(qiáng)了 UI產(chǎn)品在布局用戶界面方面的靈活性，而且減小了 UI產(chǎn)品的運(yùn)維成本。
[0046]請(qǐng)參閱附圖2，是本發(fā)明實(shí)施例二提供的布局用戶界面的方法的實(shí)現(xiàn)流程，在本實(shí)施例中，向服務(wù)器發(fā)送的請(qǐng)求攜帶有第一客戶端最新頁(yè)面版本的版本號(hào)和所述最新頁(yè)面下所有元素最新版本的版本號(hào)。附圖2示例二的布局用戶界面的方法主要包括以下步驟S201至步驟S204: