CN114416089A - 页面显示方法、装置、移动终端以及存储介质 - Google Patents

Abstract

本申请提供一种页面显示方法、装置、移动终端以及存储介质，通过获取目标页面的主题图像中的多个主题色，根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取页面元素对应的元素颜色，进而基于背景颜色以及页面元素的元素颜色，渲染目标页面，实现根据主题色的HSB颜色属性调整目标页面的背景颜色以及目标页面中页面元素的色彩范围，提高目标页面的色彩丰富度，提升目标页面的视觉体验，同时减少页面蒙版层，优化代码开发维护难度。

Description

页面显示方法、装置、移动终端以及存储介质

技术领域

本申请涉及人工智能技术领域，具体涉及一种页面显示方法、装置、移动终端以及计算机可读存储介质(简称存储介质)。

背景技术

目前，应用程序往往以固定的色彩模板进行页面渲染，以生成应用页面提供给用户，例如，以模糊图片或者某一颜色作为背景颜色，并在背景上增加蒙版层后，一个固定的颜色以透明度变化的方式生成应用页面的文字或图形元素。但通过以固定的色彩模板进行页面渲染获得的应用页面颜色变化单一，而且蒙版层需要适配页面尺寸大小，其代码开发难度大。

发明内容

基于此，有必要针对上述技术问题，提供一种页面显示方法、装置、计算机设备以及存储介质，在提高应用页面的色彩丰富度同时减少应用页面的开发难度。

第一方面，本申请提供一种页面显示方法，该方法包括：

获取目标页面的主题图像中的多个主题色；

根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；

根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色；

基于背景颜色以及页面元素的元素颜色，渲染目标页面。

在本申请一些实施例中，根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色，包括：

获取各主题色中基准主题色；

若基准主题色的亮度值以及饱和度值均大于零值，则将基准主题色设置为目标主题色；

若基准主题色的亮度值和/或饱和度不大于零值，则从剩余的主题色中确定目标主题色。

在本申请一些实施例中，根据目标主题色确定背景颜色，包括：

若目标主题色的亮度值以及饱和度值符合预设背景色条件，将目标主题色确定为背景颜色；

若目标主题色的亮度值以及饱和度值不符合预设背景色条件，对目标主题色的亮度值以及饱和度值进行调整，根据调整后的饱和度值、调整后的亮度值以及目标主题色的色度值确定背景颜色。

在本申请一些实施例中，若目标主题色的亮度值以及饱和度值不符合预设背景色条件，对目标主题色的亮度值以及饱和度值进行调整，包括：

若目标主题色的亮度值大于最高亮度阈值，将目标主题色的亮度值调整为最高亮度值阈值对应的亮度值，得到调整后的亮度值；

若目标主题色的饱和度值大于最高饱和度阈值，将目标主题色的饱和度值调整为最高饱和度阈值对应的饱和度值，得到调整后的饱和度值；

若目标主题色的亮度值在最高亮度阈值与次高亮度值阈值的区间内、且饱和度值大于次高饱和度阈值，将目标主题色的饱和度值调整为次高饱和度阈值对应的饱和度值，得到调整后的饱和度值。

在本申请一些实施例中，页面元素至少包括一级页面元素、二级页面元素以及三级页面元素；一级页面元素、二级页面元素以及三级页面元素对应的亮度依次降低。

在本申请一些实施例中，基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色，包括：

将背景颜色的亮度值调整为基础亮度值，得到一级亮度值；

若背景颜色的饱和度值大于次低饱和度阈值，将背景颜色的饱和度值调整为次低饱和度阈值对应的饱和度值，得到一级饱和度值；否则，将背景颜色的饱和度值确定为一级饱和度值；

若背景颜色的色度值在第一色度阈值内，在背景颜色的色度值的基础上提高预设色度值，否则，在背景颜色的色度值的基础上降低预设色度值，得到一级色度值；

将一级亮度值、一级色度值以及一级饱和度值确定为一级页面元素的元素颜色。

在本申请一些实施例中，基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色，包括：

根据背景颜色的亮度值所在的亮度值范围以及背景颜色的色度值，确定亮度值增长值；

基于背景颜色的亮度值以及亮度值增长值获取二级亮度值；

若背景颜色的饱和度值大于最低饱和度阈值，在背景颜色的饱和度值降低预设饱和度值，得到二级饱和度值；否则，将背景颜色的饱和度值确定为二级饱和度值；

将二级亮度值、二级饱和度值以及背景颜色的色度值，确定为二级页面元素的元素颜色。

在本申请一些实施例中，根据背景颜色的亮度值所在的亮度值范围以及背景颜色的色度值，确定亮度值增长值，包括：

若背景颜色的亮度值在第一亮度值范围内、或背景颜色亮度值在第二亮度范围内且背景颜色的色度值在第二色度值范围内，将亮度值增长值确定为第一亮度值；

若背景颜色的亮度值在第三亮度值范围内，将亮度值增长值确定为第二亮度值；

否则，将亮度值增长值确定为预设的第三亮度值。

在本申请一些实施例中，基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜，包括：

调整三级页面元素的透明度值为预设透明度值；

将二级亮度值、二级饱和度值、二级色度值以及预设透明度值，确定为三级页面元素的元素颜色。

第二方面，本申请提供一种页面显示装置，该装置包括：

主题色获取模块，用于获取目标页面的主题图像中的多个主题色；

主题色筛选模块，用于根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；

颜色值调整模块，用于根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色；

页面渲染模块，用于基于背景颜色以及页面元素的元素颜色，渲染目标页面。

第三方面，本申请还提供一种服务器，所述服务器包括：

一个或多个处理器；

存储器；以及

一个或多个应用程序，其中所述一个或多个应用程序被存储于所述存储器中，并配置为由所述处理器执行以实现所述的页面显示方法。

第四方面，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器进行加载，以执行所述的页面显示方法中的步骤。

第五方面，本申请实施例提供一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述第一方面提供的方法。

上述页面显示方法、装置、移动终端以及存储介质，通过获取目标页面的主题图像中的多个主题色，根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取页面元素对应的元素颜色，进而基于背景颜色以及页面元素的元素颜色，渲染目标页面，实现根据主题色的HSB颜色属性调整目标页面的背景颜色以及目标页面中页面元素的色彩范围，提高目标页面的色彩丰富度，提升目标页面的视觉体验，同时实现减少页面蒙版层，优化代码开发维护难度。

附图说明

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

图1是本申请实施例中页面显示方法的场景示意图；

图2是本申请实施例中页面显示方法的流程示意图；

图3是本申请实施例中背景颜色获取步骤的流程示意图；

图4是本申请实施例中页面元素的示意图；

图5是本申请实施例中目标页面的示意图；

图6是本申请实施例中页面显示装置的结构示意图；

图7是本申请实施例中计算机设备的结构示意图。

具体实施方式

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

在本申请的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本申请的描述中，“例如”一词用来表示“用作例子、例证或说明”。本申请中被描述为“例如”的任何实施例不一定被解释为比其它实施例更优选或更具优势。为了使本领域任何技术人员能够实现和使用本发明，给出了以下描述。在以下描述中，为了解释的目的而列出了细节。应当明白的是，本领域普通技术人员可以认识到，在不使用这些特定细节的情况下也可以实现本发明。在其它实例中，不会对公知的结构和过程进行详细阐述，以避免不必要的细节使本发明的描述变得晦涩。因此，本发明并非旨在限于所示的实施例，而是与符合本申请所公开的原理和特征的最广范围相一致。

在本申请实施例中，需要说明的是，本申请提供的页面显示方法由于是在计算机设备中执行，各计算机设备的处理对象均以数据或信息的形式存在，例如图像，实质为图像数据，可以理解的是，后续实施例中若提及颜色、页面元素等，均为对应的数据存在，以便计算机设备进行处理，具体此处不作赘述。

在本申请实施例中，还需说明的是，本申请实施例提供的页面显示方法，可以应用于如图1所示的页面显示系统中。其中，终端100通过网络与服务器200通过网络进行通信。用户基于终端100可以触发应用程序的客户端进入或打开目标页面，终端100可从服务器200处获取目标页面的相关数据信息，其中包括目标页面的主题图像，终端100获取该主题图像中的多个主题色，并根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；进而根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色；最后，基于背景颜色以及页面元素的元素颜色，渲染目标页面。终端100具体可以是台式终端或移动终端，终端100具体还可以是手机、平板电脑、笔记本电脑等中的一种，又或是安装于监控现场用于信息采集、存储、传输的摄像头。其中，终端100可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器200可以是独立的服务器，也可以是服务器组成的服务器网络或服务器集群，其包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云服务器。其中，云服务器由基于云计算(Cloud Computing)的大量计算机或网络服务器构成。

本领域技术人员可以理解，图1中示出的应用环境，仅仅是与本申请方案一种应用场景，并不构成对本申请方案应用场景的限定，其他的应用环境还可以包括比图1中所示更多或更少的计算机设备，例如图1中仅示出1个服务器200，可以理解的，该页面显示系统还可以包括一个或多个其他服务器，具体此处不作限定。另外，如图1所示，该页面显示系统还可以包括存储器，用于存储数据，如存储主题图像、背景颜色的颜色色值以及元素颜色的颜色色值等。

还需说明的是，图1所示页面显示系统的场景示意图仅仅是一个示例，本发明实施例描述的页面显示系统以及场景是为了更加清楚的说明本发明实施例的技术方案，并不构成对于本发明实施例提供的技术方案的限定，本领域普通技术人员可知，随着页面显示系统的演变和新业务场景的出现，本发明实施例提供的技术方案对于类似的技术问题，同样适用。

参阅图2，本申请实施例提供了一种页面显示方法，主要以该方法应用于上述图1中的终端100来举例说明，该方法包括步骤S210至S240，具体如下：

S210，获取目标页面的主题图像中的多个主题色。

其中，目标页面是指终端(例如手机)基于目标应用程序的客户端提供的一个功能页面，可以是应用程序的应用页面、网页页面等，例如音乐应用程序的音乐播放页面、博客网页页面等。

其中，主题图像是指目标页面中所显示的图像，可以是目标页面中特定区域的图像，例如处于目标页面中间区域或顶部区域的图像，也可以是目标页面中特定的图像，例如在用户的信息页面中的头像图像、音乐播放页面中与所播放音乐对应的专辑图像等。

其中，主题色是指从主题图像中提取得到的颜色，主题色可反映主题图像色调的颜色。

具体地，终端在渲染目标页面时，预先加载主题图像，并通过线程同步生成palette对象以提取主题色。更具体地，主题色可以包括但不限于主题图像中的主导色(Dominant，可简称为Dom)、鲜艳的暗色(Vibrant Dark，可简称为VD)、柔和的暗色(MutedDark，可简称为MD)，其中主导色是指具有最大比例区域的颜色。

S220，根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色。

其中，任意颜色可通过颜色三属性进行量化，分别为亮度(Brightness)、饱和度(Saturation)以及色相(Hues)。可以理解的是，饱和度和亮度分别以百分比值(0％至100％)表示，色度以角度(0°至360°)表示。终端可以预先设置亮度以及饱和度对应属性值条件，在获取主题图像中的多个主题色后，可根据各个主题色的亮度属性对应的亮度值以及饱和度属性对应饱和度值，从多个主题色中筛选目标主题色，该目标主题色可作为后续为目标页面中各个页面元素配色的基础颜色。

具体地，不同主题色的优先级往往是不同的，对于主题图像中的多个主题色，根据这些主题色的优先级，依次确定主题色对应的亮度值以及饱和度值，当某个优先级的主题色的亮度值以及饱和度值均符合对应属性值条件，则将该主题色确定为目标主题色；当所有的主题色的亮度值或饱和度值不符合对应属性值条件，则将优先级级别最低的主题色确定为目标主题色。

在一个实施例中，如图3所示，步骤S220根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色，包括：

S310，获取各主题色中基准主题色；

S320，若基准主题色的亮度值以及饱和度值均大于零值，将基准主题色设置为目标主题色；

S320，若基准主题色的亮度值和/或饱和度不大于零值，从剩余的主题色中确定目标主题色。

如上所述，不同主题色的优先级往往是不同的，从多个主题色按照不同主题色的优先级中获取基准主题色，并对基准主题色的亮度值以及饱和度值进行判断，若基准主题色的亮度值以及饱和度值均大于零值，则将该基准主题色确定为目标主题色，若基准主题色的亮度值不大于零值、饱和度值不大于零值或亮度值以及饱和度均不大于零值，则从剩余的主题色中确定目标主题色。

可以理解的是，从剩余的主题色中确定目标主题色，同样是从剩余的主题色按照不同主题色的优先级中获取基准主题色，并对基准主题色的亮度值以及饱和度值进行判断。当剩余的主题色的数量为一个时，则将该剩余的主题色确定为目标主题色。

以主题色包括主题图像中的主导色、鲜艳的暗色、柔和的暗色为例，其中主导色、鲜艳的暗色、柔和的暗色的优先级依次降低；终端先将主导色确定为基准主题色，当主导色的亮度值以及饱和度值均大于零值，则将主导色确定为目标主题色；当主导色的亮度值和/或饱和度值不大于零值，则从鲜艳的暗色、柔和的暗色中确定目标主题色，此时，将第二优先级的鲜艳的暗色确定为基准主题色，当鲜艳的暗色的亮度值以及饱和度值均大于零值，则将鲜艳的暗色确定为目标主题色；当鲜艳的暗色的亮度值和/或饱和度值不大于零值，则将剩余的柔和的暗色确定为目标主题色。

S230，根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色。

其中，在确定到目标主题色后，终端基于目标主题色确定背景颜色。可以理解的是，颜色对应的饱和度明度越高，该颜色所表现的色彩越强烈艳丽，颜色对应的亮度越大，该颜色所表现的明亮程度越亮；亮度以及饱和度均对视觉刺激越大，不益于长时间的观看。因此，预先设置背景色条件，在获取到目标主题色后，需要对不符合预设背景色条件的目标主题色的进行进一步优化，以获取背景颜色。

具体地，在一个实施例中，根据目标主题色确定背景颜色，包括：若目标主题色的亮度值以及饱和度值符合预设背景色条件，将目标主题色确定为背景颜色；若目标主题色的亮度值以及饱和度值不符合预设背景色条件，对目标主题色的亮度值以及饱和度值进行调整，根据调整后的饱和度值、调整后的亮度值以及目标主题色的色度值确定背景颜色。

其中，预设背景色条件包括三个条件，分别为：

1、亮度值不大于最高亮度阈值；

2、饱和度值不大于最高饱和度阈值；

3、亮度值在最高亮度阈值与次高亮度值阈值的区间时，饱和度值大于次高饱和度阈值。

因此，当目标主题色的亮度值以及饱和度值符合预设背景色条件，则直接将目标主题色确定为背景颜色，当目标主题色的亮度值以及饱和度值不符合预设背景颜色条件，对目标主题色的亮度值以及饱和度值进行调整，使得调整后得到的背景颜色更柔和，优化视觉效果。

更具体地，在一个实施例中，若目标主题色的亮度值以及饱和度值不符合预设背景色条件，对目标主题色的亮度值以及饱和度值进行调整，可以包括：若目标主题色的亮度值大于最高亮度阈值，将目标主题色的亮度值调整为最高亮度值阈值对应的亮度值，得到调整后的亮度值；若目标主题色的饱和度值大于最高饱和度阈值，将所述目标主题色的饱和度值调整为最高饱和度阈值对应的饱和度值，得到调整后的饱和度值；若目标主题色的亮度值在最高亮度阈值与次高亮度值阈值的区间内、且饱和度值大于次高饱和度阈值，将目标主题色的饱和度值调整为次高饱和度阈值对应的饱和度值，得到调整后的饱和度值。

其中，最高亮度阈值、次高亮度值阈值、最高饱和度阈值以及次高饱和度阈值可以是根据实际情况进行设置的。可以理解的是，最高亮度阈值大于次高亮度阈值，最高饱和度阈值大于次高饱和度阈值。

例如，最高亮度阈值设置为50％，次高亮度阈值设置为45％，最高饱和度阈值设置为80％，次高饱和度阈值设置为70％；此时，按照以下规则对目标主题色的亮度值以及饱和度值进行调整：

若目标主题色的亮度值大于50％时，将目标主题色的亮度值调整为50％，即调整后的亮度值为50％；

若目标主题色的饱和度值大于80％，将目标主题色的饱和度值调整为80％，即调整后的饱和度值为80％；

若目标主题色的亮度值在45％至50％的区间内、且目标主题色的饱和度值大于70时，将目标主题色的饱和度值调整为70％，即调整后的饱和度值为70％。

其中，目标页面包括一个或一个以上的页面元素，其中页面元素是指用以实现人机交互功能的元素，例如目标页面中提供的窗口、菜单、滚动条、控件等。如图4所示的音乐播放界面，包括“播放”、“下一首”、“上一首”、“播放进度条”等控件页面元素(图中仅对“播放”控件页面元素进行标识)、歌曲列表对应的菜单页面元素、以及控制菜单显示位置的滚动条页面元素，等等。

进一步的，依照不同的视觉层次，页面元素可以包括一级页面元素、二级页面元素以及三级页面元素，其中一级页面元素、二级页面元素以及三级页面元素的亮度依次降低。通过对不同视觉层次的页面元素设置不同的元素颜色，使得页面元素在不同色彩背景上有色彩变化，增加目标页面的色彩变化。

具体地，终端确定到背景颜色后，基于各级别的页面元素的色值调整规则，分别对背景颜色的亮度值、饱和度值以及色度值进行调整，得到各级别的页面元素对应的元素颜色。基于背景颜色调整页面元素的元素颜色，可以避免背景颜色与元素颜色互为互补色或对比色的情况发生，减少对界面元素识别困难程度。

在一个实施例中，针对一级页面元素，可基于一级页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取一级页面元素对应的元素颜色，具体步骤如下：将背景颜色的亮度值调整为基础亮度值，得到一级亮度值；若背景颜色的饱和度值大于次低饱和度阈值，将背景颜色的饱和度值调整为次低饱和度阈值对应的饱和度值，得到一级饱和度值；否则，将背景颜色的饱和度值确定为一级饱和度值；若背景颜色的色度值在第一色度阈值内，在背景颜色的色度值的基础上提高预设色度值，否则，在背景颜色的色度值的基础上降低预设色度值，得到一级色度值；将一级亮度值、一级色度值以及一级饱和度值确定为一级页面元素的元素颜色。

其中，基础亮度值为固定值，可根据实际情况设置；第一色度阈值、预设色度值、第一色度阈值以及预设色度值同样是根据实际情况设置的。

例如，基础亮度值可以设置为100％，次低饱和度阈值可以设置为50％，若背景颜色的饱和度值大于50％，第一色度阈值可以设置为170度至250度，预设色度值为20度。对于一级页面元素对应的一级亮度值，将一级亮度值设置为100％。对于一级页面元素对应的一级饱和度值，若背景颜色的饱和度值大于50％，将背景颜色的饱和度值调整为50％，即将一级饱和度值设置为50％；若背景颜色的饱和度值小于或等于50％，直接将背景颜色的饱和度值设置为一级饱和度值。对于一级页面元素对应的一级色度值，若背景颜色的色度值在170度至250度内，则在背景颜色的色度值的基础上增加20度，若背景颜色的色度值不在170度至250度内，在背景颜色的色度值的基础上降低20度，调整后的色度值即为一级色度值。

在获取到一级亮度值、一级色度值以及一级饱和度值，将一级亮度值、一级色度值以及一级饱和度值确定为一级页面元素的元素颜色，在进行页面渲染时，针对一级页面元素，基于一级页面元素的元素颜色进行渲染。

同样的，在一个实施例中，针对二级页面元素，可基于二级页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取二级页面元素对应的元素颜色，具体如下：根据背景颜色的亮度值所在的亮度值范围以及背景颜色的色度值，确定亮度值增长值；基于背景颜色的亮度值以及亮度值增长值获取二级亮度值；若背景颜色的饱和度值大于最低饱和度阈值，在背景颜色的饱和度值降低预设饱和度值，得到二级饱和度值；否则，将背景颜色的饱和度值确定为二级饱和度值；将二级亮度值、二级饱和度值以及背景颜色的色度值，确定为二级页面元素的元素颜色。

其中，对于二级页面元素对应的二级亮度值，其与背景颜色的亮度值以及色度值相关；终端根据背景颜色的亮度值所在的亮度值范围以及背景颜色的色度值，确定亮度值增长值，进而在背景颜色的亮度值的基础上提高亮度值增长值，进而将得到的亮度值设置为二级亮度值。

进一步的，在一个实施例中，若背景颜色的亮度值在第一亮度值范围内、或背景颜色亮度值在第二亮度范围内且背景颜色的色度值在第二色度值范围内，将亮度值增长值确定为第一亮度值；若背景颜色的亮度值在第三亮度值范围内，将亮度值增长值确定为第二亮度值；否则，将亮度值增长值确定为预设的第三亮度值。

其中，第一亮度值范围、第二亮度值范围以及第三亮度值范围是不同的、互不重叠的亮度值范围。具体地，第一亮度值范围为0％到15％，第二亮度范围为15％到25％，第三亮度范围为40％到50％，第二色度值范围为220度到260度，第一亮度值设置为35％，第二亮度值设置为20％，第三亮度值设置为25％；此时，按照以下规则确定亮度值增长值：

若背景颜色的亮度值在0％到15％的范围内，将亮度值增长值确定为第一亮度值35％；若背景颜色亮度值在15％到25％的范围内且背景颜色的色度值在220度到260度的范围内，将亮度值增长值确定为35％；若背景颜色的亮度值在40％到50％的范围内，将亮度值增长值确定为20％；其他情况，将亮度值增长值确定为预设的25％。

此外，对于二级页面元素对应的二级饱和度值，最低饱和度阈值可以是根据实际情况进行设置的。例如，最低饱和度阈值可以设置为35％，若背景颜色的饱和度值大于35％，在背景颜色的饱和度值的基础上降低20度，得到二级饱和度值，否则，将背景颜色的饱和度值确定为二级饱和度值。

对于二级页面元素对应的二级色度值，其与背景颜色的色度值保持一致。终端在获取到二级亮度值以及二级饱和度值，将二级亮度值、二级色度值以及背景颜色的色度值确定为二级页面元素的元素颜色，在进行页面渲染时，针对二级页面元素，基于二级页面元素的元素颜色进行渲染。

在一个实施例中，针对三级页面元素，可基于三级页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取三级页面元素对应的元素颜色。进一步地，三级页面元素对应的元素颜色，可以根据二级页面元素的元素颜色获取，具体如下：调整三级页面元素的透明度值为预设透明度值；将二级亮度值、二级饱和度值、二级色度值以及预设透明度值，确定为三级页面元素的元素颜色。

其中，预设透明度值取值为0％至100％，具体取值可根据实际情况设置，例如可以设置为50％或30％。

在一个实施例中，三级页面元素包括第一三级页面元素以及第二三级页面元素；其中，第一三级页面元素的元素颜色的亮度值、饱和度值以及色度值的取值与二级页面元素相同，第一三级页面元素的元素颜色的预设透明度值取值为50％；第二三级页面元素的元素颜色的亮度值、饱和度值以及色度值的取值与二级页面元素相同，第二三级页面元素的元素颜色的预设透明度值取值为30％。

S240，基于背景颜色以及页面元素的元素颜色，渲染目标页面。

在获取到背景颜色以及页面元素的元素颜色后，基于背景颜色渲染目标页面的页面背景，并基于页面元素的元素颜色渲染生成目标页面的页面元素，使得目标页面中页面元素在不同色彩的页面背景上具有色彩变化。

上述页面显示方法，通过获取目标页面的主题图像中的多个主题色，根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，以获取页面元素对应的元素颜色，进而基于背景颜色以及页面元素的元素颜色，渲染目标页面，实现根据主题色的HSB颜色属性调整目标页面的背景颜色以及目标页面中页面元素的色彩范围，提高目标页面的色彩丰富度的同时，减少了色彩搭配的冲突，提升目标页面的视觉体验。此外，减少页面蒙版层，优化代码维护成本，减少图片资源内存。

参见图5，图5所示的目标页面中，顶部区域的图像为主题图像；目标页面中包括有一级页面元素、二级页面元素、第一三级页面元素以及第二三级页面元素。以下结合如图5所示的应用场景对本申请实施例提供的页面显示方法进行进一步说明，该页面显示方法，包括：

步骤1，获取目标页面的主题图像中的主题色，主题色包括主导色Dom、鲜艳的暗色VD、柔和的暗色MD。

步骤2，根据主导色、鲜艳的暗色、柔和的暗色对应的亮度值以及饱和度值，从中确定目标主题色。

具体地，Dom、VD、MD的优先级依次降低；终端先将Dom确定为基准主题色，当Dom的亮度值以及饱和度值均大于零值，则将Dom确定为目标主题色；当Dom的亮度值和/或饱和度值不大于零值，则从VD、MD中确定目标主题色，此时，将第二优先级的VD确定为基准主题色，当VD的亮度值以及饱和度值均大于零值，则将VD确定为目标主题色；当VD的亮度值和/或饱和度值不大于零值，则将剩余的MD确定为目标主题色。

步骤3，根据所述目标主题色确定背景颜色。

若所述目标主题色满足亮度值不大于50％、饱和度值不大于80％、亮度值在45％至50％的区间内时饱和度值不大于70％这三个条件时，将目标主题色确定背景颜色；否则，按照以下规则调整目标主题色的亮度值以及饱和度值，并将调整后获得的颜色色值确定为背景颜色：

若目标主题色的亮度值大于50％时，将目标主题色的亮度值调整为50％，即背景颜色的亮度值为50％；

若目标主题色的饱和度值大于80％，将目标主题色的饱和度值调整为80％，即背景颜色的饱和度值为80％；

若目标主题色的亮度值在45％至50％的区间内、且目标主题色的饱和度值大于70时，将目标主题色的饱和度值调整为70％，即背景颜色的饱和度值为70％。

步骤4，基于所述目标页面中一级页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述一级页面元素的元素颜色。

具体地，一级页面元素的色值调整规则如下：

A、对于一级页面元素对应的一级亮度值，将一级亮度值设置为100％。

B、对于一级页面元素对应的一级饱和度值：

(1)若背景颜色的饱和度值大于50％，将背景颜色的饱和度值调整为50％，即将一级饱和度值设置为50％；

(2)若背景颜色的饱和度值小于或等于50％，直接将背景颜色的饱和度值设置为一级饱和度值。

C、对于一级页面元素对应的一级色度值：

(1)若背景颜色的色度值在170度至250度内，在背景颜色的色度值的基础上增加20度，调整后的色度值即为一级色度值；

(2)若背景颜色的色度值不在170度至250度内，在背景颜色的色度值的基础上降低20度，调整后的色度值即为一级色度值。

步骤5，基于所述目标页面中二级页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述二级页面元素的元素颜色。

具体地，二级页面元素的色值调整规则如下：

A、对于二级页面元素对应的一级亮度值：

(1)若背景颜色的亮度值在0％到15％的范围内，在背景颜色的亮度值基础上增加35％，得到一级亮度值；

(2)若背景颜色亮度值在15％到25％的范围内且背景颜色的色度值在220度到260度的范围内，在背景颜色的亮度值基础上增加35％，得到一级亮度值；

(3)若背景颜色的亮度值在40％到50％的范围内在背景颜色的亮度值基础上增加25％，得到一级亮度值；

(4)除以上情况以外的其他情况，将亮度值增长值确定为预设的25％。

B、对于二级页面元素对应的二级饱和度值：

(1)若背景颜色的饱和度值大于35％，在背景颜色的饱和度值的基础上降低20％，得到二级饱和度值；

(2)若背景颜色的饱和度值不大于35％，将背景颜色的饱和度值确定为二级饱和度值。

C、对于二级页面元素对应的二级色度值，直接将背景颜色的色度值设置为二级色度值。

步骤6，调整所述三级页面元素的透明度值为预设透明度值，将所述二级亮度值、所述二级饱和度值、所述二级色度值以及预设透明度值，确定为所述三级页面元素的元素颜色。

具体地，三级页面元素包括第一三级页面元素以及第二三级页面元素；第一三级页面元素的预设透明度值为50％，第二三级页面元素的预设透明度值为30％。

步骤7，基于所述背景颜色以及所述页面元素的元素颜色，渲染所述目标页面。

相较于以模糊图片或者某一颜色作为背景颜色，并在背景上增加蒙版后，一个固定的颜色以透明度变化的方式生成应用页面的文字或图形元素这一现有方式，本实施例中的页面显示方法，通过对主题图像的取色，从所取得的主题色中确定目标主题色，并基于目标主题色对目标页面中各类页面元素进行配色，使得页面元素在不同色彩背景上有色彩变化，增加目标页面的色彩变化，为用户提供更加多彩、更加沉浸式的目标页面，提高视觉体验。

而且，现有方式中往往会出现背景颜色与文字或图形元素的原始颜色互为互补色或对比色的情况，导致在彩色背景下难以识别页面元素；而本方案中，基于背景颜色调整页面元素的元素颜色，可以避免背景颜色与元素颜色互为互补色或对比色的情况发生，减少对界面元素识别困难程度。

此外，通过减少页面蒙版层的使用，有效减少图片资源内存，实现优化代码开发、维护的成本。

为了更好实施本申请实施例提供的页面显示方法，在本申请实施例所提页面显示方法的基础之上，本申请实施例中还提供一种页面显示装置，如图6所示，页面显示装置600包括：

主题色获取模块610，用于获取目标页面的主题图像中的多个主题色；

主题色筛选模块620，用于根据各主题色对应的亮度值以及饱和度值，从多个主题色中确定目标主题色；

颜色值调整模块630，用于根据目标主题色确定背景颜色，并基于目标页面中页面元素的色值调整规则，对背景颜色的亮度值、饱和度值以及色度值进行调整，得到页面元素的元素颜色；

页面渲染模块640，用于基于背景颜色以及页面元素的元素颜色，渲染目标页面。

在本申请一些实施例中，主题色筛选模块还用于获取各主题色中基准主题色；若基准主题色的亮度值以及饱和度值均大于零值，将基准主题色设置为目标主题色；若基准主题色的亮度值和/或饱和度不大于零值，从剩余的主题色中确定目标主题色。

在本申请一些实施例中，主题色筛选模块，还用于在目标主题色的亮度值以及饱和度值符合预设背景色条件时，将目标主题色确定为背景颜色；在目标主题色的亮度值以及饱和度值不符合预设背景色条件时，对目标主题色的亮度值以及饱和度值进行调整，根据调整后的饱和度值、调整后的亮度值以及目标主题色的色度值确定背景颜色。

在本申请一些实施例中，颜色值调整模块，还用于在目标主题色的亮度值大于最高亮度阈值时，将目标主题色的亮度值调整为最高亮度值阈值对应的亮度值，得到调整后的亮度值；在目标主题色的饱和度值大于最高饱和度阈值时，将目标主题色的饱和度值调整为最高饱和度阈值对应的饱和度值，得到调整后的饱和度值；在目标主题色的亮度值在最高亮度阈值与次高亮度值阈值的区间内、且饱和度值大于次高饱和度阈值时，将目标主题色的饱和度值调整为次高饱和度阈值对应的饱和度值，得到调整后的饱和度值。

在本申请一些实施例中，页面元素至少包括一级页面元素、二级页面元素以及三级页面元素；一级页面元素、二级页面元素以及三级页面元素对应的亮度依次降低。

在本申请一些实施例中，颜色值调整模块，还用于将背景颜色的亮度值调整为基础亮度值，得到一级亮度值；在背景颜色的饱和度值大于次低饱和度阈值时，将背景颜色的饱和度值调整为次低饱和度阈值对应的饱和度值，得到一级饱和度值；否则，将背景颜色的饱和度值确定为一级饱和度值；在背景颜色的色度值在第一色度阈值内，在背景颜色的色度值的基础上提高预设色度值，否则，在背景颜色的色度值的基础上降低预设色度值，得到一级色度值；将一级亮度值、一级色度值以及一级饱和度值确定为一级页面元素的元素颜色。

在本申请一些实施例中，颜色值调整模块，还用于根据背景颜色的亮度值所在的亮度值范围以及背景颜色的色度值，确定亮度值增长值；基于背景颜色的亮度值以及亮度值增长值获取二级亮度值；在背景颜色的饱和度值大于最低饱和度阈值，在背景颜色的饱和度值降低预设饱和度值，得到二级饱和度值；否则，将背景颜色的饱和度值确定为二级饱和度值；将二级亮度值、二级饱和度值以及背景颜色的色度值，确定为二级页面元素的元素颜色。

在本申请一些实施例中，颜色值调整模块，还用于在背景颜色的亮度值在第一亮度值范围内、或背景颜色亮度值在第二亮度范围内且背景颜色的色度值在第二色度值范围内时，将亮度值增长值确定为第一亮度值；在背景颜色的亮度值在第三亮度值范围内时，将亮度值增长值确定为第二亮度值；否则，将亮度值增长值确定为预设的第三亮度值。

在本申请一些实施例中，颜色值调整模块，还用于调整三级页面元素的透明度值为预设透明度值；将二级亮度值、二级饱和度值、二级色度值以及预设透明度值，确定为三级页面元素的元素颜色。

关于页面显示装置的具体限定可以参见上文中对于页面显示方法的限定，在此不再赘述。上述页面显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在本申请一些实施例中，页面显示装置600可以实现为一种计算机程序的形式，计算机程序可在如图7所示的计算机设备上运行。计算机设备的存储器中可存储组成该页面显示装置600的各个程序模块，比如，图6所示的主题色获取模块610、主题色筛选模块620、颜色值调整模块630以及页面渲染模块640。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的页面显示方法中的步骤。

例如，图7所示的计算机设备可以通过如图6所示的页面显示装置600中的主题色获取模块610执行步骤S210。计算机设备可通过主题色筛选模块620执行步骤S220。计算机设备可通过颜色值调整模块630执行步骤S230。计算机设备可通过页面渲染模块640执行步骤S240。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的计算机设备通过网络连接通信。该计算机程序被处理器执行时以实现一种页面显示方法。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在本申请一些实施例中，提供了一种移动终端，包括一个或多个处理器；存储器；以及一个或多个应用程序，其中所述一个或多个应用程序被存储于所述存储器中，并配置为由所述处理器执行上述页面显示方法的步骤。此处页面显示方法的步骤可以是上述各个实施例的页面显示方法中的步骤。

在本申请一些实施例中，提供了一种计算机可读存储介质，存储有计算机程序，计算机程序被处理器进行加载，使得处理器执行上述页面显示方法的步骤。此处页面显示方法的步骤可以是上述各个实施例的页面显示方法中的步骤。

本邻域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上对本申请实施例所提供的一种页面显示方法、装置、移动终端以及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (12)

1.一种页面显示方法，其特征在于，包括：

获取目标页面的主题图像中的多个主题色；

根据各所述主题色对应的亮度值以及饱和度值，从所述多个主题色中确定目标主题色；

根据所述目标主题色确定背景颜色，并基于所述目标页面中页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述页面元素的元素颜色；

基于所述背景颜色以及所述页面元素的元素颜色，渲染所述目标页面。

2.根据权利要求1所述的方法，其特征在于，所述根据各所述主题色对应的亮度值以及饱和度值，从所述多个主题色中确定目标主题色，包括：

获取各所述主题色中基准主题色；

若所述基准主题色的亮度值以及饱和度值均大于零值，将所述基准主题色设置为目标主题色；

若所述基准主题色的亮度值和/或饱和度不大于零值，从剩余的主题色中确定目标主题色。

3.根据权利要求1所述的方法，其特征在于，所述根据所述目标主题色确定背景颜色，包括：

若所述目标主题色的亮度值以及饱和度值符合预设背景色条件，将所述目标主题色确定为背景颜色；

若所述目标主题色的亮度值以及饱和度值不符合预设背景色条件，对所述目标主题色的亮度值以及饱和度值进行调整，根据调整后的饱和度值、调整后的亮度值以及所述目标主题色的色度值确定背景颜色。

4.根据权利要求3所述的方法，其特征在于，所述若所述目标主题色的亮度值以及饱和度值不符合预设背景色条件，对所述目标主题色的亮度值以及饱和度值进行调整，包括：

若所述目标主题色的亮度值大于最高亮度阈值，将所述目标主题色的亮度值调整为所述最高亮度值阈值对应的亮度值，得到调整后的亮度值；

若所述目标主题色的饱和度值大于最高饱和度阈值，将所述目标主题色的饱和度值调整为所述最高饱和度阈值对应的饱和度值，得到所述调整后的饱和度值；

若所述目标主题色的亮度值在最高亮度阈值与次高亮度值阈值的区间内、且所述饱和度值大于次高饱和度阈值，将所述目标主题色的饱和度值调整为所述次高饱和度阈值对应的饱和度值，得到所述调整后的饱和度值。

5.根据权利要求1所述的方法，其特征在于，所述页面元素至少包括一级页面元素、二级页面元素以及三级页面元素；所述一级页面元素、所述二级页面元素以及所述三级页面元素对应的亮度依次降低。

6.根据权利要求5所述的方法，其特征在于，所述基于所述目标页面中页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述页面元素的元素颜色，包括：

将所述背景颜色的亮度值调整为基础亮度值，得到所述一级亮度值；

若所述背景颜色的饱和度值大于次低饱和度阈值，将所述背景颜色的饱和度值调整为所述次低饱和度阈值对应的饱和度值，得到一级饱和度值；否则，将所述背景颜色的饱和度值确定为一级饱和度值；

若所述背景颜色的色度值在第一色度阈值内，在所述背景颜色的色度值的基础上提高预设色度值，否则，在所述背景颜色的色度值的基础上降低预设色度值，得到一级色度值；

将所述一级亮度值、所述一级色度值以及所述一级饱和度值确定为所述一级页面元素的元素颜色。

7.根据权利要求5所述的方法，其特征在于，所述基于所述目标页面中页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述页面元素的元素颜色，包括：

根据所述背景颜色的亮度值所在的亮度值范围以及所述背景颜色的色度值，确定亮度值增长值；

基于所述背景颜色的亮度值以及所述亮度值增长值获取二级亮度值；

若所述背景颜色的饱和度值大于最低饱和度阈值，在所述背景颜色的饱和度值降低预设饱和度值，得到二级饱和度值；否则，将所述背景颜色的饱和度值确定为二级饱和度值；

将所述二级亮度值、所述二级饱和度值以及所述背景颜色的色度值，确定为所述二级页面元素的元素颜色。

8.根据权利要求7所述的方法，其特征在于，所述根据所述背景颜色的亮度值所在的亮度值范围以及所述背景颜色的色度值，确定亮度值增长值，包括：

若所述背景颜色的亮度值在第一亮度值范围内、或所述背景颜色亮度值在第二亮度范围内且所述背景颜色的色度值在第二色度值范围内，将所述亮度值增长值确定为第一亮度值；

若所述背景颜色的亮度值在第三亮度值范围内，将所述亮度值增长值确定为第二亮度值；

否则，将所述亮度值增长值确定为预设的第三亮度值。

9.根据权利要求7所述的方法，其特征在于，所述基于所述目标页面中页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述页面元素的元素颜色，包括：

调整所述三级页面元素的透明度值为预设透明度值；

将所述二级亮度值、所述二级饱和度值、所述二级色度值以及预设透明度值，确定为所述三级页面元素的元素颜色。

10.一种页面显示装置，其特征在于，所述装置包括：

主题色获取模块，用于获取目标页面的主题图像中的多个主题色；

主题色筛选模块，用于根据各所述主题色对应的亮度值以及饱和度值，从所述多个主题色中确定目标主题色；

颜色值调整模块，用于根据所述目标主题色确定背景颜色，并基于所述目标页面中页面元素的色值调整规则，对所述背景颜色的亮度值、饱和度值以及色度值进行调整，得到所述页面元素的元素颜色；

页面渲染模块，用于基于所述背景颜色以及所述页面元素的元素颜色，渲染所述目标页面。

11.一种移动终端，其特征在于，所述移动终端包括：

一个或多个处理器；

存储器；以及

一个或多个应用程序，其中所述一个或多个应用程序被存储于所述存储器中，并配置为由所述处理器执行以实现权利要求1至9中任一项所述的页面显示方法。

12.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，所述计算机程序被处理器进行加载，以执行权利要求1至9任一项所述的页面显示方法中的步骤。

Images