用于界面的色彩过渡方法和装置技术领域
本发明涉及图像处理领域，具体而言，涉及一种用于界面的色彩过渡
方法和装置。
背景技术
目前，在飞速发展的电子产品中，用户界面是产品系统与用户终端进
行交互和信息传递的媒介。用户界面，也即，针对具体某一产品的目标界
面的图形设计视觉方案，与电子产品的结合提高了产品操作的便捷性，满
足了软件专业化标准的需求，成为产品的重要卖点。电子产品的用户界面
设计，比如，移动终端界面设计、个人计算机(Personal Computer，简称
为PC)界面设计、车载界面设计等用户界面设计成为产品设计的重要组
成部分，设计效果越来越受到厂家的重视。用户界面的设计除了设计软件
的操作流程、树状结构、操作规范等交互设计之外，还包括操作逻辑、图
形设计等整体布局。无论是在软件启动封面设计、软件框架设计、软件按
钮设计、软件面板设计、软件菜单设计方面，还是图标设计、滚动条设计
方面，都以用户终端最终的体验效果为设计标准。而电子产品的用户界面
的美观会带来舒适的视觉享受，拉近用户终端与产品的距离，满足用户终
端的视觉需求，增强用户终端的体验满意度，从而使软件的操作变得舒适、
简单、灵活、高效，为软件的进一步推广奠定基础。
用户界面的设计，遵循简易性。用户界面包括多个版面，各个版面包
括快捷操作面板、菜单、按钮、滚动条、图标、显示面板等。用户界面设
计的视觉方案，通常使用背景烘托出版面的设计，并且根据不同版面的主
题和版面的背景区域设计出不同颜色，使用户界面结构清晰明了，风格与
版面的内容一致，增强视觉舒适度，便于用户终端理解和操作，并减少用
户终端发生误操作的可能性，降低软件使用风险。
但是，目前用户界面，包括现有车载视觉方案，手机应用软件视觉方
案，计算机上位机软件视觉方案等，用户界面的版面与版面之间的颜色以
及版面与版面所处的背景的颜色之间缺少颜色过渡，与用户界面的设计的
美观性。
图1是根据相关技术中的车载视觉方案的示意图。如图1所示，车载
视觉显示界面的背景颜色用10′表示，比如，黑色；显示“一键通”的版面
颜色用斜线条20′表示，比如，天蓝色；显示时间日期“16:00”和“2013/06/06”
的版面颜色用斜线条30′表示，比如，湖蓝色；显示“天气信息获取中”的
版面颜色用斜线条40′表示，比如，紫、蓝、白相间的颜色；显示“行车管
家”的版面颜色用斜线条50′表示，比如，橘黄色；显示“没有未读信息”的
版面颜色为白色。因此，颜色20′与颜色30′相近，与颜色40′差异较大，
与颜色50′和显示“没有未读消息”的版面颜色差异更大，各个版面缺少过
渡效果，版面背景区域的颜色10′与各个版面视觉呈现层没有联系，风格
不统一，在视觉表现上为突兀的感觉。
图2是根据相关技术中的另一种车载视觉方案的示意图。如图2所示，
车载视觉显示界面的背景颜色用斜线条60′表示，比如，黑色；斜线条70′
代表灰色；显示“连新路”的版面颜色用斜线条80′表示，比如，黑色；与
显示“连新路”的版面邻近的显示歌曲的版面颜色用斜线条90′表示，比如，
混合色；显示“87.50”的版面颜色用斜线条100′表示，比如，深蓝色。各个
版面差距很大，各个版面之间的颜色缺少过渡效果，并且版面背景区域的
颜色60′与各个版面的视觉呈现层没有联系，风格不统一，在视觉表现上
为突兀的感觉。
图3是根据相关技术中的另一种车载视觉方案的示意图。如图3所示，
为收音机版面设计。收音机版面的背景颜色用斜线条110′表示，比如，黑
黄色；收音机版面左上角的颜色用斜线条120′表示，比如，由黑色到橘黄
色的过渡颜色；收音机版面右上角的颜色用斜线条130′表示，比如，由黑
色到黄色的过渡颜色；收音机其余部分为与120′和130′相近的过渡颜色。
虽然收音机版面的颜色有过渡颜色，但是与背景颜色110′在视觉呈现层上
表现出棱角分明的效果。颜色110′与颜色120′和颜色130′之间缺乏逻辑，
并且110′与120′和130′的过渡颜色并不丰富，视觉过渡效果单一。
图4是根据相关技术中的另一种车载视觉方案的示意图。如图4所示，
用户界面包括显示“导航”的版面，显示“音乐”的版面，显示“电台”的版面
和显示“QQ”的版面，其中，各个版面为圆圈范围内的区域。各个版面所
处的背景为灰色；“导航”版面中的B表示“导航”版面的颜色为蓝色；“音
乐”版面中的G表示“音乐”版面的颜色为绿色；“电台”版面中的R表示“电
台”版面的颜色为红色；“QQ”版面中的LB表示“QQ”版面的颜色为浅蓝色。
各个版面的颜色没有联系，各个版面所处的背景与各个版面的颜色也没有
联系，导致用户界面中各版面的视觉过渡效果突兀，各版面与各版面背景
颜色的视觉过渡效果单一。
针对界面视觉过渡效果突兀和单一的问题，目前尚未提出有效的解决
方案。
发明内容
本发明实施例提供了一种用于界面的色彩过渡方法和装置，以至少解
决界面视觉过渡效果突兀和单一的技术问题。
本发明实施例提供了一种用于界面的色彩过渡方法。该用于界面的色
彩过渡方法包括：获取第一版面颜色，其中，第一版面颜色为目标界面内
第一预设版面的颜色；获取第二版面颜色，其中，第二版面颜色为目标界
面内第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻的版
面；根据第一版面颜色和第二版面颜色获取第一过渡颜色，其中，第一过
渡颜色为第一版面颜色和第二版面颜色的过渡颜色；以及将第一预设版面
的背景区域和第二预设版面的背景区域中处于第一预设版面和第二预设
版面之间的预设范围的背景区域设置为第一过渡颜色。
本发明实施例还提供了一种用于界面的色彩过渡装置，包括：第一获
取单元，用于获取第一版面颜色，其中，第一版面颜色为目标界面内第一
预设版面的颜色；第二获取单元，用于获取第二版面颜色，其中，第二版
面颜色为目标界面内第二预设版面的颜色，第二预设版面和第一预设版面
为位置相邻的版面；第三获取单元，用于根据第一版面颜色和第二版面颜
色获取第一过渡颜色，其中，第一过渡颜色为第一版面颜色和第二版面颜
色的过渡颜色；以及设置单元，用于将第一预设版面的背景区域和第二预
设版面的背景区域中处于第一预设版面和第二预设版面之间的预设范围
的背景区域设置为第一过渡颜色。
在本发明实施例中，采用从目标界面获取版面颜色，通过版面颜色获
取版面之间的过渡颜色的方法，设计界面的颜色。通过获取第一版面颜色，
得到第一版面颜色，其中，第一版面颜色为目标界面内第一预设版面的颜
色；获取第二版面颜色，得到第二版面颜色，其中，第二版面颜色为目标
界面内第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻的
版面；根据第一版面颜色和第二版面颜色获取第一过渡颜色，其中，第一
过渡颜色为第一版面颜色和第二版面颜色的过渡颜色；将第一预设版面的
背景区域和第二预设版面的背景区域中处于第一预设版面和第二预设版
面之间的预设范围的背景区域设置为第一过渡颜色，达到了用户界面色彩
过渡的目的，从而实现了界面视觉过渡效果具有逻辑性、柔和、丰富、美
观的技术效果，进而解决了界面视觉过渡效果突兀和单一的技术问题。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一
部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发
明的不当限定。在附图中：
图1是根据相关技术中的车载视觉方案的示意图；
图2是根据相关技术中的另一种车载视觉方案的示意图；
图3是根据相关技术中的另一种车载视觉方案的示意图；
图4是根据相关技术中的另一种车载视觉方案的示意图；
图5是根据本发明实施例的一种硬件环境的示意图；
图6是根据本发明实施例的用于界面的色彩过渡方法的流程图；
图7是根据本发明实施例的色光三原色的示意图；
图8是根据本发明实施例的用于界面的色彩过渡方法的示意图；
图9是根据本发明实施例的用于界面的色彩过渡装置的示意图；
图10是根据本发明实施例的用于界面的色彩过渡系统的示意图；以
及
图11是根据本发明实施例的用于界面的色彩过渡系统的方法的流程
图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明
实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，
显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施
例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动
前提下所得到的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语
“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或
先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描
述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实
施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排
他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或
设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出
的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例1
本发明实施例提供了一种用于界面的色彩过渡方法。
可选地，在本实施例中，上述的用于界面的色彩过渡方法可以应用于
如图5所示的服务器102和终端104所构成的硬件环境中。其中，图5是
根据本发明实施例的一种硬件环境的示意图，如图5所示，服务器102通
过网络与终端104进行连接，上述网络包括但不限于：广域网、城域网或
局域网，终端104并不限定于计算机、手机、平板电脑等。本发明实施例
的用于界面的色彩过渡方法可以由服务器102来执行，也可以由终端104
来执行，还可以是由服务器102和终端104共同执行。其中，终端104执
行本发明实施例的用于界面的色彩过渡方法也可以是由安装在其上的客
户端来执行。
图6是根据本发明实施例的用于界面的色彩过渡方法的流程图。如图
6所示，该用于界面的色彩过渡方法包括以下步骤：
步骤S602，获取第一版面颜色，其中，第一版面颜色为目标界面内
第一预设版面的颜色。
颜色的设计是用户界面设计中的重要元素，比如，颜色的选择，颜色
的分配位置，颜色的分配区域大小等，影响用户界面的美观性和用户终端
体验的满意度。红、绿和蓝这三种颜色为原色，也即，任何颜色都可以由
红、绿和蓝这三种颜色按不同的比例混合而成，不同的颜色可以分解成红、
绿和蓝这三种颜色，而红、绿和蓝中的任意一色都不能由其他两种原色混
合而成。图7是根据本发明实施例的色光三原色的示意图。如图7所示，
B表示蓝色，G表示绿色，R表示红色，C表示青色，M表示品红色，Y
表示黄色，W表示白色。蓝色B和绿色G混合成青色C，绿色G和红色
R混合成黄色Y，红色R和蓝色B混合成品红色M，青色C、黄色Y与
品红色M混合成白色W，通过不同颜色的混合，可以得到不同的颜色，
通过不同的颜色可以设计出不同风格的版面，满足用户界面设计的需要，
达到用户界面设计美观的目的。
颜色在用户界面的设计，也即，颜色在构成用户界面的版面上的设计。
优选地，用户界面包括多个版面，多个版面可以实现用户界面不同的应用
功能。根据版面实现的不同应用功能，用户版面的设计风格不同。多个版
面用不同的颜色来区分不同的版面设计风格。用户界面的版面可以是实现
某一应用功能的图标。比如，用户界面的版面为用于进入导航模块的导航
图标，当导航图标被触发时，可以实现导航功能；用户界面的版面为用于
进入音乐模块的音乐图标，当音乐图标被触发时，可以实现音乐播放功能；
用户界面的版面为用于进入电台模块的电台图标，当电台图标被触发时，
可以实现电台播放功能；用户界面的版面为用于进入即时通讯模块的即时
通讯图标等，也可以是实现多个应用功能的整体版面，比如，用户界面为
收音机的整体版面等，也可以是用户界面的菜单、按钮、滚动条、显示面
板和快捷操作面板等。
需要设计的用户界面，也即，确定目标界面。优选地，目标界面包括
多个版面，确定目标界面中的第一预设版面，获取第一版面颜色。第一版
面颜色为目标界面内第一预设版面的颜色，可以代表第一预设版面的设计
风格。根据第一预设版面的设计风格，第一预设版面的颜色可以为红、绿、
蓝这三种原色中的任意一种，也可以是由红、绿、蓝这三种原色按不同比
例混合而成的颜色中的任意一种。
第一预设版面通过所处的背景区域衬托出第一预设版面的设计风格，
可以通过所处的背景区域的颜色来衬托出第一预设版面的设计风格。获取
第一版面颜色包括获取第一版面背景颜色。在获取第一版面颜色的同时，
获取第一版面背景颜色，其中，第一版面背景颜色为第一预设版面的背景
区域的颜色。第一版面背景颜色可以为红、绿、蓝这三种原色中的任意一
种，也可以是由红、绿、蓝这三种颜色按不同比例混合而成的颜色中的任
意一种。可选地，第一版面背景颜色与第一版面颜色不同，以体现第一版
面背景颜色对第一版面颜色的衬托效果。
步骤S604，获取第二版面颜色，其中，第二版面颜色为目标界面内
第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻的版面。
确定目标界面中的第二预设版面，第二预设版面和第一预设版面为位
置相邻的版面。第二版面颜色为目标界面内第二预设版面的颜色，可以代
表第二预设版面的设计风格。第二预设版面的颜色可以为红、绿、蓝这三
种原色中的任意一种，也可以是由红、绿、蓝这三种颜色按不同比例混合
而成的颜色中的任意一种。获取第二版面颜色，可选地，第二版面颜色与
第一版面颜色不同。
第二预设版面通过所处的背景区域衬托出第二预设版面的设计风格，
可以通过所处的背景区域的颜色来衬托出第二预设版面的设计风格。获取
第二版面颜色包括获取第二版面背景颜色。在获取第二版面颜色的同时，
获取第二版面背景颜色，其中，第二版面背景颜色为第一预设版面的背景
区域的颜色。第二版面背景颜色可以为红、绿、蓝这三种颜色中的任意一
种，也可以是由红、绿、蓝这三种颜色按不同比例混合而成的颜色中的任
意一种。可选地，第二版面背景颜色与第二版面颜色不同。
步骤S606，根据第一版面颜色和第二版面颜色获取第一过渡颜色，
其中，第一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色。
基于光线的变化，位置相邻的颜色之间会有影响。通过这种相邻的颜
色之间的影响产生的第三种颜色，可以作为位置相邻的两种颜色之间的过
渡颜色。第一版面颜色和第二版面颜色为位置相邻的颜色，基于光线的变
化，第一版面颜色和第二版面颜色之间会产生除第一版面颜色和第二版面
颜色的第三种颜色，这第三种颜色可以作为第一版面颜色和第二版面颜色
的过渡颜色；第一版面颜色和第一预设版面的第一版面背景颜色为位置相
邻的颜色，基于光线的变化，第一版面颜色和第一版面背景颜色之间会产
生除第一版面颜色和第一版面背景颜色的第三种颜色，这第三种颜色可以
作为第一版面颜色和第一版面背景颜色的过渡颜色；第二版面颜色和第二
预设版面的第二版面背景颜色为位置相邻的颜色，基于光线的变化，第二
版面颜色和第二版面背景颜色之间会产生除第二版面颜色和第二版面背
景颜色的第三种颜色，这第三种颜色可以作为第二版面颜色和第二版面背
景颜色的过渡颜色。
在获取第一版面颜色和第二版面颜色之后，根据第一版面颜色和第二
版面颜色获取第一过渡颜色，其中，第一过渡颜色为第一版面颜色和第二
版面颜色的过渡颜色。具体而言，第一过渡颜色的获取通过解析第一版面
颜色，得到第一版面颜色数据，解析第二版面颜色，得到第二版面颜色数
据，然后对第一版面颜色数据和第二版面颜色数据执行计算，得到第一叠
加颜色数据，其中，第一叠加颜色数据为第一版面颜色和第二版面颜色的
叠加颜色的数据，最后根据第一叠加颜色数据确定第一版面颜色和第二版
面颜色的叠加颜色，并将第一版面颜色和第二版面颜色的叠加颜色作为第
一过渡颜色，从而确定第一预设版面的颜色到第二预设版面的颜色的过渡
颜色，使第一预设版面的颜色和第二预设版面的颜色产生一定的逻辑。
在获取第一版面颜色和第一版面背景颜色之后，第一版面颜色和第一
版面背景颜色之间设计有除第一版面颜色和第一版面背景颜色的第三种
颜色，这第三种颜色可以作为第一版面颜色和第一版面背景颜色的过渡颜
色。第二过渡颜色为第一版面背景颜色和第一版面颜色的过渡颜色，根据
第一版面背景颜色和第一版面颜色获取第二过渡颜色。具体而言，解析第
一版面颜色包括解析第一版面背景颜色。在解析第一版面颜色的同时，解
析第一版面背景颜色，从而得到第一版面背景颜色数据，再对第一版面背
景颜色数据和第一版面颜色数据执行计算，得到第二叠加颜色数据，其中，
第二叠加颜色数据为第一版面背景颜色和第一版面颜色的叠加颜色的数
据，最后根据第二叠加颜色数据确定第一版面背景颜色和第一版面颜色的
叠加颜色，并将第一版面背景颜色和第一版面颜色的叠加颜色作为第二过
渡颜色，从而确定第一预设版面的背景区域的颜色到第一预设版面的颜色
的过渡，使第一预设版面的背景区域的颜色和第一预设版面的颜色产生一
定的逻辑。
在获取第二版面颜色和第二版面背景颜色之后，第二版面颜色和第二
版面背景颜色之间设计有除第二版面颜色和第二版面背景颜色的第三种
颜色，这第三种颜色可以作为第二版面颜色和第二版面背景颜色的过渡颜
色。第三过渡颜色为第二版面背景颜色和第二版面颜色的过渡颜色，根据
第二版面背景颜色和第二版面颜色获取第三过渡颜色。具体而言，解析第
二版面颜色包括解析第二版面背景颜色。解析第二版面颜色的同时解析第
二版面背景颜色，从而得到第二版面背景颜色数据，再对第二版面背景颜
色数据和第二版面颜色数据执行计算，得到第三叠加颜色数据，其中，第
三叠加颜色数据为第二版面背景颜色和第二版面颜色的叠加颜色的数据，
最后根据第三叠加颜色数据确定第二版面背景颜色和第二版面颜色的叠
加颜色，并将第二版面背景颜色和第二版面颜色的叠加颜色作为第三过渡
颜色，从而确定了第二预设版面的背景区域的颜色到第二预设版面的颜色
的过渡，使第二预设版面的背景区域的颜色和第二预设版面的颜色产生一
定的逻辑。
该实施例通过第一叠加颜色数据得到第一过渡颜色使得第一版面颜
色和第二版面颜色之间产生一定的逻辑，通过第二叠加颜色数据得到第二
过渡颜色使得第一版面颜色和第一版面背景颜色之间产生一定的逻辑，通
过第三叠加颜色数据得到第三过渡颜色使得第二版面颜色和第二版面背
景颜色之间产生一定的逻辑，进而使各个版面之间和各个版面与各个版面
所处的背景之间在颜色上产生联系，降低了各个版面之间和各个版面与各
个版面所处的背景之间因为颜色差距太大而产生视觉突兀的效果。
步骤S608，将第一预设版面的背景区域和第二预设版面的背景区域
中处于第一预设版面和第二预设版面之间的预设范围的背景区域设置为
第一过渡颜色。
在根据第一版面颜色和第二版面颜色获取第一过渡颜色之后，获取第
一预设版面的背景区域。通过为第一预设版面的背景区域设置第一过渡颜
色以降低第一版面颜色和第二版面颜色之间因为颜色差距太大而产生视
觉突兀的效果。具体而言，获取第一预设版面的背景区域，划分第一预设
版面的背景区域，从第一预设版面的背景区域中划分出第一划分区域，其
中，第一划分区域位于第一预设版面和第二预设版面之间的预设范围内，
可选地，第一划分区域位于靠近第一预设版面的背景区域的预设范围，其
大小可以根据第一预设版面的表面积大小进行确定，当第一预设版面的表
面积大时，第一划分区域大，当第一预设版面的表面积小时，第一划分区
域小；最后将第一划分区域的颜色设置为第一过渡颜色，使得第一划分区
域有第一过渡颜色的颜色数据，也即，第一叠加颜色数据，从而实现了将
第一预设版面的背景区域和第二预设版面的背景区域中处于第一预设版
面和第二预设版面之间的预设范围的背景区域设置为第一过渡颜色，达到
了界面视觉过渡效果具有逻辑性、柔和、美观的效果。
在根据第一版面颜色和第一版面背景颜色获取第二过渡颜色之后，将
第一预设版面的背景区域的预设范围设置为第二过渡颜色。将第一预设版
面的背景区域的预设范围设置为第二过渡颜色包括：划分第一预设版面的
背景区域，从第一预设版面的背景区域中划分出第二划分区域，其中，第
二划分区域位于第一预设版面的背景区域的预设范围内。可选地，第二划
分区域位于第一预设版面的四周的背景区域的预设范围，其大小可以根据
第一预设版面的表面积大小进行确定，当第一预设版面的表面积大时，第
二划分区域大，当第一预设版面的表面积小时，第二划分区域小。可选地，
第二划分区域与第一划分区域不重合；最后将第二划分区域的颜色设置为
第二过渡颜色，使得第二划分区域有第二过渡颜色的数据，也即，第二叠
加颜色数据，从而通过第二叠加颜色数据得到第二过渡颜色，将第一预设
版面的背景区域的预设范围设置为第二过渡颜色，进而实现了第一预设版
面的背景区域和第一预设版面的色彩过渡，达到了界面视觉过渡效果具有
逻辑性、柔和、美观的效果。
在根据第一版面颜色和第二版面颜色获取第一过渡颜色之后，获取第
二预设版面的背景区域。通过为第二预设版面的背景区域设置第一过渡颜
色以降低第一版面颜色和第二版面颜色之间因为颜色差距太大而产生视
觉突兀的效果。具体而言，将第一预设版面的背景区域和第二预设版面的
背景区域中处于第一预设版面和第二预设版面之间的预设范围的背景区
域设置为第一过渡颜色包括：获取第二预设版面的背景，划分第二预设版
面的背景区域，从第二预设版面的背景区域中划分出第三划分区域，其中，
第三划分区域位于第一预设版面和第二预设版面之间的预设范围内，可选
地，第三划分区域位于靠近第二预设版面的背景区域的预设范围，其大小
可以根据第二预设版面的表面积大小进行确定，当第二预设版面的表面积
大时，第三划分区域大，当第二预设版面的表面积小时，第三划分区域小；
最后将第三划分区域的颜色设置为第一过渡颜色，使第三划分区域有第一
过渡颜色的颜色数据，也即，第一叠加颜色数据，从而实现了将第一预设
版面的背景区域和第二预设版面的背景区域中处于第一预设版面和第二
预设版面之间的预设范围的背景区域设置为第一过渡颜色，达到了界面视
觉过渡效果具有逻辑性、柔和、美观的效果。
在根据第二版面颜色和第二版面背景颜色获取第三过渡颜色之后，将
第二预设版面的背景区域的预设范围设置为第三过渡颜色包括：划分第二
预设版面的背景区域，从第二预设版面的背景区域中划分出第四划分区
域，其中，第四划分区域位于第二预设版面的背景区域的预设范围内，可
选地，第四划分区域位于第二预设版面的四周的背景区域的预设范围，其
大小可以根据第二预设版面的表面积大小进行确定，当第二预设版面的表
面积大时，第四划分区域大，当第二预设版面的表面积小时，第四划分区
域小。可选地，第四划分区域与第三划分区域不重合；最后将第四划分区
域的颜色设置为第三过渡颜色，使得第四划分区域有第三过渡颜色的数
据，也即，第三叠加颜色的数据，从而通过第三叠加颜色数据得到第三过
渡颜色。将第二预设版面的背景区域的预设范围设置为第三过渡颜色，进
而实现了第二预设版面的背景区域和第二预设版面的色彩过渡，达到了界
面视觉过渡效果具有逻辑性、柔和、美观的效果。
该用于界面的色彩过渡方法的实施例通过获取第一预设版面的背景
区域，划分第一预设版面的背景区域，从第一预设版面的背景区域中划分
出第一划分区域，其中，第一划分区域位于第一预设版面和第二预设版面
之间的预设范围内，以及将第一划分区域的颜色设置为第一过渡颜色；划
分第一预设版面的背景区域，从第一预设版面的背景区域中划分出第二划
分区域，其中，第二划分区域位于第一预设版面的背景区域的预设范围内，
以及将第二划分区域的颜色设置为第二过渡颜色；获取第二预设版面的背
景区域，划分第二预设版面的背景区域，从第二预设版面的背景区域中划
分出第三划分区域，其中，第三划分区域位于第一预设版面和第二预设版
面之间的预设范围内，以及将第三划分区域的颜色设置为第一过渡颜色；
划分第二预设版面的背景区域，从第二预设版面的背景区域中划分出第四
划分区域，其中，第四划分区域位于第二预设版面的背景区域的预设范围
内，以及将第四划分区域的颜色设置为第三过渡颜色，从而实现了界面视
觉过渡效果具有逻辑性、柔和、丰富、美观的技术效果。
图8是根据本发明实施例的用于界面的色彩过渡方法的示意图。如图
8所示，该实施例的界面为车载用户界面，用户界面包括显示“导航”的版
面，显示“音乐”的版面，显示“电台”的版面和显示“QQ”的版面。“导航”版
面为蓝色，用B表示；“音乐”版面为绿色，用G表示；“电台”版面为红色，
用R表示；“QQ”版面为浅蓝色，用LB表示。红、绿和蓝这三种颜色为原
色，也即，任何颜色都可以由红、绿和蓝这三种颜色按不同的比例混合而
成，不同的颜色可以分解成红、绿和蓝这三种颜色，而红、绿和蓝中的任
意一色都不能由其他两种原色混合而成。该实施例的用于色彩过渡的过渡
颜色采用三原色原理来得到。
确定车载用户界面中的第一预设版面，也即，“导航”版面，获取“导
航”版面颜色。“导航”版面颜色为车载用户界面内“导航”版面的颜色，也即，
蓝色B。“导航”版面通过所处的背景区域衬托出“导航”版面的设计风格。
在获取“导航”版面颜色的同时，获取“导航”版面背景颜色，其中，“导航”
版面背景颜色为“导航”版面的背景区域的颜色，也即，黑色。
确定车载用户界面中的第二预设版面，也即，“音乐”版面。“音乐”版
面和“导航”版面为位置相邻的版面。获取“音乐”版面颜色，也即，绿色G。
“音乐”版面通过所处的背景区域衬托出“音乐”版面的设计风格。在获取“音
乐”版面颜色的同时，获取“音乐”版面背景颜色，其中，“音乐”版面背景颜
色为“音乐”版面的背景区域的颜色，也即，黑色。
任意位置相邻的颜色之间，基于光线的变化，颜色之间会有影响。通
过这种相邻的颜色之间的影响产生第三种颜色，可以作为前两种颜色的过
渡颜色。第一预设版面的“导航”版面颜色和第二预设版面的“音乐”版面颜
色为位置相邻的颜色，基于三原色原理，蓝色B和绿色G之间会产生青
色C，青色C可以作为“导航”版面颜色和“音乐”版面颜色的过渡颜色。
在获取“导航”版面的蓝色B和“音乐”版面的绿色G之后，根据“导航”
版面的蓝色B和“音乐”版面的绿色G获取第一过渡颜色，也即，青色C。
青色C的获取通过解析蓝色B，得到蓝色B数据，解析绿色G，得到绿色
G数据，然后对蓝色B数据和绿色G数据执行计算，得到第一叠加颜色
数据，其中，第一叠加颜色数据为蓝色B和绿色G的叠加颜色的数据，
最后根据第一叠加颜色数据确定蓝色B和绿色G的叠加颜色，也即，青
色C，并将青色C作为第一过渡颜色。
在根据“导航”版面颜色B和“音乐”版面颜色G获取第一过渡颜色C
之后，获取“导航”版面的背景区域。具体而言，划分“导航”版面的背景区
域，得到第一划分区域，其中，第一划分区域位于“导航”版面和“音乐”版
面之间的靠近“导航”版面的背景区域的范围。将第一划分区域的颜色设置
为青色C，使得第一划分区域有青色C的数据，从而实现了将“导航”版面
的背景区域和“音乐”版面的背景区域中处于“导航”版面和“音乐”版面之间
的背景区域设置为青色C，达到了“导航”版面的背景区域和“音乐”版面的
界面视觉过渡效果柔和、美观的效果。
在根据“导航”版面颜色B和“音乐”版面颜色G获取第一过渡颜色C
之后，获取“音乐”版面的背景区域。为第二预设版面的背景区域设置第一
过渡颜色C以降低“导航”版面颜色和“音乐”版面颜色之间因为颜色差距太
大而产生视觉突兀的效果。具体而言，划分“音乐”版面的背景区域，得到
第三划分区域，其中，第三划分区域位于“导航”版面和“音乐”版面之间的
靠近“音乐”版面的背景区域的范围。将第三划分区域的颜色设置为青色C，
使第三划分区域有青色C数据，从而实现了将“导航”版面的背景区域和“音
乐”版面的背景区域中处于“导航”版面和“音乐”版面之间的背景区域设置
为青色C，达到了“导航”版面的背景区域和“音乐”版面的界面视觉过渡效
果柔和、美观的效果。
在获取“导航”版面颜色B和“导航”版面背景颜色之后，也即，在获取
蓝色B和黑色之后，基于三原色原理，蓝色B和黑色之间会产生蓝色B
和黑色的过渡颜色。第二过渡颜色为蓝色B和黑色的过渡颜色，根据蓝色
B和黑色获取第二过渡颜色。具体而言，解析“导航”版面颜色包括解析“导
航”版面背景颜色，从而得到黑色数据，再对黑色数据和蓝色B数据执行
计算，得到第二叠加颜色数据，其中，第二叠加颜色数据为蓝色B和黑色
的叠加颜色的数据，最后根据叠加颜色数据确定“导航”版面背景颜色和
“导航”版面颜色的叠加颜色，并将叠加颜色作为第二过渡颜色，其中，第
二过渡颜色为蓝色B和黑色的过渡颜色，将“导航”版面的背景区域的预设
范围设置为第二过渡颜色。
将“导航”版面的背景区域的预设范围设置为第二过渡颜色包括：获取
“导航”版面的背景区域；划分“导航”版面的背景区域，得到第二划分区域，
其中，第二划分区域位于“导航”版面的四周的背景区域的范围。最后将第
二划分区域的颜色设置为第二过渡颜色，使得第二划分区域有第二过渡颜
色的数据，也即，第二叠加颜色的数据。从而将“导航”版面的四周的背景
区域的范围设置为第二过渡颜色。
将第一划分区域的颜色设置为第一过渡颜色，并且将第三划分区域的
颜色设置为第二过渡颜色之后，将“导航”版面的背景区域中的第一划分区
域显示为第一过渡颜色C，将“导航”版面的背景区域中的第二划分区域显
示为第二过渡颜色。使得“导航”版面颜色和“导航”版面背景颜色之间产生
一定的逻辑，进而在颜色上产生联系，降低了“导航”版面颜色和“导航”版
面背景颜色之间因为颜色差距太大而产生视觉突兀的效果。同时，“导航”
版面的背景区域既有第一过渡颜色C，又有第二过渡颜色，丰富了“导航”
版面的色彩过渡，从而实现了“导航”版面的界面视觉过渡效果具有逻辑
性、柔和、丰富、美观的技术效果。
在获取“音乐”版面颜色G和“音乐”版面背景颜色之后，也即，在获取
绿色G和黑色之后，基于三元色原理，绿色G和黑色之间会产生过渡颜
色。第三过渡颜色为绿色G和黑色的过渡颜色，根据绿色G和黑色获取
第三过渡颜色。具体而言，解析“音乐”版面颜色包括解析“音乐”版面背景
颜色，从而得到黑色数据，再对黑色数据和绿色G数据执行计算，得到第
三叠加颜色数据，其中，第三叠加颜色数据为黑色和绿色G的叠加颜色的
数据，最后根据第三叠加颜色数据确定绿色G和黑色的叠加颜色，并将绿
色G和黑色的叠加颜色作为第三过渡颜色，其中，第三过渡颜色为绿色G
和黑色的过渡颜色，将第二预设版面的背景区域的预设范围设置为第三过
渡颜色。
将“音乐”版面的背景区域的预设范围设置为第三过渡颜色包括：获取
“音乐”版面的背景区域；划分“音乐”版面的背景区域，得到第四划分区域，
其中，第四划分区域位于“音乐”版面的四周的背景区域的范围。最后将第
四划分区域的颜色设置为第三过渡颜色，使得第四划分区域有第三过渡颜
色的数据，也即，第三叠加颜色的数据。从而通过第三叠加颜色数据得到
第三过渡颜色，将“音乐”版面的四周的背景区域的范围设置为第三过渡颜
色。
将第三划分区域的颜色设置为第一过渡颜色，并且将第四划分区域的
颜色设置为第三过渡颜色之后，将“音乐”版面的背景区域中的第三划分区
域显示为第一过渡颜色C，将“音乐”版面的背景区域中的第四划分区域显
示为第三过渡颜色。使得“音乐”版面颜色和“音乐”版面之间产生一定的逻
辑，进而在颜色上产生联系，降低了“音乐”版面颜色和“音乐”版面背景颜
色之间因为颜色差距太大而产生视觉突兀的效果。同时，“音乐”版面的背
景区域既有第一过渡颜色，又有第三过渡颜色，丰富了“音乐”版面的色彩
过渡，从而实现了“音乐”版面的界面视觉过渡效果具有逻辑性、柔和、丰
富、美观的技术效果。
该实施例通过“导航”版面获取“导航”版面颜色，其中，“导航”版面颜
色为车载用户界面内“导航”版面的颜色；获取“音乐”版面颜色，其中，“音
乐”版面颜色为车载用户界面内“音乐”版面的颜色，“音乐”版面和“导航”
版面为位置相邻的版面；根据“导航”版面颜色和“音乐”版面颜色获取第一
过渡颜色，其中，第一过渡颜色为“导航”版面颜色和“音乐”版面颜色的过
渡颜色；根据“导航”版面背景颜色和“导航”版面颜色获取第二过渡颜色，
其中，第二过渡颜色为“导航”版面背景颜色和“导航”版面颜色的过渡颜色；
根据“音乐”版面背景颜色和“音乐”版面颜色获取第三过渡颜色，其中，第
三过渡颜色为“音乐”版面背景颜色和“音乐”版面颜色的过渡颜色；通过获
取“导航”版面的背景区域，划分“导航”版面的背景区域，得到第一划分区
域，将第一过渡颜色添加至第一划分区域的颜色设置为第一过渡颜色；然
后获取“音乐”版面的背景区域，划分“音乐”版面的背景区域，得到第三划
分区域，以及将第一过渡颜色添加至第三划分区域的颜色设置为第一过渡
颜色；再获取“导航”版面的背景区域，划分“导航”版面的背景区域，得到
第二划分区域，以及将第二过渡颜色添加至第二划分区域的颜色设置为第
二过渡颜色；最后获取“音乐”版面的背景区域；划分“音乐”版面的背景区
域，得到第四划分区域，以及将第三过渡颜色添加至第四划分区域的颜色
设置为第三过渡颜色，从而实现了车载用户界面视觉过渡效果具有逻辑
性、柔和、丰富、美观的技术效果。
“音乐”版面和“电台”版面之间的界面的色彩过渡方法、“电台”版面和
“QQ”版面之间的界面的色彩过渡方法与“导航”版面和“音乐”版面之间的
界面的色彩过渡方法相同，在此不再赘述。
该用于界面的色彩过渡方法的实施例采用获取第一版面颜色，其中，
第一版面颜色为目标界面内第一预设版面的颜色；获取第二版面颜色，其
中，第二版面颜色为目标界面内第二预设版面的颜色，第二预设版面和第
一预设版面为位置相邻的版面；根据第一版面颜色和第二版面颜色获取第
一过渡颜色，其中，第一过渡颜色为第一版面颜色和第二版面颜色的过渡
颜色；以及将第一预设版面的背景区域和第二预设版面的背景区域中处于
第一预设版面和第二预设版面之间的预设范围的背景区域设置为第一过
渡颜色，从而实现了界面视觉过渡效果具有逻辑性、柔和、丰富、美观的
技术效果。
需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都
表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受
所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序
或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实
施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须
的。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根
据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当
然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理
解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软
件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如
ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可
以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所
述的方法。
实施例2
本发明实施例还提供了一种用于实施上述用于界面的色彩过渡装置。
需要说明的是，本发明实施例的用于界面的色彩过渡装置可以用于执行本
发明实施例的用于界面的色彩过渡方法。可选地，在本实施例中，该用于
界面的色彩过渡装置可以应用于如图5所示的服务器102和终端104所构
成的硬件环境中。本发明实施例的用于界面的色彩过渡装置可以由服务器
102来实现，也可以由终端104来实现，还可以是由服务器102和终端104
共同实现。
图9是根据本发明实施例的用于界面的色彩过渡装置的示意图，如图
9所示，该装置包括：第一获取单元10，第二获取单元20，第三获取单元
30和设置单元40。
第一获取单元10，用于获取第一版面颜色，其中，第一版面颜色为目
标界面内第一预设版面的颜色。
第一获取单元10还用于获取第一版面背景颜色，其中，第一版面背
景颜色为第一预设版面的背景区域的颜色。
目标界面包括多个版面，确定目标界面中的第一预设版面，通过第一
获取单元10获取第一版面颜色。第一版面颜色为目标界面内第一预设版
面的颜色，可以代表第一预设版面的设计风格。第一预设版面通过所处的
背景区域衬托出第一预设版面的设计风格，可以通过所处的背景区域的颜
色来衬托出第一预设版面的设计风格。通过第一获取单元10获取第一版
面背景颜色。可选地，通过第一获取单元10获取的第一版面背景颜色与
通过第一获取单元10获取的第一版面颜色不同，以体现第一版面背景颜
色对第一版面颜色的衬托效果。
第二获取单元20，用于获取第二版面颜色，其中，第二版面颜色为目
标界面内第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻
的版面。
第二获取单元20还用于获取第二版面背景颜色，其中，第二版面背
景颜色为第二预设版面的背景区域的颜色。
确定目标界面中的第二预设版面，第二预设版面和第一预设版面为位
置相邻的版面。第二版面颜色为目标界面内第二预设版面的颜色，可以代
表第二预设版面的设计风格。通过第二获取单元20获取第二版面颜色，
可选地，第二版面颜色与第一版面颜色不同。第二预设版面通过所处的背
景区域衬托出第二预设版面的设计风格，可以通过所处的背景区域的颜色
来衬托出第二预设版面的设计风格。通过第二获取单元20获取第二版面
背景颜色，其中，第二版面背景颜色为第一预设版面的背景区域的颜色。
可选地，通过第二获取单元20获取的第二版面背景颜色与通过第二获取
单元20获取的第二版面颜色不同。
第三获取单元30，用于根据第一版面颜色和第二版面颜色获取第一过
渡颜色，其中，第一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色。
优选地，第三获取单元30包括：第一解析模块，第二解析模块，第
一计算模块和第一确定模块。其中，第一解析模块，用于解析第一版面颜
色，得到第一版面颜色数据；第二解析模块，用于解析第二版面颜色，得
到第二版面颜色数据；第一计算模块，用于对第一版面颜色数据和第二版
面颜色数据执行计算，得到第一叠加颜色数据，其中，第一叠加颜色数据
为第一版面颜色和第二版面颜色的叠加颜色的数据；第一确定模块，用于
根据第一叠加颜色数据确定第一版面颜色和第二版面颜色的叠加颜色，并
将第一版面颜色和第二版面颜色的叠加颜色作为第一过渡颜色。
优选地，第一解析模块还用于解析第一版面背景颜色，得到第一版面
背景颜色数据。
优选地，第二解析模块还用于解析第二版面背景颜色，得到第二版面
背景颜色数据。
在第一获取单元10获取第一版面颜色和第二获取单元20获取第二版
面颜色之后，第三获取单元30根据第一版面颜色和第二版面颜色获取第
一过渡颜色。具体而言，第一过渡颜色的获取通过第一解析模块解析第一
版面颜色，得到第一版面颜色数据，通过第二解析模块解析第二版面颜色，
得到第二版面颜色数据，然后通过第一计算模块对第一版面颜色数据和第
二版面颜色数据执行计算，得到第一叠加颜色数据，最后通过确定模块根
据第一叠加颜色数据确定第一版面颜色和第二版面颜色的叠加颜色，并将
第一版面颜色和第二版面颜色的叠加颜色作为第一过渡颜色，从而得到第
一预设版面的颜色到第二预设版面的颜色的过渡颜色，使第一预设版面的
颜色和第二预设版面的颜色产生一定的逻辑。
该用于界面的色彩过渡装置还包括：第四获取单元。其中，第四获取
单元用于在第一获取单元10获取第一版面背景颜色之后，根据第一版面
背景颜色和第一版面颜色获取第二过渡颜色，其中，第二过渡颜色为第一
版面背景颜色和第一版面颜色的过渡颜色。
优选地，第四获取单元还包括：第二计算模块和第二确定模块。其中，
第二计算模块，用于在第一解析模块解析第一版面背景颜色之后，对第一
版面背景颜色数据和第一版面颜色数据执行计算，得到第二叠加颜色数
据，其中，第二叠加颜色数据为第一版面背景颜色和第一版面颜色的叠加
颜色的数据；第二确定模块，用于根据第二叠加颜色数据确定第一版面背
景颜色和第一版面颜色的叠加颜色，并将第一版面背景颜色和第一版面颜
色的叠加颜色作为第二过渡颜色，其中，第二过渡颜色为第一版面背景颜
色和第一版面颜色的过渡颜色。
在第一获取单元10获取第一版面颜色和第一版面背景颜色之后，第
一版面颜色和第一版面背景颜色之间设计有除第一版面颜色和第一版面
背景颜色的第三种颜色，这第三种颜色可以作为第一版面颜色和第一版面
背景颜色的过渡颜色。第二过渡颜色为第一版面背景颜色和第一版面颜色
的过渡颜色，第四获取单元根据第一版面背景颜色和第一版面颜色获取第
二过渡颜色。具体而言，通过第一解析模块解析第一版面背景颜色，从而
得到第一版面背景颜色数据，再通过第二计算模块对第一版面背景颜色数
据和第一版面颜色数据执行计算，得到第二叠加颜色数据，最后通过第二
确定模块根据第二叠加颜色数据确定第一版面背景颜色和第一版面颜色
的叠加颜色，并将第一版面背景颜色和第一版面颜色的叠加颜色作为第二
过渡颜色，从而确定第一预设版面的背景区域的颜色到第一预设版面的颜
色的过渡，使第一预设版面的背景区域的颜色和第一预设版面的颜色产生
一定的逻辑。
该用于界面的色彩过渡装置还包括：第五获取单元。其中，第五获取
单元用于在获取第二版面背景颜色之后，根据第二版面背景颜色和第二版
面颜色获取第三过渡颜色，其中，第三过渡颜色为第二版面背景颜色和第
二版面颜色的过渡颜色。
优选地，第五获取单元还包括：第三计算模块和第三确定模块。其中，
第三计算模块，用于在第二解析模块解析第二版面背景颜色之后，对第二
版面背景颜色数据和第二版面颜色数据执行计算，得到第三叠加颜色数
据，其中，第三叠加颜色数据为第二版面背景颜色和第二版面颜色的叠加
颜色的数据；第三确定模块，用于根据第三叠加颜色数据确定第二版面背
景颜色和第二版面颜色的叠加颜色，并将第二版面背景颜色和第二版面颜
色的叠加颜色作为第三过渡颜色，其中，第三过渡颜色为第二版面背景颜
色和第二版面颜色的过渡颜色。
在第二获取单元20获取第二版面颜色和第二版面背景颜色之后，第
二版面颜色和第二版面背景颜色之间设计有除第二版面颜色和第二版面
背景颜色的第三种颜色，这第三种颜色可以作为第二版面颜色和第二版面
背景颜色的过渡颜色。第三过渡颜色为第二版面背景颜色和第二版面颜色
的过渡颜色，第五获取单元根据第二版面背景颜色和第二版面颜色获取第
三过渡颜色。具体而言，通过第二解析模块解析第二版面背景颜色，从而
得到第二版面背景颜色数据，再通过第三计算模块对第二版面背景颜色数
据和第二版面颜色数据执行计算，得到第三叠加颜色数据，最后通过第三
确定模块根据第三叠加颜色数据确定第二版面背景颜色和第二版面颜色
的叠加颜色，并将第二版面背景颜色和第二版面颜色的叠加颜色作为第三
过渡颜色，从而确定了第二预设版面的背景区域的颜色到第二预设版面的
颜色的过渡，使第二预设版面的背景区域的颜色和第二预设版面的颜色产
生一定的逻辑。
设置单元40，用于将第一预设版面的背景区域和第二预设版面的背景
区域中处于第一预设版面和第二预设版面之间的预设范围的背景区域设
置为第一过渡颜色。
优选地，设置单元40还包括：第一获取模块，第一划分模块和第一
设置模块。其中，第一获取模块用于获取第一预设版面的背景区域；第一
划分模块，用于划分第一预设版面的背景区域，从第一预设版面的背景区
域中划分出第一划分区域，其中，第一划分区域位于第一预设版面和第二
预设版面之间的预设范围内；第一设置模块，用于将第一划分区域的颜色
设置为第一过渡颜色。
在第三获取单元30根据第一版面颜色和第二版面颜色获取第一过渡
颜色之后。具体而言，通过第一获取模块获取第一预设版面的背景区域，
通过第一划分模块划分第一预设版面的背景区域，从第一预设版面的背景
区域中划分出第一划分区域，其中，第一划分区域位于第一预设版面和第
二预设版面之间的预设范围内，可选地，第一划分区域位于靠近第一预设
版面的背景区域的预设范围，其大小可以根据第一预设版面的表面积大小
进行确定；最后通过第一设置模块将第一划分区域的颜色设置为第一过渡
颜色，使得第一划分区域有第一过渡颜色的颜色数据，也即，第一叠加颜
色数据，从而实现了将第一预设版面的背景区域和第二预设版面的背景区
域中处于第一预设版面和第二预设版面之间的预设范围的背景区域设置
为第一过渡颜色，达到了界面视觉过渡效果具有逻辑性、柔和、美观的效
果。
优选地，设置单元40用于将第一预设版面的背景区域的预设范围设
置为第二过渡颜色。
设置单元40还包括：第二划分模块和第二设置模块。其中，第二划
分模块，用于划分第一预设版面的背景区域，从第一预设版面的背景区域
中划分出第二划分区域，其中，第二划分区域位于第一预设版面的背景区
域的预设范围内；第二设置模块，用于将第二划分区域的颜色设置为第二
过渡颜色。
在第四获取单元根据第一版面颜色和第一版面背景颜色获取第二过
渡颜色之后，设置单元40将第一预设版面的背景区域的预设范围设置为
第二过渡颜色。具体而言，通过第一获取模块获取第一预设版面的背景区
域，通过第二划分模块划分第一预设版面的背景区域，从第一预设版面的
背景区域中划分出第二划分区域。可选地，第二划分区域位于第一预设版
面的四周的背景区域的预设范围，其大小可以根据第一预设版面的表面积
大小进行确定，可选地，第二划分区域与第一划分区域不重合；最后通过
第二设置模块将第二划分区域的颜色设置为第二过渡颜色，使得第二划分
区域有第二过渡颜色的数据，也即，第二叠加颜色数据，从而通过第二叠
加颜色数据得到第二过渡颜色。通过设置单元40将第一预设版面的背景
区域的预设范围设置为第二过渡颜色，进而实现了第一预设版面的背景区
域和第一预设版面的色彩过渡，达到了界面视觉过渡效果具有逻辑性、柔
和、美观的效果。
设置单元40还包括：第二获取模块，第三划分模块第三设置模块。
其中，第二获取模块用于获取第二预设版面的背景区域；第三划分模块用
于划分第二预设版面的背景区域，从第二预设版面的背景区域中划分出第
三划分区域，其中，第三划分区域位于第一预设版面和第二预设版面之间
的预设范围内；第三设置模块用于将第三划分区域的颜色设置为第一过渡
颜色。
在第三获取单元30根据第一版面颜色和第二版面颜色获取第一过渡
颜色之后，第二获取模块获取第二预设版面的背景区域。具体而言，通过
第二获取第二预设版面的背景，通过第三划分模块划分第二预设版面的背
景区域，从第二预设版面的背景区域中划分出第三划分区域，可选地，第
三划分区域位于靠近第二预设版面的背景区域的预设范围，其大小可以根
据第二预设版面的表面积大小进行确定；最后通过第三设置模块将第三划
分区域的颜色设置为第一过渡颜色，使第三划分区域有第一过渡颜色的颜
色数据，也即，第一叠加颜色数据，从而实现了将第一预设版面的背景区
域和第二预设版面的背景区域中处于第一预设版面和第二预设版面之间
的预设范围的背景区域设置为第一过渡颜色，达到了界面视觉过渡效果具
有逻辑性、柔和、美观的效果。
设置单元40还包括：第四划分模块和第四设置模块。其中，第四划
分模块，用于划分第二预设版面的背景区域，从第二预设版面的背景区域
中划分出第四划分区域，其中，第四划分区域位于第二预设版面的背景区
域的预设范围内；第四设置模块，用于将第二划分区域的颜色设置为第三
过渡颜色。
在第五获取单元根据第二版面颜色和第二版面背景颜色获取第三过
渡颜色之后，设置单元40将第二预设版面的背景区域的预设范围设置为
第三过渡颜色。具体而言，通过第二获取模块获取第一预设版面的背景区
域，通过第四划分模块划分第二预设版面的背景区域，从第二预设版面的
背景区域中划分出第四划分区域，可选地，第四划分区域位于第二预设版
面的四周的背景区域的预设范围，其大小可以根据第二预设版面的表面积
大小进行确定，可选地，第四划分区域与第三划分区域不重合；最后通过
第四设置模块将第四划分区域的颜色设置为第三过渡颜色，使得第四划分
区域有第三过渡颜色的数据，也即，第三叠加颜色的数据，从而通过第三
叠加颜色数据得到第三过渡颜色。通过设置单元40将第二预设版面的背
景区域的预设范围设置为第三过渡颜色，进而实现了第二预设版面的背景
区域和第二预设版面的色彩过渡，达到了界面视觉过渡效果具有逻辑性、
柔和、美观的效果。
该用于界面的色彩过渡装置的实施例通过第一获取单元10获取第一
版面颜色，其中，第一版面颜色为目标界面内第一预设版面的颜色；通过
第二获取单元20获取第二版面颜色，其中，第二版面颜色为目标界面内
第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻的版面；
通过第三获取单元30根据第一版面颜色和第二版面颜色获取第一过渡颜
色，其中，第一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色；通
过设置单元40将第一预设版面的背景区域和第二预设版面的背景区域中
处于第一预设版面和第二预设版面之间的预设范围的背景区域设置为第
一过渡颜色，从而实现了界面视觉过渡效果具有逻辑性、柔和、丰富、美
观的技术效果。
实施例3
本发明实施例还提供了一种用于实施上述用于界面的色彩过渡方法
和装置的用于界面的色彩过渡系统，该用于界面的色彩过渡系统包括服务
器100和客户端200，如图10所示，其中，图10是根据本发明实施例的
用于界面的色彩过渡系统的示意图。具体地，服务器100包括：处理器102、
存储器104和网络接口106。本发明实施例的用于界面的色彩过渡系统可
以由服务器100来实现，也可以由客户端200来实现，还可以是由服务器
100和客户端200共同实现。
图11是根据本发明实施例的用于界面的色彩过渡系统的方法的流程
图。如图11所示，该系统可以用于执行以下步骤：
步骤S1102，获取第一版面颜色，其中，第一版面颜色为目标界面内
第一预设版面的颜色。
步骤S1104，获取第二版面颜色，其中，第二版面颜色为目标界面内
第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻的版面。
步骤S1106，根据第一版面颜色和第二版面颜色获取第一过渡颜色，
其中，第一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色。
步骤S1108，将第一预设版面的背景区域和第二预设版面的背景区域
中处于第一预设版面和第二预设版面之间的预设范围的背景区域设置为
第一过渡颜色。
其中，以服务器100中的处理器102来执行上述步骤为例，处理器102
读取的第一版面颜色、第二版面颜色可以是从存储器104中读取。根据第
一版面颜色和第二版面颜色获取第一过渡颜色之后，可以利用网络接口
106将该第一过渡颜色发送至客户端200，在客户端200的显示界面上显
示该第一过渡颜色。
本发明实施例采用获取第一版面颜色，其中，第一版面颜色为目标界
面内第一预设版面的颜色；获取第二版面颜色，其中，第二版面颜色为目
标界面内第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻
的版面；根据第一版面颜色和第二版面颜色获取第一过渡颜色，其中，第
一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色，从而实现了第一
预设版面和第二预设版面颜色的获取，最后将第一预设版面的背景区域和
第二预设版面的背景区域中处于第一预设版面和第二预设版面之间的预
设范围的背景区域设置为第一过渡颜色，进而解决了界面视觉过渡效果突
兀和单一的技术问题，实现了界面视觉过渡效果具有逻辑性、柔和、丰富、
美观的技术效果。
可选地，本实施例中的具体示例可以参考上述实施例1和实施例2中
所描述的示例，本实施例在此不再赘述。
实施例4
本发明的实施例还提供了一种存储介质。可选地，在本实施例中，上
述存储介质可以用于本发明实施例的用于界面的色彩过渡方法的程序代
码。
可选地，在本实施例中，上述存储介质可以位于本发明实施例3中的
用于界面的色彩过渡系统上。
可选地，在本实施例中，存储介质902被设置为存储用于执行以下步
骤的程序代码：
第一步，获取第一版面颜色，其中，第一版面颜色为目标界面内第一
预设版面的颜色。
第二步，获取第二版面颜色，其中，第二版面颜色为目标界面内第二
预设版面的颜色，第二预设版面和第一预设版面为位置相邻的版面。
第三步，根据第一版面颜色和第二版面颜色获取第一过渡颜色，其中，
第一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色。
第四步，将第一预设版面的背景区域和第二预设版面的背景区域中处
于第一预设版面和第二预设版面之间的预设范围的背景区域设置为第一
过渡颜色。
本发明实施例采用获取第一版面颜色，其中，第一版面颜色为目标界
面内第一预设版面的颜色；获取第二版面颜色，其中，第二版面颜色为目
标界面内第二预设版面的颜色，第二预设版面和第一预设版面为位置相邻
的版面；根据第一版面颜色和第二版面颜色获取第一过渡颜色，其中，第
一过渡颜色为第一版面颜色和第二版面颜色的过渡颜色，从而实现了第一
预设版面和第二预设版面颜色的获取，最后将第一预设版面的背景区域和
第二预设版面的背景区域中处于第一预设版面和第二预设版面之间的预
设范围的背景区域设置为第一过渡颜色，进而解决了界面视觉过渡效果突
兀和单一的技术问题，实现了界面视觉过渡效果具有逻辑性、柔和、丰富、
美观的技术效果。
可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只
读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random
Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介
质。
可选地，在本实施例中，处理器根据存储介质中已存储的程序代码执
行本发明实施例1中的用于界面的色彩过渡方法的程序代码。
可选地，本实施例中的具体示例可以参考上述实施例1和实施例2中
所描述的示例，本实施例在此不再赘述。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
上述实施例中的集成的单元如果以软件功能单元的形式实现并作为
独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。
基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的
部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计
算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算
机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施
例所述方法的全部或部分步骤。
在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实
施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可
通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，
例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外
的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，
或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦
合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或
通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，
作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地
方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的
部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元
中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在
一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软
件功能单元的形式实现。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的
普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进
和润饰，这些改进和润饰也应视为本发明的保护范围。