CN111158826B - 一种界面皮肤生成方法、装置、设备及存储介质 - Google Patents
一种界面皮肤生成方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN111158826B CN111158826B CN201911382841.2A CN201911382841A CN111158826B CN 111158826 B CN111158826 B CN 111158826B CN 201911382841 A CN201911382841 A CN 201911382841A CN 111158826 B CN111158826 B CN 111158826B
- Authority
- CN
- China
- Prior art keywords
- color
- skin
- interface
- target interface
- visual element
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种界面皮肤生成方法、装置、设备及存储介质,包括:提取目标界面上的视觉元素的色彩特征;基于所述色彩特征生成所述目标界面的皮肤参数;将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。上述换肤过程中,皮肤参数是根据目标界面上的视觉元素的色彩特征生成的,色彩特征的不同,将会产生不同的皮肤参数,从而使得皮肤的种类变得非常丰富;另外,上述皮肤参数的生成过程是由后台自动完成的,无需人工介入,从而能够大幅提升皮肤的发布速度。
Description
技术领域
本申请涉及计算机技术领域,特别涉及一种界面皮肤生成方法、装置、设备及存储介质。
背景技术
当前,随着互联网和数字经济的发展,人们的日常生活和工作越来越需要各种各样的客户端,比如视频客户端、音乐客户端、输入法客户端、浏览器客户端等。为了令这些客户端更具人性化,现有的许多客户端APP都提供了换肤系统,以便用户对客户端的皮肤进行更换,这样也有利于提高用户的粘性和忠诚度。
现有的客户端APP换肤方案中,有些方案提供给用户的皮肤模式较少,并且这些皮肤模式固定在客户端版本中,即某个客户端版本发布了,用户能选择的皮肤模式也就固定了;而有些方案虽然换肤方式灵活多样,但是由于需要依赖设计师来进行设计,使得时效性较差,从设计到运营发布,往往要经历较长的周期,无法快速发布。
发明内容
有鉴于此,本申请的目的在于提供一种界面皮肤生成方法、装置、设备及存储介质,既能够增加皮肤的多样性,还能够实现皮肤的快速发布。其具体方案如下:
本申请的第一方面提供了一种界面皮肤生成方法,包括:
提取目标界面上的视觉元素的色彩特征;
基于所述色彩特征生成所述目标界面的皮肤参数;
将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
可选的,所述提取目标界面上的视觉元素的色彩特征,包括:
利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合;
基于色彩出现频率从所述第一色彩集合中筛选出第一预设数量的色彩以得到第二色彩集合;
基于色彩明暗程度从所述第二色彩集合中筛选出第二预设数量的色彩以作为所述色彩特征。
可选的,所述提取目标界面上的视觉元素的色彩特征,包括:
利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合;
对当前用户情绪进行分析以得到当前用户情绪特征;
从所述第一色彩集合中筛选出色彩心理效应特征与当前用户情绪特征相匹配的第三预设数量的色彩以作为所述色彩特征。
可选的,所述对当前用户情绪进行分析以得到当前用户情绪特征,包括:
根据所述显示请求的发起时间、当前天气信息、当前环境光照、当前节日信息、预设的用户性格标签和历史时间段内用户浏览痕迹,对当前用户情绪进行分析以得到当前用户情绪特征。
可选的,所述基于所述色彩特征生成所述目标界面的皮肤参数,包括:
利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图。
可选的,所述基于所述色彩特征生成所述目标界面的皮肤参数,还包括:
利用所述色彩特征生成所述目标界面上的控件底色和文字颜色。
可选的,所述提取目标界面上的视觉元素的色彩特征之前,还包括:
确定目标界面上的视觉元素的尺寸大小;
若所述尺寸大小大于预设阈值,则确定出与所述尺寸大小相符的压缩率;
根据所述压缩率对所述视觉元素进行压缩处理。
可选的,所述基于所述色彩特征生成所述目标界面的皮肤参数之后,还包括:
将所述皮肤参数发送至服务器进行保存,并在所述服务器建立所述皮肤参数与所述目标界面之间的映射关系;
若获取到针对所述目标界面的新的显示请求,则根据所述映射关系从所述服务器中调取出与所述目标界面对应的所述皮肤参数,以完成对所述新的显示请求的响应。
本申请的第二方面提供了一种界面皮肤生成装置,包括:
特征提取模块,用于提取目标界面上的视觉元素的色彩特征;
参数生成模块,用于基于所述色彩特征生成所述目标界面的皮肤参数;
皮肤跳转模块,用于将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
本申请的第三方面提供了一种电子设备,所述电子设备包括处理器和存储器;其中,所述存储器用于存储计算机程序,所述计算机程序由所述处理器加载并执行以实现前述的界面皮肤生成方法。
本申请的第四方面提供了一种存储介质,所述存储介质中存储有计算机可执行指令,所述计算机可执行指令被处理器加载并执行时,实现前述的界面皮肤生成方法。
本申请中,提取目标界面上的视觉元素的色彩特征,并基于该色彩特征生成目标界面的皮肤参数,最后将当前显示界面的皮肤跳转至与上述皮肤参数对应的界面皮肤,由此实现了换肤过程。可见,上述换肤过程中,皮肤参数是根据目标界面上的视觉元素的色彩特征生成的,色彩特征的不同,将会产生不同的皮肤参数,从而使得皮肤的种类变得非常丰富;另外,上述皮肤参数的生成过程是由后台自动完成的,无需人工介入,从而能够大幅提升皮肤的发布速度。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。
图1为本申请提供的界面皮肤生成方案的系统框架示意图;
图2为本申请提供的一种界面皮肤生成方法流程图;
图3为一种携带有专辑海报的视频专辑详情页示意图;
图4为本申请提供的一种具体的界面皮肤生成方法流程图;
图5为本申请公开的一种具体的色彩特征提取示意图;
图6为本申请提供的一种具体的界面皮肤生成方法流程图;
图7为本申请提供的一种具体的界面皮肤生成方法流程图;
图8为本申请提供的一种基于专辑海报进行皮肤更换的示意图;
图9为本申请提供的一种界面皮肤生成装置结构示意图;
图10为本申请提供的一种电子设备结构图。
具体实施方式
现有的客户端APP换肤方案中,有些方案提供给用户的皮肤模式较少,并且这些皮肤模式固定在客户端版本中,即某个客户端版本发布了,用户能选择的皮肤模式也就固定了;而有些方案虽然换肤方式灵活多样,但是由于需要依赖设计师来进行设计,使得时效性较差,从设计到运营发布,往往要经历较长的周期,无法快速发布。为了克服上述技术问题,本申请提供了一种新的界面皮肤生成方案,既能够增加皮肤的多样性,还能够实现皮肤的快速发布。
本申请的界面皮肤生成方案中,采用的系统框架具体可以参见图1所示,具体可以包括:客户端01和服务器02。
其中,客户端01包括但不限于视频客户端、音乐客户端、输入法客户端和浏览器客户端等,其可以是安装在诸如手机、智能手表、平板电脑等移动终端上的客户端,也可以是安装在诸如智能电视、高清投影仪、台式计算机等终端上的客户端。客户端01上设有UI层、逻辑层和网络层。通过UI层上的组件,可以实现与用户的交互,如获取用户发起的针对目标界面的显示请求,或者将目标界面上的视觉元素通过UI层显示给用户看。通过逻辑层的组件,可以实现对数据信息的处理,如对视觉元素进行压缩、提取视觉元素的色彩特征、生成与色彩特征对应的皮肤参数等。通过网络层的组件,可以实现与服务器的数据交换,如向服务器发送用于请求目标界面上的视觉元素的信息或者获取服务器返回的视觉元素等。
另外,服务器02具体用于保存客户端的各种显示界面上的视觉元素,当然,服务器02还可以用于保存其他类型的数据,在此不对其做进一步的具体限定。本实施例中,服务器02还可以具备扩容能力,能够随着客户端平台用户的不断增加,适应性地提升自身的存储能力。其次,服务器02的服务架构可以采用中心化架构,也可以选择分布式架构。
图2为本申请实施例提供的一种应用于客户端的界面皮肤生成方法。参见图2所示,该界面皮肤生成方法包括:
步骤S11:提取目标界面上的视觉元素的色彩特征。
本实施例中,客户端可以通过UI层,获取用户通过预设触发事件触发的针对目标界面的显示请求。其中,上述预设触发事件包括但不限于点击携带有跳转链接的图片、文字等事件。可以理解的是,上述跳转链接是指由当前显示界面跳转至目标界面的链接。上述图片、文字等信息具体是可以表征目标界面上的主要内容特征的信息,如携带有跳转链接的影视专辑海报、音乐专辑宣传海报、新闻图片、新闻题目、新闻摘要信息等。
本实施例中,获取到针对目标界面的显示请求之后,客户端向服务器请求目标界面上的视觉元素。其中,考虑到一个界面上的视觉元素的种类和数量是比较多的,而有些视觉元素在整个画面中的占比较少,为了避免或降低这些视觉元素对界面皮肤的影响,保证最终界面皮肤的视觉效果能够反映出界面的主旋律,本实施例中所述向服务器发送用于请求所述目标界面上的视觉元素的信息,具体可以包括:
根据所述目标界面的类型确定主视觉元素的类型以得到目标元素类型;创建包含所述目标元素类型的请求信息并发送至服务器,以获取所述服务器返回的所述目标界面上的与所述目标元素类型对应的视觉元素。
例如,如果目标界面的类型是视频展示界面,那么其主视觉元素的类型可以确定为专辑海报。如果目标界面的类型是浏览器中的新闻显示界面,那么其主视觉元素的类型可以确定为当前新闻头条图片。如果目标界面的类型是音乐客户端的播放界面,则相应的主视觉元素的类型可以是歌手写真照片或音乐专辑封面等。也即,本实施例只是对目标界面上的主视觉元素发起请求,以获取到上述主视觉元素,避免服务器将其他一些次要的视觉元素发给客户端。其中,上述主视觉元素是指界面上的对视觉效果起到主要作用的视觉元素,如图3所示的专辑详情页上的专辑海报等。
需要指出的是,一个界面上的主视觉元素的数量通常只有一个,但是,本实施例并不局限于此。对于那些存在两种主旋律甚至更多主旋律的界面来说,此时该界面上的主视觉元素的数量是多于一个的,比如,有时候在游戏比赛界面上,会同时显示双方队伍的宣传图片,此时的一个显示界面上相当于出现了两个主视觉元素。这种情况下,可以同时向服务器发送用于请求该界面上的多个主视觉元素的信息,以获取服务器返回的多个主视觉元素。
本实施例中,服务器返回视觉元素之后,客户端便可以对上述视觉元素的色彩特征进行提取。其中,色彩特征包括但不限于表征颜色的具体数值、颜色的数量、颜色的权重等。
在进行色彩特征的提取时,本实施例可以先利用颜色提取算法从视觉元素中提取到初始色彩集合,然后再从初始色彩集合中筛选出若干数量的色彩作为最终的用于生成皮肤参数的色彩特征。为了避免后续的背景画面色调过于单调,上述筛选出来的色彩数量最好是两个及以上,避免只选出一个色彩。
步骤S12:基于所述色彩特征生成所述目标界面的皮肤参数。
本实施例中,由于上述色彩特征能够反映出目标界面上的视觉特征,所以基于上述色彩特征生成的皮肤参数的视觉效果与上述目标界面的视觉效果能够大体保持一致,使得用户具有更好的沉浸式观看体验,这对于视频观看过程尤为重要。
在一种具体实施方式中,所述基于所述色彩特征生成所述目标界面的皮肤参数,可以包括:利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图。也即,本实施例可以通过线性渐变(Linear-Gradient)函数,并基于上述提取到的色彩特征中的多个色彩,进行色彩渐变操作,从而生成了整个画面色彩是渐变色的背景图。通过这种背景图来展示上述视觉元素时,由于背景图中的渐变色是植根于视觉元素中的色彩特征的,从而使得背景图和视觉元素之间在视觉上是能够很好地融合在一起的,提升了用户在观看过程中的沉浸式体验。
进一步的,本实施例在提取色彩特征时,可以通过分析每个色彩在画面中的占比来确定出每个色彩的权重。在进行上述色彩渐变操作时,将色彩的权重考虑进上述色彩渐变操作中,以使得渐变图中每个色彩的画面占比与上述预先确定的色彩权重相匹配。
进一步的,如果目标界面上存在多个主视觉元素,那么在进行上述色彩渐变操作时,需要先在空白的背景图上分别确定出与每个主视觉元素对应的渐变子区域,然后利用每个主视觉元素各自对应的色彩特征在各自的渐变子区域上分别展开色彩渐变操作,从而使得每个主视觉元素与各自经过色彩渐变操作后的渐变子区域在视觉上均能够很好地融合在一块,保证了视觉沉浸效果。其中,本实施例可以基于目标界面上主视觉元素所在的画面区域确定出每个主视觉元素在背景图中对应的渐变子区域。
在另一种具体实施方式中,除了可以利用线性渐变函数和所述色彩特征进行色彩渐变操作以生成所述目标界面的背景图之外,还可以进一步利用所述色彩特征生成所述目标界面上的控件底色和文字颜色。也就是说,本实施例中的皮肤参数除了包括背景图之外,还可以进一步包括控件底色和文字颜色等UI元素。可以理解的是,控件底色和文字颜色,需要与背景图的颜色有所区分,以便用户能够清楚地分辨出背景图、控件和文字之间所在的位置。另外,上述控件具体可以包括但不限于按钮等。
进一步的,在针对目标界面发起首次的显示请求之后,如果对目标界面再次发起显示请求,为了进一步加快换肤响应速度,本实施例中,所述基于所述色彩特征生成所述目标界面的皮肤参数之后,还可以包括:
将所述皮肤参数发送至服务器进行保存,并在所述服务器建立所述皮肤参数与所述目标界面之间的映射关系;若获取到针对所述目标界面的新的显示请求,则根据所述映射关系从所述服务器中调取出与所述目标界面对应的所述皮肤参数,以完成对所述新的显示请求的响应。
步骤S13:将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
本实施例中,当上述皮肤参数生成之后,相应的界面皮肤也随之被确定下来,然后将显示界面的皮肤跳转至上述皮肤参数对应的界面皮肤,通过该界面皮肤对目标界面上的所有视觉元素进行展示,从而正式完成对上述显示请求的响应。
本实施例中,目标界面的界面皮肤是用来对目标界面上的视觉元素进行展示的载体,因此,可以理解的是,本实施例中的界面皮肤与视觉元素是目标界面上的不同组成元素,即目标界面的界面皮肤并不属于本实施例中所述视觉元素。
本申请实施例中,在获取到针对目标界面的显示请求之后,会实时向服务器请求目标界面上的视觉元素,然后提取视觉元素的色彩特征,并基于该色彩特征生成目标界面的皮肤参数,最后将当前显示界面的皮肤跳转至与上述皮肤参数对应的界面皮肤,由此实现了换肤过程。可见,上述换肤过程中,皮肤参数是根据目标界面上的视觉元素的色彩特征生成的,色彩特征的不同,将会产生不同的皮肤参数,从而使得皮肤的种类变得非常丰富;另外,上述皮肤参数的生成过程是由后台自动完成的,无需人工介入,从而能够大幅提升皮肤的发布速度。
图4为本申请实施例提供的一种应用于客户端的界面皮肤生成方法。参见图4所示,该界面皮肤生成方法包括:
步骤S21:利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合。
也即,本实施例具体采用了中位切分算法(Median-Cut Algorithm)对视觉元素进行首次色彩提取。具体的,将视觉元素的图片按R、G、B三基色分量量化得到三个不同的坐标轴,其中0代表全黑,255代表全白,这样形成了一个边长为256的彩色立方体,所有可能的颜色都对应于立方体上的一个点。接着,将彩色立方体切分成256个小立方体,其中,每个小立方体中都包含了相同数量的图像中出现的颜色点,并且,求出每一个小立方体的中心点,这些中心点所表示的颜色就是能代表图像颜色特征的颜色集合。
需要指出的是,本实施例除了可以采用中位切分算法来进行首次的颜色提取操作,还可以采用八叉树算法或聚类算法来进行首次的颜色提取操作。
步骤S22:基于色彩出现频率从所述第一色彩集合中筛选出第一预设数量的色彩以得到第二色彩集合。
本实施例,在利用中位切分算法进行首次色彩提取得到第一色彩集合之后,由于此时所得到的第一色彩集合中的色彩数量是比较多的,不适合直接拿过来用,所以本实施例继续在第一色彩集合中筛选出色彩出现频率较多的第一预设数量的色彩。其中,上述第一预设数量可以根据实际需要进行设定,例如如图5所示,具体可以设为6种。
步骤S23:基于色彩明暗程度从所述第二色彩集合中筛选出第二预设数量的色彩以作为所述色彩特征。
为了保证后续进行线性渐变的过程具有较好的渐变效果,最终确定出来的不同色彩特征之间需要确保比较明显的明暗差别。为此,如图5所示,本实施例可以基于色彩明暗程度从上述第二色彩集合中筛选出明暗程度相差较大的两个或以上的色彩作为最终的色彩特征。
步骤S24:利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图,并利用所述色彩特征生成所述目标界面上的控件底色和文字颜色。
也即,本实施例具体可以通过线性渐变函数,并基于上述提取到的多个色彩特征,进行色彩渐变操作,从而生成了整个画面色彩是渐变色的背景图。通过这种背景图来展示上述视觉元素时,由于背景图中的渐变色是植根于视觉元素中的色彩特征的,从而使得背景图和视觉元素之间在视觉上是能够很好地融合在一起的,提升了用户在观看过程中的沉浸式体验。
步骤S25:将当前显示界面的皮肤跳转至与所述背景图、所述控件底色和文字颜色对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
由此可见,本实施例基于颜色提取算法、色彩出现频率和色彩明暗程度来筛选出上述色彩特征,并且基于线性渐变函数和上述色彩特征展开色彩渐变,以形成目标界面的背景图,由于上述背景图的渐变色是植根于视觉元素中的色彩特征的,从而使得背景图和视觉元素之间在视觉上是能够很好地融合在一起的,提升了用户在观看过程中的沉浸式体验。
图6为本申请实施例提供的一种应用于客户端的界面皮肤生成方法。参见图6所示,该界面皮肤生成方法包括:
步骤S31:利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合。
本实施例中,关于上述步骤S31的具体过程,可以参考前述实施例中公开的相应内容,在此不再进行赘述。
步骤S32:对当前用户情绪进行分析以得到当前用户情绪特征。
其中,所述对当前用户情绪进行分析以得到当前用户情绪特征,具体可以包括:根据所述显示请求的发起时间、当前天气信息、当前环境光照、当前节日信息、预设的用户性格标签和历史时间段内用户浏览痕迹,对当前用户情绪进行分析以得到当前用户情绪特征。
步骤S33:从所述第一色彩集合中筛选出色彩心理效应特征与当前用户情绪特征相匹配的第三预设数量的色彩以作为所述色彩特征。
也就是说,本实施例中,在利用中位切分算法对视觉元素进行颜色提取得到第一色彩集合之后,基于色彩心理效应特征和用户情绪特征之间的匹配关系来从上述第一色彩集合中筛选出最终的色彩特征,从而使得最终筛选到的色彩特征是符合当前用户的情绪。比如,如果通过上述方案分析出当前用户的情绪是比较积极乐观的,那么最终可以从上述第一色彩集合中筛选出色彩心理效应特征也是比较积极向上的色彩作为所述色彩特征。
步骤S34:基于所述色彩特征生成所述目标界面的皮肤参数。
由于上述筛选出来的色彩特征是符合当前用户情绪特征的,所以基于上述色彩特征生成的背景图等皮肤参数能够贴合当前用户情绪的,极大地提升了用户使用体验。
步骤S35:将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
由此可见,本实施例是基于颜色提取算法和当前用户情绪特征来筛选色彩特征的,使得基于上述色彩特征生成的背景图等皮肤参数能够贴合当前用户情绪的,极大地提升了用户使用体验。
图7为本申请实施例提供的一种应用于客户端的界面皮肤生成方法。参见图7所示,该界面皮肤生成方法包括:
步骤S41:确定目标界面上的视觉元素的尺寸大小。
步骤S42:若所述尺寸大小大于预设阈值,则确定出与所述尺寸大小相符的压缩率。
步骤S43:根据所述压缩率对所述视觉元素进行压缩处理。
也即,本实施例在服务器返回的视觉元素太大的情况下,先根据该视觉元素的尺寸大小确定出视觉元素的压缩率,然后基于上述压缩率对所述视觉元素进行压缩处理,从而达到减少视觉元素的大小以及降低需要进行运算的数据量的效果。例如,如果图片的高或宽大于112像素,则对图片进行压缩处理,并且图片的高或宽超过预设阈值越多,则相应的压缩率越大。
步骤S44:提取压缩后的视觉元素的色彩特征。
步骤S45:基于所述色彩特征生成所述目标界面的皮肤参数。
步骤S46:将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
本实施例中,关于上述步骤S45至S46的具体过程,可以参考前述实施例中公开的相应内容,在此不再进行赘述。
下面以OTT(即Over The Top)端视频APP的换肤过程为例,对本申请的技术方案进行说明。
参见图8所示,当获取用户在首页触发针对电视剧《特种兵之火凤凰》的专辑详情页的显示请求之后,向服务器发送用于请求该专辑详情页的专辑海报的信息,获取服务器返回的《特种兵之火凤凰》专辑海报的二进制流数据并解析为相应的图片以及对图片进行压缩处理;利用中位切分算法对经过压缩后的所述《特种兵之火凤凰》专辑海报进行处理,得到包含256个色彩的第一色彩集合,基于色彩出现频率从所述第一色彩集合中筛选出色彩出现频率最高的6种色彩以得到第二色彩集合;基于色彩明暗程度从所述第二色彩集合中筛选出明暗程度反差最明显的4种色彩以作为所述色彩特征;利用线性渐变函数和所述4种色彩中的军绿色和红色这两种色彩进行色彩渐变操作,以生成所述目标界面的背景图,并利用所述4种色彩中的其他两种色彩分别生成按钮底色和文字颜色等UI元素。将当前显示界面的皮肤跳转至与上述背景图、按钮底色和文字颜色对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示,以完成对所述显示请求的响应。
进一步的,下面以浏览器APP的换肤过程为例,对本申请的技术方案再次进行说明。
获取针对显示内容为当前国际新闻图片的浏览器界面的显示请求,向服务器发送用于请求该当前国际新闻图片的信息,并获取服务器返回的当前国际新闻图片并进行图像压缩处理;利用中位切分算法对经过图像压缩的所述当前国际新闻图片中的进行处理,得到包含256个色彩的第一色彩集合,基于色彩出现频率从所述第一色彩集合中筛选出色彩出现频率最高的6种色彩以得到第二色彩集合;基于色彩明暗程度从所述第二色彩集合中筛选出明暗程度反差最明显的2种色彩以作为所述色彩特征;利用线性渐变函数和所述2种色彩中的两种色彩进行色彩渐变操作,以生成所述目标界面的背景图。将当前浏览器的皮肤跳转至与该背景图对应的界面皮肤,并通过该界面皮肤对所述当前国际新闻图片进行展示,以完成对所述显示请求的响应。
可见,上述换肤过程中,皮肤参数是根据目标界面上的视觉元素的色彩特征生成的,色彩特征的不同,将会产生不同的皮肤参数,从而使得皮肤的种类变得非常丰富;另外,上述皮肤参数的生成过程是由后台自动完成的,无需人工介入,从而能够大幅提升皮肤的发布速度。并且,本实施例基于颜色提取算法、色彩出现频率和色彩明暗程度来筛选出上述色彩特征,并且基于线性渐变函数和上述色彩特征展开色彩渐变,以形成目标界面的背景图,由于上述背景图的渐变色是植根于视觉元素中的色彩特征的,从而使得背景图和视觉元素之间在视觉上是能够很好地融合在一起的,提升了用户在观看过程中的沉浸式体验。
参见图9所示,图9为本申请实施例提供的一种应用于客户端的界面皮肤生成装置结构示意图,该界面皮肤生成装置包括:
特征提取模块11,用于提取目标界面上的视觉元素的色彩特征;
参数生成模块12,用于基于所述色彩特征生成所述目标界面的皮肤参数;
皮肤跳转模块13,用于将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
需要指出的是,本实施例中的参数生成模块12和皮肤跳转模块13具体可以是位于UI层上,而特征提取模块11则可以位于逻辑层上。
本申请实施例中,提取目标界面上的视觉元素的色彩特征,并基于该色彩特征生成目标界面的皮肤参数,最后将当前显示界面的皮肤跳转至与上述皮肤参数对应的界面皮肤,由此实现了换肤过程。可见,上述换肤过程中,皮肤参数是根据目标界面上的视觉元素的色彩特征生成的,色彩特征的不同,将会产生不同的皮肤参数,从而使得皮肤的种类变得非常丰富;另外,上述皮肤参数的生成过程是由后台自动完成的,无需人工介入,从而能够大幅提升皮肤的发布速度。
在一些实施例中,所述特征提取模块11具体可以包括:
第一色彩提取单元,用于利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合;
第一筛选单元,用于基于色彩出现频率从所述第一色彩集合中筛选出第一预设数量的色彩以得到第二色彩集合;
第二筛选单元,用于基于色彩明暗程度从所述第二色彩集合中筛选出第二预设数量的色彩以作为所述色彩特征。
在一些实施例中,所述特征提取模块11具体可以包括:
第二色彩提取单元,用于利用中位切分算法对目标界面上的视觉元素进行处理以得到第一色彩集合;
情绪特征获取单元,用于对当前用户情绪进行分析以得到当前用户情绪特征;
第三筛选单元,用于从所述第一色彩集合中筛选出色彩心理效应特征与当前用户情绪特征相匹配的第三预设数量的色彩以作为所述色彩特征。
在一些实施例中,所述情绪特征获取单元,具体用于根据所述显示请求的发起时间、当前天气信息、当前环境光照、当前节日信息、预设的用户性格标签和历史时间段内用户浏览痕迹,对当前用户情绪进行分析以得到当前用户情绪特征。
在一些实施例中,所述参数生成模块12可以包括:
第一生成单元,用于利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图。
在一些实施例中,所述参数生成模块12还可以包括:
第二生成单元,用于利用所述色彩特征生成所述目标界面上的控件底色和文字颜色。
在一些实施例中,所述界面皮肤生成装置还可以包括:
尺寸确定模块,用于确定目标界面上的视觉元素的尺寸大小;
压缩率确定模块,用于当所述尺寸大小大于预设阈值,则确定出与所述尺寸大小相符的压缩率;
压缩模块,用于根据所述压缩率对所述视觉元素进行压缩处理。
在一些实施例中,所述界面皮肤生成装置还可以包括:
参数存储模块,用于将所述皮肤参数发送至服务器进行保存,并在所述服务器建立所述皮肤参数与所述目标界面之间的映射关系;
参数调取模块,用于当获取到针对所述目标界面的新的显示请求,则根据所述映射关系从所述服务器中调取出与所述目标界面对应的所述皮肤参数,以完成对所述新的显示请求的响应。
在一些实施例中,所述第一生成单元,具体可以用于在空白的背景图上分别确定出与每个主视觉元素对应的渐变子区域,然后利用每个主视觉元素各自对应的色彩特征在各自的渐变子区域上分别展开色彩渐变操作,从而使得每个主视觉元素与各自经过色彩渐变操作后的渐变子区域在视觉上均能够很好地融合在一块,保证了视觉沉浸效果。
进一步的,本申请实施例还提供了一种电子设备。图10是根据一示例性实施例示出的电子设备20结构图,图中的内容不能被认为是对本申请的使用范围的任何限制。
图10为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20,具体可以包括:至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中,所述存储器22用于存储计算机程序,所述计算机程序由所述处理器21加载并执行,以实现前述任一实施例公开的界面皮肤生成方法中的相关步骤。
本实施例中,电源23用于为电子设备20上的各硬件设备提供工作电压;通信接口24能够为电子设备20创建与外界设备之间的数据传输通道,其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议,在此不对其进行具体限定;输入输出接口25,用于获取外界输入数据或向外界输出数据,其具体的接口类型可以根据具体应用需要进行选取,在此不进行具体限定。
另外,存储器22作为资源存储的载体,可以是只读存储器、随机存储器、磁盘或者光盘等,其上所存储的资源包括操作系统221、计算机程序222及包括游戏视频在内的数据223等,存储方式可以是短暂存储或者永久存储。
其中,操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222,以实现处理器21对存储器22中海量数据223的运算与处理,其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的界面皮肤生成方法的计算机程序之外,还可以进一步包括能够用于完成其他特定工作的计算机程序。数据223可以包括电子设备20获取到的各种界面数据。
需要进一步指出的是,本实施例中的电子设备除了可以是常规的分布式计算机集群中的节点外,还可以是区块链网络中的区块链节点。
进一步的,本申请实施例还公开了一种存储介质,所述存储介质中存储有计算机可执行指令,所述计算机可执行指令被处理器加载并执行时,实现前述任一实施例公开的界面皮肤生成方法步骤。
本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其它实施例的不同之处,各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言,由于其与实施例公开的方法相对应,所以描述的比较简单,相关之处参见方法部分说明即可。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块,或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上对本申请所提供的一种界面皮肤生成方法、装置、设备及存储介质进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的一般技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种界面皮肤生成方法,其特征在于,包括:
提取目标界面上的主视觉元素的色彩特征,其中,所述主视觉元素的获取过程包括:根据目标界面的类型确定主视觉元素的类型,根据主视觉元素的类型获取对应的主视觉元素,所述主视觉元素为界面上对视觉效果起到主要作用的视觉元素,所述色彩特征包括颜色的数量和颜色的权重,所述颜色的数量为至少两个;
基于所述色彩特征生成所述目标界面的皮肤参数,其中,所述基于所述色彩特征生成所述目标界面的皮肤参数,包括:在空白的背景图上确定与所述主视觉元素对应的渐变子区域;在所述渐变子区域上,利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图,其中,依据每个色彩的权重进行色彩渐变操作以使所述背景图中每个色彩的画面占比与所述色彩特征中对应色彩的权重相匹配;
将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
2.根据权利要求1所述的界面皮肤生成方法,其特征在于,所述提取目标界面上的主视觉元素的色彩特征,包括:
利用中位切分算法对目标界面上的主视觉元素进行处理以得到第一色彩集合;
基于色彩出现频率从所述第一色彩集合中筛选出第一预设数量的色彩以得到第二色彩集合;
基于色彩明暗程度从所述第二色彩集合中筛选出第二预设数量的色彩以作为所述色彩特征。
3.根据权利要求1所述的界面皮肤生成方法,其特征在于,所述提取目标界面上的主视觉元素的色彩特征,包括:
利用中位切分算法对目标界面上的主视觉元素进行处理以得到第一色彩集合;
对当前用户情绪进行分析以得到当前用户情绪特征;
从所述第一色彩集合中筛选出色彩心理效应特征与当前用户情绪特征相匹配的第三预设数量的色彩以作为所述色彩特征。
4.根据权利要求3所述的界面皮肤生成方法,其特征在于,所述对当前用户情绪进行分析以得到当前用户情绪特征,包括:
根据显示请求的发起时间、当前天气信息、当前环境光照、当前节日信息、预设的用户性格标签和历史时间段内用户浏览痕迹,对当前用户情绪进行分析以得到当前用户情绪特征。
5.根据权利要求1所述的界面皮肤生成方法,其特征在于,所述基于所述色彩特征生成所述目标界面的皮肤参数,还包括:
利用所述色彩特征生成所述目标界面上的控件底色和文字颜色。
6.根据权利要求1至4任一项所述的界面皮肤生成方法,其特征在于,所述提取目标界面上的主视觉元素的色彩特征之前,还包括:
确定目标界面上的主视觉元素的尺寸大小;
若所述尺寸大小大于预设阈值,则确定出与所述尺寸大小相符的压缩率;
根据所述压缩率对所述主视觉元素进行压缩处理。
7.根据权利要求1至4任一项所述的界面皮肤生成方法,其特征在于,所述基于所述色彩特征生成所述目标界面的皮肤参数之后,还包括:
将所述皮肤参数发送至服务器进行保存,并在所述服务器建立所述皮肤参数与所述目标界面之间的映射关系;
若获取到针对所述目标界面的新的显示请求,则根据所述映射关系从所述服务器中调取出与所述目标界面对应的所述皮肤参数,以完成对所述新的显示请求的响应。
8.一种界面皮肤生成装置,其特征在于,包括:
特征提取模块,用于提取目标界面上的主视觉元素的色彩特征,其中,所述主视觉元素的获取过程包括:根据目标界面的类型确定主视觉元素的类型,根据主视觉元素的类型获取对应的主视觉元素,所述主视觉元素为界面上对视觉效果起到主要作用的视觉元素,所述色彩特征包括颜色的数量和颜色的权重,所述颜色的数量为至少两个;
参数生成模块,用于基于所述色彩特征生成所述目标界面的皮肤参数,其中,所述基于所述色彩特征生成所述目标界面的皮肤参数,包括:在空白的背景图上确定与所述主视觉元素对应的渐变子区域;在所述渐变子区域上,利用线性渐变函数和所述色彩特征进行色彩渐变操作,以生成所述目标界面的背景图,其中,依据每个色彩的权重进行色彩渐变操作以使所述背景图中每个色彩的画面占比与所述色彩特征中对应色彩的权重相匹配;
皮肤跳转模块,用于将当前显示界面的皮肤跳转至与所述皮肤参数对应的界面皮肤,并通过该界面皮肤对所述目标界面上的视觉元素进行展示。
9.一种电子设备,其特征在于,所述电子设备包括处理器和存储器;其中,所述存储器用于存储计算机程序,所述计算机程序由所述处理器加载并执行以实现如权利要求1至7任一项所述的界面皮肤生成方法。
10.一种存储介质,其特征在于,所述存储介质中存储有计算机可执行指令,所述计算机可执行指令被处理器加载并执行时,实现如权利要求1至7任一项所述的界面皮肤生成方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911382841.2A CN111158826B (zh) | 2019-12-27 | 2019-12-27 | 一种界面皮肤生成方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911382841.2A CN111158826B (zh) | 2019-12-27 | 2019-12-27 | 一种界面皮肤生成方法、装置、设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111158826A CN111158826A (zh) | 2020-05-15 |
CN111158826B true CN111158826B (zh) | 2022-04-05 |
Family
ID=70558732
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911382841.2A Active CN111158826B (zh) | 2019-12-27 | 2019-12-27 | 一种界面皮肤生成方法、装置、设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111158826B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116795346B (zh) * | 2023-06-26 | 2024-03-15 | 成都中科合迅科技有限公司 | 基于视觉对比的组件界面绘制方法和系统 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105760163A (zh) * | 2016-02-06 | 2016-07-13 | 北京麒麟合盛网络技术有限公司 | 一种界面展示方法及装置 |
CN105761283A (zh) * | 2016-02-14 | 2016-07-13 | 广州神马移动信息科技有限公司 | 一种图片主色提取方法及装置 |
CN106095447A (zh) * | 2016-06-14 | 2016-11-09 | 武汉深之度科技有限公司 | 一种应用界面的生成方法、设备及计算设备 |
-
2019
- 2019-12-27 CN CN201911382841.2A patent/CN111158826B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105760163A (zh) * | 2016-02-06 | 2016-07-13 | 北京麒麟合盛网络技术有限公司 | 一种界面展示方法及装置 |
CN105761283A (zh) * | 2016-02-14 | 2016-07-13 | 广州神马移动信息科技有限公司 | 一种图片主色提取方法及装置 |
CN106095447A (zh) * | 2016-06-14 | 2016-11-09 | 武汉深之度科技有限公司 | 一种应用界面的生成方法、设备及计算设备 |
Also Published As
Publication number | Publication date |
---|---|
CN111158826A (zh) | 2020-05-15 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108600781B (zh) | 一种视频封面生成的方法以及服务器 | |
CN104954811B (zh) | 一种视频聚合应用加载网络视频的方法及智能电视终端 | |
CN106453284B (zh) | 直播标签更新方法、装置和终端设备 | |
CN107465936A (zh) | 一种直播列表镜像展示方法、直播平台服务器及客户端 | |
CN110609965B (zh) | 一种页面显示方法、装置和存储介质 | |
US20160301982A1 (en) | Smart tv media player and caption processing method thereof, and smart tv | |
CN104881287A (zh) | 截图方法及装置 | |
CN108737878B (zh) | 用于结合视频呈现来修改用户界面颜色的方法和系统 | |
CN104079999A (zh) | 用于智能电视上的视频截图预览方法及系统 | |
CN103442299B (zh) | 一种播放记录的显示方法及电子设备 | |
CN107872729A (zh) | 获取、生成视频帧缩略图的方法和装置及获取系统 | |
CN103259989A (zh) | 屏幕内容的显示方法及装置 | |
CN114286172B (zh) | 数据处理方法及装置 | |
CN114816308B (zh) | 信息分区显示方法及相关设备 | |
CN111158826B (zh) | 一种界面皮肤生成方法、装置、设备及存储介质 | |
CN110149550A (zh) | 一种图像数据处理方法和装置 | |
CN108876866B (zh) | 一种媒体数据处理方法、装置及存储介质 | |
CN113891136A (zh) | 一种视频播放方法、装置、电子设备和存储介质 | |
JP5433377B2 (ja) | 画像処理装置、画像処理方法、および、画像処理プログラム | |
CN113596574A (zh) | 视频处理方法、视频处理装置、电子设备和可读存储介质 | |
KR20000037054A (ko) | 인터넷 망을 이용한 영화제작 시스템 및 그 영화제작 방법 | |
WO2023024803A1 (zh) | 动态封面生成方法、装置、电子设备、介质及程序产品 | |
CN112399231A (zh) | 播放方法 | |
CN107027056B (zh) | 一种桌面配置方法、服务器及客户端 | |
CN111367598B (zh) | 动作指令的处理方法、装置、电子设备及计算机可读存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant | ||
TR01 | Transfer of patent right |
Effective date of registration: 20221206 Address after: 1402, Floor 14, Block A, Haina Baichuan Headquarters Building, No. 6, Baoxing Road, Haibin Community, Xin'an Street, Bao'an District, Shenzhen, Guangdong 518000 Patentee after: Shenzhen Yayue Technology Co.,Ltd. Address before: 518000 Tencent Building, No. 1 High-tech Zone, Nanshan District, Shenzhen City, Guangdong Province, 35 Floors Patentee before: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. |
|
TR01 | Transfer of patent right |