CN104679380A - 用户界面背景色调整系统及其方法 - Google Patents

Abstract

本发明提供了一种用户界面背景色调整系统，该调整系统用于根据一图标的颜色自动调整与该图标对应位置的背景色，该调整系统包括依次连接的颜色取样单元、主色统计与确定单元、背景确定与生成单元以及存储模块。该调整系统通过获取图标的主色，并根据主色确定背景色，实现了背景色的灵活变化。本发明还提供了一种用户界面背景色的调整方法。

Description

用户界面背景色调整系统及其方法

技术领域

本发明涉及一种用户界面的背景色调整系统及其方法，尤其涉及一种能够根据图标颜色自动调整背景色的调整系统及其方法。

背景技术

具有显示系统的电子产品以其强大的人机交互功能深受使用者的欢迎，用户通过操作用户界面上的图标就可以轻松实现人机对话和互动。但是，现在市面上的电子产品中，大多数用户界面的背景颜色都是固定的，用户不能根据现实的图标进行背景颜色的调整。在某些情况下，用户很难将图标和背景区别开来，不利于提升用户的使用满意度。

发明内容

有鉴于此，有必要提供一种能够根据图标颜色自动调整背景色的调整系统。

本发明提供了一种用户界面背景色调整系统，该调整系统用于根据一图标的颜色自动调整与该图标对应位置的背景色，该调整系统包括：

颜色取样单元，用于对所述图标进行取样；

主色统计与确定单元，用于根据所述颜色取样单元获取的每个取样点的颜色值确定所述图标的主色，以及

背景确定与生成单元，用于根据所述主色统计与确定单元确定的图标主色生成背景。

本发明还提供了一种用户界面背景色调整方法，该方法包括：

a，对一图标进行取样，获得多个取样点；

b，根据所述多个取样点的颜色值确定所述图标的主色；

c，根据所述主色生成所述图标的背景。

本发明之用户界面背景色调整系统及其方法，自动获取图标的主色，并根据主色确定背景的颜色，实现了背景色的灵活变化，便于提高用户的使用满意度。

附图说明

图1为本发明一实施方式中的调整系统的功能模块示意图。

图2为用户界面示意图。

图3-a为第一类区块在调整背景色前的状态示意图。

图3-b为图3-a中图标区域的取样示意图。

图4为色环示意图。

图5为图3-a中第一类区块在完成背景色调整后的状态示意图。

图6为图1中调整系统的方法的主流程图。

图7为图6中步骤S1的子流程图。

图8为图6中步骤S2的子流程图。

图9为图6中步骤S3的子流程图。

主要元件符号说明

调整系统	100
		颜色取样单元	10
坐标定义子模块	11
		坐标取样子模块	12
第一颜色统计子模块	13
		主色统计与确定单元	20
第一容差计算子模块	21
		第二颜色统计子模块	22
主色确定子模块	23
		背景确定与生成单元	30
第二容差计算子模块	31
		背景色确定子模块	32
背景生成子模块	33
		存储模块	40
用户界面	50
		第一类区块	51
图标	510
		图标区域	511
背景区域	512
		应用名区域	513
取样区域	514
		第二类区块	52
第三类区块	53
		第四类区块	54
色环	60
		红色区	61
绿色区	62
		蓝色区	63
步骤	S1~S3、S10~S18

如下具体实施方式将结合上述附图进一步说明本发明。

具体实施方式

下面将结合附图，对本发明作进一步的详细说明。

请参阅图1，本发明提供了一种用户界面的背景色调整系统100，以下简称调整系统100。该调整系统100运行于一具有显示系统的电子装置（图未示）上，用于根据电子装置显示的应用图标调整该图标对应的背景色。该调整系统100包括颜色取样单元10、主色统计与确定单元20、背景确定与生成单元30以及存储模块40。

请参阅图2，用户界面50为所述电子装置显示的一交互界面，该用户界面50由多种类型的区块组成。在本实施方式中，该用户界面50由第一类区块51、第二类区块52、第三类区块53以及第四类区块54四种类型的区块组成，该四种类型的区块用于放置不同尺寸的图标。

请参阅图3-a，以第一类区块51为例，该第一类区块51包括图标区域511、背景区域512和应用名区域513，图标510即显示于所述图标区域511中，该图标510的尺寸固定，且与所述图标区域511的尺寸相配合。在一实施方式中，在根据图标510的颜色调整背景区域512的颜色前，该背景区域512和应用名区域513以预设颜色，例如白色填充，该应用名区域513也处于空白状态，未填充应用名称。

请一并参阅图1和图3-b，所述颜色取样单元10用于对所述图标510进行取样，该颜色取样单元10包括坐标定义子模块11、坐标取样子模块12和第一颜色统计子模块13。当所述图标510被显示于所述图标区域511中时，该坐标定义子模块11建立直角坐标系，将所述图标510各个颜色点的位置以坐标的形式定义。在本实施方式中，该坐标定义子模块11以所述图标区域511一个角的顶点，例如左下角顶点做为坐标原点建立直角坐标系，该图标区域511即位于该直角坐标系的第一象限。

所述坐标取样子模块12用于在所述图标区域511中一预设的取样区域514内对所述图标510的颜色点以预设间距进行等间隔的取样。该预设的取样区域514的尺寸根据所述图标区域511的尺寸确定，在本实施方式中，该取样区域514为所述图标区域511四周分别缩进17%后形成的区域。确定该取样区域514后，所述坐标取样子模块12首先以该取样区域514中距离坐标原点最近的点为基点沿X轴方向进行等间距采样，然后在X轴取样点的基础上沿Y轴方向进行相同的等间距采样。

所述第一颜色统计子模块13用于获取所述图标510进行取样后每个取样点的颜色值。在本实施方式中，该第一颜色统计子模块13进一步比较每个取样点与其他取样点的颜色值，若有多个取样点的颜色值相同，则只保留一个取样点，以确保任何两个取样点的颜色值都不相同，所述取样点的颜色值是指取样点的R、G、B值。

所述主色统计与确定单元20用于根据所述第一颜色统计子模块13获取的每个取样点的颜色值确定所述图标510的主色，包括第一容差计算子模块21、第二颜色统计子模块22和主色确定子模块23。

所述第一容差计算子模块21用于计算所述每个取样点对其他取样点的容差值。首先，随机选取一取样点P1，其颜色值为P1(R1,G1,B1)，依次计算该取样点P1与其他所有取样点的容差值，例如相对取样点P2的容差值，该取样点P2的颜色值为P2(R2,G2,B2)，则P1对P2的容差值t=max((R1-R2),(G1-G2),(B1-B2))+max(|R1-R2|,|G1-G2|,|B1-B2|)，其中，max((R1-R2),(G1-G2),(B1-B2))中的R1-R2、G1-G2和B1-B2的运算结果需要为正值，若结果为负值，则放置在max(|R1-R2|,|G1-G2|,|B1-B2|)中进行运算。例如，P1(33,33,43)对P2(31,30,48)的容差值t=max((33-31),(33-30))+max(|43-48|)，运算结果为8。

所述第二颜色统计子模块22用于判断所述第一容差计算子模块21计算出的取样点P1对P2的容差值是否低于一预设值，若低于，则认为P1和P2是同一种颜色，否则认为P1和P2是不同的颜色。

在一实施方式中，完成P1对P2的容差值计算后，再计算P1对其他取样点的容差值，直到P1对其他所有取样点的容差值计算完毕，然后统计与P1相同的颜色的出现次数。在与P1不同颜色的取样点中随机选取一个取样点，例如P3，然后计算该取样点P3对其他与P1不同颜色的取样点的容差值，再统计与该取样点P3相同的颜色的出现次数，依此方法进行，直到完成对所述坐标取样模块12选取的取样点中每种颜色的出现次数的统计。

在另一实施方式中，完成P1对P2的容差值计算后，确定P1与P2是否为同一种颜色，若是，则计P1颜色出现的次数为2，然后在其他的取样点中随机选取一个取样点，例如P4，计算该取样点P4对P1的容差值，确定P4与P1是否为同一种颜色，若是，则计P1颜色出现的次数为3。若P1与P2为不同的颜色，则分别计P1和P2的出现次数为1，然后在其他的取样点中随机选取一个取样点，例如P5，分别计算该取样点P5对P1和P5对P2的容差值，并确定P5与P1或P2是否为同一种颜色。依此方法进行，直到完成对所述坐标取样模块12选取的取样点中每种颜色的出现次数的统计。

所述主色确定子模块23用于根据所述第二颜色统计子模块22确定的每种颜色的出现次数确定所述图标510的主色。该主色确定子模块23首先选出出现次数最多的颜色，然后通过该颜色的颜色值确定该颜色是否为白色或者黑色，若否，则该颜色即为所述图标510的主色；若是，则直接确定灰色为该图标510的主色。

所述背景确定与生成单元30用于根据所述主色确定子模块23确定的主色对所述背景区域512重新进行填充，包括第二容差计算子模块31、背景色确定子模块32和背景生成子模块33。

请一并参阅图4，所述存储模块40中存储有一色环60，该色环60包括多种互不相同的颜色，且该多种颜色为连续变化的，即相邻的两种颜色之间颜色值相差很小。在本实施方式中，所述色环60包括21种颜色，该21种颜色成圆环状均匀排布，分为红色区61、绿色区62以及蓝色区63三个区域，其中每个区域包括7种颜色，该7种颜色包括1种纯色以及6种渐变色。以红色区61为例，该红色区61包括1个纯红色，其颜色值为(255,0,0)，靠近绿色区62的方向为3个绿色渐变色，其颜色值为(255,A,0)，其中，A代表的数值随着该绿色渐变色与所述绿色区62的距离减小而增大，靠近蓝色区63的方向为3个蓝色渐变色，其颜色值为(255,0,B)，其中B代表的数值随着该蓝色渐变色与所述蓝色区63的距离减小而增大。该存储模块40同时还记录该色环60中每种颜色的颜色值以及相邻关系。

所述第二容差计算子模块31用于计算所述主色对色环60中每种颜色的容差值。计算方法与所述第一容差计算子模块21的方法相同，在此省略描述。

所述背景色确定子模块32用于确定所述色环60中与主色颜色最相近的颜色，并找到该颜色的相邻色。具体地，该背景色确定子模块32首先比较主色与色环60中每种颜色的容差值，找到容差值最小的颜色，该颜色即为与主色颜色最相近的颜色，然后根据色环60中每种颜色的相邻关系找到与该颜色相邻的两种颜色，任取一种颜色做为背景色。

请一并参阅图5，所述背景生成模块33用于以所述背景色填充背景区域512，并在应用名区域513中显示所述图标510对应的应用名称，该背景生成模块33同时还以所述背景色填充该应用名区域513。

请参阅图6，为本发明一实施方式中调整系统100的用户界面背景色调整方法流程图，该方法包括：

步骤S1，颜色取样模块10对一图标进行取样，获得多个取样点；

步骤S2，主色统计与确定模块20根据所述多个取样点的颜色值确定所述图标的主色；

步骤S3，背景确定与生成模块30根据所述主色生成所述图标的背景。

其中，步骤S1具体包括：

步骤S10，坐标定义子模块11建立直角坐标系。具体地，在本实施方式中，该坐标定义子模块11以所述图标区域511的一个角的顶点，例如左下角顶点做为坐标原点建立直角坐标系，该图标区域511即位于该直角坐标系的第一象限。

步骤S11，坐标取样子模块12在所述图标区域511中一预设的取样区域514内对所述图标510的颜色点以预设间距进行等间隔的取样。该取样区域514的尺寸根据所述图标区域511的尺寸确定。

在本实施方式中，该取样区域514为所述图标区域511四周分别缩进17%后形成的区域。确定该取样区域514后，所述坐标取样子模块12首先以该取样区域514中距离坐标原点最近的点为基点沿X轴方向进行等间距采样，然后在X轴取样点的基础上沿Y轴方向进行相同的等间距采样。

步骤S12，第一颜色统计子模块13获取所述坐标取样子模块12对所述图标510进行取样后每个取样点的颜色值。在本实施方式中，该第一颜色统计子模块13进一步比较每个取样点与其他取样点的颜色值，若有多个取样点的颜色值相同，则只保留一个取样点，以确保任何两个取样点的颜色值都不相同，所述取样点的颜色值是指取样点的R、G、B值。

步骤S2具体包括：

步骤S13，第一容差计算子模块21计算所述每个取样点对其他取样点的容差值。

具体地，首先随机选取两个取样点P1和P2，其颜色值分别为P1(R1,G1,B1)和P2(R2,G2,B2)，则P1对P2的容差值t=max((R1-R2),(G1-G2),(B1-B2))+max(|R1-R2|,|G1-G2|,|B1-B2|)，其中，max((R1-R2),(G1-G2),(B1-B2))中的R1-R2、G1-G2和B1-B2的运算结果需要为正值，若结果为负值，则放置在max(|R1-R2|,|G1-G2|,|B1-B2|)中进行运算。例如，P1(33,33,43)对P2(31,30,48)的容差值t=max((33-31),(33-30))+max(|43-48|)，运算结果为8。

步骤S14，第二颜色统计子模块22判断所述第一容差计算子模块21计算出的取样点的容差值是否低于一预设值，并统计每种颜色的出现次数。

具体地，若P1对P2的容差值低于所述预设值，则认为P1和P2是同一种颜色，否则认为P1和P2是不同的颜色。

在一实施方式中，完成P1对P2的容差值计算后，再计算P1对其他取样点的容差值，直到P1对其他所有取样点的容差值计算完毕，然后统计与P1相同的颜色的出现次数。在与P1不同颜色的取样点中随机选取一个取样点，例如P3，然后计算该取样点P3对其他与P1不同颜色的取样点的容差值，再统计与该取样点P3相同的颜色的出现次数，依此方法进行，直到完成对所述坐标取样模块12选取的取样点中每种颜色的出现次数的统计。

在另一实施方式中，完成P1对P2的容差值计算后，确定P1与P2是否为同一种颜色，若是，则计P1颜色出现的次数为2，然后在其他的取样点中随机选取一个取样点，例如P4，计算该取样点P4对P1的容差值，确定P4与P1是否为同一种颜色，若是，则计P1颜色出现的次数为3。若P1与P2为不同的颜色，则分别计P1和P2的出现次数为1，然后在其他的取样点中随机选取一个取样点，例如P5，分别计算该取样点P5对P1和P5对P2的容差值，并确定P5与P1或P2是否为同一种颜色。依此方法进行，直到完成对所述坐标取样模块12选取的取样点中每种颜色的出现次数的统计。

步骤S15，主色确定子模块23根据每种颜色的出现次数确定所述图标510的主色。

具体地，该主色确定子模块23首先选出出现次数最多的颜色，然后通过该颜色的颜色值确定该颜色是否为白色或者黑色，若否，则确定该颜色为图标510的主色；若是，则直接确定灰色为该图标510的主色。

步骤S3具体包括：

步骤S16，第二容差计算子模块31计算所述主色对一色环60中每种颜色的容差值。计算方法与所述第一容差计算子模块21的方法相同，在此省略描述。

在本实施方式中，存储模块40中还存储有一色环60，该色环60包括24种互不相同的颜色，且该多种颜色为连续变化的，即相邻的两种颜色之间颜色值相差很小。该存储模块40同时还记录该色环60中每种颜色的颜色值以及相邻关系。

步骤S17，背景色确定子模块32确定所述色环60中与主色颜色最相近的颜色，并找到该颜色的相邻色。

具体地，该背景色确定子模块32首先比较主色与色环60中每种颜色的容差值，找到容差值最小的颜色，该颜色即为与主色颜色最相近的颜色，然后根据色环60中每种颜色的相邻关系找到与该颜色相邻的两种颜色，任取一种颜色做为背景色。

步骤S18，背景生成子模块33以所述背景色填充背景区域512，并在应用名区域513中填写所述图标510对应的应用名称，该背景生成子模块33同时还以所述背景色填充该应用名区域513。

本发明之用户界面背景色调整系统及其方法，自动获取图标的主色，并根据主色确定背景的颜色，实现了背景色的灵活变化，便于提高用户的使用满意度。

本技术领域的普通技术人员应当认识到，以上的实施方式仅是用来说明本发明，而并非用作为对本发明的限定，只要在本发明的实质精神范围之内，对以上实施方式所作的适当改变和变化都落在本发明要求保护的范围之内。

Claims (10)

1.一种用户界面背景色调整系统，该调整系统用于根据一图标的颜色自动调整与该图标对应位置的背景色，其特征在于，该调整系统包括：

颜色取样单元，用于对所述图标进行取样；

主色统计与确定单元，用于根据所述颜色取样单元获取的每个取样点的颜色值确定所述图标的主色，以及

背景确定与生成单元，用于根据所述主色统计与确定单元确定的图标主色生成背景。

2.如权利要求1所述的调整系统，其特征在于，所述颜色取样单元包括：

坐标定义子模块，用于建立一直角坐标系；

坐标取样子模块，用于在一图标区域中的取样区域内对所述图标的颜色点进行取样，以及

第一颜色统计子模块，用于获取每个取样点的颜色值。

3.如权利要求2所述的调整系统，其特征在于，所述主色统计与确定单元包括：

第一容差计算子模块，用于计算所述取样点之间的容差值；

第二颜色统计子模块，用于判断所述容差值是否低于一预设值，并统计每种颜色的出现次数，以及

主色确定子模块，用于根据所述每种颜色的出现次数确定所述图标的主色。

4.如权利要求3所述的调整系统，其特征在于，所述调整系统还包括一存储模块，该存储模块存储有一色环，该色环包括多种互不相同的颜色，且该多种颜色为连续变化的，该存储模块同时还记录该色环中每种颜色的颜色值以及相邻关系。

5.如权利要求4所述的调整系统，其特征在于，所述背景确定与生成单元包括：

第二容差计算子模块，用于计算所述图标的主色对所述色环中多种颜色的容差值；

背景色确定模块，用于确定所述色环中与图标主色颜色最相近的颜色，并找到该颜色的相邻色，取相邻色中的一种作为背景色，以及

背景生成模块，用于以所述背景色填充背景区域和应用名区域，同时在应用名区域填写所述图标对应的应用名称。

6.一种用户界面背景色调整方法，其特征在于，该方法包括：

a，对一图标进行取样，获得多个取样点；

b，根据所述多个取样点的颜色值确定所述图标的主色；

c，根据所述主色生成所述图标的背景。

7.如权利要求6所述的调整方法，其特征在于，步骤a具体包括：

d，以图标区域一个角的顶点做为坐标原点建立直角坐标系；

e，在所述图标区域中的取样区域内对所述图标的颜色点进行取样；

f，获取取样点的颜色值，并去除具有相同颜色值的取样点。

8.如权利要求7所述的调整方法，其特征在于，步骤b具体包括：

g，计算所述取样点之间的容差值；

h，判断所述容差值是否低于一预设值，并统计每种颜色的出现次数；

i，根据所述每种颜色的出现次数确定所述图标的主色。

9.如权利要求8所述的调整方法，其特征在于，在步骤h中，若两种颜色之间的容差值低于所述预设值，则认为该两种颜色为相同的颜色；否则认为该两种颜色为不同的颜色。

10.如权利要求8所述的调整方法，其特征在于，步骤c具体包括：

j，计算所述图标的主色对一色环中多种颜色的容差值；

k，确定所述色环中与图标主色颜色最相近的颜色，并找到该颜色的相邻色，取相邻色中的一种作为背景色；

l，以所述背景色填充背景区域和应用名区域，同时在应用名区域填写所述图标对应的应用名称。