本发明涉及互联网技术领域， 尤其涉及一种用户界面的生成方法和 装置。 发明背景

随着网络技术和软件开发的发展， 越来越多的人们通过各种各样的 客户端软件实现各种功能， 如： 即时通讯软件， 音乐盒， 邮箱等。 对于 客户端软件来说， 用户界面 （ UI, User Interface )是与用户进行交互的 窗口， 人们通过用户界面来操作客户端软件完成相应 的功能。 初期用户 界面的设计，倾向于设计出一个满足大多数用 户感受的程序界面。然而， 由于用户的习惯、 生活环境， 层次等等各不相同， 一款用户界面不可能 满足所有用户的感受， 并且随着用户群的日益庞大， 这个问题变得越来 越突出。 用户界面的设计在朝着更吸引用户， 更能符合用户个人审美习 惯的方向发展。 为了适应不同用户的审美习惯和需求， 越来越多的应用 程序支持让用户定制界面， 也就是通常称作的 "换肤"。 如即时通讯这 类极度依赖用户使用体验的软件， "换肤" 是非常重要的一项功能。

现有技术中， 应用程序预先存储有多种不同风格的用户界面 ， 以供 用户选择。 当用户需要进行换肤时， 从备选的用户界面中选择一种用户 界面， 进行切换， 从而实现换肤。 由上述现有技术可知， 由于界面元素只采用单一的贴图资源， 表现 能力有限， 无法达到现代界面设计上越来越多的表现。 此外， 一套皮肤 中的图片资源， 风格必须保持一致。 因此换肤时， 所有的图片都必须重 新加载。 而应用程序界面中所使用的图片越来越多， UI设计人员必须针 对皮肤包设计大量的图片， 成本高昂。 因此， 现有技术中存在用户界面 单一且换肤不便的缺陷。 发明内容

本发明提供了一种用户界面的生成方法及装置 ， 用于根据用户需求 提供不同的用户界面。

本发明提供了一种用户界面的生成方法， 该方法包括：

获取待绘制图层和待绘制的图层样式；

根据所述图层样式， 提取图层的属性信息， 并根据所提取的属性信 息绘制所述待绘制图层， 生成绘制后图层；

将所述绘制后图层进行组合， 生成用户界面。

本发明提供了一种用户界面的生成装置， 该装置包括：

获取模块， 用于获取待绘制图层和待绘制的图层样式；

图层生成模块， 用于根据所述图层样式， 提取图层的属性信息， 并 根据所提取的属性信息绘制所述待绘制图层， 生成绘制后图层；

界面生成模块， 用于将所述绘制后图层进行组合， 生成用户界面。 本发明还提供了一种用户界面的生成方法， 该用户界面包括多个图 层， 该方法包括以下步骤：

绘制背景层；

绘制控件层；

将包括所述背景层和所述控件层在内的所述多 个图层进行组合， 生 成该用户界面。

与现有技术相比， 本发明具有以下优点： 根据用户的需求， 生成用 户界面的不同图层， 将不同图层进行层叠获取最终的用户界面， 并可通 过改变图层的属性动态改变用户界面， 从而实现了用户界面的多样化和 提高用户界面的易更换性。 附图简要说明

为了更清楚地说明本发明或现有技术中的技术 方案， 下面将对本发 明或现有技术描述中所需要使用的附图作筒单 地介绍， 显而易见地， 下 面描述中的附图仅仅是本发明的一些实施例， 对于本领域普通技术人员 来讲， 在不付出创造性劳动性的前提下， 还可以根据这些附图获得其他 的附图。

图 1 为本发明实施例中提供的一种用户界面的生成 方法； 图 2为本发明实施例中提供的整体用户界面；

图 3为本发明实施例中提供的整体用户界面的多� �图层； 图 4为本发明实施例中用户界面的生成方法的流� �图；

图 5 ( a ) 为本发明实施例中一个图层的结构示意图；

图 5 ( b ) 为本发明实施例中多个图层层叠的结构示意图 ； 图 5 ( c )为本发明实施例中由多个图层层叠所的用户� �面的结构示 意图；

图 6为本发明实施例中用户界面的图层的逻辑划� �；

图 7为本发明实施例中用户界面的图层按逻辑后� �图层结构； 图 8 为本发明实施例中提供的一种用户界面的生成 方法； 图 9为本发明实施例中用户界面的背景层的结构� �意图； 图 10 为本发明实施例中背景层的图片图层； 图 11 为本发明实施例中背景层的颜色图层；

图 12 为本发明实施例的质感层；

图 13 为本发明实施例的控件层；

图 14 为本发明实施例中遮罩层的乘法模板；

图 15 为本发明实施例中遮罩层的蓝光图层；

图 16为本发明实施例中提供的一种用户界面的生� ��装置。 实施本发明的方式

下面将结合本发明中的附图， 对本发明的技术方案进行清楚、 完整 地描述， 显然， 所描述的实施例是本发明一部分实施例， 而不是全部的 实施例。 基于本发明中的实施例， 本领域普通技术人员在没有做出创造 性劳动前提下所获得的所有其他实施例， 都属于本发明保护的范围。

如图 1 所示， 本发明实施例提供一种用户界面的生成方法， 具体包 括以下步骤：

步骤 101、 获取待绘制图层和待绘制的图层样式；

步骤 102、 根据所述图层样式， 提取图层的属性信息， 并根据所提 取的属性信息绘制所述待绘制图层， 生成绘制后图层；

步骤 103、 将所述绘制后图层进行组合， 生成用户界面。

如图 2所示， 为一个完成的用户界面， 从中可以看出， 该界面包括： 一个老虎的背景图片，用于与用户进行交互的 2个控件 "确定"和 "取消"。

为实现上述本发明实施例的技术方案， 本发明实施例提供一种用户界 面的生成装置。 该装置中， 用于生成用户界面的基本单元为图层。 所谓图 层， 即将一个完整的用户界面分离成若干绘图层次 ， 每一个图层生成整个 用户界面的一个层次， 最后将所有的层次进行叠加、 组合， 获取最终的用 户界面。 优选地， 部分图层的内容可进行选择性替换和 /或更改。 如图 3 所示， 为将如图 2所示的完整的用户界面进行分离， 从中可以获得多个层 次， 如： 承载老虎图片的背景层， 承载 "确定" 和 "取消" 控件的控件层 等等。 由此可知， 用户界面生成的关键是每一个图层的生成和多 个图层之 间的组合， 而上述每一个图层的生成和多个图层之间的组 合均通过设置图 层的属性和不同图层的层叠实现。

以下， 首先对生成用户界面的基本单元 "图层"的生成进行详细介绍。 图层的生成主要是根据预先设置的待绘制图层 样式提取待绘制图层 的属性信息， 根据属性信息设置该待绘制图层， 生成所绘制后的图层。 具 体地， 如图 4所示， 一个用户界面的生成方法具体包括以下步骤：

步骤 401、 获取待绘制图层和待绘制的图层样式。

图层为一个完整的用户界面分离而得的绘图层 次， 因此， 在绘制用户 界面的过程中， 可以通过绘制该用户界面的每一个绘图层次， 即每一个图 层， 再将多个图层进行层叠， 得到完整的用户界面。 其中， 每一个绘图层 次的样式即为对应图层的图层样式。

用户界面是按照预先设置的样式绘制而成。 而用户界面由多个图层组 成， 每一个图层承载该用户界面的部分样式， 即图层样式。 因此， 要完成 用户界面的整体设置， 首先需要获取每一图层所承载的图层样式。

步骤 402、 根据所述图层样式， 提取图层的属性信息， 并根据所提 取的属性信息绘制所述待绘制图层， 生成绘制后图层。

图层的属性主要分为两大类： 用于设置自身样式的属性， 和用于与其 他图层进行层叠的属性， 一般包括： （1 )图像内容属性； （2 )透明度属性； ( 3 )绘制模式属性和（4 ) 混合模式属性， 以下分别对上述属性的功能进 行进一步详细的阐述。

( 1 ) 图像内容属性

即该图层上的颜色数据， 通过控制图层各处的颜色形成该图层的图像 内容。优选地， 图层的图像内容属性通过加载常规的图片文件 得到（当然， 也可以通过设置具体的颜色数据进行指定）。 图片文件的加载完成之后， 图层的颜色数据和尺寸不再改变。

( 2 )透明度属性

由于本发明实施例中一个完整的用户界面是经 由多个图层叠加组合 而获得的， 此时位于上面的图层会遮挡住位于下面的图层 。 因此无论是图 层本身的需要， 还是与其他图层进行叠加组合时的需要， 都需要设置图层 的透明度属性。

优选地， 动态修改图层的透明度属性， 当然也可以动态修改图层的其 他属性。 例如： 在程序运行期间， 定时修改透明度属性， 从而在产生两个 图层产生渐隐渐显效果。

( 3 )绘制模式属性

根据图像内容属性中的描述， 当图层的图像内容选 4奪后， 图层的尺寸 是不会变化的，但该图层组成的用户界面的尺 寸通常都是可调节的。例如： 如在 Windows系统下， 会话窗口 （ Window ) (即用户界面的表现形式 )的 尺寸是可以随意调节的。 此时， 通过该属性的设置以确定图层如何填充整 个会话窗口， 其中绘制模式属性包括： 平铺模式， 层叠模式等。

( 4 )混合模式属性

当图层叠加绘制时， 层与层重叠位置的两个颜色数据需要进行混合 ， 混合模式属性即为用于控制图层之间颜色的混 合计算公式， 通过混合计 算， 获取层叠后图层各处的颜色数据， 从而获取新的颜色。

具体地， 根据图层样式， 提取图层的属性信息， 并根据所提取的属 性信息对所述待绘制图层的属性进行设置， 生成绘制后图层包括以下步 骤：

( 1 )根据图层样式， 4是取出对应图层的各个属性信息。 例如： 该图层样式对应的绘制模式为平铺， 对应的图像内容为某一指 定的图片等。

( 2 )根据所提取的属性信息对所述待绘制图层的� �性进行设置， 生 成绘制后图层。

具体地， 所述根据所述图层样式， 提取图层的属性信息具体包括以 下中的一种或多种：

( 1 )根据所述图层样式获取所需加载的图片文件� �根据所述图片文 件获取颜色数据， 所述颜色数据为所述待绘制图层的图像内容属 性信 息；

( 2 )根据所述图层样式与其他图层层叠效果提取� �述待绘制图层的 透明度属性信息；

( 3 )根据所述图层样式和所述图层所在的会话窗� �提取所述待绘制 图层的绘制模式属性信息， 所述绘制模式属性用于确定所述待绘制图层 填充所述会话窗口的方式；

( 4 )根据所述图层样式和不同图层层叠后的图层� �式提取所述待绘 制图层的混合模式属性信息， 所述混合模式属性用于获取所述待绘制图 层的图层边框的颜色数据。

所述根据所提取的属性信息绘制所述待绘制图 层包括：

( 1 )遍历提取的所述属性信息；

( 2 )当所述属性信息不为空时，根据所述属性信� �绘制所述待绘制 图层。

例如： 如果待绘制图层的图像内容为某一指定的图片 ， 则加载图片并 提取颜色数据。 如果待绘制图层的绘制模式为平铺， 则在使用过程中， 当 该图层所在会话窗口较大而该图层较小时， 该图层平铺于该会话窗口。

步骤 403、 将所述绘制后图层进行组合， 生成用户界面。 如图 5 ( a )所示， 为本发明实施例中的一个图层， 如图层 n。 如图 5

( b )所示， 将获取到的 n个图层按照顺序由下至上进行叠加， 得到如图 5

( c )所示的整体的用户界面， 该界面有图层 1至图层 n层叠而成。

需要说明的是， 若干图层绘制后的图像结果， 也可作为一个图层来使 用。 因此，整个用户界面的绘制， 实际上是多个图层以树型结构组织而成。

再次， 对图 1中的用户界面进行分析， 该最终的用户界面由许多表现 元素组成： 底图、 底色、 图像边框形状、 图像边框阴影、 控件。 为了便于 获取任意用户界面， 如图 6所示， 从逻辑上将组成一个用户界面的所有图 层分为 4个逻辑层次， 每个逻辑层可以拥有多个图层。 每个图层本身的绘 制并不带有特殊的功能性， 逻辑层是若干图层绘制后的结果， 被赋予一定 的功能目标， 用于完成特定的功能。 在生成用户界面的过程中， 依次生成 上述 4个逻辑层次， 再将所生成的 4个逻辑层次进行层叠， 即可得到最终 的用户界面。 如图 7所示， 该 4个逻辑层次为： （1 )逻辑层 1 -背景层、 ( 2 )逻辑层 2 -质感层、 （3 )逻辑层 3 -控件层和（4 )逻辑层 4 -遮罩 层。

以下将结合具体附图， 分别对各个逻辑层次进行进一步详细的阐述。 如图 8所示， 本发明实施例提供的一种用户界面的生成方法 包括以下 步骤：

步骤 801、 绘制用户界面的背景层。

背景层由两个图层构成， 分别是颜色图层和图片图层。 此逻辑层的主 要功能， 是完成用户界面（如 Windows会话窗口 )整个背景的绘制。 背景 层是整个用户界面主要的视觉部分， 并且可以随用户的喜好， 进行更换。 背景层中颜色图层的颜色， 需要与图片图层的图片的整体色调保持一致， 以保证视觉效果（当然也可以指定颜色图层的 颜色）。 因此， 背景层的颜 色由程序自动计算生成， 生成算法为常用的八叉树颜色量化法， 统计图片 中出现频率最高的颜色， 并得出一个接近于整体色调的平均颜色。

如图 9所示， 该背景层包括： 图片更换模块 11和颜色计算模块 13。 当用户发起更换背景图片请求时， 图片更换模块 11接收该更换背景图片 请求， 并根据用户所选择的图片进行更换。 当用户更换背景图片后， 图片 更换模块 11 通知图片图层 12重新加载图片和读取所加载图片的颜色数 据； 图片图层 12读取颜色数据后， 将颜色数据传递给颜色计算模块 13; 颜色计算模块 13计算出一个接近图片整体色调的颜色， 然后将该颜色传 递给颜色图层 14; 颜色图层 14筒单存储该颜色值。

其中， 图片更换模块 11和颜色计算模块 13不参与平时的图像绘制过 程， 图片图层 12和颜色图层 14叠加绘制后， 作为整个窗口的主要背景内 容； 在其之上， 则是表现其他界面细节的逻辑层。

例如： 加载如图 10所示的图片文件作为图片图层， 并通过该图片文 件获取到如图 11所示的颜色图层。

步骤 802、 叠加绘制用户界面的质感层。

该层次主要在背景层上叠加一个具有光照效果 的图层。 背景层由于只 是图片和颜色的筒单叠加， 因此在整个绘制区域中， 是一个平坦的图片。 而一个常规的 Windows会话窗口，由标题栏、客户区、状态栏� �区域组成。 质感层绘制一个只有亮度信息的图层绘制在背 景上， 改变背景层的亮度， 从而在背景上区分出 Windows会话窗口的各个逻辑区域，该亮度信息� �过 设置图像内容属性的颜色数据而确定。

此逻辑层的内容， 不需要用户进行调整， 因此是固定不变的。

例如： 如图 12所示， 为一个只具有亮度信息的质感层。

步骤 803、 叠加绘制用户界面的控件层。

每一个会话窗口都会分布有控件， 如 Windows的按钮、 文本框、 列表 框， 上述会话窗口中的控件绘制在此层。 其中， 该此图层仅需提取图像内 容属性， 获取预设的控件样式即可。

例如： 该控件层如图 13所示。

在将该控件层与背景层、质感层进行叠加时， 需要获取控件层的属性， 并将背景层的图像内容、 透明度属性与控件层的图像内容、 透明度属性混 来。

步骤 804、 叠加绘制用户界面的遮罩层。

该逻辑层绘制在其它层次绘制结束之后， 所以此层的绘制可以遮挡住 会话窗口上的所有控件。 该遮罩层主要用于： 为会话窗口提供边框和为会 话窗口边框提供阴影效果。 相应地， 该遮罩层包括边框形状图层和边框阴 影图层。

以下分别对上述两功能进行详细描述。

( a )边框形状图层

在绘制此图层之前， 经上述各个图层层叠绘制后形成的图层一般为 矩 形区域， 如： 背景层中的图片和底色， 绘制结果都是以矩形区域的形式展 现。 而在一般用户界面设计中， 为了用户界面的美观， 会话窗口的边缘一 般呈圓角， 或不规则的边缘。 遮罩层即是使用一个额外的图层对之前获取 的矩形图层上定义窗口边缘， 从而形成会话窗口的边框。 优选地， 根据混 合模式属性， 通过额外的图层和之前获取的矩形图层的属性 信息的混合来 实现会话窗口边框的确定。

具体地， 图像中每一个像素点的颜色数据和透明度数据 ， 包含 a (透 明度）、 r (红）、 g (绿）、 b (蓝）四个通道， 混合乘法公式如下所示：

Dst _a = Src _a * Dst _a

Dst _r = Src _r * Dst _r

Dst _b = Src _b * Dst _b 其中， Src 为用于定义窗口边缘所采用的图层， 其内容为带透明度的 图片， 可由 UI进行定制； Dst为当前已经绘制好的图层的图像内容。

其中， Src中像素颜色为纯透明（a、 r、 g、 b四个通道都为 0 )的图层 部分， 计算得出的结果也是纯透明的； Src 中像素颜色纯白 （a、 r、 g、 b 四个通道都为 1 )的部分， 计算得出的结果保持绘制前的内容。 由此， UI 设计人员通过定制图片内容， 即可控制会话窗口绘制后的边框形状。

优选地， 对会话窗口边框的绘制可通过模板来实现， 如图 14所示， 为遮罩层的乘法模板。

( b )边框阴影图层

为了在会话窗口边缘的透明阴影， 只需要叠加一个带透明度的图层即 可。 该图层内容为 UI人员设计制作的图片。 经过控制边框的图层处理， 各层绘制的结果已具有了一定的边缘形状。 阴影图层只需要制作为 '^ί符 合边缘形状的透明贴图。

例如： 如图 15所示， 为遮罩层的蓝光图层， 用于形成会话窗口边框 的阴影。

最终， 经上述各个图层的绘制， 生成如图 2所示的用户界面。

需要说明的是， 上述本发明实施例仅对图层中主要属性信息的 提取与 通过主要属性信息绘制图层进行了介绍， 每一个图层的属性并不限于本发 明实施例中的属性， 凡是从图层样式提取的用于绘制图层的各种属 性均属 于本发明的保护范围， 如音频属性等。 此外， 上述划分出的逻辑图层仅为 本发明一种优选的实施方式， 凡是从用户界面分离出的图层均属于本发明 的保护范围， 如： 动态效果层等。

本发明实施例提供一种用户界面的生成装置， 该装置 1600包括： 获取模块 1610, 用于获取待绘制图层和待绘制的图层样式； 图层生成模块 1620,用于根据所述图层样式，提取图层的属性� ��息， 并根据所提取的属性信息绘制所述待绘制图层 ， 生成绘制后图层； 界面生成模块 1630, 用于将所述绘制后图层进行组合， 生成用户界 面。

其中， 所述绘制后图层包括以下中的一种或多种： 背景层； 质感层； 控件层； 遮罩层；

所述属性信息包括： 图像内容； 透明度； 绘制模式； 混合模式。 其中， 图层生成模块 1620包括提取子模块 1621 , 具体用于： 根据所述图层样式获取所需加载的图片文件； 根据所述图片文件获 取颜色数据， 所述颜色数据为所述待绘制图层的图像内容属 性信息； 或者， 根据所述图层样式与其他图层层叠效果提取所 述待绘制图层 的透明度属性信息；

或者， 根据所述图层样式和所述图层所在的会话窗口 提取所述待绘 制图层的绘制模式属性信息， 所述绘制模式属性用于确定所述待绘制图 层填充所述会话窗口的方式；

或者， 根据所述图层样式和不同图层层叠后的图层样 式提取所述待 绘制图层的混合模式属性信息， 所述混合模式属性用于获取所述待绘制 图层的图层边框的颜色数据。

其中， 提取子模块 1621具体用于：

根据所述图片文件获取所述图片文件自身的第 一颜色数据； 根据所述图片文件获取与所述第一颜色数据匹 配的第二颜色数据。 其中， 提取子模块 1621具体用于：

根据不同图层层叠后的图层样式获取边框定义 图层；

获取当前已经绘制好的图层的颜色数据和所述 边框定义图层的颜色 数据；

通过颜色混合乘法公式对所述当前已经绘制好 的图层的颜色数据和 所述边框定义图层的颜色数据进行混合,获取� �述待绘制图层的图层边框 的颜色数据。

其中， 图层生成模块 1620包括绘制子模块 1622, 具体用于： 遍历提取的所述属性信息； 当所述属性信息不为空时， 根据所述属 性信息绘制所述待绘制图层。

其中，所述界面生成模块 1630具体用于将至少两个绘制后图层进行 层叠组合， 生成所述用户界面。

其中， 还包括：

修改模块 1640, 用于动态修改所述绘制后图层的属性。

本发明具有以下优点：根据用户的需求，生成 用户界面的不同图层， 将不同图层进行层叠获取最终的用户界面， 并可通过改变图层的属性动 态改变用户界面， 从而实现了用户界面的多样化和提高用户界面 的易更 换性。 此外， 由于用户界面分成多个图层， 通过更换部分图层即可改变 整个用户界面的视觉效果。 并且， 用户能够使用自己的图片来定制个性 化用户界面， 整个用户界面的风格可以据此自动进行调整， 因此本发明 的界面生成方法不仅换肤方便， 而且不必事先保存大量图片。

通过以上的实施方式的描述， 本领域的技术人员可以清楚地了解到 本发明可借助软件加必需的通用硬件平台的方 式来实现， 当然也可以通 过硬件， 但很多情况下前者是更佳的实施方式。 基于这样的理解， 本发 明的技术方案本质上或者说对现有技术做出贡 献的部分可以以软件产 品的形式体现出来， 该计算机软件产品存储在一个存储介质中， 包括若 干指令用以使得一台终端设备（可以是手机， 个人计算机， 服务器， 或 者网络设备等）执行本发明各个实施例所述的 方法。

以上所述仅是本发明的优选实施方式， 应当指出， 对于本技术领域 的普通技术人员来说， 在不脱离本发明原理的前提下， 还可以做出若干 改进和润饰， 这些改进和润饰也应视本发明的保护范围。

本领域技术人员可以理解实施例中的装置中的 模块可以按照实施例 描述进行分布于实施例的装置中， 也可以进行相应变化位于不同于本实 施例的一个或多个装置中。 上述实施例的模块可以集成于一体， 也可以 分离部署； 可以合并为一个模块， 也可以进一步拆分成多个子模块。

上述本发明实施例序号仅仅为了描述， 不代表实施例的优劣。

以上公开的仅为本发明的几个具体实施例， 但是， 本发明并非局限于 此， 任何本领域的技术人员能思之的变化都应落入 本发明的保护范围。