用于渲染用户界面元素的计算机化系统和方法与流程

本申请要求于2014年6月24日提交的美国临时专利申请No.62/016,612的权益，其全部内容通过引用并入本文。

技术领域

本公开涉及用于渲染用户界面元素的计算机化系统和方法，并且更一般地涉及用户界面设计的领域。作为示例而非限制，本公开涉及用于基于与用户界面相关联的图像的特性来以特定颜色渲染用户界面的元素的计算机化系统和方法。

背景技术：

多年来，在电子设备上的应用的使用已经显着增长。人们现在与各种设备(诸如个人计算机、膝上型计算机、平板电脑、个人数字助理(PDA)、个人组织器、移动电话、智能电话和其它设备)上的应用交互。应用开发人员为这些应用的用户设计交互式界面以便浏览应用内容。由于今天有这么多应用可用，开发人员有使他们的应用对用户有吸引力的动机。这样做的方法之一是使它们的应用界面比其它应用的应用界面更美观。

技术实现要素：

本公开的实施例涉及用于渲染用户界面元素的计算机化系统和方法。另外，本公开的实施例涉及用于基于与用户界面相关联的图像的特性来以某些颜色来呈现用户界面的元素的解决方案。

根据本公开的一些实施例，提供了识别与用户界面相关联的图像的特性的计算机化系统和方法。一旦识别了特性，就可以将它们与和语义名称相关联的一个或多个规则进行比较，以识别满足规则的颜色。一旦已经识别了颜色，则可以以所识别的颜色渲染用户界面的元素。

根据一些实施例，提供了一种用于渲染用户界面元素的计算机实现的方法。该方法包括由一个或多个处理器执行的操作。该方法的操作包括识别与用户界面相关联的图像的特性，以及识别与用户界面的元素相关联的语义名称。所述方法还包括将所识别的特性与和所述语义名称相关联的一个或多个规则进行比较，以识别满足所述一个或多个规则的颜色。该方法还包括当颜色满足规则时使得用户界面的元素以所识别的颜色被渲染。

此外，根据一些实施例，提供了一种用于渲染用户界面元素的计算机实现的系统。该系统包括存储指令的存储器设备和执行所述指令的至少一个处理器。所述至少一个处理器执行所述指令以识别与用户界面相关联的图像的特性和识别与所述用户界面的元件相关联的语义名称。所述至少一个处理器还执行所述指令以将所识别的特性与和所述语义名称相关联的一个或多个规则进行比较，以识别满足所述一个或多个规则的颜色。所述至少一个处理器还执行所述指令以在所述颜色满足所述规则时使所述用户界面的所述元素以所识别的颜色渲染。

另外，根据一些实施例，提供了一种用于识别用于用户界面元素的颜色的计算机实现的方法。该方法包括由一个或多个处理器执行的操作。该方法的操作包括识别与用户界面相关联的图像的特性。所述方法还包括将所识别的特性与一个或多个规则的多个集合中的每一个集合进行比较，所述多个集合中的每一个集合与唯一的语义名称相关联。该方法还包括为规则的所述多个集合中的每一个集合识别满足规则的集合的颜色，以及提供每种识别的颜色用于呈现给操作者。该方法还包括接收来自操作者的将所提供的颜色之一与用户界面元素相关联的请求的指示。

此外，根据一些实施例，提供了一种用于识别用于用户界面元素的颜色的计算机实现的系统。该系统包括存储指令的存储器和执行指令的至少一个处理器。所述至少一个处理器执行所述指令以识别与用户界面相关联的图像的特性。所述至少一个处理器还执行所述指令以将所识别的特性与一个或多个规则的多个集合中的每一个集合进行比较，规则的所述多个集合中的每一个集合与唯一的语义名称相关联。所述至少一个处理器还执行所述指令以针对规则的所述多个集合中的每一个识别满足规则的集合的颜色，并且提供每种识别的颜色以呈现给操作者。所述至少一个处理器还执行指令以接收来自操作者的将所提供的颜色之一与用户界面元素相关联的请求的指示。

在详细解释与本公开一致的示例实施例之前，应当理解，本公开的应用不限于在下面的描述中阐述或在附图中示出的结构细节和布置。本公开能够具有除了所描述的实施例之外的实施例，并且能够以各种方式实践和执行。此外，应当理解，本文以及摘要中使用的措辞和术语是为了描述的目的，而不应被认为是限制性的。

应当理解，前面的一般描述和下面的详细描述都仅是说明性的，而不是对所要求保护的主题的限制。

附图说明

并入并构成本说明书的一部分的附图与说明书一起示出并用于说明各种示例实施例的原理。

图1图示与本公开的实施例一致的包括用户界面元素的呈现的示例用户界面屏幕。

图2图示与本公开的实施例一致的用于呈现用户界面的元素的示例方法的流程图。

图3A图示与本公开的实施例一致的包括基于第一图像的用户界面元素的呈现的示例用户界面屏幕。

图3B图示与本公开的实施例一致的包括基于第二图像的用户界面元素的呈现的示例用户界面屏幕。

图4图示与本公开的实施例一致的用于识别用于呈现用户界面元素的颜色的示例方法的流程图。

图5A图示与本公开的实施例一致的用于基于用户界面中的图像提取颜色调色板的示例用户界面屏幕。

图5B图示与本公开的实施例一致的用于基于用户界面中的图像显示颜色调色板的示例用户界面屏幕。

图6图示与本公开的实施例一致的用于识别满足与语义名称相关联的规则的颜色的示例方法的流程图。

图7图示用于实现与本公开一致的实施例和特征的示例计算机系统。

图8图示用于实现与本公开一致的实施例和特征的示例计算环境。

具体实施方式

现在将详细参考本公开的当前实施例，其中的某些示例在附图中示出。

本公开的实施例涉及用于渲染用户界面元素的计算机化系统和方法。本公开的实施例包括识别与用户界面相关联的图像的特性的系统和方法。一旦识别了特性，就可以将它们和与语义名称相关联的一个或多个规则进行比较，以识别满足该一个或多个规则的颜色。然后可以以所识别的颜色自动渲染用户界面元素。替选地，操作者可以确认或选择颜色，使得用户界面元素以所选择的颜色渲染。

在一些实施例中，应用的开发者或操作者可以将语义名称与应用的用户界面的元素相关联。在一些实施例中，语义名称可以表示开发者对与用户界面元素相关联感兴趣的颜色的特性。例如，术语“深”(“dark”)可以在语义名称中使用以指示具有低亮度的颜色，并且术语“浅”(“light”)可以在语义名称中使用以指示具有高亮度的颜色。作为另一示例，可以在语义名称中使用术语“鲜艳”(“vibrant”)以指示具有高饱和度的颜色，并且可以在语义名称中使用术语“柔和”(“muted”)以指示具有低饱和度的颜色。代表颜色特性的术语也可以在语义名称中组合。例如，“深鲜艳”(“dark vibrant”)语义名称可以指示亮度低、但饱和度高的颜色。

一旦选择了用于与用户界面元素相关联的语义名称，则可以分析与用户界面相关联的图像中的颜色的特性，并将其与和语义名称相关联的一个或多个规则进行比较，以识别开发者可能期望的颜色。例如，与“鲜艳”语义名称相关联的一个或多个规则可以导致从图像中选择具有高饱和度的颜色。

在一些实施例中，一旦语义名称与用户界面元素相关联，则可以将不同的图像放置在用户界面中，并且可以基于与语义名称相关联的规则自动地以与图像相关的颜色渲染该元素。可以在应用的开发期间将不同的图像放置在用户界面中，或者可以基于用户的选择将其放置在用户界面中。例如，音乐应用的用户可以下载新的音乐专辑，并且可以基于下载在用户界面中接收和显示音乐专辑的专辑封面。当用户做出导致显示专辑封面的选择时，可以以与图像中的颜色相关的颜色来渲染用户界面元素(例如，播放按钮)。

在一些实施例中，操作者可以选择接收与图像中的颜色相关的多种颜色(例如，颜色调色板)。基于操作者的选择，可以识别图像中的颜色的特性并且将其与一个或多个规则的多个集合中的每一个集合进行比较，其中规则的多个集合中的每一个集合与唯一的语义名称相关联。对于规则的所述多个集合中的每一个集合，可以识别满足规则的集合的颜色，并且以颜色调色板将其呈现给开发者。操作者然后可以选择将相关联的颜色之一与用户界面元素相关联，使得用户界面元素以所选择的颜色被渲染。

在以匹配或互补(complement)在用户界面相关联的图像中的颜色的颜色渲染用户界面的元素中可以实现一个或多个优点。例如，如果用户界面的屏幕包括具有许多红色像素的图像，则使用红色色调渲染屏幕中的元素是美观的。也可能希望改变元素用以渲染的颜色。例如，如果用户进行使得用户界面切换到显示包含大量蓝色像素的不同图像的屏幕的选择，则在美观上可以使用蓝色色调渲染该屏幕中的相同元素。

使用户界面对用户更加美观对开发者可能是有利的。由于当今市场上有这么多应用，用户有各种各样的选择从中选择。如果所有其它都是相同的，用户可以选择更美观的应用，并且应用的流行度可能增加。此外，包括广告的流行应用的开发者可以比不太流行的应用的开发者为他们的应用中的广告点博得更高的价格。然而，开发以在视觉上吸引人的颜色提供用户界面的元素的用户界面给开发者提出了挑战。例如，应用的开发者可能必须通过尝试和错误的过程来识别对用户界面元素有吸引力的颜色。此外，一旦开发者已经找到用于特定用户界面元素的颜色，开发者可能必须为不同屏幕中的该元素识别不同的颜色。另一个挑战是许多应用允许终端用户在用户界面中包括新图像，诸如音乐应用中的音乐专辑封面的新图像。这种应用的开发者可能不能识别匹配或互补在这样的新图像中的颜色的颜色，因为他们在开发应用时将不知道新图像的颜色。

本公开的实施例可以解决与以视觉上吸引人的颜色渲染用户界面元素相关联的挑战。例如，本公开的实施例提供了计算机化的系统和方法，其可以在用户界面的屏幕中以基于屏幕中的图像中的颜色的特性的颜色渲染用户界面元素。诸如应用的开发者的操作者可以简单地选择表示用户开发者对该元素期望的某些颜色属性(例如，浅、深、柔和、鲜艳)的语义名称，并且与该语义名称相关联的一个或多个规则可以与元素相关联。一旦规则与元素相关联，则可以基于屏幕的图像中的颜色和规则，在用户界面的屏幕中以特定颜色渲染元素。

本公开的实施例还可以用于提高执行某些任务的用户的效率。使用本公开的实施例，可以在加载图像之前以表示图像的颜色来渲染占位符。这可以允许用户加载照片库以快速地识别特定的加载图像集合是否可以是用户正在看的图像。例如，如果用户正在搜索来自野营的照片，则以绿色和大地色调颜色显示的占位符可以向用户指示要加载的图像可以是用户正在搜索的图像。

本公开的实施例还可以向操作者或用户提供查看与在图像中识别的颜色相关的多种颜色(例如，颜色调色板)的简单方法。可以通过将图像中的颜色的特性与一个或多个规则的多个集合中的每一个集合进行比较来识别多种颜色，其中规则的所述多个集合中的每一个集合与唯一的语义名称相关联。例如，对于自由女神像的图像，天蓝色可以满足与语义名称“浅鲜艳”(“light vibrant”)相关联的一个或多个规则的集合。在相同的示例中，深绿色可以满足与语义名称“深鲜艳”(“dark vibrant”)相关联的一个或多个规则的集合。操作者然后可以选择所识别的颜色中的一种用于与用户界面元素相关联。

如本文所使用的用户界面的元素可以包括用户界面的任何元素。这样的元素可以包括例如用户界面的按钮、图标、工具栏、控件、链接、文件夹、列表、滚动条、菜单、菜单项、图像、视频、动画、文本、背景、窗口、控制、超链接、下拉列表、滑块、边框、鼠标、光标、指针、用于加载内容的占位符或任何其它部分。

如本文所使用的图像可以包括任何类型的图像，诸如图片、背景图像或图形。图像可以具有任何格式，诸如联合图像专家组(JPEG)、JPEG文件交换格式(JFIF)、JPEG 2000、可交换图像文件格式(EXIF)、标签图像文件格式(TIFF)、原始图像格式、图形交换格式(GIF)、Windows位图(BMP)、便携式网络图形(PNG)、便携式像素图文件(PPM)、便携式灰图文件(PGM)、便携式位图文件(PBM)、WebP、或任何其它图像文件格式。

如本文所使用的，以颜色渲染用户界面元素可以指以任何方式利用所述颜色来渲染用户界面元素。例如，所述颜色可以在元素的半透明覆盖中使用，与作为图像的彩色覆盖的图像相结合等。此外，用户界面元素的部分可以以所述颜色显示，而用户界面元素的其它部分可以以不同的颜色显示。

图1图示可以包括图像A 110和一个或多个用户界面元素的应用的用户界面的示例屏幕100。在图1的示例中，用户界面元素A 120可以是工具栏，用户界面元素B 130可以是背景，且用户界面元素C 140可以是按钮。尽管在图1中图示三个不同的用户界面元素，但是本公开不限于此。任何数量的用户界面元素可以被包括在用户界面100的屏幕中。

根据本公开的实施例，图1中示出的用户界面元素中的一个或多个可以以基于在图像A 110中识别的颜色的特性的颜色被渲染。例如，操作者可以将语义名称(例如“深鲜艳”)与图1所示的用户界面元素中的任何一个或多个(诸如元素C 140)相关联。在这种情况下，可以识别图像A 110中的颜色的特性。这可以例如在屏幕100正在加载时或者在用户选择加载屏幕100后发生。图像的特性可以涉及图像中的颜色的色调(hue)、强度(intensity)、光辉(radiance)、照度(luminance)、亮度(luma)、彩度(brightness)、明度(lightness)、色彩(colorfulness)、色度(chroma)和饱和度(saturation)中的一个或多个。然后可以将该特性与和语义名称“深鲜艳”相关联的一个或多个规则进行比较，以识别满足规则的颜色。例如，如果图像是自由女神像的图像，则颜色可以是深绿色。然后可以以深绿色来渲染元素C 140。以深绿色渲染元素C 140可以允许元素C 140匹配或互补自由女神像的图像中的颜色。

类似地，元素A 120和元素B 130中的一个或多个可以与语义名称相关联。例如，元素A 120可以与诸如“浅鲜艳”的语义名称相关联。基于图像A是自由女神像的图像的示例，可以基于将天蓝识别为满足与语义名称“浅鲜艳”相关联的规则的颜色来以天蓝色渲染元素A 120。作为另一示例，元素B 130可以与诸如“浅柔和”的语义名称相关联。基于图像A是自由女神像的图像的示例，可以基于识别浅绿色作为满足与语义名称“浅柔和”相关联的规则的颜色来以浅绿色渲染元素B 130。因此，在一些实施例中，多个用户界面元素可以与不同的语义名称相关联并且以不同的颜色渲染，每种颜色匹配或互补图像中的颜色。

图2图示与本公开的实施例一致的示例方法200的流程图。示例方法200可以在使用一个或多个计算机系统(例如，参见图7)的计算环境(例如，参见图8)中实现。在一些实施例中，方法200可以由一个或多个客户端设备820或由一个或多个服务器840执行。在一些实施例中，方法200的一个或多个步骤可以由一个或多个客户端设备820执行，并且方法200的一个或多个其它步骤可以由一个或多个服务器840执行。

在图2的步骤210中，可以识别在用户界面的屏幕中的图像的特性。图像的特性可以包括例如与图像的不同像素或区域中的颜色的色调、强度、光辉、照度、亮度、彩度、明度、色彩、色度和饱和度中的一个或多个相关的值。在一些实施例中，图像的特性可以包括图像的不同像素、块或区域中的颜色的RGB颜色模型的R、G和B的值。类似地，图像的特性可以包括颜色的YCbCr颜色模型的Y、Cb和Cr的值、颜色的YPbPr颜色模型的Y、Pb和Pr的值、HSL值、HSV值、HSI值，或可用于表示图像的像素、块或区域的颜色的任何其它值。所识别的图像的特性还可以包括特定颜色出现在图像中的频率。

在一些实施例中，可以分析图像以识别图像的特性。可以使用一种或多种常规图像分析技术来识别图像的特性，诸如内容或比较图像分析技术。替选地，可以接收作为与图像相关联的数据(诸如与图像相关联的元数据)的图像的特性。可以从诸如计算机系统700的计算机的本地驱动或者通过网络830从诸如服务器840的不同计算机接收与图像相关联的数据。

在图2的步骤220中，可以识别与用户界面的元素相关联的语义名称。例如，操作者(诸如开发者)可以将语义名称与元素相关联。语义名称可以表示操作者在渲染元素中感兴趣的颜色的属性。例如，语义名称“深”(“dark”)可以用于指示操作者对具有低亮度值的颜色感兴趣，而语义名称“浅”(“light”)可以用于指示操作者对具有高亮度值的颜色感兴趣。类似地，语义名称“柔和”(“muted”)可以用于指示操作者对具有低饱和度值的颜色感兴趣，并且语义名称“鲜艳”(“vibrant”)可以用于指示操作者对具有高饱和度值的颜色感兴趣。语义名称可以组合术语以指示操作者感兴趣的颜色方面的组合。例如，“深鲜艳”(“dark vibrant”)可以指示操作者对具有低亮度值和高饱和度值的颜色感兴趣。本公开不限于语义名称的上述示例。相反，可以使用代表颜色类型的任何语义名称。每个语义名称可以与用于识别对应于语义名称的颜色的一个或多个规则相关联。

在步骤230中，将所识别的图像的特性与和语义名称相关联的一个或多个规则进行比较。例如，“深”(“dark”)语义名称可以与一个或多个规则相关联，这些规则确立仅具有低于特定阈值的亮度值的颜色可以作为“深”(“dark”)颜色返回。因此，可以将所识别的特性的亮度值与规则进行比较，以确定图像中的哪些颜色是“深”(“dark”)颜色。类似地，“浅鲜艳”(“light vibrant”)语义名称可以与一个或多个规则相关联，所述规则确立只有具有高于特定阈值的亮度值并且具有高于特定阈值的饱和度值的颜色可以被返回为“浅鲜艳”(“light vibrant”)颜色。因此，可以将所识别的特性的亮度值和饱和度值与规则进行比较，以确定图像中的哪些颜色是“浅鲜艳”(“light vibrant”)颜色。

“占位符”(“placeholder”)语义名称可以与被配置为识别最能代表图像的颜色的一个或多个规则相关联。该颜色可以对应于在图像中最频繁出现的颜色，或者对应于在图像中对人类具有高视觉强度的颜色。对于用户界面中的占位符元素，可以在图像之前接收关于正在加载的图像的元数据，并且可以以基于从元数据识别的图像的特性的颜色来渲染占位符元素。

在步骤240中，可以以被识别为满足与语义名称相关联的一个或多个规则的颜色来渲染用户界面的元素。例如，如果与元素相关联的语义名称是“深鲜艳”(“dark vibrant”)，则用户界面元素可以以来自图像的颜色或者表示图像中的颜色的颜色来渲染，该颜色满足一个或多个规则。

在一些实施例中，可以由应用的操作者或开发者将语义名称与应用的用户界面的用户界面元素相关联。一旦语义名称与用户界面元素相关联，操作者或开发者可以在包括该元素的用户界面屏幕中放置不同的图像，并且可以基于图像中的颜色和相关联的语义名称来自动渲染该元素。此外，可以基于终端用户可以向应用添加的图像中的颜色来自动渲染元素。

图3A和3B图示可以包括用户界面元素A 340(诸如按钮)的应用的用户界面的示例屏幕310和320。在一些实施例中，作为执行图2的方法200的结果，诸如计算机系统700的计算机可以显示屏幕310和/或320。用户界面屏幕310可以包括诸如金门大桥的图像的图像A 330和用户界面元素A 340。元素A 340可以与诸如“深鲜艳”(“dark vibrant”)的语义名称相关联。作为结果，元素A 340可基于金门大桥的图像以深红色渲染。响应于用户界面中的用户选择，可以显示用户界面的屏幕320。用户界面屏幕320可以包括图像B 250(例如包括海滩和海洋的图像)以及与屏幕310中相同的用户界面元素340。元素340仍然可以与“深鲜艳”(“dark vibrant”)的语义名称相关联；然而，此时基于海滩和海洋的新图像(图像B 350)，元素340可以被渲染为深蓝色。

基于不同图像自动渲染用户界面元素的能力在终端用户在向应用的用户界面添加新图像的应用中可能是有用的。例如，如果应用是音乐播放器应用，则应用的用户可以下载新的音乐专辑。在这样的示例中，也可以随着音乐专辑下载专辑封面，并且当用户选择专辑时，专辑封面可以与播放按钮一起自动地显示在用户界面的屏幕中。即使专辑封面在应用被创建时并不为应用的开发者所知，用户界面元素(例如，播放按钮)可以以与其相关联的语义名称相对应并且匹配或互补专辑封面的颜色被渲染。

图4图示与本公开的实施例一致的另一示例方法400的流程图。示例方法400可以在使用一个或多个计算机系统(例如，参见图7)的计算环境(例如，参见图8)中实现。在一些实施例中，方法400可以由一个或多个客户端设备820或由一个或多个服务器840执行。在一些实施例中，方法400的一个或多个步骤可以由一个或多个客户端设备820执行，并且方法400的其它步骤可以由一个或多个服务器840执行。

在步骤410中，可以识别图像的特性。如先前关于方法200所述，图像的特性可以包括例如与图像的不同像素或区域中的颜色的色调、强度、光辉、照度、亮度、彩度、明度、色彩、色度和饱和度中的一个或多个相关的值。在一些实施例中，图像的特性可以包括图像的不同像素或区域中的颜色的RGB颜色模型的R、G和B的值。类似地，图像的特性可以包括颜色的YCbCr颜色模型的Y、Cb和Cr的值、颜色的YPbPr颜色模型的Y、Pb和Pr的值、HSL值、HSV值、HSI值、或可用于表示图像的像素或区域的颜色的任何其它值。所识别的图像的特性还可以包括特定颜色出现在图像中的频率。

在一些实施例中，可以分析图像以识别图像的特性。传统的图像分析技术可以用于识别图像的特性，例如内容或比较图像分析技术。替选地，可以接收作为与图像相关联的数据(诸如与图像相关联的元数据)的图像的特性。可以从诸如计算机系统700的计算机的本地驱动器接收或者通过网络830从诸如服务器840的不同计算机接收与图像相关联的数据。

在步骤420中，可以将图像的所识别的特性与一个或多个规则的多个集合中的每一个集合进行比较，其中规则的集合中的每一个集合可以与唯一的语义名称相关联。在一些实施例中，语义名称集可以被预先存储为代表操作者(诸如开发者)可能感兴趣的不同类型的颜色的调色板。例如，语义名称可以包括“鲜艳”(“vibrant”)、“柔和”(“muted”)、“深”(“dark”)、“浅”(“light”)、“深鲜艳”(“dark vibrant”)、“深柔和”(“dark muted”)、“浅鲜艳”(“light vibrant,”)和“浅柔和”(“light muted”)中的一个或多个。还可以包括“占位符”语义名称。应当理解，上述语义名称仅作为示例提供，并且可以使用任何语义名称。在一些实施例中，语义名称表示操作者可能感兴趣的颜色的一个或多个方面。

所识别的图像的特性可以表示图像的像素或区域中的颜色，并且与一个或多个规则的多个集合进行比较，其中规则的所述多个集合中的每一个集合与唯一的语义名称相关联。例如，语义名称“深”可以与一个或多个规则相关联，这些规则确立仅具有低于特定阈值的亮度值的颜色可以作为“深”颜色返回。因此，可以将所识别的特性的亮度值与规则进行比较，以确定图像中的哪些颜色是“深”颜色。类似地，语义名称“浅鲜艳”可以与一个或多个规则相关联，所述规则确立只有具有高于特定阈值的亮度值并且具有高于特定阈值的饱和度值的颜色可以被返回为“浅鲜艳”颜色。因此，可以将所识别的特性的亮度值和饱和度值与规则进行比较，以确定图像中的哪些颜色是“浅鲜艳”颜色。

语义名称“占位符”可以与被配置为识别最能代表图像的颜色的一个或多个规则相关联。该颜色可以对应于在图像中最频繁出现的颜色，或者对应于对于人类具有高视觉强度的图像中的颜色。对于用户界面中的占位符元素，可以在图像之前接收关于正在加载的图像的元数据，并且可以以基于从元数据识别的图像的特性的颜色来渲染占位符元素。

在步骤430中，可以针对与语义名称相关联的规则的多个集合中的每一个集合，识别满足规则的集合的颜色。例如，如果图像是自由女神像的图像，则可以针对“浅柔和”语义名称识别浅绿色，可以针对“深鲜艳”语义名称识别深绿色，可以针对“浅鲜艳”语义名称来识别天蓝色颜色，等等。在一些实施例中，可以为多个语义名称中的每个语义名称识别颜色。在一些其它实施例中，可以仅针对在多个语义名称中的一些语义名称识别颜色。

在步骤440中，可以向操作者或其它用户呈现所识别的颜色。在一些实施例中，所识别的颜色可以呈现为颜色调色板。在一些实施例中，每种所识别的颜色可以与其相关联的语义名称相关联地呈现。

在步骤450中，可以接收对操作者或用户的选择的指示。在一些实施例中，指示可以指示操作者选择与用户界面元素相关联的颜色。在一些实施例中，指示可以指示操作者选择与用户界面元素相关联的语义名称。例如，操作者可以选择将语义名称“占位符”与作为用于加载内容(诸如图像)的占位符的用户界面的空间相关联。通过这样做，可以在加载图像之前以表示图像的颜色来渲染用户界面的占位符空间。与在加载图像时观看空白空间相比，这可能对于终端用户更加具有视觉吸引力。

图5A和5B图示可以包括图像530的应用的用户界面的示例屏幕510和520。在一些实施例中，作为执行图4的方法400的结果，诸如计算机系统700的计算机可以显示屏幕510和/或屏幕520。图5A的用户界面屏幕510可以包括图像530和控制元素540。操作者或应用开发者可以选择控制元素540来提取与某些预先存储的语义名称相关联的颜色调色板。控制元件540可以是任何类型的可选择用户界面元素。响应于对控制元件540的选择，可以提供屏幕(例如图5B的屏幕520)。

图5B的屏幕520图示基于图像530中的颜色为多个语义名称中的每一个提取的颜色调色板。例如，颜色A 540可以表示“占位符”颜色，颜色B 545可以表示“鲜艳”颜色，颜色C 550可以表示“柔和”颜色，颜色D 555可以表示“深鲜艳”颜色，颜色E 560可以表示“深柔和”颜色，颜色F 565可以表示“浅鲜艳”颜色，并且颜色G 570可以表示“浅柔和”颜色。在一些实施例中，如图5B的屏幕520所示，可以向所识别的颜色提供它们相应的语义名称。虽然在图5B的屏幕520中图示七个颜色和七个语义名称，但是本公开不限于此。可以呈现任何数量的颜色和/或语义名称。

在一些实施例中，可以选择来自颜色调色板的颜色用于与用户界面的一个或多个元素相关联。例如，操作者或应用开发者可以从颜色调色板中选择用于与应用的用户界面的一个或多个元素相关联的颜色。在一些实施例中，操作者或开发者可以从语义名称列表中选择语义名称以将该语义名称与用户界面的一个或多个元素相关联。

图6图示用于识别图像的特性、将识别的特性与和语义名称相关联的一个或多个规则进行比较以及识别满足规则的颜色的示例方法600的流程图。示例方法600可以在使用一个或多个计算机系统(例如，参见图7)的计算环境(例如，参见图8)中实现。在一些实施例中，方法600可以由一个或多个客户端设备820或由一个或多个服务器840执行。在一些实施例中，方法600的一个或多个步骤可以由一个或多个客户端设备820执行，并且方法600的一个或多个其它步骤可以由一个或多个服务器840执行。在一些实施例中，可以使用图6的方法600来实现图2的方法200的步骤210和230可以被执行和/或图4的方法400的步骤410-430。

在步骤610中，可以在图像中识别颜色。在一些实施例中，可以识别图像的每个像素、块或区域中的颜色。在一些实施例中，所识别的颜色中的每一种可以与其中它被识别的图像的像素、块或区域相关联地存储在映射、列表或表格中。在一些实施例中，颜色可以被存储为颜色的特性。例如，可以以色调、强度、光辉、照度、亮度、彩度、明度、色彩、色度和/或饱和度的值表示颜色。在一些实施例中，颜色可以表示为对应于颜色模型的值的组合，诸如RGB颜色模型的R、G和B的值、YCbCr颜色模型的Y、Cb和Cr的值、YPbPr颜色模型的Y、Pb和Pr的值、HSL值、HSV值、HSI值、或任何其它颜色模型的任何其它值。

在一些实施例中，图像可以包括大量不同的颜色。为了减少需要处理的颜色的数量，方法600可以迫使颜色达到某一有限数量的颜色。例如，可以将作为在图像中的比另一种颜色蓝色稍微浅一点的色调的蓝色处理为相同的蓝色。方法600可以使用已知的图像分析技术(诸如自适应量化)以将图像中的颜色数量限制为特定数量的颜色(例如，12-16种颜色)。然后，方法600可以对其中出现特定颜色的图像的像素、块或区域的数量进行计数，并且在步骤620中，可以将颜色存储在有序列表中，其中，颜色从最频繁出现在图像中的那些到在图像中最不频繁出现的那些排序。

在步骤630中，可以将有序列表中最频繁出现的颜色与和语义名称相关联的一个或多个规则进行比较。例如，例如在图2的方法200的示例中，语义名称可以是与用户界面元素相关联的语义名称。作为另一示例，例如在图4的方法400的示例中，语义名称可以是要从图像提取的颜色调色板的多个语义名称之一。一个或多个规则可以识别必须满足以便有资格为语义名称的颜色的色调、强度、光辉、照度、亮度、彩度、明度、色彩、色度、饱和度，RGB颜色模型的R、G和B，YCbCr颜色模型的Y、Cb和Cr，YPbPr颜色模型的Y、Pb和Pr，HSL，HSV和/或HSI的一个或多个值。例如，规则可以确立值必须大于、小于、等于或大于、或等于或小于特定值，以便有资格为语义名称的颜色。

在一个示例中，颜色的R、G和B的值可以与一个或多个规则进行比较，以确定颜色是否有资格为语义名称的颜色。例如，R值为217、G值为118并且B值为33的亮橙色可满足“深鲜艳”颜色的一种或多种规则。在另一示例中，色调、强度、光辉、照度、亮度、彩度、明度、色彩、色度、饱和度、RGB颜色模型的R、G和B，YCbCr颜色模型的Y、Cb和Cr，YPbPr颜色模型的Y、Pb和Pr，HSL，HSV和/或HSI的值可以在执行比较之前转换为不同的颜色模型。例如，RGB值可以被转换为HSL值并且与用于与语义名称相关联的HSL值的一个或多个规则进行比较。

如果最频繁出现的颜色不满足与语义名称相关联的一个或多个规则，则方法600可以将第二最频繁出现的颜色(例如，有序列表中的下一个)与一个或多个规则比较以确定第二最频繁出现的颜色是否满足规则。方法600可以以这种方式继续，直到识别出满足与语义名称相关联的一个或多个规则的颜色。

应当理解，上述方法仅仅是可以如何识别特性并将其与和语义名称相关联的一个或多个规则进行比较以识别满足规则的颜色的一个示例。任何其它方法可以用于识别颜色，并且图像的任何其它特性可以与用于识别颜色的任何其它规则进行比较。在一些实施例中，颜色出现在图像中的频率可以仅是用于对有序列表进行排序的一个因素。例如，可以在排序有序列表中使用因素的组合。

在一些实施例中，可用于排序有序列表的另一因素是与颜色的视觉强度相关的值。例如，一些颜色对人类具有比其它颜色更大的视觉强度。即使该颜色的像素数量与另一种颜色的像素数量相比较少，这样的颜色对于人而言可能在图像中显得更占优势。这种颜色的示例可以是亮红色。在一些实施例中，视觉强度值可以与每种颜色相关联，并且颜色可以基于颜色的视觉强度和颜色在图像中出现的频率的加权组合在有序列表中排序。在一些实施例中，某些颜色可以比其它颜色加权更少，使得它们在有序列表中显得比在布置它们的图像中颜色出现的频率更低。例如，类似于人类肤色的颜色可以被认为对于用户界面元素是不期望的，并且可以被加权以被放置朝向有序列表的底部，或者从有序列表中完全移除。

在一些实施例中，没有一种颜色可以满足与特定语义名称相关联的规则。例如，如果操作者已经为特定用户界面元素指定了“深鲜艳”语义名称，则图像中的颜色都不可能满足与“深鲜艳”语义名称相关联的规则。在这种情况下，可以基于在有序列表中识别的不同颜色来识别颜色。例如，可以在有序列表中识别“鲜艳”颜色(例如，天蓝色)，并且可以基于“鲜艳”颜色来计算“深鲜艳”颜色(例如，海洋蓝色)。

尽管上述示例可以涉及识别满足与语义名称相关联的一个或多个规则的颜色，但是方法600可以用于，针对规则的多个集合中的每一个集合，识别满足规则的集合的颜色，其中规则的多个集合中的每一个集合对应于语义名称。例如，可以将出现在有序列表顶部的颜色与规则的集合中的每一个集合进行比较，以确定该颜色是否满足规则的任何集合。在这样做时，方法600可以遍历有序列表并且对于与语义名称相关联的规则的多个集合中的每一个集合，识别满足规则的集合的颜色。

如贯穿本公开所指示的，表示颜色方面的语义名称可以与用户界面的元素相关联，使得基于与用户界面相关联的图像以特定颜色渲染元素。一旦语义名称已经与用户界面的元素相关联，就可以定义或提供规则以用于基于与元素相关联的语义名称来渲染用户界面的其它元素。例如，按钮元素可以被覆盖有文本元素。一个或多个规则可以与文本元素相关联以用与按钮元素的语义名称形成对比的颜色来渲染文本。例如，如果按钮与“深鲜艳”语义名称相关联，并且文本元素覆盖按钮，则可以基于与文本元素相关联的一个或多个导致文本元素以与按钮形成对比的颜色渲染的规则，以浅色渲染文本元素。这些类型的规则可以被称为相关颜色规则，并且可以包括用于以对比或互补用户界面中的其它元素的颜色渲染元素的规则。

图7是示出可用于实现符合本公开的实施例的示例计算机系统700的框图，包括本文所描述的示例系统和方法。计算机系统700可以包括一个或多个计算设备780。计算机系统700可以用于实现图8的计算环境800的客户端设备820和/或服务器840。计算机系统700中的组件的布置和数量是为了说明的目的而提供的。可以做出与本公开一致的附加布置、部件的数量或其它修改。

如图7所示，计算设备780可以包括用于执行指令的一个或多个处理器710。适于执行指令的处理器包括例如通用和专用微处理器、以及任何种类的数字计算机的任何一个或多个处理器。计算设备780还可以包括一个或多个输入/输出(I/O)设备720。作为示例，I/O设备720可以包括键、按钮、鼠标、操纵杆、指示笔、手势传感器(例如，视频相机)、运动传感器(例如，红外传感器、超声传感器等)、语音传感器(例如、麦克风)等。键和/或按钮可以是物理的和/或虚拟的(例如，提供在触摸屏界面上)。

计算设备780可以包括被配置为存储由处理器710使用以执行与所公开的实施例一致的操作的数据和/或软件指令的一个或多个存储设备。例如，计算设备780可以包括被配置为存储一个或多个软件程序的主存储器730，该程序当由处理器710执行时，使得处理器710执行与所公开的实施例一致的功能或操作。在一些实施例中，可以在使得应用的开发者可用的应用编程接口(API)中提供用于执行与所公开的实施例一致的操作的软件指令。例如，软件指令可以被包括为可由某些计算平台的应用的开发者使用的API的一部分。API可以由开发者下载，并且API中的指令可以由处理器710执行以执行与所公开的实施例一致的功能或操作。

举例来说，主存储器730可以包括NOR或NAND闪存设备、只读存储器(ROM)设备、随机存取存储器(RAM)设备等。计算设备780还可以包括一个或多个存储介质740。作为示例，存储介质740可以包括硬盘驱动器、固态驱动器、磁带驱动器、独立磁盘冗余阵列(RAID)阵列等。尽管图7仅示出一个主存储器730和一个存储介质740，但是计算设备780可以包括任何数量的主存储器730和存储介质740。而且，尽管图7图示作为计算设备780的一部分的主存储器730和存储介质740，但是主存储器730和/或存储介质740可以位于远程，并且计算设备780可以能够经由网络(诸如图8的计算环境800的网络830)访问主存储器730和/或存储介质740。

存储介质740可以被配置为存储数据，并且可以存储从一个或多个服务器840或客户端设备820接收的数据。数据可以采取或表示各种内容或信息形式，诸如内容、元数据、文档、文本内容、图像文件、视频文件、标记信息(例如，超文本标记语言(HTML)信息、可扩展标记语言(XML)信息)、软件应用、指令和/或、可以用于应用的用户界面的任何其它类型的信息。

计算设备780还可以包括用于用户界面的一个或多个显示器750，用于显示数据和信息。显示器750可以使用一个或多个显示面板来实现，所述显示面板可以包括例如一个或多个阴极射线管(CRT)显示器、液晶显示器(LCD)、等离子体显示器、发光二极管(LED)显示器、触摸屏型显示器、投影仪显示器(例如，投影在屏幕或表面上的图像、全息图像等)、有机发光二极管(OLED)显示器、场发射显示器(FED)、有源矩阵显示器、真空荧光(VFR)显示器、三维显示器、电子纸(e-ink)显示器、微型显示器、或上述类型的显示器的任何组合。

计算设备780还可以包括一个或多个通信接口760。通信接口760可以允许在服务器840和客户端设备820之间传送软件和/或数据。通信接口760的示例可以包括调制解调器、网络接口卡(例如，以太网卡)、通信端口、个人计算机存储卡国际协会(PCMCIA)插槽和卡、天线等。通信接口760可以以信号形式传送软件和/或数据，其可以是电子、电磁、光学和/或其它类型的信号。可以经由通信路径(例如，网络830)向/从通信接口760提供信号，该通信路径可以使用有线、无线、电缆、光纤、射频(RF)和/或其它通信信道实现。

所公开的实施例不限于被配置为执行专用任务的单独的程序或计算机。例如，服务器840可以包括存储单个程序或多个程序的主存储器730，并且可以附加地执行远离服务器840定位的一个或多个程序。类似地，取代或补充存储在客户端设备820上的程序，客户端设备820可以执行一个或多个远程存储的程序。在一些示例实施例中，服务器840能够访问生成、维护和提供网站的单独的服务器和/或计算设备。

图8图示用于实现本公开的实施例和特征的示例计算环境800的框图。为了说明的目的提供环境800中的集合件的布置和数量。可以做出与本公开一致的附加布置、部件的数量和其它修改。

如图8所示，计算环境800可以包括一个或多个客户端设备820。客户端设备820可以是移动电话、智能电话、平板电脑、上网本、电子阅读器、个人数字助理(PDA)、个人计算机、膝上型计算机计算机、智能手表、游戏设备、台式计算机、机顶盒、电视、个人管理器、便携式电子设备、智能家电、导航设备和/或其它类型的计算设备。在一些实施例中，客户端设备820可以利用硬件设备和/或在其上运行的软件应用来实现。用户可以使用客户端设备820通过网络830与服务器840通信。客户端设备820可以通过向服务器840发送数据和/或从服务器840接收数据来进行通信。在一些实施例中，一个或更多的客户端设备820可以使用诸如图7的计算机系统700的计算机系统来实现。

计算环境800还可以包括一个或多个服务器840。作为示例，服务器840可以包括web服务器、数据库、大型计算机、通用计算机、个人计算机或其它类型的计算设备中的一个或多个的任何组合。在一些实施例中，一个或多个服务器840可以被配置为托管网页，实现搜索引擎，索引信息，存储信息，和/或检索信息。在一些实施例中，服务器840可以是独立的计算系统或装置，或者它可以是较大系统的一部分。例如，服务器840可以表示位于远程并且通过通信网络或通过专用网络(例如局域网(LAN))进行通信的分布式服务器。服务器840可以包括用于执行本公开的一个或多个方面的一个或多个后端服务器。

服务器840可以被实现为包括多个服务器的服务器系统或者包括负载平衡系统和多个服务器的服务器群。在一些实施例中，服务器840可以利用硬件设备和/或在其上运行的软件应用来实现。服务器840可以通过网络830与客户端设备820通信。例如，服务器840可以通过向客户端设备820发送数据和/或从客户端设备820接收数据来进行通信。在一些实施例中，一个或多个更多的服务器840可以使用计算机系统(诸如图7的计算机系统700)来实现。

在一些实施例中，服务器840可以存储图像文件和/或与图像文件相关联的元数据。在客户端设备820上运行的应用的用户界面可以下载图像文件和/或元数据，并且可以通过分析图像文件或元数据来识别图像文件中的图像的特性。在一些实施例中，服务器840可以识别存储在服务器840处的图像的特性，可以将所识别的特性与和语义名称相关联的规则的集合进行比较，和/或可以识别来自图像的与语义名称对应的颜色，并且可以将该信息作为元数据存储在服务器840处。通过这样做，客户端设备820可以简单地下载元数据以从图像中识别与语义名称相对应的颜色。也就是说，图像数据的处理及其与规则的比较将由服务器840执行，使得客户端设备820不必自己执行这些步骤。此外，用于将语义名称与各种用户界面元素相关联的主题可以存储在服务器840处，并且可以由开发者下载并应用于应用，使得他们不必决定哪些语义名称要与用户界面的元素相关联。

计算环境800还可以进一步包括一个或多个网络830。网络830可以将服务器840与客户端设备820连接。网络830可以提供在客户端设备820和服务器840之间信息的交换，例如对于信息的查询和结果。网络830可以包括互连客户端设备820和服务器840的一种或多种类型的网络。

网络830可以包括一个或多个广域网(WAN)、城域网(MAN)、局域网(LAN)、个域网(PAN)、或这些网络的任何组合。网络830可以包括一种网络类型或各种不同网络类型的组合，包括因特网、内联网、以太网、双绞线、同轴电缆、光纤、蜂窝、卫星、IEEE 802.11、陆地、蓝牙、红外、无线通用串行总线(无线USB)和/或其它类型的有线或无线网络。

应当理解，存在本文公开的实施例和技术的各种用途。例如，除了先前描述的用途之外，本文公开的实施例和技术可以用于在等待内容(例如图像)加载时渲染在用户界面的占位符空间中的颜色。本文公开的实施例和技术还可以用于设置用户界面中的相邻色域。本文公开的实施例和技术可以进一步用于创建图像淡入或淡出效果。本文公开的实施例和技术还可以进一步用于渲染双色调图像。本文公开的实施例和技术还可以用于为不同类型的加载内容渲染不同的颜色，以指示要加载的内容类型。

尽管这里已经描述了说明性实施例，但是本范围包括具有基于本公开的等同元件、修改、省略、组合(例如，跨各种实施例的方面)、适配和/或改变的任何和所有实施例。权利要求中的元素将基于权利要求中使用的语言广义地解释，并且不限于本说明书中或者在本申请的诉讼期间描述的示例，这些示例被解释为非排他性的。此外，所公开的方法的步骤可以以任何方式修改，包括重新排序步骤和/或插入或删除步骤。

从详细说明书中，本公开的许多特征和优点是显而易见的，并且因此，所附权利要求旨在涵盖落入本公开的真实精神和范围内的所有系统和方法。如本文所使用的，不定冠词“a”和“an”是指包含过渡短语“包括”、“包含”和/或“具有”的开放式权利要求中的“一个或多个”。此外，因为本领域技术人员将容易想到多种修改和变化，所以不期望将本公开限制为所示和所描述的确切结构和操作，因此，可以采用落入本公开范围内的所有合适的修改和等同物。