一种UI调色板确定方法、装置、设备及存储介质制造方法及图纸

技术编号:24798955 阅读:63 留言:0更新日期:2020-07-07 20:57
本发明专利技术实施例提供了一种用户界面UI调色板确定方法、装置、设备及存储介质,其中,该方法可以包括:确定UI调色板中第一主题色对应的第一颜色值,第一颜色值为RGB模式;将第一主题色对应的第一颜色值转换为第一主题色对应的第二颜色值,第二颜色值为HSB模式;根据第一主题色对应的第二颜色值,计算该调色板中第二主题色对应的第二颜色值;并将第二主题色对应的第二颜色值,转换为第二主题色对应的第一颜色值;其中,第二主题色是调色板中除第一主题色之外的其他颜色。通过本发明专利技术实施例提供的UI调色板确定方法、装置、设备及存储介质,能够提高用户与界面交互过程中的视觉效果。

【技术实现步骤摘要】
一种UI调色板确定方法、装置、设备及存储介质
本专利技术涉及互联网
,特别是涉及一种用户界面(UserInterface,UI)调色板确定方法、装置、设备及存储介质。
技术介绍
在用户界面中,不同的主题类型可以对应不同的调色板,如提示信息对应红色系,文本信息对应黑色系,等等。调色板可以包括基于同一色系的多个不同的主题色。其中,不同的主题色对应不同的交互操作、操作主体等,如用户在与界面交互过程中,当将鼠标移动至选择标题的按钮的附件时,呈现出一种颜色;当通过鼠标点击该按钮时,呈现出另一种颜色。颜色作为一种感知性的设计语言,在表达设计目标时起到强化作用。不同的颜色表达出不同的视觉效果。如此,在与界面交互过程中,为了尽可能地提高与界面交互过程中的视觉效果,确定调色板的过程非常重要。
技术实现思路
本专利技术实施例的目的在于提供一种UI调色板确定方法、装置、设备及存储介质,以提高用户与界面交互过程中的视觉效果。具体技术方案如下:第一方面,本专利技术实施例提供了一种用户界面UI调色板确定方法,包括:确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;根据所述第一主题色对应的第二颜色值,计算所述调色板第二主题色对应的第二颜色值;并将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色。可选的,所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;在将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值之后,所述方法还包括:判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。可选的,所述根据所述第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值,包括:将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和/或色号最大的颜色;根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值。可选的,所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值。可选的,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:计算所述第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;确定所述第二差值绝对值与第一色号个数的第二比值,并将所述第二比值作为第一饱和度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;根据所述第一主题色对应的饱和度分量值以及所述第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;计算所述第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;确定所述第三差值绝对值与第二色号个数的第三比值,并将所述第三比值作为第二饱和度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;根据所述第一主题色对应的饱和度分量值以及所述第二饱和度平均间隔,确定第二主题色对应的饱和度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。可选的,所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;确定所述第四差值绝对值与所述色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述亮度平均间隔,确定所述其他主题色对应的亮度分量值。可选的,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:计算所述第一主题色对应的亮度分量值与第一边缘主题色对应的亮度分量值之间的第五差值绝对值;确定所述第五差值绝对值与第一色号个数的第五比值,并将所述第五比值作为第一亮度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述第一亮度平均间隔,确定第一其他主题色对应的亮度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;计算所述第一主题色对应的亮度分量值与第二边缘主题色对应的亮度分量值之间的第六差值绝对值;确定所述第六差值绝对值与第二色号个数的第六比值,并将所述第六比值作为第二亮度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;根据所述第一主题色对应的亮度分量值以及所述第二亮度平均间隔,确定第二主题色对应的亮度分量值;所述第二其他主题色包括本文档来自技高网...

【技术保护点】
1.一种用户界面UI调色板确定方法,其特征在于,包括:/n确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;/n将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;/n根据所述第一主题色对应的第二颜色值,计算所述调色板中第二主题色对应的第二颜色值;并将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色。/n

【技术特征摘要】
1.一种用户界面UI调色板确定方法,其特征在于,包括:
确定用户界面UI调色板中第一主题色对应的第一颜色值,所述第一颜色值为RGB模式;
将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值,所述第二颜色值为HSB模式;
根据所述第一主题色对应的第二颜色值,计算所述调色板中第二主题色对应的第二颜色值;并将所述第二主题色对应的第二颜色值,转换为所述第二主题色对应的第一颜色值;其中,所述第二主题色是所述调色板中除所述第一主题色之外的其他颜色。


2.根据权利要求1所述的方法,其特征在于,所述第二颜色值包括色度分量值、饱和度分量值和亮度分量值;
在将所述第一主题色对应的第一颜色值转换为所述第一主题色对应的第二颜色值之后,所述方法还包括:
判断所述第一主题色对应的第二颜色值的第一饱和度分量值、是否大于或等于预设饱和度阈值;在判断结果为所述第一饱和度分量值小于所述预设饱和度阈值的情况下,返回执行所述确定第一主题色对应的第一颜色值的步骤,直至所述第一饱和度分量值大于或等于所述预设饱和度阈值。


3.根据权利要求2所述的方法,其特征在于,所述根据所述第一主题色对应的第二颜色值,计算第二主题色对应的第二颜色值,包括:
将所述第一主题色对应的色度分量值,增加或者减少预设间隔,得到所述第二主题色对应的色度分量值;
确定边缘主题色对应的饱和度分量值和所述边缘主题色对应的亮度分量值,其中,所述边缘主题色包括:所述第二主题色中色号最小的颜色和/或色号最大的颜色;
根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值;
根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值。


4.根据权利要求3所述的方法,其特征在于,所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与所述边缘主题色对应的饱和度分量值之间的第一差值绝对值;确定所述第一主题色距离所述边缘主题色的色号个数;确定所述第一差值绝对值与所述色号个数的第一比值,并将所述第一比值作为饱和度平均间隔;
根据所述第一主题色对应的饱和度分量值以及所述饱和度平均间隔,确定所述其他主题色对应的饱和度分量值。


5.根据权利要求3所述的方法,其特征在于,在所述边缘主题色包括:第一边缘主题色和第二边缘主题色的情况下,其中,所述第一边缘主题色为所述第二主题色中色号最小的颜色,所述第二边缘主题色为所述第二主题色中色号最大的颜色;所述根据所述第一主题色对应的饱和度分量值和所述边缘主题色对应的饱和度分量值,通过第一预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的饱和度分量值,包括:
计算所述第一主题色对应的饱和度分量值与第一边缘主题色对应的饱和度分量值之间的第二差值绝对值;确定所述第二差值绝对值与第一色号个数的第二比值,并将所述第二比值作为第一饱和度平均间隔;其中,所述第一色号个数为所述第一主题色距离所述第一边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第一饱和度平均间隔,确定第一其他主题色对应的饱和度分量值;所述第一其他主题色包括色号位于所述第一边缘主题色的色号与所述第一主题色的色号之间的颜色;
计算所述第一主题色对应的饱和度分量值与第二边缘主题色对应的饱和度分量值之间的第三差值绝对值;确定所述第三差值绝对值与第二色号个数的第三比值,并将所述第三比值作为第二饱和度平均间隔;其中,所述第二色号个数为所述第一主题色距离所述第二边缘主题色的色号个数;
根据所述第一主题色对应的饱和度分量值以及所述第二饱和度平均间隔,确定第二主题色对应的饱和度分量值;所述第二其他主题色包括色号位于所述第一主题色的色号与所述第二边缘主题色的色号之间的颜色。


6.根据权利要求3所述的方法,其特征在于,所述根据所述第一主题色对应的亮度分量值和所述边缘主题色对应的亮度分量值,通过第二预设规则,确定所述第二主题色中除所述边缘主题色之外的其他主题色对应的亮度分量值,包括:
计算所述第一主题色对应的亮度分量值与所述边缘主题色对应的亮度分量值之间的第四差值绝对值;确定所述第四差值绝对值与色号个数的第四比值,并将所述第四比值作为亮度平均间隔;其中,所述色号个数为所述第一主题色距离所述...

【专利技术属性】
技术研发人员:宋辉
申请(专利权)人:北京金山云网络技术有限公司北京金山云科技有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1