CN105573773A - 一种布局用户界面的方法、装置和系统 - Google Patents

Abstract

本发明提供一种布局用户界面的方法、装置和系统，旨在解决现有的UI变换方法在产品上线后很难对UI的布局和内容等做出改变的技术问题。所述方法包括：向服务器发送下载布局信息文件和内容信息文件的请求；从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；对所述从服务器下载的布局信息文件和内容信息文件进行解析；根据所述解析的结果在第一客户端的当前用户界面布局元素。本发明提供的方法，用于布局用户界面的布局信息文件和内容信息文件可以根据需要随时更新，即使在UI产品上线后，用户界面的变更也非常容易，不仅增强了UI产品在布局用户界面方面的灵活性，而且减小了UI产品的运维成本。

Description

一种布局用户界面的方法、装置和系统

技术领域

本发明属于人机交互领域，尤其涉及一种布局用户界面的方法、装置和系统。

背景技术

用户界面(UserInterface，UI)是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。UI是介于使用者与硬件而设计彼此之间交互沟通相关软件，目的在于使得用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成的工作。UI定义广泛，包含了人机交互与图形使用者接口。凡参与人类与机械的信息交流的领域都存在着用户界面。优秀的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

从用户体验角度而言，用户是希望经常看到更新和变化的UI。从运营方角度而言，通过UI的改变来增加广告位或者修改广告位布局等需求也是合理的。因此，在UI产品上线后，如何按照用户需求或喜好，随时、高效地变换UI，是业界关注的课题。

现有的变换UI的方法往往是从程序内部配置文件以加载界面布局文件，或者，在程序代码里直接配置界面布局文件，待代码运行至配置界面布局文件的地方时，直接读取界面布局文件，从而变换UI。

然而，由于程序代码的固化，因此，上述现有的变换UI的方法，不仅使得UI的内容信息是固定的，而且UI的布局也是固定的；一旦UI产品上线后，很难对UI的布局和内容等做出改变。

发明内容

本发明的目的在于提供一种布局用户界面的方法、装置和系统，旨在解决现有的UI变换方法在产品上线后很难对UI的布局和内容等做出改变的技术问题。

本发明是这样实现的，一种布局用户界面的方法，所述方法包括：

向服务器发送下载布局信息文件和内容信息文件的请求；

从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；

对所述从服务器下载的布局信息文件和内容信息文件进行解析；

根据所述解析的结果在第一客户端的当前用户界面布局元素。

本发明的另一目的在于提供一种布局用户界面的装置，所述装置包括：

下载请求模块，用于向服务器发送下载布局信息文件和内容信息文件的请求；

下载模块，用于从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；

解析模块，用于对所述从服务器下载的布局信息文件和内容信息文件进行解析；

界面布局模块，用于根据所述解析的结果在第一客户端的当前用户界面布局元素。

本发明的另一目的在于提供一种布局用户界面的系统，所述系统包括第一客户端和服务器，所述第一客户端包括下载请求模块、下载模块、解析模块和界面布局模块；

所述下载请求模块，用于向所述服务器发送下载布局信息文件和内容信息文件的请求；

所述下载模块，用于对所述从服务器下载的布局信息文件和内容信息文件进行解析；

所述解析模块，用于对所述服务器根据所述请求提供的布局信息文件和内容信息文件进行解析；

所述界面布局模块，用于根据所述解析的结果在所述第一客户端的当前用户界面布局元素；

所述服务器，用于存储在第二客户端编辑并通过所述二客户端上传的布局信息文件和内容信息文件，在收到所述下载请求模块发送的所述请求后，根据所述请求提供布局信息文件和内容信息文件，向所述第一客户端返回所述第一客户端请求的布局信息文件和内容信息文件。

从上述本发明实施例可知，在服务器收到请求后，可以根据请求提供布局信息文件和内容信息文件供第一客户端下载。由于布局信息文件和内容信息文件可以事先随时由运维人员在第二客户端编辑好后上传至服务器，而不是被固化在程序代码中，因此，相比于现有技术，本发明提供的方法，用于布局用户界面的布局信息文件和内容信息文件可以根据需要随时更新，即使在UI产品上线后，用户界面的变更也非常容易，不仅增强了UI产品在布局用户界面方面的灵活性，而且减小了UI产品的运维成本。

附图说明

图1是本发明实施例一提供的布局用户界面的方法的实现流程示意图；

图2是本发明实施例二提供的布局用户界面的方法的实现流程示意图；

图3是本发明实施例三提供的布局用户界面的方法的实现流程示意图；

图4是本发明实施例提供的场景布局中布局元素的示意图；

图5是本发明实施例四提供的布局用户界面的装置的结构示意图；

图6是本发明实施例五提供的布局用户界面的装置的结构示意图；

图7是本发明实施例六提供的布局用户界面的装置的结构示意图；

图8-a是本发明实施例八提供的布局用户界面的装置的结构示意图；

图8-b是本发明实施例九提供的布局用户界面的装置的结构示意图；

图8-c是本发明实施例十提供的布局用户界面的装置的结构示意图；

图9是本发明实施例十一提供的布局用户界面的系统的结构示意图；

图10是本发明实施例提供的5×10阶矩阵网格的场景布局、摆放4×3阶矩阵网格的海报示意图；

图11是本发明实施例提供的遍历寻找可以摆放4×3阶矩阵网格的海报的位置示意图；

图12是本发明实施例提供的松手时元素落下的位置不能放置4×3阶矩阵网格的海报示意图；

图13是本发明实施例提供的寻找最近的可放置点将海报这一元素落下示意图。

具体实施方式

为了使本发明的目的、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供一种布局用户界面的方法，所述方法包括：向服务器发送下载布局信息文件和内容信息文件的请求；从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；对所述从服务器下载的布局信息文件和内容信息文件进行解析；根据所述解析的结果在第一客户端的当前用户界面布局元素。本发明实施例还提供相应的布局用户界面的装置和系统。以下分别进行详细说明。

请参阅附图1，是本发明实施例一提供的布局用户界面的方法的实现流程，主要包括以下步骤S101至步骤S104：

S101，向服务器发送下载布局信息文件和内容信息文件的请求。

在本实施例中，布局信息文件包含场景布局的网格数(即m×n个矩形网格组成的m×n阶矩阵)、每一个元素在m×n个网格构成的场景布局中的位置信息、该元素的邻居元素索引和该元素的元素版本号等，而内容信息文件包含每个元素的模板类型、此模板需要包含的图片地址、是否轮播、点击事件等属性以及和该元素的元素版本号等。

S102，从服务器下载所述服务器根据请求提供的布局信息文件和内容信息文件。

在本实施例中，服务器并非只要收到客户端的请求就向该客户端提供布局信息文件和内容信息文件。例如，有时客户端当前存有的布局信息文件和内容信息文件是最新的，在此情形下，服务器没有必要再向客户端提供布局信息文件和内容信息文件，因此，服务器根据客户端发送的请求的内容，从而提供布局信息文件和内容信息文件被客户端设备下载。

S103，对从服务器下载的布局信息文件和内容信息文件进行解析。

S104，根据步骤S103所解析的结果在第一客户端的当前用户界面布局元素。

需要说明的是，本实施例中，第一客户端和第二客户端是不同设备上的两个客户端，其中，第一客户端用于在用户界面显示这些布局完成的元素，而本发明实施例涉及的第二客户端，是另一设备上供运维人员用于生成布局信息文件和内容信息文件并上传至服务器的应用程序。如前所述，布局信息文件所包含场景布局以m×n个矩形网格组成的m×n阶矩阵表示。在本实施例中，元素就是m×n阶矩阵网格中的任意一个矩形网格。当根据步骤S103所解析的结果在第一客户端的当前用户界面布局这些元素时，就可以变换成新的用户界面。具体地，根据所解析的结果中的布局、内容等信息进行绘制，在用户按上下左右键时，可以按照布局信息中元素之间的邻居关系进行焦点跳转，用户点击某个元素后，根据元素内容的响应规则，启动新应用并传参。

从上述附图1示例的布局用户界面的方法可知，，在服务器收到第一客户端发送的请求后，可以根据请求提供布局信息文件和内容信息文件供第一客户端下载。由于布局信息文件和内容信息文件可以事先随时由运维人员在第二客户端编辑好后上传至服务器，而不是被固化在程序代码中，因此，相比于现有技术，本发明提供的方法，用于布局用户界面的布局信息文件和内容信息文件可以根据需要随时更新，即使在UI产品上线后，用户界面的变更也非常容易，不仅增强了UI产品在布局用户界面方面的灵活性，而且减小了UI产品的运维成本。

请参阅附图2，是本发明实施例二提供的布局用户界面的方法的实现流程，在本实施例中，向服务器发送的请求携带有第一客户端最新页面版本的版本号和所述最新页面下所有元素最新版本的版本号。附图2示例二的布局用户界面的方法主要包括以下步骤S201至步骤S204：

S201，向服务器发送下载布局信息文件和内容信息文件的请求。

本实施例中，步骤S201的实现方法与实施例一的步骤S101的实现方法完全相同，其中相关术语和概念等的说明或解释具体可参阅对步骤S101的说明或解释，此处不做赘述。

S202，从服务器下载所述服务器根据请求提供的最新布局信息文件和内容信息文件。

为了节省流量或者避免不必要的资源浪费，在本实施例中，服务器提供增量下载，即，客户端设备只从服务器下载最新布局信息文件和内容信息文件。在本实施例中，由于第一客户端向服务器发送的请求携带有第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，服务器可以根据请求携带的第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，向所述第一客户端提供最新布局信息文件和内容信息文件。

具体地，第一客户端在本地保存有一份当前版本的布局信息文件，其文件头部含有第一客户端当前页面版本的版本号和当前页面下所有元素当前版本的版本号。第一客户端向服务器发送请求从所述服务器下载布局信息文件和内容信息文件时，该请求的头部携带有第一客户端当前页面版本的版本号和当前页面下所有元素当前版本的版本号，如下所示的请求：

<version>

<tab1>1.1405</tab1>

<block1>1.1.1405</block1>

<block2>1.2.1405</block2>

<block3>1.3.1405</block3>

…

</version>

表示客户端当前页面版本的版本号是1.1405，版本号为1.1405的当前页面下元素block2当前版本的版本号是1.2.1405，元素block3当前版本的版本号是1.3.1405，等等。

服务器在收到上述第一客户端发送的请求后，首先对比该请求中第一客户端当前页面版本的版本号和服务器一侧保存的同一页面版本的版本号，如果两者一致，则说明第一客户端保存的布局信息文件已经是最新布局信息文件，服务器向第一客户端返回无增量布局信息即可，无需向第一客户端提供布局信息文件；如果两者不一致，则服务器会逐个对比该版本号的页面下每个元素的版本号与服务器这一侧保存的该版本号的页面下每个元素的版本号的差异。如果服务器这一侧的元素的版本号较新，则向第一客户端提供相应的布局信息文件，通知第一客户端更新此元素，如下所示是服务器根据前述示例的请求返回的响应：

<version>

<tab1>1.1406</tab1>

<block1>1.1.1405</block1>

<block3>1.3.1406</block3>

…

<block15>1.3.1406</block15>

</version>

<update><block3>…</block3></update>

<delete><block2/></delete>

<add><block15>…</block15></update>

表示：元素block3在服务器这一侧的版本的版本号为1.3.1406，比第一客户端保存的版本的版本号即1.3.1405要新，因此，服务器返回的响应中包含了元素block3最新版本的版本号1.3.1406和更新元素block3的布局信息的指示，同时也包含了删除元素block2和增加元素block15的指示。

第一客户端可以根据服务器返回的响应，从服务器下载所述服务器根据请求提供的最新布局信息文件和内容信息文件。

S203，对从服务器下载的布局信息文件和内容信息文件进行解析。

在本实施例中，是对从服务器下载的最新布局信息文件和内容信息文件进行解析。具体地，对从服务器下载的最新布局信息文件和内容信息文件进行解析包括：解析所述最新布局信息文件和内容信息文件，得到场景布局、每个元素模板在所述场景布局中的位置和所述每个元素模板的邻居；解析所述每个元素模板的内容；从第一客户端加载所述每个元素模板对应的显示模型和动画模型。在本实施例中，模型原型包括电影海报、广告轮播和应用icon等，动画原型包括板块切换动画、进出二级页面动画和广告轮播动画等。

S204，根据步骤S203所解析的结果在第一客户端的当前用户界面布局元素。

本实施例中，步骤S204的实现方法与实施例一的步骤S104的实现方法完全相同，其中相关术语和概念等的说明或解释具体可参阅对步骤S104的说明或解释，此处不做赘述。

从上述附图2示例的布局用户界面的方法可知，第一客户端向服务器发送的请求携带有第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，在服务器收到请求后，可以根据请求提供最新布局信息文件和内容信息文件供下载。由于布局信息文件和内容信息文件可以事先随时由运维人员在第二客户端编辑好后上传至服务器，而不是被固化在程序代码中，因此，相比于现有技术，本发明提供的方法，一方面，用于布局用户界面的布局信息文件和内容信息文件可以根据需要随时更新，即使在UI产品上线后，用户界面的变更也非常容易，不仅增强了UI产品在布局用户界面方面的灵活性，而且减小了UI产品的运维成本；另一方面，由于只是下载最新布局信息文件和内容信息文件，因此，也节省了带宽和流量等资源。

请参阅附图3，是本发明实施例三提供的布局用户界面的方法的实现流程，主要包括以下步骤S301至步骤S305：

S301，在第二客户端生成布局信息文件和内容信息文件后上传至服务器。

在本实施例中，运维人员可以在第二客户端通过编辑工具，输入一些编辑命令，生成布局信息文件和内容信息文件后上传至服务器；该服务器得以存储有在所述第二客户端编辑并通过所述第二客户端上传的所述布局信息文件和内容信息文件。这些编辑工具支持拖拽、拉伸和坐标输入等功能，可以直观定制主题颜色方案、修改界面布局、调整视频、广告、图片以及应用的位置等，也可以定制每个元素的类型和上传相应的资源，编辑完成后会保存为XML/json文件上传到服务器。

具体地，运维人员使用编辑工具，首先新建一张指定为m行n列的场景，在图形界面生成场景布局，该场景布局是由m×n个矩形网格组成的m×n阶矩阵网格，其单位为1×1的矩形网格。运维人员可以在编辑工具中指定此场景布局在屏幕中的位置为(x，y，w，h)，其单位是占据屏幕宽高的百分比，例如，假设场景布局在屏幕中的位置(x，y，w，h)具体为(0.3，0.3，0.8，0.6)，则表示该场景布局左上角起点为(screen_width×0.3，screen_height×0.3)，宽为screen_width×0.8，高为screen_height×0.6。然后，选择合适的元素模板，其大小为(w×h)，单位是所占据的矩形网格的数目，例如，电影海报的元素模板大小为(3×4)、图片广告的元素模板大小为(4×1)以及应用Icon的元素模板大小为(1×1)，分别表示电影海报的元素模板占据3×4个矩形网格、图片广告的元素模板占据4×1个矩形网格以及应用Icon的元素模板占据1×1个矩形网格。用户长按鼠标左键选中元素模板后，拖拽进入网格区域，松开鼠标左键落下摆放。若摆放在空白区域，元素模板显示高亮，松手则可以顺利放下。若摆放区域已经被占用，元素模板显示灰暗，松手则会弹向最近的空白区域并落下，形成一个已布局的元素。如果空白区域不够，则无法顺利放下，如附图4所示。

以如下5×10阶矩阵网格的场景布局、摆放4×3阶矩阵网格的海报为例(灰色为已摆放元素)，如附图10所示。

具体算法如下：

1)遍历寻找可以摆放4×3阶矩阵网格的海报的位置，其中，以海报左上角位置为准，如附图11所示；

2)如果松手时，元素落下的位置不能放置4×3阶矩阵网格的海报，如附图12所示；

3)那么，寻找最近的可放置点，将海报这一元素落下，如附图13所示。

在本实施例中，编辑工具会计算出每个元素模板的上下左右邻居元素，邻居元素作为元素的属性，运维人员也可以手动更改。运维人员可以指定元素的属性，例如：图片广告模板一类的元素模板，可以指定图片地址、是否轮播、点击后事件、版本号等模板属性。运维人员新增、删除、修改元素属性后，编辑工具都会为此元素生成一个新的元素版本号，也会生成新的页面版本的版本号。运维人员也可以手动更改上述版本号的属性，最终生成的布局信息文件，头部携带有页面版本的版本号和该页面下所有元素的元素版本号。如下所示：

<version>

<tab1>1.1405</tab1>

<block1>1.1.1405</block1>

<block2>1.2.1405</block2>

<block3>1.3.1405</block3>

…

</version>

页面的名称是tab1，页面版本的版本号是1.1405，第一个元素的名称是block1，其版本的版本号是1.1.1405。

在本实施例中，生成的布局信息文件包含场景布局的网格数(即m×n个矩形网格组成的m×n阶矩阵)、每一个元素在m×n个网格构成的场景布局中的位置信息、该元素的邻居元素索引和该元素的元素版本号等。以如下生成的布局信息文件为例：

<version>

<tab1>1.1405</tab1>

<block1>1.1.1405</block1>

<block2>1.2.1405</block2>

<block3>1.3.1405</block3>

…

</version>

<row>2</row>

<column>5</column>

<blocks>

<block1>

<x>0</x>

<y>0</y>

<w>1</w>

<h>1</h>

<left/>

<right>block2</righ>

<top/>

<down>block6</down>

</block1>

…

</blocks>

blocks结点含有所有元素的布局信息，元素block1所在位置(x，y，w，h)为(0，0，1，1)表示该元素左上角顶点位置是0行0列的基本单元，宽度是1个基本单元，高度是1个基本单元。有效的邻居信息是，右邻居是元素block2，下邻居是元素block6。因此，当焦点在block1时，按右键焦点会飞向block2，按下键焦点会飞向block6。

生成的内容信息文件包含每个元素的模板类型、此模板需要包含的图片地址、是否轮播、点击事件等属性以及和该元素的元素版本号等。

以如下生成的内容信息文件为例：

<version>

<tab1>1.1405</tab1>

<block1>1.1.1405</block1>

<block2>1.2.1405</block2>

<block3>1.3.1405</block3>

…

</version>

<blocks>

<block1>

<type>poster</type>

<img>http://tlauncher.tcl.com/images/bg1.png</img>

<text>变形金刚</text>

<action>…</action>

</block1>

…

</blocks>

blocks结点含有所有元素的内容信息，其中，元素block1类型为海报poster，img地址为http://tlauncher.tcl.com/images/bg1.png，文字信息为“变形金刚”，点击响应信息为启动电影应用。

S302，向服务器发送下载布局信息文件和内容信息文件的请求，所述服务器存储有在第二客户端编辑并通过所述第二客户端上传的布局信息文件和内容信息文件。

本实施例，步骤S302的实现方法与实施例一的步骤S101的实现方法完全相同，其中相关术语和概念等的说明或解释具体可参阅对步骤S101的说明或解释，此处不做赘述。

S303，从服务器下载所述服务器根据请求提供的布局信息文件和内容信息文件。

本实施例，步骤S303的实现方法与实施例一的步骤S102的实现方法完全相同，其中相关术语和概念等的说明或解释具体可参阅对步骤S102的说明或解释，此处不做赘述。

S304，对从服务器下载的布局信息文件和内容信息文件进行解析。

S305，根据步骤S304所解析的结果在客户端的当前用户界面布局元素。

本实施例中，步骤S305的实现方法与实施例一的步骤S104的实现方法完全相同，其中相关术语和概念等的说明或解释具体可参阅对步骤S104的说明或解释，此处不做赘述。

从上述附图3示例的布局用户界面的方法可知，服务器存储有在第二客户端编辑并通过所述第二客户端上传的布局信息文件和内容信息文件，而第一客户端向服务器发送的请求携带有第一客户端最新页面版本的版本号和所述最新页面下所有元素最新版本的版本号，在服务器收到请求后，可以根据请求提供布局信息文件和内容信息文件供第一客户端下载。由于布局信息文件和内容信息文件可以事先随时由运维人员在第二客户端编辑好后上传至服务器，而不是被固化在程序代码中，因此，相比于现有技术，本发明提供的方法，用于布局用户界面的布局信息文件和内容信息文件可以根据需要随时更新，即使在UI产品上线后，用户界面的变更也非常容易，不仅增强了UI产品在布局用户界面方面的灵活性，而且减小了UI产品的运维成本。

在上述附图1至附图3任一示例的布局用户界面的方法中，还可以包括客户端设备接收所述服务器返回的对元素进行删除和增加的指示信息。例如，在附图2示例的方法中，服务器返回的响应中包含了对元素block2删除和对元素block15增加的指示信息。

请参阅附图5，是本发明实施例四提供的布局用户界面的装置的结构示意图，附图5示例的布局用户界面的装置可以是附图1至附图3示例的布局用户界面的方法的执行主体。为了便于说明，附图5仅示出了与本发明实施例相关的部分。附图5示例的布局用户界面的装置主要包括下载请求模块501、下载模块502、解析模块503和界面布局模块504，各功能模块详细说明如下：

下载请求模块501，用于向服务器发送下载布局信息文件和内容信息文件的请求。

下载模块502，用于从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件。

解析模块503，用于对所述从服务器下载的布局信息文件和内容信息文件进行解析。

界面布局模块504，用于根据所述解析的结果在第一客户端的当前用户界面布局元素。

需要说明的是，以上附图5示例的布局用户界面的装置的实施方式中，各功能模块的划分仅是举例说明，实际应用中可以根据需要，例如相应硬件的配置要求或者软件的实现的便利考虑，而将上述功能分配由不同的功能模块完成，即将所述布局用户界面的装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。而且，实际应用中，本实施例中的相应的功能模块可以是由相应的硬件实现，也可以由相应的硬件执行相应的软件完成，例如，前述的下载请求模块，可以是具有执行前述向服务器发送下载布局信息文件和内容信息文件的请求的硬件，例如下载请求器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备；再如前述的解析模块，可以是执行对所述从服务器下载的布局信息文件和内容信息文件进行解析的硬件，例如解析器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备(本说明书提供的各个实施例都可应用上述描述原则)。

附图5示例的布局用户界面的装置中，下载请求模块401发送的请求携带有第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，下载模块402可以包括增量下载单元601，如附图6所示本发明实施例五提供的布局用户界面的装置。增量下载单元601用于从所述服务器下载所述服务器根据所述请求提供的最新布局信息文件和内容信息文件，所述最新布局信息文件和内容信息文件包含需要更新的元素的布局信息、内容信息以及在所述服务器一侧的版本的版本号。在本实施例中，由于第一客户端向服务器发送的请求携带有第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，服务器可以根据请求携带的第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，向所述第一客户端提供最新布局信息文件和内容信息文件。具体地，第一客户端在本地保存有一份当前版本的布局信息文件，其文件头部含有第一客户端当前页面版本的版本号和当前页面下所有元素当前版本的版本号。第一客户端向服务器发送请求从所述服务器下载布局信息文件和内容信息文件时，该请求的头部携带有第一客户端当前页面版本的版本号和当前页面下所有元素当前版本的版本号。服务器在收到上述第一客户端发送的请求后，首先对比该请求中第一客户端当前页面版本的版本号和服务器一侧保存的同一页面版本的版本号，如果两者一致，则说明第一客户端保存的布局信息文件已经是最新布局信息文件，服务器向第一客户端返回无增量布局信息即可，无需向第一客户端提供布局信息文件；如果两者不一致，则服务器会逐个对比该版本号的页面下每个元素的版本号与服务器这一侧保存的该版本号的页面下每个元素的版本号的差异。如果服务器这一侧的元素的版本号较新，则向第一客户端提供相应的布局信息文件。

附图6示例的解析模块403可以包括文件解析单元701、元素模板解析单元702和加载单元703，如附图7所示本发明实施例六提供的布局用户界面的装置，其中：

文件解析单元701，用于解析增量下载单元601下载的最新布局信息文件和内容信息文件，得到场景布局、每个元素模板在所述场景布局中的位置和所述每个元素模板的邻居；

元素模板解析单元702，用于解析所述每个元素模板的内容；

加载单元703，用于从第一客户端加载所述每个元素模板对应的显示模型和动画模型。

需要说明的是，对于附图5示例的装置第二客户端可以在下载请求模块501向服务器发送下载布局信息文件和内容信息文件的请求之前，生成布局信息文件和内容信息文件后上传至所述服务器；该服务器得以存储有在所述第二客户端编辑并通过所述第二客户端上传的所述布局信息文件和内容信息文件；第二客户端生成布局信息文件和内容信息文件的具体方法可以参阅前述附图3示例中的相关文字说明，此处不做赘述。

附图5至附图7任一示例的装置还可以包括指示接收模块801，如附图8-a至附图8-c所示本发明实施例八至实施例十中任一实施例提供的布局用户界面的装置。指示接收模块801用于接收所述服务器返回的对元素进行删除和增加的指示信息。

请参阅附图9，是本发明实施例十一提供的布局用户界面的系统的结构示意图。为了便于说明，附图9仅示出了与本发明实施例相关的部分。附图9示例的布局用户界面的系统包括服务器901和第一客户端902，第一客户端902包括下载请求模块903、下载模块904、解析模块905和界面布局模块906，其中，服务器901可以是附图1至附图3示例的布局用户界面的方法或附图5至附图8-c示例的布局用户界面的装置中的服务器，第一客户端902可以是附图1至附图3示例的布局用户界面的方法的执行主体或附图5至附图8-c示例的布局用户界面的装置，各功能模块详细说明如下：

下载请求模块903，用于向服务器901发送下载布局信息文件和内容信息文件的请求；

下载模块904，用于对从服务器901下载的布局信息文件和内容信息文件进行解析；

解析模块905，用于对服务器901根据所述请求提供的布局信息文件和内容信息文件进行解析；

界面布局模块906，用于根据解析模块905解析的结果在第一客户端902的当前用户界面布局元素；

服务器901，用于存储在第二客户端编辑并通过所述第二客户端上传的布局信息文件和内容信息文件，在收到下载请求模块903发送的所述请求后，根据所述请求提供布局信息文件和内容信息文件，向第一客户端902返回第一客户端902请求的布局信息文件和内容信息文件。

需要说明的是，上述装置各模块/单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其带来的技术效果与本发明方法实施例相同，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，ReadOnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁盘或光盘等。

以上对本发明实施例所提供的布局用户界面的方法、装置和系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (11)

1.一种布局用户界面的方法，其特征在于，所述方法包括：

向服务器发送下载布局信息文件和内容信息文件的请求；

从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；

对所述从服务器下载的布局信息文件和内容信息文件进行解析；

根据所述解析的结果在第一客户端的当前用户界面布局元素。

2.如权利要求1所述的方法，其特征在于，所述请求携带所述第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，所述从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件，包括：

从所述服务器下载所述服务器根据所述请求提供的最新布局信息文件和内容信息文件，所述最新布局信息文件和内容信息文件包含需要更新的元素的布局信息、内容信息以及在所述服务器一侧的版本的版本号。

3.如权利要求2所述的方法，其特征在于，所述对所述从服务器下载的布局信息文件和内容信息文件进行解析，包括：

解析所述最新布局信息文件和内容信息文件，得到场景布局、每个元素模板在所述场景布局中的位置和所述每个元素模板的邻居；

解析所述每个元素模板的内容；

从所述第一客户端加载所述每个元素模板对应的显示模型和动画模型。

4.如权利要求1所述的方法，其特征在于，所述服务器存储有在第二客户端编辑并通过所述第二客户端上传的布局信息文件和内容信息文件。

5.如权利要求1至4任意一项所述的方法，其特征在于，所述方法还包括：

接收所述服务器返回的对元素进行删除和增加的指示信息。

6.一种布局用户界面的装置，其特征在于，所述装置包括：

下载请求模块，用于向服务器发送下载布局信息文件和内容信息文件的请求；

下载模块，用于从所述服务器下载所述服务器根据所述请求提供的布局信息文件和内容信息文件；

解析模块，用于对所述从服务器下载的布局信息文件和内容信息文件进行解析；

界面布局模块，用于根据所述解析的结果在第一客户端的当前用户界面布局元素。

7.如权利要求6所述的装置，其特征在于，所述请求携带所述第一客户端当前页面版本的版本号和所述当前页面下所有元素当前版本的版本号，所述下载模块包括：

增量下载单元，用于所述服务器下载所述服务器根据所述请求提供的最新布局信息文件和内容信息文件，所述最新布局信息文件和内容信息文件包含需要更新的元素的布局信息、内容信息以及在所述服务器一侧的版本的版本号。

8.如权利要求7所述的装置，其特征在于，所述解析模块包括：

文件解析单元，用于解析所述最新布局信息文件和内容信息文件，得到场景布局、每个元素模板在所述场景布局中的位置和所述每个元素模板的邻居；

元素模板解析单元，用于解析所述每个元素模板的内容；

加载单元，用于从所述第一客户端加载所述每个元素模板对应的显示模型和动画模型。

9.如权利要求6所述的装置，其特征在于，所述服务器存储有在第二客户端编辑并通过所述第二客户端上传的布局信息文件和内容信息文件。

10.如权利要求6至9任意一项所述的装置，其特征在于，所述装置还包括：

指示接收模块，用于接收所述服务器返回的对元素进行删除和增加的指示信息。

11.一种布局用户界面的系统，其特征在于，所述系统包括第一客户端和服务器，所述第一客户端包括下载请求模块、下载模块、解析模块和界面布局模块；

所述下载请求模块，用于向所述服务器发送下载布局信息文件和内容信息文件的请求；

所述下载模块，用于对所述从服务器下载的布局信息文件和内容信息文件进行解析；

所述解析模块，用于对所述服务器根据所述请求提供的布局信息文件和内容信息文件进行解析；

所述界面布局模块，用于根据所述解析的结果在所述第一客户端的当前用户界面布局元素；

所述服务器，用于存储在第二客户端编辑并通过所述二客户端上传的布局信息文件和内容信息文件，在收到所述下载请求模块发送的所述请求后，根据所述请求提供布局信息文件和内容信息文件，向所述第一客户端返回所述第一客户端请求的布局信息文件和内容信息文件。