CN108363602A - 智能ui界面布局方法、装置、终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种智能UI界面布局方法、装置、终端设备及存储介质。该方法包括：获取客户端发送的访问请求，访问请求包括待访问URL、用户ID和终端ID；基于待访问URL，获取对应的原始UI界面，原始UI界面包括至少一个功能模块；基于用户ID，获取与用户ID相对应的用户的历史访问习惯；基于历史访问习惯对至少一个功能模块的显示顺序进行调整，获取目标UI界面；将目标UI界面发送给终端ID对应的客户端，以使客户端显示目标UI界面。该方法可以根据用户对待访问URL对应的原始UI界面中各功能模块的历史访问习惯，调整原始UI界面的各功能模块的显示顺序，使得获取的目标UI界面为符合用户的历史访问习惯的个性化UI界面。

Description

智能UI界面布局方法、装置、终端设备及存储介质

技术领域

本发明涉及应用界面显示领域，尤其涉及一种智能UI界面布局方法、装置、终端设备及存储介质。

背景技术

UI(User Interface，用户界面)设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。现有的UI设计在确认设计目的后，UI界面布局往往只是简单地遵循用户从上而下、从左向右浏览的操作习惯进行设计，对UI界面布局中的功能模块进行顺序调整时，通常使用vue，react组件化引入虚拟dom节点对UI进行调整，但是这种UI界面布局的调整往往是开发人员在后台进行统一调整，展示给用户浏览的UI界面布局都是统一的，无法实现个性化UI界面设置。

发明内容

本发明实施例提供一种智能UI界面布局方法、装置、终端设备及存储介质，以解决现有的UI界面布局不能实现个性化UI界面设置的问题。

第一方面，本发明实施例提供一种智能UI界面布局方法，包括：

获取客户端发送的访问请求，所述访问请求包括待访问URL、用户ID和终端ID；

基于所述待访问URL，获取对应的原始UI界面，所述原始UI界面包括至少一个功能模块；

基于所述用户ID，获取与所述用户ID相对应的用户的历史访问习惯；

基于所述历史访问习惯对至少一个所述功能模块的显示顺序进行调整，获取目标UI界面；

将所述目标UI界面发送给所述终端ID对应的客户端，以使所述客户端显示所述目标UI界面。

第二方面，本发明实施例提供一种智能UI界面布局装置，包括：

访问请求获取模块，用于获取客户端发送的访问请求，所述访问请求包括待访问URL、用户ID和终端ID；

原始UI界面获取模块，用于基于所述待访问URL，获取对应的原始UI界面，所述原始UI界面包括至少一个功能模块；

历史访问习惯获取模块，用于基于所述用户ID，获取与所述用户ID相对应的用户的历史访问习惯；

目标UI界面获取模块，用于基于所述历史访问习惯对至少一个所述功能模块的显示顺序进行调整，获取目标UI界面；

目标UI界面显示模块，用于将所述目标UI界面发送给所述终端ID对应的客户端，以使所述客户端显示所述目标UI界面。

第三方面，本发明实施例提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述智能UI界面布局方法的步骤。

第四方面，本发明实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述智能UI界面布局方法的步骤。

本发明实施例提供的智能UI界面布局方法、装置、终端设备及存储介质，根据客户端发送的访问请求中的待访问URL获取对应的原始UI界面，并基于用户ID获取与用户ID对应的用户访问习惯，确定用户对该原始UI界面中各功能模块的历史访问习惯。根据该历史访问习惯对原始UI界面进行个性化调整，以获取目标UI界面，该目标UI界面显示的是基于用户的历史访问习惯调整功能模块顺序后的内容，使得其目标UI界面显示的内容更符合用户ID对应的用户的历史访问习惯，以实现个性化UI界面设计。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例1中智能UI界面布局方法的一流程图。

图2是图1中步骤S30的一具体示意图。

图3是图2中步骤S32的一具体示意图。

图4是图1中步骤S40的一具体示意图。

图5是图4中步骤S43的一具体示意图。

图6是本发明实施例2中提供的智能UI界面布局装置的原理框图。

图7是本发明实施例4中提供的终端设备的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

图1示出本实施例中智能UI界面布局方法的流程图。该智能UI界面布局方法应用在用户在浏览一个应用程序的UI界面时，可以根据用户访问该应用程序的历史访问习惯调整用户浏览的UI界面的布局情况，使得该UI界面为符合该用户的访问习惯的个性化UI界面。该智能UI界面布局方法在服务器上执行，用于对与服务器相连的客户端上安装的某一应用程序的UI界面进行调整布局，以满足客户需求。如图1所示，该智能UI界面布局方法包括如下步骤：

S10:获取客户端发送的访问请求，访问请求包括待访问URL、用户ID和终端ID。

其中，待访问URL是指用户需要访问的网页地址。用户ID是指用户在客户端访问特定网页时使用的账户信息。该账户信息包括但不限于用户登录名和手机号。终端ID是指发送访问请求的客户端对应的ID，该客户端包括但不限于电脑、手机和Ipad等终端。该终端ID可以为客户端的MAC地址或IP地址。具体地，与客户端通信相连的服务器会接收客户端发送的访问请求，该访问请求一般携带有待访问URL、用户ID和终端ID，该待访问URL即为客户端发送给服务器需要访问的网页的地址，该用户ID可用于识别该待访问URL对应的网页内容的用户身份，服务器通过用户ID对获取到的待访问URL对应的信息进行解析，将该URL对应的网页内容反馈给该终端ID对应的客户端，以使客户端显示用户ID对应的网页内容。

S20：基于待访问URL，获取对应的原始UI界面，原始UI界面包括至少一个功能模块。

其中，原始UI界面是指待访问URL对应的UI界面。原始UI界面包含其对应的应用程序中实现不同功能的功能模块，每一功能模块对应不同的网页内容。该原始UI界面中包含了具有不同功能的功能模块，每个功能模块对应不同的UI子界面。

具体地，用户在访问一个原始UI界面时，客户端会将该原始UI界面对应的URL发送给服务器，即就是客户端将待访问URL发送给服务器，服务器基于该待访问URL获取对应的原始UI界面。其中，一个原始UI界面包括至少一个功能模块，每一功能模块的访问记录在服务器中都是以该功能模块对应的待访问URL关联存储。

如用户访问一金融管理APP时，服务器接收该金融管理APP对应的URL，基于该URL进入该金融管理APP的首页，获取该首页对应的原始UI界面，该原始UI界面中包括了金融管理功能模块和生活管理功能模块。其中，金融管理模块包括但不限于银行余额、信用卡还款、我的信用、证券开户和我的贷款等子功能模块，生活管理功能模块包括但不限于健康账户、我的公积金、国内旅游和国外旅游等子功能模块。每一功能模块都有一对应的URL，每一子功能模块也都有一对应的URL。用户访问该金融管理APP中具体的功能模块的访问记录都是以URL存储在服务器中的。每一功能模块都会有一个与该功能模块对应的UI子界面，该UI子界面会将该功能模块包含的内容详细地展示给用户。如信用卡还款功能模块包含账单管理、信用卡分析、消费分析和信用卡还款等内容，该信用卡还款功能模块对应的UI子界面会将账单管理、信用卡分析、消费分析和信用卡还款等内容展示给用户，用户可根据自己的实际需要进行相关操作。

S30：基于用户ID，获取与用户ID相对应的用户的历史访问习惯。

历史访问习惯是指在获取到该访问请求之前，用户访问该待访问URL对应的页面的访问习惯，该访问习惯可以体现为经常访问该页面中某一个功能模块等。具体地，用户的历史访问习惯可以通过服务器基于访问某一特定网页的历史访问次数进行统计，依据统计获取到的访问次数多少确定该用户的历史访问习惯。

用户在使用用户登录名或者手机号任一种用户ID登录某一特定网页时，服务器会基于用户ID获取与该用户ID对应的历史访问记录，每一条历史访问记录对应一历史访问URL。该历史访问记录包括用户在访问某一特定网页的访问次数，该历史访问记录存储在终端本地的Cookie中。Cookie中存储有用户登录名或手机号等信息，可确认用户身份，以便基于Cookie确认该用户的历史访问习惯。如特定网页可以利用cookies跟踪统计用户访问一些特定网页的习惯，比如什么时间访问，访问了哪些网页，在每个网页的停留时间等信息，利用这些信息，可获取该用户访问特定网页的历史访问习惯。

S40：基于历史访问习惯对至少一个功能模块的显示顺序进行调整，获取目标UI界面。

其中，目标UI界面是指根据用户的历史访问习惯调整原始UI界面中各功能模块的顺序后获得的符合该用户历史访问习惯对应的UI界面。该目标UI界面即为依据用户历史访问习惯进行个性化设计或调整的UI界面。

具体地，客户端的cookie将记录好的属于某一用户的历史访问记录对应的历史访问URL发送给与该客户端相连的服务器，该服务器基于获取到的历史访问URL对应的访问次数确定该用户的历史访问习惯，基于该历史访问习惯，对该用户访问次数较多的至少一个历史访问URL对应的功能模块进行顺序调整，按照访问次数的多少，将访问次数最多的历史访问URL对应的功能模块调整到原始UI界面的第一个位置，访问次数最少的历史访问URL对应的功能模块调整到该原始UI界面的最后一个位置，获取目标UI界面。该目标UI界面可以基于用户的历史访问习惯布局UI界面中的每一个功能模块的位置，将用户经常访问或者访问时长较长的功能模块放在较前面的位置，为用户制定个性化UI界面。

S50：将目标UI界面发送给终端ID对应的客户端，以使客户端显示目标UI界面。

本实施例中，客户端将访问请求发送给服务器，服务器在控制客户端显示与访问请求中的待访问URL相对应的目标UI界面时，会基于该访问请求中的终端ID将属于用户的目标UI界面显示给用户的客户端

每个用户ID对应的历史访问习惯都不尽相同，基于用户ID对应的历史访问习惯调整的目标UI界面，并显示在与终端ID对应的客户端的目标UI界面也不尽相同。每个目标UI界面都是基于用户本人的历史访问习惯制定的，该目标UI界面更符合用户的历史访问习惯，有利于提高用户的体验感，以便于推广应用程序。

步骤S10-S50，可通过获取客户端发送的访问请求获取待访问URL，获取待访问URL、用户ID和终端ID。基于待访问URL获取对应的原始UI界面，基于用户ID获取与用户ID对应的用户的历史访问习惯，确定用户对该原始UI界面中各功能模块的访问习惯。对用户访问次数较多的功能模块，按照访问次数由多到少将对应的功能模块在原始UI界面中依次排序，获取符合用户历史访问习惯的目标UI界面，服务器将该目标UI界面发送给终端ID对应的客户端，以使客户端显示基于该用户的历史访问习惯调整后的目标UI界面。该目标UI界面可以反映该用户经常访问或者习惯访问的功能模块，由于每个用户的历史访问习惯不尽相同，属于该用户的目标UI界面也不尽相同，该目标UI界面即为属于该用户的个性化UI界面。

在一具体实施例中，如图2所示，步骤S30，基于用户ID，获取与用户ID相对应的用户的历史访问习惯，具体包括如下步骤：

S31：基于用户ID和待访问URL，获取对应的原始Cookie列表，原始Cookie列表包括至少一条Cookie记录，每一Cookie记录对应一个历史访问URL。

Cookie记录是指存储在用户使用的客户端上的用于记录用户的历史访问习惯的数据。每一条Cookie记录对应一个历史访问URL。原始Cookie列表是指所有存储在终端ID对应的客户端上的、与用户ID对应的Cookie记录的列表。该原始Cookie列表包括用户访问某一特定网页的历史访问次数和历史访问时长，一个原始Cookie列表中包括用户访问的至少一个特定网页的历史访问次数和历史访问时长。

服务器获取客户端发送的保存在客户端本地的记录该用户的历史访问URL的原始Cookie列表，基于原始Cookie列表中存储Cookie记录获取该用户的所有历史访问URL的数据。原始Cookie列表中存储的Cookie记录的数据都有对应的存储数据的有效周期，该有效周期的时间以秒为单位，设置的时间越大，原始Cookie列表中保存的Cookie记录时间越长。

S32：统计每一功能模块对应的历史访问URL的历史访问次数，基于历史访问次数确定历史访问习惯。

每一Cookie记录对应一条用户访问的历史访问URL，其中每一条历史访问URL记录用户访问某一特定网页的信息，用户在访问某一特定网页对应的UI界面时，每一历史访问URL都会对应用户访问的每一UI界面。

当用户访问的UI界面中包括至少一个功能模块时，原始Cookie列表会统计每一功能模块对应的Cookie记录中存储的属于同一历史访问URL的历史访问次数。基于同一历史访问URL对应的访问次数确定该用户在某一段时间经常访问的功能模块，访问次数越多则表明用户对该URL对应的功能模块的内容越感兴趣，从而确定用户的历史访问习惯。

若一功能模块包括至少一个子功能模块时，由于访问每一子功能模块时，需先进入该子功能模块对应的功能模块，因此，历史访问URL中会记录该子功能模块对应的URL，也会记录该子功能模块对应的功能模块的URL。基于子功能模块的历史访问URL确定该历史访问URL对应的历史访问次数，获取用户在该子功能模块中的历史访问习惯；基于功能模块的历史访问URL确定该历史访问URL对应的历史访问次数，获取用户在该原始UI界面中的历史访问习惯。本实施例中，用户所浏览的应用程序中的功能模块分层设置，包括至少两层功能模块，如在应用程序的首页上显示多个功能模块，每一功能模块下对应多个子功能模块。在统计每一功能模块对应的历史访问URL的历史访问次数后，需对同一层级的功能模块的历史访问次数进行排序，从而确定相应层级的功能模块在目标UI界面中的显示顺序。

如Cookie记录中存储的历史访问URL包括一金融管理APP中的金融管理功能模块对应的URL和该金融管理功能模块包括的银行余额、信用卡还款、我的信用等子功能模块对应的URL。由于访问每一子功能模块时，需先进入子功能模块对应的金融管理功能模块，统计每一子功能模块对应的历史访问URL的历史访问次数时，即对应的金融管理功能模块对应的历史访问URL的次数最多，则可确认用户在访问金融管理APP，用户的历史访问习惯为经常访问金融管理功能模块。若银行余额、信用卡还款、我的信用等子功能模块对应的URL的历史访问次数为银行余额子功能模块最多，信用卡还款子功能模块次之，我的信用子功能模最少，则在金融管理功能模块中，用户的历史访问习惯为经常访问银行余额子功能模块，其次是信用卡还款子功能模块，不经常访问的是我的信用子功能模。

在一具体实施例中，如图3所示，步骤S32，统计每一功能模块对应的历史访问URL的历史访问次数，基于历史访问次数确定历史访问习惯，具体包括如下步骤：

S321：获取每一历史访问URL对应的访问时长。

其中，历史访问时长是指可以反映历史访问URL的访问时间长短的指标。在获取每一功能模块对应的历史访问URL的历史访问次数后，确认并统计每一功能模块的历史访问次数，按照历史访问次数的多少获取用户的历史访问习惯。由于用户在操作功能模块时，可能会存在误操作的情况，如果仅基于历史访问次数确定用户的历史访问习惯则会出现用户历史访问习惯确定不准确的问题。此时，需要在确定历史访问次数的基础上获取每一历史访问URL对应的访问时长，基于对应的访问时长来确认用户的历史访问习惯可以更加确切地反映用户的历史访问习惯。

S322：从原始Cookie列表中获取访问时长大于预设时长的历史访问URL作为目标访问URL。

预设时长是指预先设置好的一个历史访问时间段，该历史访问时间段可以反映一个历史访问URL对应的访问时间的长短。具体地，服务器获取原始Cookie列表中的每一Cookie记录对应的访问时长，将访问时长大于预设值的Cookie记录提取出来，获取该Cookie记录对应的历史访问URL，从而获取访问时长大于预设时长的目标访问URL。该目标访问URL可以去除由于用户误操作存储在原始Cookie列表中的历史访问URL，有助于提高服务器确定历史访问习惯的准确性。

S323：统计每一功能模块对应的目标访问URL的历史访问次数，基于历史访问次数确定历史访问习惯。

获取目标访问URL后，统计同一目标访问URL对应的历史访问次数，基于统计的历史访问次数确定用户的历史访问习惯。统计的历史访问次数越多，则表明用户越经常访问该目标访问URL，对该目标访问URL对应的功能模块内容更感兴趣。

通过对历史访问URL对应的访问时长和访问次数的确定，获取历史访问习惯，可以确认用户对某一功能模块内容比较感兴趣。

在一具体实施例中，原始UI界面包括原始DOM树，原始DOM树包括至少一个DOM标签，每一DOM标签与一功能模块相对应，如图4所示，步骤S40，基于历史访问习惯对至少一个功能模块的显示顺序进行调整，获取目标UI界面，具体包括如下步骤：

S41：基于历史访问习惯，确定每一DOM标签对应的历史访问次数。

每一原始UI界面都有一对应的原始DOM树，原始DOM树是指待访问URL对应的原始UI界面上加载的所有资源信息对应的DOM树。

其中，DOM树(Document Object Model，文档对象模型)是专门适用于HTML(超级文本标记语言)的文档对象模型，该HTML是指为界面创建和其它可在界面中看到的界面信息设计的一种标记语言。一个界面的本质就是由一个HTML(超级文本标记语言)组成的，DOM树就是该界面对应的文档对象模型。在DOM树中，UI界面中的各个元素都被看作一个个对象，从而使UI界面中的元素也可以被计算机语言获取或者编辑。一个UI界面中存在至少一个元素，一个元素对应DOM树中的一个DOM标签，即一个DOM树中存在至少一个DOM标签。

获取用户的历史访问习惯，即获取了用户对某一目标访问URL的访问次数，每一目标访问URL都有一对应的功能模块。每一功能模块的URL在原始UI界面对应的原始DOM树中都有一对应的DOM标签。基于目标访问URL获取原始UI界面对应的原始DOM树中与目标访问URL一致的DOM标签，目标访问URL的历史访问次数则为DOM标签对应的历史访问次数。

S42：基于历史访问次数对DOM标签进行排序，以获取目标DOM树。

目标DOM树是指基于历史访问次数的多少对原始DOM树中对应的DOM标签进行重新排序获取的DOM树。

基于原始DOM树中的各DOM标签的历史访问次数对原始DOM树中的各DOM标签进行顺序调整，将DOM标签按照各自对应的历史访问次数从多到少一次进行排序，将历史访问次数最多的DOM标签放在原始DOM树中的第一个位置，历史访问次数次之的DOM标签放在原始DOM树中的第二位置，以此类推，历史访问次数最少的DOM标签放在最后一个位置，基于新的DOM标签顺序获取目标DOM树。该目标DOM树是根据目标访问URL对应的访问次数的多少对原始DOM树中的DOM标签进行重新排序的DOM树，可以直接反映出历史访问习惯中经常访问的功能模块。

S43：对目标DOM树进行渲染，获取目标UI界面。

目标UI界面是指目标DOM树经过渲染生成的UI界面。通过对步骤S42得到的目标DOM树进行渲染，可使原始DOM树基于历史访问习惯对原始UI界面的功能模块进行顺序调整，以将用户经常访问的功能模块放在靠前的位置，不经常访问的功能模块放在原始UI界面靠后的位置。其中，渲染是指将DOM树生成可浏览的网页的一种操作。

如基于一用户对金融管理APP中的金融管理功能模块和生活管理功能模块对应的URL的历史访问次数的统计，得出目标访问URL为金融管理功能模块对应的URL，则将金融管理功能模块对应的DOM标签放在原始DOM树中的第一个位置。则目标DOM树的DOM标签顺序为金融管理功能模块、生活管理功能模块，目标UI界面为金融管理功能模块在第一个位置，生活管理功能模块在第二个位置。若UI界面的功能模块顺序为从左到右、从上到下依次排列，则金融管理功能模块的位置为左上第一个位置，生活管理功能模块的位置为金融管理功能模块相邻的位置。

子功能模块的位置排列顺序和功能模块的位置排列顺序一致，为从左到右，从上到下依次排列。基于金融管理功能模块中的银行余额、信用卡还款、我的信用、证券开户和我的贷款等子功能模块对应的URL的历史访问次数的统计，银行余额、信用卡还款、我的信用等子功能模块分别对应的URL为目标访问URL，银行余额子功能模块对应的访问次数最多，则将银行余额子功能模块对应的DOM标签放在原始DOM树中的第一个位置；信用卡还款子功能模块对应的访问次数次之，则将信用卡还款子功能模块对应的DOM标签放在原始DOM树中的第二个位置；我的信用子功能模块的访问次数最少，则将我的信用子功能模块对应的DOM标签放在原始DOM树中的第三个位置。则目标DOM树的DOM标签顺序为银行余额子功能模块、信用卡还款子功能模块、我的信用子功能模块。目标UI界面为银行余额子功能模块在第一个位置，信用卡还款子功能模块在第二个位置，我的信用子功能模块在第三个位置。

在一具体实施例中，DOM标签包括标签层级，步骤S42，基于历史访问次数对DOM标签进行排序，以获取目标DOM树，具体包括如下步骤：基于历史访问次数对同一标签层级下的所有DOM标签进行排序，以获取目标DOM树。

其中，标签层级是指DOM树中的不同标签所在的位置。如一DOM树中存在根节点，该根节点对应的DOM标签为第一级；DOM树中该根节点下包括子节点，每一子节点对应的DOM标签为第二级；每一子节点下包括各自的子节点，该子节点包含的子节点对应的DOM标签为第三级，同一层级的子节点相互称为各自的兄弟节点。

具体地，原始DOM树中的DOM标签分为不同层级的DOM标签，每一DOM标签都有一对应的DOM编号，该DOM编号是指每一DOM标签对应的编号，该DOM编号可用于唯一识别该DOM标签为属于某一标签层级的DOM标签。该DOM编号由标签层级和号码组成。如第一标签层级的DOM标号为“ADOM”，第二标签层级的DOM标号为“BDOM(1)、BDOM(2)···BDOM(m)”，第三标签层级的DOM标号为“CDOM(11)、CDOM(12)···CDOM(mn)”，下一标签层级中的DOM标号包含上一层级的标签层级。

在原始DOM树中，只能允许对含有同一标签层级的DOM编号对应的DOM标签基于历史访问次数的多少进行DOM标签的顺序调整，以获取目标DOM树。在基于历史访问次数的多少进行DOM标签顺序调整时，可实现对原始UI界面的功能模块间进行顺序调整，属于每一功能模块的子功能模块间进行顺序调整，不允许跨标签层级进行顺序调整。即原始UI界面中包括了金融管理功能模块和生活管理功能模块，只能金融管理功能模块和生活管理功能模块基于历史访问次数的多少进行顺序调整；金融管理模块包括银行余额、信用卡还款、我的信用、证券开户和我的贷款等子功能模块，只能对银行余额、信用卡还款、我的信用、证券开户和我的贷款等子功能模块进行顺序调整；生活管理功能模块包括健康账户、我的公积金、国内旅游和国外旅游等子功能模块，只能对健康账户、我的公积金、国内旅游和国外旅游等子功能模块进行顺序调整。金融管理模块包括的子功能模块不能与生活管理功能模块包括的子功能模块相互进行顺序调整。该种顺序调整的方法可有效防止基于历史访问次数和访问时长对各子功能模块调整顺序时出现调整混乱的情况。

在一具体实施例中，原始UI界面还包括原始CSSOM树，如图5所示，步骤S43，对目标DOM树进行渲染，获取目标UI界面，具体包括如下步骤：

S431：基于目标DOM树和原始CSSOM树，形成渲染树，渲染树包括至少一个待渲染节点。

原始CSSOM树(Cascading Style Sheets Object Model，CSS对象模型)是指原始UI界面对应的CSSOM树，其中CSSOM树是一个建立在web页面上的CSS样式的映射，用于将Web页面上需要展示的界面资源信息通过样式表中的规则映射到页面对应的元素上。CSS(Cascading Style Sheets，层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。样式表是指存储Web页面上需要展示的界面资源信息对应的展示方式的表。

Web浏览器将DOM和CSSOM结合生成渲染树，该渲染树对每个待渲染节点进行布局处理，计算出每一个元素的大小和位置。遍历渲染树的待渲染节点将对应的像素显示到屏幕上对应的位置。待渲染节点是指渲染树中需要进行渲染的渲染节点。

S432：对渲染树进行格栅化操作，将渲染树上的所有待渲染节点转化成屏幕像素，以获取对应的目标UI界面。

栅格化是指将渲染树中的样式表存储的需要在屏幕上展示的对象，如字符串、按钮、路径或者形状的一些高级对象，显示在屏幕上的一种操作。将渲染树上的所有待渲染节点采用格栅化操作转化成屏幕像素，并基于待渲染节点中的每一个元素的大小和位置将该像素显示到屏幕上的对应位置，得到一个展示给客户端的UI界面，该UI界面为获取到的目标UI界面。

本发明实施例提供的智能UI界面布局方法，可通过获取客户端发送的访问请求获取待访问URL，获取待访问URL、用户ID和终端ID。基于待访问URL获取对应的原始UI界面，基于用户ID获取与用户ID对应的用户的历史访问习惯，确定用户对该原始UI界面中各功能模块的访问习惯。该访问习惯可以反映用户经常访问哪些功能模块对应的内容，不经常访问哪些功能模块对应的内容。

另外，对用户访问时长超过预设值的功能模块，按照访问次数由多到少调整原始UI界面对应的原始DOM中各功能模块对应的DOM标签在原始UI界面中的顺序，获取目标DOM树，该目标DOM树以直接反映出用户对该原始UI界面的历史访问习惯。而且，通过对目标DOM进行渲染获取目标UI界面，该目标UI界面显示的是基于用户的历史访问习惯调整功能模块顺序后的内容，该目标UI界面可以反映用户经常访问的功能模块的顺序，便于将用户经常访问的功能模块内容优先展示给用户的客户端。

由于每个用户的历史访问习惯不尽相同，属于该用户的目标UI界面也不尽相同，该目标UI界面即为属于该用户的个性化UI界面。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

实施例2

图6示出与实施例1中智能UI界面布局方法一一对应的智能UI界面布局装置的原理框图。如图6所示，该智能UI界面布局装置包括访问请求获取模块10、原始UI界面获取模块20、历史访问习惯获取模块30、目标UI界面获取模块40和目标UI界面显示模块50。其中，访问请求获取模块10、原始UI界面获取模块20、历史访问习惯获取模块30、目标UI界面获取模块40和目标UI界面显示模块50的实现功能与实施例中智能UI界面布局方法对应的步骤一一对应，为避免赘述，本实施例不一一详述。

访问请求获取模块10，用于获取客户端发送的访问请求，访问请求包括待访问URL、用户ID和终端ID。

原始UI界面获取模块20，用于基于待访问URL，获取对应的原始UI界面，原始UI界面包括至少一个功能模块。

历史访问习惯获取模块30，用于基于用户ID，获取与用户ID相对应的用户的历史访问习惯。

目标UI界面获取模块40，用于基于历史访问习惯对至少一个功能模块的显示顺序进行调整，获取目标UI界面。

目标UI界面显示模块50，用于将目标UI界面发送给终端ID对应的客户端，以使客户端显示目标UI界面。

优选地，历史访问习惯获取模块30包括：原始Cookie列表获取单元31和历史访问习惯获取单元32。

原始Cookie列表获取单元31，用于基于用户ID和待访问URL，获取对应的原始Cookie列表，原始Cookie列表包括至少一条Cookie记录，每一Cookie记录对应一个历史访问URL。

历史访问习惯获取单元32，用于统计每一功能模块对应的历史访问URL的历史访问次数，基于历史访问次数确定历史访问习惯。

优选地，历史访问习惯获取单元32包括：访问时长获取单元321、目标访问URL获取单元322和历史访问习惯确认单元323。

访问时长获取单元321，用于获取每一历史访问URL对应的访问时长。

目标访问URL获取单元322，用于从原始Cookie列表中获取访问时长大于预设时长的历史访问URL作为目标访问URL。

历史访问习惯确认单元323，用于统计每一功能模块对应的目标访问URL的历史访问次数，基于历史访问次数确定历史访问习惯。

优选地，目标UI界面获取模块40包括DOM标签对应的历史访问次数获取单元41、目标DOM树获取单元42和目标UI界面获取单元43。

DOM标签对应的历史访问次数获取单元41，用于基于历史访问习惯，确定每一DOM标签对应的历史访问次数。

目标DOM树获取单元42，用于基于历史访问次数对DOM标签进行排序，以获取目标DOM树。

目标UI界面获取单元43，用于对目标DOM树进行渲染，获取目标UI界面。

优选地，目标DOM树获取单元42包括：基于历史访问次数对同一标签层级下的所有DOM标签进行排序，以获取目标DOM树。

优选地，目标UI界面获取单元43包括渲染树获取单元431和目标UI界面获取单元432。

渲染树获取单元431，用于基于目标DOM树和原始CSSOM树，形成渲染树，渲染树包括至少一个待渲染节点。

目标UI界面获取单元432，用于对渲染树进行格栅化操作，将渲染树上的所有待渲染节点转化成屏幕像素，以获取对应的目标UI界面。

实施例3

本实施例提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现实施例1中智能UI界面布局方法，为避免重复，这里不再赘述。或者，该计算机程序被处理器执行时实现实施例2中智能UI界面布局装置中各模块/单元的功能，为避免重复，这里不再赘述。

实施例4

图7是本发明一实施例提供的终端设备的示意图。如图7所示，该实施例的终端设备70包括：处理器71、存储器72以及存储在存储器72中并可在处理器71上运行的计算机程序73，例如智能UI界面布局程序。处理器71执行计算机程序73时实现上述各个智能UI界面布局方法实施例中的步骤，例如图1所示的步骤S10至S50。或者，处理器71执行计算机程序73时实现上述各装置实施例中各模块/单元的功能，例如图6所示访问请求获取模块10、原始UI界面获取模块20、历史访问习惯获取模块30、目标UI界面获取模块40和目标UI界面显示模块50的功能。

示例性的，计算机程序73可以被分割成一个或多个模块/单元，一个或者多个模块/单元被存储在存储器72中，并由处理器71执行，以完成本发明。一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序73在终端设备70中的执行过程。例如，计算机程序73可以被分割成访问请求获取模块10、原始UI界面获取模块20、历史访问习惯获取模块30、目标UI界面获取模块40和目标UI界面显示模块50。

终端设备70可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。终端设备可包括，但不仅限于，处理器71、存储器72。本领域技术人员可以理解，图7仅仅是终端设备70的示例，并不构成对终端设备70的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如终端设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器71可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器72可以是终端设备70的内部存储单元，例如终端设备70的硬盘或内存。存储器72也可以是终端设备70的外部存储设备，例如终端设备70上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器72还可以既包括终端设备70的内部存储单元也包括外部存储设备。存储器72用于存储计算机程序以及终端设备所需的其他程序和数据。存储器72还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种智能UI界面布局方法，其特征在于，包括：

获取客户端发送的访问请求，所述访问请求包括待访问URL、用户ID和终端ID；

基于所述待访问URL，获取对应的原始UI界面，所述原始UI界面包括至少一个功能模块；

基于所述用户ID，获取与所述用户ID相对应的用户的历史访问习惯；

基于所述历史访问习惯对至少一个所述功能模块的显示顺序进行调整，获取目标UI界面；

将所述目标UI界面发送给所述终端ID对应的客户端，以使所述客户端显示所述目标UI界面。

2.如权利要求1所述的智能UI界面布局方法，其特征在于，所述基于所述用户ID，获取与所述用户ID相对应的用户的历史访问习惯，包括：

基于所述用户ID和所述待访问URL，获取对应的原始Cookie列表，所述原始Cookie列表包括至少一条Cookie记录，每一所述Cookie记录对应一个历史访问URL；

统计每一所述功能模块对应的历史访问URL的历史访问次数，基于所述历史访问次数确定所述历史访问习惯。

3.如权利要求2所述的智能UI界面布局方法，其特征在于，所述统计每一所述功能模块对应的历史访问URL的历史访问次数，基于所述历史访问次数确定所述历史访问习惯，包括：

获取每一所述历史访问URL对应的访问时长；

从所述原始Cookie列表中获取所述访问时长大于预设时长的历史访问URL作为目标访问URL；

统计每一所述功能模块对应的所述目标访问URL的历史访问次数，基于所述历史访问次数确定所述历史访问习惯。

4.如权利要求2或3所述的智能UI界面布局方法，其特征在于，所述原始UI界面包括原始DOM树，所述原始DOM树包括至少一个DOM标签，每一所述DOM标签与一所述功能模块相对应；

所述基于所述历史访问习惯对至少一个所述功能模块的显示顺序进行调整，获取目标UI界面，包括：

基于所述历史访问习惯，确定每一DOM标签对应的历史访问次数；

基于所述历史访问次数对所述DOM标签进行排序，以获取目标DOM树；

对所述目标DOM树进行渲染，获取所述目标UI界面。

5.如权利要求4所述的智能UI界面布局方法，其特征在于，所述DOM标签包括标签层级；

所述基于所述历史访问次数对所述DOM标签进行排序，以获取目标DOM树，包括：

基于所述历史访问次数对同一标签层级下的所有所述DOM标签进行排序，以获取所述目标DOM树。

6.如权利要求1所述的智能UI界面布局方法，其特征在于，所述原始UI界面还包括原始CSSOM树；

所述对所述目标DOM树进行渲染，获取所述目标UI界面，包括：

基于所述目标DOM树和所述原始CSSOM树，形成渲染树，所述渲染树包括至少一个待渲染节点；

对所述渲染树进行格栅化操作，将所述渲染树上的所有待渲染节点转化成屏幕像素，以获取对应的目标UI界面。

7.一种智能UI界面布局装置，其特征在于，包括：

访问请求获取模块，用于获取客户端发送的访问请求，所述访问请求包括待访问URL、用户ID和终端ID；

原始UI界面获取模块，用于基于所述待访问URL，获取对应的原始UI界面，所述原始UI界面包括至少一个功能模块；

历史访问习惯获取模块，用于基于所述用户ID，获取与所述用户ID相对应的用户的历史访问习惯；

目标UI界面获取模块，用于基于所述历史访问习惯对至少一个所述功能模块的显示顺序进行调整，获取目标UI界面；

目标UI界面显示模块，用于将所述目标UI界面发送给所述终端ID对应的客户端，以使所述客户端显示所述目标UI界面。

8.如权利要求6所述的智能UI界面布局装置，其特征在于，所述历史访问习惯获取模块包括：

原始Cookie列表获取单元，用于基于所述用户ID和所述待访问URL，获取对应的原始Cookie列表，所述原始Cookie列表包括至少一条Cookie记录，每一所述Cookie记录对应一个历史访问URL；

历史访问习惯获取单元，用于统计每一所述功能模块对应的历史访问URL的历史访问次数，基于所述历史访问次数确定所述历史访问习惯；

所述历史访问习惯获取单元包括：

访问时长获取单元，用于获取每一所述历史访问URL对应的访问时长；

目标访问URL获取单元，用于从所述原始Cookie列表中获取所述访问时长大于预设时长的历史访问URL作为目标访问URL；

历史访问习惯确认单元，用于统计每一所述功能模块对应的所述目标访问URL的历史访问次数，基于所述历史访问次数确定所述历史访问习惯。

9.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至6任一项所述智能UI界面布局方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述智能UI界面布局方法的步骤。