一种导航标签窗口颜色设置方法及装置与流程

文档序号:14688036发布日期:2018-06-15 06:48阅读:208来源:国知局

本申请涉及网页技术领域,尤其涉及一种导航标签窗口颜色设置方法及装置。



背景技术:

随着通信技术的发展,通过移动设备上网已经日益成为用户普遍使用的功能。现有在一些浏览器或网址导航的个性化主页里,为了方便快速访问常用的网址,便于用户阅读,用户最常访问的一些网址都会以图标的形式表示出来,这些图标上显示了对应网址LOGO图片,方便用户一目了然地找到自己经常访问的网址。

在个性化主页内,通常设置一些行列排列的导航标签窗口,导航标签窗口内显示有导航图标,当用户需要快速访问某一个网址时,可以通过编辑的方式,将对应网址LOGO图片等作为导航图标填充到该导航标签窗口内,并且建立导航图标与网址的对应关系。为了设计方便以及美观,所有的导航标签窗口的尺寸大小都是统一的,例如:统一尺寸的方形。

在实际应用中,申请人发现,由于不同网址的LOGO尺寸大小都不统一,例如:www.baidu.com的LOGO为熊掌图标,www.163.com的LOGO 为“易”的美术字体,为了将不同网址的LOGO图标填充到导航标签窗口,通常会对尺寸大的LOGO进行缩小,对尺寸小的图标LOGO进行放大,但是,对于长宽比相差较大的LOGO,即使扩大或缩小后,可以将 LOGO填充到导航标签窗口内,但仅能覆盖部分导航标签窗口,并且由于导航标签窗口有底色,所以填充后,会在LOGO外围有部分颜色不协调的区域,尤其是底色和LOGO颜色相差较大时,影响导航图标的整体美观,进而影响用户对导航图标的点击频率。



技术实现要素:

为了解决上述技术问题或者至少部分地解决上述技术问题,本申请提供了一种导航标签窗口颜色设置方法及装置。

有鉴于此,第一方面,本申请提供了一种导航标签窗口颜色设置方法,所述导航标签窗口内可填充图标,所述方法包括:

获取所述导航标签窗口待填充的图标;

在所述图标中确定颜色参考区域;

获取所述颜色参考区域中像素的颜色信息,

根据所述颜色信息,确定所述导航标签窗口的背景颜色;

将所述导航标签窗口背景的颜色设置为所述背景颜色。

可选地,所述在所述图标中确定颜色参考区域,包括:

在所述图标的上选取1像素宽度的一个区域;

遍历所选取区域中所有像素点的像素值;

根据遍历得到的像素值,判断所选取区域是否透明;

当所选区域为不透明时,将所选取与确定为颜色参考区域;

当所选取区域为透明时,在所述图标的上选取1像素宽的另一区域,并重新遍历像素值,直至确定出颜色参考区域。

可选地,所述在所述图标的上选取1像素宽度的一个区域,包括:

在所述图标的外围选取1像素宽度的边框区域;

或者,在所述图标左侧边选取1像素宽度的左区域;

或者,在所述图标的右侧边选取1像素宽度的右区域;

或者,在所述图标的上侧边选取1像素宽度的上区域;

或者,在所述图标的下侧边选取1像素宽度的下区域。

可选地,所述根据所述颜色信息,确定所述导航标签窗口的背景颜色,包括:

根据所述颜色信息中RGB三个分量的值,将所述颜色参考区域内的像素点分成多个颜色组,每个颜色组唯一对应一个颜色;

按照组内像素点的数量对多个颜色组进行排序;

选取组内像素点数量最多的颜色组作为目标颜色组;

将所述目标颜色组对应的颜色作为所述背景颜色。

可选地,所述根据所述颜色信息,确定所述导航标签窗口的背景颜色,还包括:

获取所述颜色参考区域边缘的像素总量;

针对每个颜色组,分别判断组内像素点的数量是否大于所述像素总量的预设比例;

当组内像素点的数量大于所述像素总量的预设比例时,对组内像素点的数量大于所述像素总量的预设比例的颜色组进行排序。

可选地,所述根据所述颜色信息,确定所述导航标签窗口的背景颜色,还包括:

判断所述目标颜色组内的像素值的RGB三个分量与最大阈值、最小阈值的关系;

当任意一个分量位于最大阈值和最小阈值之间时,将所述目标颜色组对应的颜色作为所述背景颜色。

可选地,所述根据所述颜色信息,确定所述导航标签窗口的背景颜色,还包括:

当三个分量均大于预设最大阈值时,将白色确定为所述背景颜色;

当三个分量均小于预设最小阈值时,将黑色确定为所述背景颜色。

第二方面,本申请提供了一种导航标签窗口颜色设置装置,所述导航标签窗口内可填充图标,所述装置包括:

图标获取单元,获取所述导航标签窗口待填充的图标;

区域确定单元,用于在所述图标中确定颜色参考区域;

信息获取单元,用于获取所述颜色参考区域中像素的颜色信息,

颜色确定单元,用于根据所述颜色信息,确定所述导航标签窗口的背景颜色;

颜色设置单元,用于将所述导航标签窗口背景的颜色设置为所述背景颜色。

可选地,所述区域确定单元,包括:

区域选取子单元,用于在所述图标的上选取1像素宽度的一个区域;

像素值获取子单元,用于遍历所选取区域中所有像素点的像素值;

透明判断子单元,用于根据遍历得到的像素值,判断所选取区域是否透明;

区域确定子单元,用于当所选区域为不透明时,将所选取与确定为颜色参考区域;

所述区域选取子单元,还用于当所选取区域为透明时,在所述图标的上选取1像素宽的另一区域,并重新遍历像素值,直至所述区域确定子单元确定出颜色参考区域。

可选地,所述颜色确定单元,包括:

分组子单元,用于根据所述颜色信息中RGB三个分量的值,将所述颜色参考区域内的像素点分成多个颜色组,每个颜色组唯一对应一个颜色;

排序子单元,用于按照组内像素点的数量对多个颜色组进行排序;

目标选取子单元,用于选取组内像素点数量最多的颜色组作为目标颜色组;

颜色确定子单元,用于将所述目标颜色组对应的颜色作为所述背景颜色。

本申请实施例提供的上述技术方案与现有技术相比具有如下优点:

本申请实施例提供的该方法,在生成导航标签窗口的同时,可以根据填充到导航标签窗口中的图标的颜色信息,自动生成导航标签窗口的背景颜色,并且根据该背景颜色设置导航标签窗口背景的颜色。

采样上述设计,当图标填充到导航标签窗口内时,可以使得导航标签窗口背景的颜色与图标的颜色相一致、协调,也即背景颜色与图标颜色相比,不是很突兀,可以提高导航标签窗口的颜色的协调性以及美观程度,进而可以避免用户由于窗口的颜色而放弃点击导致导航标签窗口被点击的频率降低的问题。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本发明的实施例,并与说明书一起用于解释本发明的原理。

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

图1为本申请实施例提供的一种终端的界面示意图;

图2为本申请实施例提供的一种导航标签窗口颜色设置方法的流程示意图;

图3为本申请实施例提供的一种导航标签窗口颜色设置装置的结构示意图。

具体实施方式

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

本申请实施例提供了一种导航标签窗口颜色设置方法,该方法可以应用于包含有多个导航标签窗口的导航页面中。

图1为本申请实施例提供的一种终端的界面示意图,如图1所示,图中包括:终端1、显示界面2、搜索框5和导航图标窗口3,其中,当前显示界面2为导航页面,在导航页面中有网站标识“AABB”,搜索框5位于网站标识下方,在搜索框5下方有多个行列排布的导航图标窗口3,并且通过选择排序最后的带有“+”的图标,还可以增加导航图标窗口3的数量。在导航窗口3内填充有网址的图标4,点击该导航窗口3,可以跳转到对应的网址。

图2为本申请实施例提供的一种导航标签窗口颜色设置方法的流程示意图。

如图2所示,该导航标签窗口颜色设置方法,包括以下步骤。

S101,获取所述导航标签窗口待填充的图标。

不同网站的图标不同,当用户点击图1中的“+”的图标时,可以添加导航网址,当用户编辑后,可以获取到导航网址的图标。

S102,在所述图标中确定颜色参考区域。

在本申请实施例中,该步骤可以包括以下步骤:

S1021,在所述图标的上选取1像素宽度的一个区域。

在本申请实施例中,1像素宽度的区域,可以为所述图标的外围选取1像素宽度的边框区域,另一种情况下,还可以为所述图标左侧边选取1像素宽度的左区域;再一种情况下,还可以为所述图标的右侧边选取1像素宽度的右区域;再一种情况下,还可以为所述图标的上侧边选取1像素宽度的上区域;再一种情况下,还可以为所述图标的下侧边选取1像素宽度的下区域。

通常情况下,1像素的区域都位于图标的外周边缘一个边或多个边,这是考虑到选取图标边缘的区域中的颜色来设置导航标签窗口填充颜色后,可以使得导航标签窗口的颜色与图标的颜色相协调。

S1022,遍历所选取区域中所有像素点的像素值。

在该步骤中,可以对区域中每个像素点进行遍历,遍历的顺序本申请实施例不做限定。

S1023,根据遍历得到的像素值,判断所选取区域是否透明。

每个像素通常都会有如下参数:透明度或RGB等参数,当区域内所有像素的透明度都为100%时,确定该区域为透明。

S1024,当所选区域为不透明时,将所选取与确定为颜色参考区域。

当所选取的区域为透明时,以该区域内像素的颜色作为参考,就没有什么意义,在本申请实施例中,只有所选区域为不透明时,才可以作为颜色参考区域。

S1025,当所选取区域为透明时,在所述图标的上选取1像素宽的另一区域,并重新遍历像素值,直至确定出颜色参考区域。

在本申请实施例中,重选的另一区域通常是位于前一选择区域的内侧,这里向内是指沿图标的边缘指向中心的方向,外外是指沿图标的中心执行图标的边缘的方向。通常情况下,重选的区域和前一选择区域相邻。

S103,获取所述颜色参考区域中像素的颜色信息。

不同的网站图标的颜色是不同的,例如:新浪微博的LOGO图标的颜色大体为黄颜色,饿了吗的LOGO图标的颜色大体上为蓝颜色。这里颜色信息可以是所选区域内像素点的像素值。在本申请实施例中,颜色信息可以为像素的RGB值,R为红色,G为绿色,B为蓝色。

S104,根据所述颜色信息,确定所述导航标签窗口的背景颜色。

在本申请实施例中,该步骤可以包括:

S1041,根据所述颜色信息中RGB三个分量的值,将所述颜色参考区域内的像素点分成多个颜色组。

在本申请实施例中,一个RGB组合就可以确定为一个颜色组,例如:RGB分别为(215,121,45)就是一个颜色组,每个颜色组唯一对应一个颜色。

S1042,按照组内像素点的数量对多个颜色组进行排序。

排序是完全根据像素点的数量进行排序。

S1043,选取组内像素点数量最多的颜色组作为目标颜色组。

颜色组内的像素点数量越多表示该颜色组对应的颜色的占比越高,相应地也越接近图标的颜色。例如:饿了吗的颜色大部分为蓝色,部分为白色,如果选取最外边的边框或任意一条边,蓝色的像素点的数量占比通常是比较高的。

S1044,将所述目标颜色组对应的颜色作为所述背景颜色。

所以在该步骤中,直接将组内像素点数量最多的颜色组对应的颜色确定为背景颜色。

S105,将所述导航标签窗口背景的颜色设置为所述背景颜色。

在该步骤之后,还可以将图标填充到所述导航标签窗口内。在填充时,通常将图标填充到导航标签窗口的中心位置,也即图标的中心与导航标签窗口的中心相重合。

在本申请实施例中,在获取到待填充的图标后,还可以对图标进行缩放,例如:统一缩放到120*120像素,这样在对图标颜色提取时,可以直接对该120*120像素的图标进行处理,可以提高颜色处理效率。

本申请实施例提供的该方法,在生成导航标签窗口的同时,可以根据填充到导航标签窗口中的图标的颜色信息,自动生成导航标签窗口的背景颜色,并且根据该背景颜色设置导航标签窗口背景的颜色。

采样上述设计,当图标填充到导航标签窗口内时,可以使得导航标签窗口背景的颜色与图标的颜色相一致、协调,也即背景颜色与图标颜色相比,不是很突兀,可以提高导航标签窗口的颜色的协调性以及美观程度,进而可以避免用户由于窗口的颜色而放弃点击导致导航标签窗口被点击的频率降低的问题。

在本申请另一个实施例中,在进行排序之前,该步骤S104还可以包括:

S1045,获取所述颜色参考区域边缘的像素总量。

由于区域是1像素宽度,所以边缘的像素总量,也即该颜色参考区域的长度,例如:当颜色参考区域为四边形的边框时,像素总量即边框的周长,当颜色参考区域为一个侧边时,像素总量即为侧边的长度。

S1046,针对每个颜色组,分别判断组内像素点的数量是否大于所述像素总量的预设比例。

在本申请实施例中,预设比例可以设置为1%~3%,在该步骤中,判断的目的是为了分析该颜色组的重要性,若某一个颜色组中像素点的数量占像素总数量的少于1%~3%,也即该颜色组对于整体而言可以忽略不计。

S1047,当组内像素点的数量大于所述像素总量的预设比例时,对组内像素点的数量大于所述像素总量的预设比例的颜色组进行排序。

通过对颜色组进行筛选,可以不再对那些可以忽略不计的颜色组进行后续的计算,因此,可以提高计算效率。

在本申请一个实施例中,该步骤S104还可以包括:

S1048,判断所述目标颜色组内的像素值的RGB三个分量与最大阈值、最小阈值的关系。

在本申请实施例中,最小阈值可以为255*0.09,最大阈值可以为 (1-0.09)*255。

由于RGB颜色中,RGB的分量越大,颜色越接近白色,并且白色会有一个区间的颜色无法区分,所以这一区间都可以设置为白色。而 RGB的分量越小,颜色越接近黑色,并且黑色会有一个区间的颜色无法区分,所以这一区间都可以设置为黑色。

S1049,当任意一个分量位于最大阈值和最小阈值之间时,将所述目标颜色组对应的颜色作为所述背景颜色。

因此,只有RGB分量中有任意一个或多个位于最大阈值和最小阈值之间,才会将颜色组的真实颜色作为背景颜色。

在本申请一个实施例中,在S1048实施例的基础上,该步骤S104 还可以包括:

S1050,当三个分量均大于预设最大阈值时,将白色确定为所述背景颜色。

以上述最小阈值可以为255*0.09,最大阈值可以为(1-0.09)*255 为例,(232,232,232),以及R值大于232,B值大于232,以及G 值大于232的所有颜色组,都可以看为白色。在本申请实施例中,白色可以为(255,255,255)。

S1051,当三个分量均小于预设最小阈值时,将黑色确定为所述背景颜色。

以上述最小阈值可以为255*0.09,最大阈值可以为(1-0.09)*255 为例,(232,232,232),以及R值小于23,B值小于23,以及G值小于23的所有颜色组,都可以看为黑色。在本申请实施例中,黑色可以为(0,0,0)。

本申请实施例还提供了一种导航标签窗口颜色设置装置。如图3 所示,该装置可以包括:

图标获取单元11,获取所述导航标签窗口待填充的图标;

区域确定单元12,用于在所述图标中确定颜色参考区域;

信息获取单元13,用于获取所述颜色参考区域中像素的颜色信息,

颜色确定单元14,用于根据所述颜色信息,确定所述导航标签窗口的背景颜色;

颜色设置单元15,用于将所述导航标签窗口背景的颜色设置为所述背景颜色。

在本申请一个实施例中,所述区域确定单元,包括:

区域选取子单元,用于在所述图标的上选取1像素宽度的一个区域;

像素值获取子单元,用于遍历所选取区域中所有像素点的像素值;

透明判断子单元,用于根据遍历得到的像素值,判断所选取区域是否透明;

区域确定子单元,用于当所选区域为不透明时,将所选取与确定为颜色参考区域;

所述区域选取子单元,还用于当所选取区域为透明时,在所述图标的上选取1像素宽的另一区域,并重新遍历像素值,直至所述区域确定子单元确定出颜色参考区域。

在本申请一个实施例中,区域选取子单元,包括:

第一选取单元,用于在所述图标的外围选取1像素宽度的边框区域;

或者,第二选取单元,用于在所述图标左侧边选取1像素宽度的左区域;

或者,第三选取单元,用于在所述图标的右侧边选取1像素宽度的右区域;

或者,第四选取单元,用于在所述图标的上侧边选取1像素宽度的上区域;

或者,第五选取单元,用于在所述图标的下侧边选取1像素宽度的下区域。

在本申请一个实施例中,所述颜色确定单元,包括:

分组子单元,用于根据所述颜色信息中RGB三个分量的值,将所述颜色参考区域内的像素点分成多个颜色组,每个颜色组唯一对应一个颜色;

排序子单元,用于按照组内像素点的数量对多个颜色组进行排序;

目标选取子单元,用于选取组内像素点数量最多的颜色组作为目标颜色组;

颜色确定子单元,用于将所述目标颜色组对应的颜色作为所述背景颜色。

在本申请一个实施例中,所述颜色确定单元,还包括:

总量获取子单元,用于获取所述颜色参考区域边缘的像素总量;

比例判断子单元,用于针对每个颜色组,分别判断组内像素点的数量是否大于所述像素总量的预设比例;

所述排序子单元,还用于当组内像素点的数量大于所述像素总量的预设比例时,对组内像素点的数量大于所述像素总量的预设比例的颜色组进行排序

在本申请一个实施例中,所述颜色确定单元,还包括:

阈值比较子单元,用于与判断所述目标颜色组内的像素值的RGB 三个分量与最大阈值、最小阈值的关系;

所述颜色确定子单元,还用于当任意一个分量位于最大阈值和最小阈值之间时,将所述目标颜色组对应的颜色作为所述背景颜色。

在本申请一个实施例中,

所述颜色确定子单元,还用于当三个分量均大于预设最大阈值时,将白色确定为所述背景颜色;

所述颜色确定子单元,还用于当三个分量均小于预设最小阈值时,将黑色确定为所述背景颜色。

为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本发明时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置或系统实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的装置及系统实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。

可以理解的是,本发明可用于众多通用或专用的计算系统环境或配置中。例如:个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是,在本文中,诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本发明的具体实施方式,使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下,在其它实施例中实现。因此,本发明将不会被限制于本文所示的这些实施例,而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1