CN106528161B - 终端设备、页面显示处理装置及方法 - Google Patents

Abstract

本发明公开一种终端设备、页面显示处理装置及方法。该终端设备包括：存储器、触摸式显示屏和处理器；所述存储器，存储处理器获取的设定图片的部分区域；所述处理器，获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使在所述触摸式显示屏上，所述图标显示所述设定图片的部分区域的颜色。本发明提供的方案，能使得在同一个页面里形成界面视觉统一性，提高显示的视觉效果。

Description

终端设备、页面显示处理装置及方法

技术领域

本发明涉及移动互联网技术领域，具体涉及一种终端设备、页面显示处理装置及方法。

背景技术

在游戏客户端或游戏网页的页面中，一般会展示色彩鲜艳的UI(User Interface，用户界面)效果。特别是首页页面，色彩多变，还具有艳丽的banner(横幅广告)图片，在横幅广告图片下面一般具有各种图标，而图标颜色一般固定，这样使得在同一个页面里很难形成视觉色彩统一，显示给用户的视觉效果较差。

发明内容

为解决上述技术问题，本发明提供一种终端设备、页面显示处理装置及方法，能使得在同一个页面里形成界面视觉统一性，提高显示的视觉效果。

根据本发明的一个方面，提供一种终端设备，包括：存储器、触摸式显示屏和处理器；

所述存储器，存储处理器获取的设定图片的部分区域；

所述处理器，获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使在所述触摸式显示屏上，所述图标显示所述设定图片的部分区域的颜色。

根据本发明的另一个方面，提供一种页面显示处理装置，包括：

获取模块，用于获取页面中的设定图片的部分区域；

处理模块，用于将所述获取模块获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使所述图标显示所述设定图片的部分区域的颜色。

可选的，所述获取模块是持续获取页面中的颜色动态变化的设定图片的部分区域。

可选的，所述处理模块在所述页面中包含至少两个图标时，设置所述至少两个图标根据下层的所述设定图片的部分区域的颜色显示渐变填充效果。

可选的，所述获取模块包括：

截取子模块，用于截取页面中的设定图片的部分区域；

高斯处理子模块，用于对所述截取子模块截取的区域部分进行高斯模糊处理；

滤镜子模块，用于对所述截取的部分区域添加滤镜层。

可选的，所述处理模块包括：

切图子模块，用于将所述图标的形状区域内镂空变为透明，将所述图标的形状区域外设为非透明颜色；

合并子模块，用于将所述获取模块获取的设定图片的部分区域与所述切图子模块进行处理后的图标所在区域进行合并，使得所述图标透明显示下层的所述设定图片的部分区域的颜色。

根据本发明的另一个方面，提供一种页面显示处理方法，包括：

获取页面中的设定图片的部分区域；

将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使所述图标显示所述设定图片的部分区域的颜色。

可选的，所述设定图片包括当前页面的横幅广告图片，所述图标包括与所述横幅广告图片相邻的图标或另一页面中的图标。

可选的，所述获取页面中的设定图片的部分区域，包括：

持续获取页面中的颜色动态变化的设定图片的部分区域。

可选的，所述页面中包含至少两个图标时，所述至少两个图标根据下层的所述设定图片的部分区域的颜色显示渐变填充效果。

可选的，所述获取页面中的设定图片的部分区域，包括：

截取页面中的设定图片的部分区域，进行高斯模糊处理。

可选的，所述进行高斯模糊处理之后还包括：

对所述截取的部分区域添加滤镜层。

可选的，所述图标按以下方式进行镂空处理：

将所述图标的形状区域内镂空变为透明，将所述图标的形状区域外设为非透明颜色。

可以发现，本发明实施例的技术方案，通过获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，这样就可以使得所述图标显示所述设定图片的部分区域的颜色，那么图标显示的颜色就会与图片的颜色相同或相近，使得在同一个页面里形成界面视觉统一性，提高显示给用户的视觉效果。

进一步的，本发明实施例中所述设定图片可以为当前页面的横幅广告图片，所述图标可以为与所述横幅广告图片相邻的图标或另一页面中的图标，可以应用不同场景。

进一步的，本发明实施例中，可以持续获取页面中的颜色动态变化的设定图片的部分区域，从而可以根据图片颜色的动态轮播实现图标显示颜色也跟随动态变化，即只要持续替换图标下层即底部的设定图片的部分区域，便能得到颜色可变的渐变图标。

进一步的，本发明实施例在页面中包含至少两个图标时，所述至少两个图标可以根据下层的所述设定图片的部分区域的颜色显示渐变填充效果，进一步提高显示效果。

进一步的，本发明实施例可以截取页面中的设定图片的部分区域并进行高斯模糊处理，使图片变得模糊且平滑，减少图片噪声，或者进一步添加滤镜层，通过添加滤镜层可以提高颜色饱和度和亮度，使得图标显示所述设定图片的部分区域的颜色时，显示的颜色更明亮鲜艳。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1是根据本发明的一个实施例的一种终端设备的示意性方框图；

图2是根据本发明的一个实施例的一种页面显示处理装置的示意性方框图；

图3是根据本发明的一个实施例的一种页面显示处理装置的另一示意性方框图；

图4是根据本发明的一个实施例的一种页面显示处理方法的示意性流程图；

图5是根据本发明的一个实施例的一种页面显示处理方法的另一示意性流程图；

图6是根据本发明的一个实施例的一种页面显示处理方法中的处理过程示意图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本发明提供一种终端设备，能使得在同一个页面里形成界面视觉统一性，提高显示的视觉效果。

以下结合附图详细描述本发明实施例的技术方案。

图1是根据本发明的一个实施例的一种终端设备的示意性方框图。

如图1所示，在一种终端设备10中包括：存储器11、触摸式显示屏12和处理器13。

所述存储器11，存储处理器13获取的设定图片的部分区域。

所述处理器13，获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使在所述触摸式显示屏12上，所述图标显示所述设定图片的部分区域的颜色。

其中，所述设定图片可以包括当前页面的横幅广告图片，所述图标可以包括与所述横幅广告图片相邻的图标或另一页面中的图标。

在上述设备中的处理器13，可以作为一个独立的装置结构，该独立的装置结构可以称为页面显示处理装置，该页面显示处理装置可以包括多个子模块，下文将结合图2到图3对其结构进行详细说明。

图2是根据本发明的一个实施例的一种页面显示处理装置的示意性方框图。

如图2所示，在一种页面显示处理装置20中，包括：获取模块21、处理模块22。

获取模块21，用于获取页面中的设定图片的部分区域。

处理模块22，用于将所述获取模块21获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使所述图标显示所述设定图片的部分区域的颜色。

其中，所述设定图片可以包括当前页面的横幅广告图片，所述图标可以包括与所述横幅广告图片相邻的图标或另一页面中的图标。

由该实施例可见，本发明实施例的技术方案，通过获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，这样就可以使得所述图标显示所述设定图片的部分区域的颜色，那么图标显示的颜色就会与图片的颜色相同或相近，使得在同一个页面里形成界面视觉统一性，提高显示给用户的视觉效果。

图3是根据本发明的一个实施例的一种页面显示处理装置的另一示意性方框图。

如图3所示，在一种页面显示处理装置30中，包括：获取模块21、处理模块22。

其中，获取模块21、处理模块22的功能可以参见图2所示。

其中，所述获取模块21是持续获取页面中的颜色动态变化的设定图片的部分区域。

其中，所述处理模块22在所述页面中包含至少两个图标时，设置所述至少两个图标根据下层的所述设定图片的部分区域的颜色显示渐变填充效果。

其中，所述获取模块21可以包括：截取子模块211、高斯处理子模块212、滤镜子模块213。

截取子模块211，用于截取页面中的设定图片的部分区域。

高斯处理子模块212，用于对所述截取子模块211截取的部分区域进行高斯模糊处理。其中可以采用高斯模糊处理相关技术，高斯模糊值可以为设定值。

滤镜子模块213，用于对所述截取的部分区域添加滤镜层。添加滤镜层的目的是为了提高颜色饱和度和亮度，其中颜色饱和度和亮度的参数可以取设定值。

其中，所述处理模块22可以包括：切图子模块221、合并子模块222。

切图子模块221，用于将所述图标的形状区域内镂空变为透明，将所述图标的形状区域外设为非透明颜色。其中镂空处理的切图可以为png格式，png格式可以支持透明像素，图标的形状区域内为透明，形状以外区域可以为设定颜色例如为白色层，即可以可配合不同界面设计设置不同的颜色。

合并子模块222，用于将所述获取模块21获取的设定图片的部分区域与所述切图子模块221进行处理后的图标所在区域进行合并，使得所述图标透明显示下层的所述设定图片的部分区域的颜色。

上述详细介绍了本发明的一种终端设备及页面显示处理装置，以下介绍本发明对应的页面显示处理方法。

图4是根据本发明的一个实施例的一种页面显示处理方法的示意性流程图。

如图4所示，所述方法应用于终端设备中，包括：

在步骤401中，获取页面中的设定图片的部分区域。

在步骤402中，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，以使所述图标显示所述设定图片的部分区域的颜色。

其中，所述设定图片可以包括当前页面的横幅广告图片，所述图标可以包括与所述横幅广告图片相邻的图标或另一页面中的图标。

其中，所述相邻可以包括图标位于横幅广告图片下方、上方、左方或右方等。

由该实施例可见，本发明实施例的技术方案，通过获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标的下层，这样就可以使得所述图标显示所述设定图片的部分区域的颜色，那么图标显示的颜色就会与图片的颜色相同或相近，使得在同一个页面里形成界面视觉统一性，提高显示给用户的视觉效果。

图5是根据本发明的一个实施例的一种页面显示处理方法的另一示意性流程图。

图5相对于图4更详细描述了本发明实施例的技术方案。该实施例以设定图片为横幅广告图片、图标为当前页面与横幅广告图片相邻的图标举例说明但不局限于此，设定图片也可以是其他图片，图标也可以是不相邻或另一页面中的图标。

该实施例中，当动态变化颜色的横幅广告图片轮播的时候，图标显示的颜色也对应当前横幅广告图片而改变，而且图标组可以从左到右也显示一个渐变色填充效果。本发明方案可以先截取图片的其中一部分，然后将这部分进行高斯模糊处理，并添加滤镜层即加上调色滤镜，最后放置在镂空式图标下面，这样图标就可以通过镂空处(透明区域)将下层图片的颜色显露出来，后续只要持续替换下层的图片，便能得到颜色可变的渐变图标。

如图5所示，所述方法应用于终端设备中，包括：

在步骤501中，截取页面中的主横幅广告图片的部分区域并进行高斯模糊处理。

参见图6，图6中显示了页面首页的主横幅广告图片和位于其下方的图标组，图标组包括4个图标。其中，上方可以称为主横幅广告图片区域，下方称为图标所在区域。

参见图6，可以截取主横幅广告图片的其中一部分，配置在图片下方的图标区域。本发明实施例可以自动对截取的图片部分进行高斯模糊处理，使图片变得模糊且平滑，减少图片噪声。其中可以采用高斯模糊处理相关技术，高斯模糊值可以为设定值，一般高斯模糊值的大小可以影响到图片模糊后颜色分布纯度，高斯模糊值越高，颜色分布越均匀。模糊值大小可以对应不同效果取不同参数值，例如可以取值在42～90之间，使得在图标上呈现出较为顺滑的颜色过度效果。

在步骤502中，对所述截取的主横幅广告图片的部分区域添加滤镜层。

该步骤对对所述截取的部分区域添加滤镜层的目的是为了提高颜色饱和度和亮度，使得图标显示底部的设定图片的部分区域的颜色时，显示的颜色更明亮鲜艳，其中颜色饱和度和亮度的参数可以取设定值。因为图片颜色多变，不同场景的运用可以采用不同的设定值，主要取决于整个应用界面的风格。

在步骤503中，将页面中的图标的形状区域内镂空变为透明，将图标的形状区域外设为非透明颜色。

该步骤中，对页面中的图标进行镂空式切图，也即将页面中的图标的形状区域内镂空变为透明，将图标的形状区域外设为非透明颜色，其中镂空式的切图可以为png格式，png格式可以支持透明像素，图标的形状区域内为透明，形状以外区域可以为设定颜色例如为白色层，即可以可配合不同界面设计设置不同的颜色。

其中镂空式的切图，每个图标是单独的一部分，在不同尺寸屏幕上也可适应屏幕设置大小，图标的位置可定义，图标间距范围可以采用可等比伸缩的色块填充区域。

在步骤504中，将截取的主横幅广告图片的部分区域与进行镂空处理后的图标所在区域进行合并，图标透明显示截取的主横幅广告图片的部分区域的颜色。

图标进行镂空式切图后，图标在镂空处(透明区域)可以将下层也即底部的图片显露出来，也就是说图标显示的颜色可以由下层的经过高斯模糊处理后的图片呈现出来。

参见图6，A层为截取的与横幅广告图片相符的色调层，B层为滤镜层，C层为进行镂空式切图后的图标层，那么在A层和C层合并的时候，图标的透明的形状区域以内就呈现A层的颜色，形状区域以外则呈现白色。需说明的是，图标形状以外区域的颜色可以根据应用界面的底色进行调整，并不一定为白色。也就是说，将截取的主横幅广告图片的部分区域与进行镂空处理后的图标所在区域进行合并，所述与主横幅广告图片相符的色调就会显示在所述图标镂空后的透明的形状区域，这样就使得图标可以显示主横幅广告图片相符的色调，使得在同一个页面里形成界面视觉统一性，提高显示的视觉效果。

另外，图中有4个图标，该步骤页面中的4个图标之间可以根据底层的主横幅广告图片的颜色，显示渐变填充效果，进一步提高显示效果。

在步骤505中，在持续截取页面中颜色动态变化的主横幅广告图片的部分区域时，图标显示的颜色跟随主横幅广告图片动态变化的颜色进行动态变换。

在持续截取页面中颜色动态变化的主横幅广告图片的部分区域时，图标形状区域内显示的颜色也会根据底部的截取的主横幅广告图片的部分区域的颜色进行切换，动画效果可以为渐出效果，这样就实现了图标显示的颜色根据主横幅广告图片所变化的颜色进行可适应性渐变。

综上所述，本发明方案的有益效果包括：1)可以适用于图片内容丰富的界面呈现，使图标除了黑白灰以外能跟随图片内容颜色变换，也能更好地保持界面色调统一；2)可以更突出强调图标的显示作用，例如某些功能入口需要重点突出，则可以使用本发明方案使得图标持续变化，而且效果顺畅，不会对用户造成过多的视觉困扰；3)通过本发明方案提供的视觉美观性，可以带来良好的用户体验和提高品牌属性。

上文中已经参考附图详细描述了根据本发明的技术方案。

此外，根据本发明的方法还可以实现为一种计算机程序，该计算机程序包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。或者，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的上述方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (10)

1.一种终端设备，其特征在于，包括：存储器、触摸式显示屏和处理器；

所述存储器，存储处理器获取的设定图片的部分区域；

所述处理器，获取页面中的设定图片的部分区域，将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标组的下层，以使在所述触摸式显示屏上，所述图标组显示所述设定图片的部分区域的颜色渐变填充效果，并且所述图标组显示的颜色随轮播设定图片的动态变化的颜色进行动态变换，其中，所述图标组包括多个图标，

其中，所述设定图片位于图片区域，所述图标组位于与所述图片区域相邻的图标组所在区域，并且所述图标组按以下方式进行镂空处理：

在所述图标组所在区域内，将每个所述图标的形状区域内镂空变为透明，将每个所述图标的形状区域外设为非透明颜色。

2.一种页面显示处理装置，其特征在于，包括：

获取模块，用于获取页面中的设定图片的部分区域；

处理模块，用于将所述获取模块获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标组的下层，以使所述图标组显示所述设定图片的部分区域的颜色渐变填充效果，并且所述图标组显示的颜色随轮播设定图片的动态变化的颜色进行动态变换，其中，所述图标组包括多个图标，

其中，所述设定图片位于图片区域，所述图标组位于与所述图片区域相邻的图标组所在区域，并且所述图标组按以下方式进行镂空处理：

在所述图标组所在区域内，将每个所述图标的形状区域内镂空变为透明，将每个所述图标的形状区域外设为非透明颜色。

3.根据权利要求2所述的装置，其特征在于：

所述获取模块是持续获取页面中的颜色动态变化的设定图片的部分区域。

4.根据权利要求2所述的装置，其特征在于，所述获取模块包括：

截取子模块，用于截取页面中的设定图片的部分区域；

高斯处理子模块，用于对所述截取子模块截取的部分区域进行高斯模糊处理；

滤镜子模块，用于对所述截取的部分区域添加滤镜层。

5.根据权利要求2所述的装置，其特征在于，所述处理模块包括：

切图子模块，用于将每个所述图标的形状区域内镂空变为透明，将每个所述图标的形状区域外设为非透明颜色；

合并子模块，用于将所述获取模块获取的设定图片的部分区域与所述切图子模块进行处理后的图标组所在区域进行合并，使得每个所述图标透明显示下层的所述设定图片的部分区域的颜色。

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

获取页面中的设定图片的部分区域；

将所述获取的设定图片的部分区域设置在所述页面中经过镂空处理的图标组的下层，以使所述图标组显示所述设定图片的部分区域的颜色渐变填充效果，并且所述图标组显示的颜色随轮播设定图片的动态变化的颜色进行动态变换，其中，所述图标组包括多个图标，

其中，所述设定图片位于图片区域，所述图标组位于与所述图片区域相邻的图标组所在区域，并且所述图标组按以下方式进行镂空处理：

在所述图标组所在区域内，将每个所述图标的形状区域内镂空变为透明，将每个所述图标的形状区域外设为非透明颜色。

7.根据权利要求6所述的方法，其特征在于：

所述设定图片包括当前页面的横幅广告图片。

8.根据权利要求6所述的方法，其特征在于，所述获取页面中的设定图片的部分区域，包括：

持续获取页面中的颜色动态变化的设定图片的部分区域。

9.根据权利要求6所述的方法，其特征在于，所述获取页面中的设定图片的部分区域，包括：

截取页面中的设定图片的部分区域，进行高斯模糊处理。

10.根据权利要求9所述的方法，其特征在于，所述进行高斯模糊处理之后还包括：

对所述截取的部分区域添加滤镜层。

Images