CN113656134A - 用于界面元素的配色方法、装置、设备和存储介质 - Google Patents

Abstract

本公开公开了一种用于界面元素的配色方法，涉及计算机技术和人工智能领域，尤其涉及计算机视觉领域，可以用于用户界面元素的配色场景。具体实现方案为：确定用户界面中的界面背景；以及基于界面背景，为用户界面中的至少一个界面元素适配对应的颜色和/或图案。

Description

用于界面元素的配色方法、装置、设备和存储介质

技术领域

本公开涉及计算机技术和人工智能领域，尤其涉及计算机视觉领域，可以用于用户界面元素的配色场景。尤其涉及一种用于界面元素的配色方法、装置、设备和存储介质。

背景技术

目前，在线翻译软件为了给用户营造更好的智能化体验，通常会对用户最关注的查词结果页进行优化。比如，在查词结果页融合视感、听感以及触感等感官氛围对查询结果加以诠释。视觉感官作为第一感官，冲击力最为强烈。

发明内容

本公开提供了一种用于界面元素的配色方法、装置、设备、存储介质以及计算机程序产品。

根据本公开的一方面，提供了一种用于界面元素的配色方法，包括：确定用户界面中的界面背景；以及基于上述界面背景，为上述用户界面中的至少一个界面元素适配对应的颜色和/或图案。

根据本公开的另一方面，提供了一种用于界面元素的配色装置，包括：第一确定模块，用于确定用户界面中的界面背景；以及第一适配模块，用于基于上述界面背景，为上述用户界面中的至少一个界面元素适配对应的颜色和/或图案。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本公开实施例所述的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据本公开实施例所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据本公开实施例所述的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1A示例性示出了适于本公开实施例的系统架构；

图1B示例性示出了可以实现本公开实施例的场景图；

图2示例性示出了根据本公开实施例的用于界面元素的配色方法的流程图；

图3A示例性示出了用户界面的原版效果图；

图3B示例性示出了根据本公开实施例的用户界面效果图；

图4A和图4B示例性示出了根据本公开实施例的基于高斯模糊处理获得关键色的示意图；

图5A示例性示出了将由图4A得到的关键色直接适配为控件色彩的示意图；

图5B示例性示出了将由图4B得到的关键色直接适配为控件色彩的示意图；

图6A示例性示出了先对图4A得到的关键色进行黑色蒙层后再适配为控件色彩的示意图；

图6B示例性示出了直接利用图4B得到的关键色进行颜色适配的示意图；

图7A和图7B示例性示出了根据本公开实施例的基于背景图提取关键色的示意图；

图8示例性示出了根据本公开实施例的用于界面元素的配色装置的框图；

图9示例性示出了用来实现本公开实施例的实现用于界面元素的配色方法和装置的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

可以看到，传统的软件界面中，采用的都是常规的视觉反馈方式。这种视觉反馈方式没有从整体性出发，不能给用户带来整体的视觉感官，会有不智能、呆板的体验感。

在实现本公开发明构思的过程中，发明人发现：对软件的用户界面中的界面元素(又称页面元素，如控件等)进行适当配色干预，能让用户有更为舒适的视觉体验，且智能感体验氛围更强。

需要说明的是，界面元素与界面整体环境的适配方式大致包括以下几种方案。

方案1，界面元素的色彩可以是软件主色的延续，如使控件颜色与软件主色保持一致。该配色方式与当前界面的背景无关。并且，该配色方案适用于内容较为简单、界面元素相对偏少的用户界面。

方案2，界面元素可以不带任何色彩倾向，如软件中所有界面元素均配置为默认色。该配色方式也与当前界面的背景无关。并且，该配色方案适用于内容较为复杂、图文显示偏多的用户界面。

可以看到，如果采用方案1，则视觉浏览舒适度较高。并且方案1是一种较为通用的处理方式，虽然应用范围广，但并不能给予用户惊喜感。

也可以看到，如果采用方案2，则在展示内容过多的情况下，界面元素由于没有色彩倾向，会让用户难以迅速识别出，导致用户操作效率下降、用户体验感不佳。

对此，本公开实施例提供了一种用于界面元素的配色方案，可以先通过界面背景确定出合适的关键色，再基于关键色对界面中的相关元素加以色彩适配，由此可以营造出页面整体智能感更强的氛围。以下将结合附图和具体实施例详细阐述本公开。

适于本公开实施例的用于界面元素的配色方法和装置的系统架构介绍如下。

图1A示例性示出了适于本公开实施例的系统架构。需要注意的是，图1A所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他环境或场景。

如图1A所示，系统架构100可以包括：终端设备101、102和103、网络104以及服务端105。

需要说明的是，服务端105可以是一个服务器或者一个服务器集群。

在本公开的一个实施例中，对于需要展示的用户界面，服务端105可以确定用户界面中的界面背景，并基于该界面背景，为该用户界面中的至少一个界面元素(可以是所有界面元素；或者是界面中特定区域内的界面元素；或者是实现特定功能的界面元素)适配对应的颜色和/或图案。颜色适配完成之后，可以将用户界面加载至终端设备101、102和103上展示。

或者，在本公开的一个实施例中，对于需要展示的用户界面，可以由终端设备101、102和103从服务端105加载至本地，然后在本地执行以下操作：确定用户界面中的界面背景，并基于该界面背景，为该用户界面中的至少一个界面元素适配对应的颜色和/或图案。

应该理解，图1A中的终端设备、网络和服务端的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务端。

适于本公开实施例的用于界面元素的配色方法和装置的应用场景介绍如下。

应该理解，本公开实施例提供的配色方案，不仅仅限于对在线翻译软件中的AI词典结果页进行界面元素色彩适配，同样还适于所有需要用户沉浸式阅读或者需要体现智能感的相关页面中页面界面色彩的适配。

在这些场景中应用本公开实施例提供的配色方案，可以实现在优化用户界面视觉感的同时，使界面元素能够自适应界面整体环境进行配色。

如图1B所示，采用本公开实施例提供的配色方案，用户界面虚线框中的控件就可以自适应本界面中的背景图进行配色。

根据本公开的实施例，本公开提供了一种用于界面元素的配色方法。

图2示例性示出了根据本公开实施例的用于界面元素的配色方法的流程图。

如图2所示，用于界面元素的配色方法200可以包括：操作S210和S220。

在操作S210，确定用户界面中的界面背景。

在操作S220，基于界面背景，为用户界面中的至少一个界面元素适配对应的颜色和/或图案。

操作S210中，可以确定出当前用户界面中包含的背景色或者背景图。即，本公开实施例中，上述界面背景可以包括但不限于界面中的背景色或者背景图。

在一个实施例中，操作S220中，可以使当前用户界面中的至少一个界面元素(可以是所有界面元素；或者是界面中特定区域内的界面元素；或者是实现特定功能的界面元素)自适应通过操作S210确定的界面背景，适配对应的颜色。

或者，在另一个实施例中，操作S220中，还可以使当前用户界面中的至少一个界面元素自适应通过操作S210确定的界面背景，适配对应的图案。比如，可以将当前用户界面中所有控件的图案适配成该界面中的背景图中的图案。

或者，在另一个实施例中，操作S220中，也可以使当前用户界面中的至少一个界面元素自适应通过操作S210确定的界面背景，适配对应的颜色和图案。

如图3A所示，从用户界面的原版效果图中可以看出，界面中仅有个别控件如“简明”控件、“全部”控件和home键的颜色被适配成了查询结果“shake”显示的颜色。可以看到，本方案没有从用户界面的整体性出发，虽然视觉浏览舒适度较高，但是仍然不能给用户带来整体的视觉感官，会有不智能、呆板的用户体验感，无法给予用户惊喜感。

如图3B所示，从应用本公开实施例提供的配色方案的用户界面效果图中可以看出，对界面元素干预适配后，界面中关键控件和关键元素都适配了图中最上方虚线框内的背景图。比如，在界面中的背景图整体呈现紫色的情况下，图中虚线框内“简明”控件被适配成了紫色；图中虚线框内点击后能够输出所查单词“shake”的发音的“喇叭控件”也被适配成了紫色；图中虚线框内视频播放器的颜色和图案则被适配成了与背景图一致的颜色和图案；等等。可以看到，本方案从用户界面的整体性出发，不仅视觉浏览舒适度更高，而且可以满足查词结果页的整体流畅感和智能感。即，本方案能给用户带来整体的视觉感官，克服了图3A中界面元素配色不智能、呆板的缺陷，能够给予用户惊喜感。

对比图3B和图3A的效果图可以看出，对界面元素干预适配后，可以达到强化AI词典智能感、提升用户体验舒适度的目标。

与基于软件的主色，把界面中控件的颜色适配成软件的主色，不会给用户带来惊喜，或者与具有复杂背景图的界面，直接把控件的颜色适配成默认的颜色，导致控件不便识别，影响用户的操作效率，进而影响用户的体验感相比，本公开实施例采用基于界面背景适配界面元素的颜色和/或图案，可以克服上述缺陷，达到视觉浏览舒适度更高、智能感更强、用户体验度更佳、界面整体流畅感更好的效果。

应该理解，本公开实施例中，可以先通过当前用户界面中的界面背景确定出合适的关键色，再基于该关键色对界面中的相关元素加以色彩适配，由此可以营造出页面整体智能感更强的氛围。

在本公开的一些实施例中，可以通过图像模糊处理技术对界面中的背景图进行处理和分析，获得用于适配界面元素的关键色。

或者，在本公开的另一些实施例中，还可以直接提取背景图中包含的一种或者多种颜色，并从这个或者这些颜色中选择一种颜色作为关键色用以适配界面元素的颜色。

示例性的，作为一种可选的实施例，在界面背景包括背景图的情况下，上述的基于界面背景，为用户界面中的至少一个界面元素适配对应的颜色，可以包括如下操作。

对背景图进行图像模糊处理，得到对应的模糊图像。

基于模糊图像，获得对应的关键色。

将用户界面中的至少一个界面元素的颜色适配为关键色。

示例性的，可以先从当前用户界面中获取其包含的背景图，再采用图像模糊处理技术(如高斯模糊处理技术)将该背景图处理成对应的模糊图像，然后基于该模糊图像获得对应的关键色，并将当前的用户界面中的至少一个界面元素的颜色适配为关键色。

应该理解，由于采用图像模糊处理技术仅能确定背景图的色彩倾向，因此通过本方案获得的关键色实际上是一种概念上的颜色(称为概念色)，其颜色纯度通常较低。但是本方案的优势也正在于可以提取界面中原背景图的整体概念色。这是因为，结合AI词典结果页的需求，氛围感渲染界面元素可以只适配一个关键色，且该关键色需要与当前用户界面中的背景图整体强关联，所以利用本方案提取界面中原背景图的整体概念色存在天然优势。并且，基于这种整体概念色对界面元素进行配色干预后，界面整体智能感更强、体流畅感更好、用户体验度更佳。

在本公开实施例中，得到模糊图像后，可以将模糊图像中心位置处的颜色作为本公开实施例所要提取的关键色。比如，可以将模糊图像中心像素点的颜色作为关键色。

示例性的，作为一种可选的实施例，基于模糊图像，获得对应的关键色，可以包括如下操作。

确定模糊图像中的中心像素点的颜色。

将中心像素点的颜色作为关键色。

具体地，可以先找到模糊图像的几何中心，再将几何中心处的像素点的颜色作为关键色。然后将当前用户界面中的界面元素的颜色适配为该关键色。

图4A和图4B示例性示出了根据本公开实施例的基于高斯模糊处理获得关键色的示意图。

如图4A所示，图中左边的图像是背景图，中间的图像是由该背景图进行高斯模糊处理得到的模糊图像，图中右边的圆圈中显示的颜色则是基于该模糊图像得到的关键色。

类似地，如图4B所示，图中左边的图像是背景图，中间的图像是由该背景图进行高斯模糊处理得到的模糊图像，图中右边的圆圈中显示的颜色则是基于该模糊图像得到的关键色。

应该理解，通过本方案可以提取界面中原背景图的整体概念色，且该概念色与当前用户界面中的背景图整体强关联。但是，本方案的缺点在于只能得出一个关键色，因而可选范围小。并且，本方案得到的关键色纯度较低，不适合对颜色纯度要求高的场景。

应该理解，如果关键色的明度很高，则直接将界面元素适配为该关键色，可能导致界面元素不易识别，进而影响用户的操作效率，使用户体验不佳。

基于此，本公开实施例考虑根据关键色的明度所属的颜色明度范围，确定是否直接将界面元素适配为关键色。比如，在关键色的明度较小的情况下，直接将关键色适配为界面元素的颜色；在关键色的明度较大的情况下，可以通过对关键色进行黑色蒙层处理来加深关键色的明度，并实现对界面元素颜色的适配。

示例性的，作为一种可选的实施例，该方法还可以包括：在将用户界面中的至少一个界面元素的颜色适配为关键色之前，确定关键色的明度是否满足预设条件。

其中，响应于确定关键色的明度满足预设条件，将用户界面中的至少一个界面元素的颜色适配为关键色。

示例性的，在关键色明度B满足50≤B＜100的条件下，可以该关键色直接适配为界面元素的颜色。

图5A示例性示出了将由图4A得到的关键色直接适配为控件色彩的示意图。图5B示例性示出了将由图4B得到的关键色直接适配为控件色彩的示意图。

此外，在发现关键色明度较低的情况下，直接将该关键色适配为界面元素的颜色后，会产生界面元素识别度不高的问题。所以此种情况下，可以对关键色的明度进行优化，以克服界面元素识别度不高的缺陷。比如，在关键色明度较低的情况下，可以添加黑色蒙层以实现优化目的。

示例性的，作为一种可选的实施例，该方法还可以包括，响应于确定关键色的明度不满足预设条件，执行以下操作中的至少之一。

先将用户界面中的至少一个界面元素的颜色适配为关键色，再在用户界面中适配了关键色的界面元素上添加第一黑色蒙层。

先在关键色上添加第二黑色蒙层，以得到新的关键色，再将用户界面中的至少一个界面元素的颜色适配为新的关键色。

在一个实施例中，在关键色明度B满足50≤B＜100的条件下，可以给该关键色添加40％的黑色蒙层，形成新的关键色，然后将用户界面中的界面元素的颜色适配为该新的关键色。干预适配后，界面元素的颜色与加黑色蒙层后的关键色一致。此实施例采用先加黑色蒙层再进行颜色适配的方式，因而可以仅执行一次适配操作。

在另一个实施例中，在关键色明度B满足50≤B＜100的条件下，也可以给用户界面中的界面元素的颜色适配为该关键色，再为每个界面元素添加40％的黑色蒙层。干预适配后，界面元素的颜色也与加黑色蒙层后的关键色一致。此实施例采用先进行颜色适配再加黑色蒙层的方式，因而实际需要执行两次适配操作。

图6A示例性示出了先对图4A得到的关键色进行黑色蒙层后再适配为控件色彩的示意图；图6B示例性示出了直接利用图4B得到的关键色进行颜色适配的示意图。

在本公开实施例，除了可以通过图像模糊处理提取对应的关键色之外，还可以直接从背景图中提取各种颜色，并从这各种颜色中选择一种颜色作为关键色。在本公开实施例，

示例性的，作为一种可选的实施例，在界面背景包括背景图的情况下，基于界面背景，为用户界面中的至少一个界面元素适配对应的颜色，可以包括如下操作。

从背景图中提取至少一种颜色。

基于上述的至少一种颜色，为用户界面中的至少一个界面元素适配对应的颜色。

在本公开实施例中，可以直接从背景图中提取各种颜色，并从这各种颜色中选择其中的一种颜色作为关键色。本方案的优势在于，利用直接提取的颜色作为关键色进行颜色适配，由于这种关键色的颜色纯度高，因而对原背景图的还原性高，且配色多样，饱和度高，可选范围广。本方案适用于需要提取的背景色饱和度高，且需要成系列的配色方案。

在本公开实施例，对于从背景图中提取的至少一种颜色，可以随机选取其中的一种作为关键色进行配色，或者也可以选取其中占比最大的一种作为关键色进行配色。

示例性的，作为一种可选的实施例，基于上述的至少一种颜色，为用户界面中的至少一个界面元素适配对应的颜色，可以包括以下至少之从上述的至少一种颜色中随机挑选一种颜色作为第一关键色，并将用户界面中的至少一个界面元素的颜色适配为第一关键色。

或者，从上述的至少一种颜色中挑选出占比最大的一种颜色作为第二关键色，并将用户界面中的至少一个界面元素的颜色适配为第二关键色。

图7A和图7B示例性示出了根据本公开实施例的基于背景图提取关键色的示意图。其中，图中调色板中的颜色是从背景图中提取的各种颜色，这些颜色在背景图中的面积占比各不相同，图中的关键色是从调色板中获取的颜色占比最大的颜色。

应该理解，上述实施例中提供的配色方案都是与背景图有关的方案。而实际上，有些用户界面是有背景图的，有些用户界面则是没有背景图的。在有背景图的情况下，可以采用上述实施例中的任意之一进行配色；在没有背景图的情况下，可以将界面元素配置为默认的颜色。

示例性的，作为一种可选的实施例，基于界面背景，为用户界面中的至少一个界面元素适配对应的颜色和/或图案，可以包括以下中的至少之一。

在界面背景包括背景图的情况下，基于该背景图，为用户界面中的至少一个界面元素适配对应的颜色和/或图案。

或者，在界面背景不包括背景图的情况下，为用户界面中的至少一个界面元素适配预定的颜色和/或图案。

在本公开实施例中，对于在线翻译软件，通过界面元素的智能适配，可以给用户带来智能词典的感知，不会有冷冰冰的机器反馈感。从而进一步打造在线翻译软件有温度的学习助手形象。

此外，还可以加强AI词典的使用沉浸感。通过视觉上的适配统一，伴以听感、触感等五感的辅助，让整体感官更为协调，用户的使用感更为沉浸、更有代入感。

此外，可以竖立AI智能词典品牌形象。通过多感官概念的介入、视觉细节体验的优化。这样连续的视觉垂概念(即一层一层，可以帮助用户增加印象，加深记忆)能够加深AI词典在用户心目当中的形象，从而竖立在线翻译软件全新的智能词典品牌形象。

此外，可以提高用户粘性。当用户在该产品中获得了智能感的优化体验，会提高用户对于该产品的依赖，从而提高用户粘性。

根据本公开的实施例，本公开还提供了一种用于界面元素的配色装置。

图8示例性示出了根据本公开实施例的用于界面元素的配色装置的框图。

如图8所示，用于界面元素的配色装置800，可以包括：第一确定模块810和第一适配模块820。图8实现的装置可以用于实现上述实施例中描述的各方法，本公开实施例在此不再赘述。

第一确定模块810，用于确定用户界面中的界面背景。

第一适配模块820，用于基于该界面背景，为该用户界面中的至少一个界面元素适配对应的颜色和/或图案。

作为一种可选的实施例，该界面背景包括：背景图；该第一适配模块，包括：图像处理单元，用于对该背景图进行图像模糊处理，得到对应的模糊图像；关键色获取单元，用于基于该模糊图像，获得对应的关键色；以及第一颜色适配单元，用于将该用户界面中的该至少一个界面元素的颜色适配为该关键色。

作为一种可选的实施例，该关键色获取单元包括：第一确定子单元，用于确定该模糊图像中的中心像素点的颜色；以及第二确定子单元，用于将该中心像素点的颜色作为该关键色。

作为一种可选的实施例，装置还包括：第二确定模块，用于在将该用户界面中的该至少一个界面元素的颜色适配为该关键色之前，确定该关键色的明度是否满足预设条件；其中，响应于通过第二确定模块确定该关键色的明度满足该预设条件，通过该第一颜色适配单元将该用户界面中的该至少一个界面元素的颜色适配为该关键色。

作为一种可选的实施例，装置还包括：第二适配模块，用于响应于确定该关键色的明度不满足该预设条件，执行以下操作中的至少之一：先将该用户界面中的该至少一个界面元素的颜色适配为该关键色，再在该用户界面中适配了该关键色的界面元素上添加第一黑色蒙层；先在该关键色上添加第二黑色蒙层，以得到新的关键色，再将该用户界面中的该至少一个界面元素的颜色适配为该新的关键色。

作为一种可选的实施例，该界面背景包括背景图；该第一适配模块包括：颜色提取单元，用于从该背景图中提取至少一种颜色；以及第二颜色适配单元，用于基于该至少一种颜色，为该用户界面中的至少一个界面元素适配对应的颜色。

作为一种可选的实施例，该第二颜色适配单元还用于执行以下操作中的至少之一：从该至少一种颜色中随机挑选一种颜色作为第一关键色，并将该用户界面中的该至少一个界面元素的颜色适配为该第一关键色；从该至少一种颜色中挑选出占比最大的一种颜色作为第二关键色，并将该用户界面中的该至少一个界面元素的颜色适配为该第二关键色。

作为一种可选的实施例，该第一适配模块还用于执行以下操作中的至少之一：在该界面背景包括背景图的情况下，基于该背景图，为该用户界面中的至少一个界面元素适配对应的颜色和/或图案；在该界面背景不包括背景图的情况下，为该用户界面中的至少一个界面元素适配预定的颜色和/或图案。

应该理解，本公开装置部分的实施例与本公开方法部分的实施例对应相同或类似，所解决的技术问题和所达到的技术效果也对应相同或类似，本公开在此不再赘述。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图9所示，电子设备900包括计算单元901，其可以根据存储在只读存储器(ROM)902中的计算机程序或者从存储单元908加载到随机访问存储器(RAM)903中的计算机程序，来执行各种适当的动作和处理。在RAM 903中，还可存储电子设备900操作所需的各种程序和数据。计算单元901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

电子设备900中的多个部件连接至I/O接口905，包括：输入单元906，例如键盘、鼠标等；输出单元907，例如各种类型的显示器、扬声器等；存储单元908，例如磁盘、光盘等；以及通信单元909，例如网卡、调制解调器、无线通信收发机等。通信单元909允许设备900通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元901可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元901的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元901执行上文所描述的各个方法和处理，例如用于界面元素的配色方法。例如，在一些实施例中，用于界面元素的配色方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元908。在一些实施例中，计算机程序的部分或者全部可以经由ROM 902和/或通信单元909而被载入和/或安装到设备900上。当计算机程序加载到RAM 903并由计算单元901执行时，可以执行上文描述的用于界面元素的配色方法的一个或多个步骤。备选地，在其他实施例中，计算单元901可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行用于界面元素的配色方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务(″Virtual Private Server″，或简称″VPS″)中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。

本公开的技术方案中，所涉及的相关数据的记录，存储和应用等，均符合相关法律法规的规定，且不违背公序良俗。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (19)

1.一种用于界面元素的配色方法，包括：

确定用户界面中的界面背景；以及

基于所述界面背景，为所述用户界面中的至少一个界面元素适配对应的颜色和/或图案。

2.根据权利要求1所述的方法，其中：

所述界面背景包括：背景图；

基于所述界面背景，为所述用户界面中的至少一个界面元素适配对应的颜色，包括：

对所述背景图进行图像模糊处理，得到对应的模糊图像；

基于所述模糊图像，获得对应的关键色；以及

将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色。

3.根据权利要求2所述的方法，其中，基于所述模糊图像，获得对应的关键色，包括：

确定所述模糊图像中的中心像素点的颜色；以及

将所述中心像素点的颜色作为所述关键色。

4.根据权利要求2或3所述的方法，还包括：在将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色之前，

确定所述关键色的明度是否满足预设条件；

其中，响应于确定所述关键色的明度满足所述预设条件，将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色。

5.根据权利要求4所述的方法，还包括，响应于确定所述关键色的明度不满足所述预设条件，执行以下操作中的至少之一：

先将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色，再在所述用户界面中适配了所述关键色的界面元素上添加第一黑色蒙层；

先在所述关键色上添加第二黑色蒙层，以得到新的关键色，再将所述用户界面中的所述至少一个界面元素的颜色适配为所述新的关键色。

6.根据权利要求1所述的方法，其中：

所述界面背景包括：背景图；

基于所述界面背景，为所述用户界面中的至少一个界面元素适配对应的颜色，包括：

从所述背景图中提取至少一种颜色；以及

基于所述至少一种颜色，为所述用户界面中的至少一个界面元素适配对应的颜色。

7.根据权利要求6所述的方法，其中，基于所述至少一种颜色，为所述用户界面中的至少一个界面元素适配对应的颜色，包括以下至少之一：

从所述至少一种颜色中随机挑选一种颜色作为第一关键色，并将所述用户界面中的所述至少一个界面元素的颜色适配为所述第一关键色；

从所述至少一种颜色中挑选出占比最大的一种颜色作为第二关键色，并将所述用户界面中的所述至少一个界面元素的颜色适配为所述第二关键色。

8.根据权利要求1至7中任一项所述的方法，其中，基于所述界面背景，为所述用户界面中的至少一个界面元素适配对应的颜色和/或图案，包括以下中的至少之一：

在所述界面背景包括背景图的情况下，基于该背景图，为所述用户界面中的至少一个界面元素适配对应的颜色和/或图案；

在所述界面背景不包括背景图的情况下，为所述用户界面中的至少一个界面元素适配预定的颜色和/或图案。

9.一种用于界面元素的配色装置，包括：

第一确定模块，用于确定用户界面中的界面背景；以及

第一适配模块，用于基于所述界面背景，为所述用户界面中的至少一个界面元素适配对应的颜色和/或图案。

10.根据权利要求9所述的装置，其中：

所述界面背景包括：背景图；

所述第一适配模块，包括：

图像处理单元，用于对所述背景图进行图像模糊处理，得到对应的模糊图像；

关键色获取单元，用于基于所述模糊图像，获得对应的关键色；以及

第一颜色适配单元，用于将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色。

11.根据权利要求10所述的装置，其中，所述关键色获取单元包括：

第一确定子单元，用于确定所述模糊图像中的中心像素点的颜色；以及

第二确定子单元，用于将所述中心像素点的颜色作为所述关键色。

12.根据权利要求10或11所述的装置，还包括：

第二确定模块，用于在将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色之前，确定所述关键色的明度是否满足预设条件；

其中，响应于通过第二确定模块确定所述关键色的明度满足所述预设条件，通过所述第一颜色适配单元将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色。

13.根据权利要求12所述的装置，还包括：

第二适配模块，用于响应于确定所述关键色的明度不满足所述预设条件，执行以下操作中的至少之一：

先将所述用户界面中的所述至少一个界面元素的颜色适配为所述关键色，再在所述用户界面中适配了所述关键色的界面元素上添加第一黑色蒙层；

先在所述关键色上添加第二黑色蒙层，以得到新的关键色，再将所述用户界面中的所述至少一个界面元素的颜色适配为所述新的关键色。

14.根据权利要求9所述的装置，其中：

所述界面背景包括：背景图；

所述第一适配模块包括：

颜色提取单元，用于从所述背景图中提取至少一种颜色；以及

第二颜色适配单元，用于基于所述至少一种颜色，为所述用户界面中的至少一个界面元素适配对应的颜色。

15.根据权利要求14所述的装置，其中，所述第二颜色适配单元还用于执行以下操作中的至少之一：

从所述至少一种颜色中随机挑选一种颜色作为第一关键色，并将所述用户界面中的所述至少一个界面元素的颜色适配为所述第一关键色；

从所述至少一种颜色中挑选出占比最大的一种颜色作为第二关键色，并将所述用户界面中的所述至少一个界面元素的颜色适配为所述第二关键色。

16.根据权利要求9至15中任一项所述的装置，其中，所述第一适配模块还用于执行以下操作中的至少之一：

在所述界面背景包括背景图的情况下，基于该背景图，为所述用户界面中的至少一个界面元素适配对应的颜色和/或图案；

在所述界面背景不包括背景图的情况下，为所述用户界面中的至少一个界面元素适配预定的颜色和/或图案。

17.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-8中任一项所述的方法。

18.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-8中任一项所述的方法。

19.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-8中任一项所述的方法。

Images