CN110413277A - 一种ui界面的生成方法及系统 - Google Patents

Abstract

本发明涉及一种UI界面的生成方法及系统，方法包括：接收基础控件的基础样式制作请求，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；接收模板的组合样式制作请求，基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；接收UI界面制作请求，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。本发明基于样式和模板，能够避免重复的工作，提高UI界面的生产及更新效率。

Description

一种UI界面的生成方法及系统

技术领域

本发明涉及UI界面编辑技术领域，特别是涉及一种UI界面的生成方法及系统。

背景技术

目前2D方向的游戏，常见的运行环境如Cocos 2d-x引擎，Cocos Studio是基于Cocos 2d-x的游戏开发工具集，其中的UI编辑器用于编辑游戏中的所有的图形界面。CocosUI编辑器通过实现一批基础控件功能，可以方便的进行界面制作并实现相应的交互效果，如点击响应，滑动操作响应等。但现有的UI编辑器存在如下问题：

(1)相仿界面的重复制作与每个控件的重复设置：

使用现有技术生产界面需要重复执行各项动作(如相同表现的6个控件需要重复设置6次控件属性)，时间消耗随界面内容量提升；

(2)控件的不规范使用几率高：

使用现有技术生产界面的过程中，控件的使用无明确限制，自由度高，不同控件也可实现相似效果(控件可通过不同的组合达到相同的表现，实现相同的功能，此结果难以满足后续的功能与表现统一变更迭代，需要逐一排查调整)；

(3)在生产界面的过程中所见非所得：

使用现有技术呈现的界面表现并非实现后的实际表现(如文字大小表现与实际相异、容器坐标位置与实际相异)，需要人为调试；因应用的版本不稳定，在没有人为干预的情况下，存在不同时刻打开界面文档数据会发生不同变化(如控件坐标发生偏移、控件之间层级错乱)；

(4)图片资源修改、替换方面，途径单一，过程复杂繁琐：

针对项目的全局界面表现，在现有技术仅能通过替换同名、同尺寸、同属性应用范围的图形资源，达到换肤效果，限制图形资源的表现优化空间与包体占用优化空间；在需要批量替换资源应用于表现的需求中，需逐一排查各界面文件与代码映射，各部门合作与耗时成本大；

(5)产生大量冗余数据：

使用现有技术打开界面会生成大量的冗余数据，就算未做任何改动，界面数据也会发生变化，导致无法准确定位出实际修改内容。

发明内容

本发明的目的在于克服现有技术的不足，提出一种UI界面的生成方法及系统，基于控件、样式和模板，能够避免重复的工作，提高界面的生产及更新效率。

本发明解决其技术问题所采用的技术方案是：

一方面，一种UI界面的生成方法，包括：

接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。

优选的，所述基础样式属性包括第一限制属性和第一自由属性；所述第一限制属性为基础控件指定部分属性能够设定，能够设定的内容包括不可更改的固定值、允许切换数值的数值组和允许在范围内修改的区间值；所述第一自由属性为无被指定的属性。

优选的，所述组合样式属性包括第二限制属性和第二可选属性；所述第二限制属性包括基础样式属性的第一自由属性和未被设定的第一限制属性，能够设定的内容包括不可更改的固定值和允许切换数值的数值组；所述第二可选属性为在基础样式属性已设定的第一限制属性的基础上，选择需求数值组和/或在区间值范围内输入数值。

优选的，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面之后，还包括：

对已设定组合样式属性的控件模板和/或已设定组合样式属性的界面模板选择需求数值组，或者，对已设定基础样式的基础控件选择需求数值组和/或在区间值范围内输入数值。

优选的，所述方法还包括：接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以实现换肤。

优选的，UI界面更新基于基础控件的基础样式属性更新；基础控件的基础样式属性更新时，引用该基础控件的控件模板、界面模板和UI界面的属性均同步更新；更新方法包括：

将所有控件模板、界面模板和UI界面的节点读取到缓存中，通过节点上记录的基础控件的基础样式名称，重新读取对应基础样式索引表中的基础样式属性刷新该基础控件，更新完缓存的节点后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

优选的，基础样式属性更新的方法包括：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性；如果是对区间值进行更新，根据新区间上下限调整当前属性值。

优选的，UI界面更新基于模板更新；更新模板包括更新组合样式属性、删除子模板和新增子模板；更新过程包括：

更新组合样式属性时，所有引用该组合样式的控件模板、界面模板和UI界面的属性均同步更新；删除子模板时，所有引用该子模板的控件模板、界面模板和UI界面对应的节点将会被删除；新增子模板时，所有引用该子模板的控件模板、界面模板和UI界面将在对应节点下新增该子模板；更新完每一个节点的属性后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

优选的，组合样式属性更新的方法包括：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性。

另一方面，一种UI界面的生成系统，包括：

基础样式设定模块，用于接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

组合样式设定模块，用于接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

UI界面生成模块，用于接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。

优选的，还包括：

UI界面更新模块，用于接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以实现换肤。

与现有技术相比，本发明具有如下有益效果：

(1)本发明一种UI界面的生成方法及系统，基于基础控件和模板生成UI界面，由于对基础控件设定了基础样式，对模板设定了组合样式，因此对相同的控件进行重复使用时不需要重复设定属性，同时使得控件使用规范，呈现的UI界面表现为实现后的实际表现；

(2)本发明一种UI界面的生成方法及系统，基础控件的基础样式与模板的组合样式同时具备普遍性与特殊性：若优化界面表现，编辑被应用的基础样式或组合样式，更新后，界面中所有引用该基础样式的基础控件和引用该组合样式的模板，将一并更新；相同模板的不同组合样式属性是分开存储的，若模板的组合样式没有被调整，则界面表现不会受影响；

(3)本发明一种UI界面的生成方法及系统，生产UI界面的流程有了更加明确的分工，将制作流程分成三步：前期由第一操作者根据本项目界面控件使用规范，制作控件的基础样式；然后由第二操作者根据本项目界面表现规范生产控件模板和界面模板；最后由第三操作者在已有模板或控件的基础上生产界面。

上述说明仅是本发明技术方案的概述，为了能够更清楚地了解本发明的技术手段，从而可依照说明书的内容予以实施，并且为了让本发明的上述和其他目的、特征和优点能够更明显易懂，以下列举本发明的具体实施方式。

根据下文结合附图对本发明具体实施例的详细描述，本领域技术人员将会更加明了本发明的上述及其他目的、优点和特征。

附图说明

图1为本发明实施例的UI界面的生成方法的基本流程图；

图2为本发明实施例的组合样式示意图；

图3为本发明实施例的节点示意图；

图4为本发明实施例的传递切换示意图；

图5为本发明实施例的UI界面组成示意图；

图6为本发明实施例的基础样式组成示意图；其中图6(a)表示基础样式包括的属性；图6(b)表示基础样式限制属性可设定的内容；

图7为本发明实施例的组合样式组成示意图；其中图7(a)表示组合样式包括的属性；图7(b)表示组合样式限制属性可设定的内容；

图8为本发明实施例的UI界面样式组成示意图；其中图8(a)表示UI界面包括的属性；图8(b)表示UI界面可选属性可设定的内容；

图9为本发明实施例的模式选择窗口；

图10为本发明实施例的样式管理器窗口；

图11为本发明实施例的基础样式中可被设定的属性与设定窗口；

图12为本发明实施例的模板制作类型选择窗口；

图13为本发明实施例的模板主编辑界面；

图14为本发明实施例的界面类型选择窗口；

图15为本发明实施例的UI界面主编辑界面；

图16为本发明实施例的基础样式属性更新处理图；

图17为本发明实施例的批量更新窗口；

图18为本发明实施例的UI界面的生成系统结构框图。

具体实施方式

以下通过具体实施方式对本发明作进一步的描述。

参见图1所示，一方面，本发明一种UI界面的生成方法，包括如下步骤：

S101，接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

S102，接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

S103，接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。

具体的，本发明在控件的基础上，新增样式与模板的概念。模板用来控制节点的构成，样式用来控制节点的表现。模板由子模板(控件和其他模板)构成，最简单的子模板就是一个控件。样式是模板所拥有的属性，一个模板可以拥有多个样式，每个样式由该模板的子模板选择不同样式组合而成。

参见图2所示，模板A由子模板A1和A2构成，拥有3种样式style1、style2和style3。style1由子模板A1选择样式1和子模板A2选择样式1构成；style2由子模板A1选择样式2和子模板A2选择样式2构成；style3由子模板A1选择样式2和子模板A2选择样式1构成。

若A1仅由一个控件构成，那么A1就是最简单的子模板。若A1由引用其他模板构成，那么A1的结构与A是类似的。

控件拥有的样式称为基础样式，每一种基础样式是指定类型控件所有属性中的一种或几种的集合，属性类型有：固定值(不可更改)、数值组(允许切换数值)、区间值(允许在范围内输入)。基础样式属性集合内的属性将限制编辑的条件，该集合之外的属性称为自由属性，这类属性允许自由编辑。

模板拥有的样式称为组合样式，组合样式由子模板通过选择不同样式构成。每个组合样式的属性可以在基础样式的基础上再编辑，也可以不选择基础样式直接编辑，不同的是前者将限制一部分属性的变化。

控件模板与界面模板是对模板的细分。将模板分解为控件后，每一个控件将拥有完整的属性表，表中属性由组合样式控制，并且属性只有两种类型：固定值(不可更改)、数值组(允许切换数值)。如果该控件还引用了某个基础样式，那么属性表中的属性在组合样式控制调整之后，还会根据基础样式的限制再做一次调整，保证最终每个控件的表现符合规范。

控件模板由控件组合而成，同时允许引用其他控件模板。切换模板某一个节点的组合样式时，递归切换子节点为同名的组合样式，达到一键切换整个模板表现的目的。

在对象结构面板中，对象是控件，结构是树形结构，为使控件有意义，控件在树形结构中称为节点。节点是统称，参见图3所示，节点细分有根节点、父节点、子节点。根节点为“树干”，父节点为“树枝”，子节点为“树叶”，三者为从属关系。容器是控件中的一种类型，因受规则限制，仅容器控件可拥有子控件。

递归切换的过程为：在基础样式的基础上，完善所有属性的编辑，用一个名称映射所有属性的一个集合，这个名称就是模板的组合样式名。模板由单个或多个控件组成。由多个控件组成的模板，每个控件的组合样式名若有相同，则它们之间存在关联，且可传递切换。如图4所示，模板X下的各控件，皆拥有组合样式S1、S2和S3。当生成UI界面引用模板X时，默认显示的组合样式是S1，若S1未能满足身份丙需求，则点击选择模板X(控件A)，切换组合样式为S2，则树形结构中从属于控件A的控件B、C、D和E、将一同把自身的组合样式S1切换为组合样式S2，从属于控件B的控件F、G、H与从属于控件C的控件I、J同样一同把自身的组合样式S1切换为组合样式S2。

界面模板由控件模板与控件组合而成，同时允许引用其他界面模板，功能与控件模板类似，但在表现上已经具有界面的形式。界面与模板之间的关系如图5所示，一个完整的界面由一定数量的界面模板、控件模板与控件构成。

进一步的，参见图6所示，所述基础样式属性包括第一限制属性和第一自由属性；所述第一限制属性为基础控件指定部分属性能够设定，能够设定的内容包括不可更改的固定值、允许切换数值的数值组和允许在范围内修改的区间值；所述第一自由属性为无被指定的属性。

参见图7所示，所述组合样式属性包括第二限制属性和第二可选属性；所述第二限制属性包括基础样式属性的第一自由属性和未被设定的第一限制属性，能够设定的内容包括不可更改的固定值和允许切换数值的数值组；所述第二可选属性为在基础样式属性已设定的第一限制属性的基础上，选择需求数值组和/或在区间值范围内输入数值。

参见图8所示，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面之后，还包括：

对已设定组合样式属性的控件模板和/或已设定组合样式属性的界面模板选择需求数值组，或者，对已设定基础样式的基础控件选择需求数值组和/或在区间值范围内输入数值。

具体的，主要引用组合样式(模板)，首先选择模板的某一个组合样式，然后对该组合样式的限制属性进行数值组选择(第二可选属性)；其次引用基础样式(控件)，使用基础样式在许可范围内进行再编辑(第一限制属性)，使用未被限制的属性进行属性编辑(第一自由属性)。

其中，图6至图8中的身份甲为规则制定者(基础样式制作模式)，设定基础控件的基础样式，具体为针对单个基础控件，对该控件的限制属性进行属性设定，用一个名称记录已编辑好的属性，这个名称就是基础样式名，将这个基础样式根据需求存放在需求工作路径下，点击保存，完成该控件的基础样式制作，生成基础样式文件。身份乙为模板制作者(组合样式制作模式)，将控件组合成模板且设定组合样式，具体为使用身份甲产出的基础控件进行组合，在控件基础样式允许调整的属性中，进行再一次调整，并用统一的名称记录控件的所有属性，这个名称是模板的组合样式名，若有多种不同属性组合，则有多个不同组合样式名。模板的组合样式编辑完毕，点击保存，生成模板文件。身份丙为UI界面生产者(界面制作模式)，使用模板的组合样式与基础控件的基础样式完成界面生产，具体为根据工作路径选择模板类型，在模板目录选择需求模板，将模板拖至舞台，选择一个满足需求的组合样式，完成模板放置。重复以上步骤，检查是否存在需求遗漏，若当前模板库没有满足需求的模板，则在公共控件库，将需求控件拖至舞台，选择一个满足需求的基础样式，编辑可选属性与自由属性，完成控件放置。最后检查是否存在需求遗漏，若满足，则点击保存，完成界面生产，生成界面文件。

本实施例中，所述身份甲可以是撰写控件使用规范与界面表现规范的UI设计师；所述身份乙可以是UI或其他美术岗位涉及设计师；所述身份丙可以是策划。

参见图9所示，为本发明方法的模式选择窗口，包括制作界面模式(策划使用)、制作模板的组合样式模式(UI或其他美术岗位使用)和制作基础控件的基础样式模式(撰写控件使用规范与界面表现规范的UI设计师使用)。

将界面、模板的组合样式、基础控件的基础样式分为三种模式，一个模式仅做一件事，每个模式由不同岗位分工完成。撰写界面规范文档的UI设计师主要负责编辑基础控件的基础样式部分，通过在每个工作路径下配置一份基础样式索引表，来限制不同路径下模板能够使用的样式，起到制定规则的作用；UI或其他美术岗位可根据界面规范文档进入制作模板模式，根据已被制定好的基础控件的基础样式，进行基础控件的组合与组合样式的编辑，完成控件模板与界面模板的制作与编辑；策划岗位主要使用制作界面模式，使用模板的组合样式与基础控件的基础控件样式即可完成界面模式的制作。

点击图9的“控件样式”，显示图10所示的样式管理器窗口。其中：

①：基础控件选择栏，用于选择所有可被编辑的基础控件；

②：路径选择栏，用于选择当前控件的基础样式存放的工作路径；

③：导入按钮，用于导入当前控件在其他工作路径下的基础样式；

④：新建按钮，用于创建当前控件的新基础样式；

⑤：编辑按钮，用于编辑已被储存的基础样式；

⑥：删除按钮，用于删除无被使用需求的基础样式；

⑦：基础样式列表，用于展示已被储存的基础样式，与选中后可执行编辑与删除操作。

进入基础控件的基础样式制作模式，所有基础控件的基础样式都通过样式管理器来管理，在控件栏选择目标控件，可根据需求进行不同基础控件的切换；在目录栏选择可储存的工作路径，该路径是基础样式索引表生成的路径，相同控件在不同工作路径下，可使用的基础样式不同；基础样式可通过导入按钮导入其他工作路径的已有样式，也可通过新建按钮新建全新样式；若需要对样式进行再编辑，选中已有样式后，通过编辑按钮进入编辑状态即可对样式进行再编辑；若样式无被使用需求，通过删除按钮，选择删除当前工作路径下的选中样式，或者删除所有工作列表下的选中样式。

基础样式中，可被设定的属性与设定窗口如图11所示，其中：

①1：属性设置按钮，仅有可被设定的属性才有的按钮；

①2：属性设置窗口，点击属性设置按钮后弹出的操作窗口；

②1：勾选属性，勾选后控件将具备此项属性；

②2：固定值(不可更改)属性，勾选不可更改并确认后，其他使用者无法改变此属性；

③1：能够影响控件表现的数值属性，被设定了数值组(允许切换数值)；

③2：数值组(允许切换数值)，可储存一组或多组数值组，供使用者进行限定切换；

④1：能够影响控件表现的数值属性，被设定了区间值(允许在范围内输入)；

④2：区间值(允许在范围内输入)，可储存一组区间值，供使用者在限定范围内输入；

⑤：基础样式保存按钮，点击后保存所有属性数值，在样式管理器的样式列表中生成基础样式；

⑥：当前输入状态，用于判断当前输入数值的操作，新增模式即增加数值组，修改模式即替换数值组；

对目标控件的当前基础样式进行属性编辑。属性是否能够进行数值限制，在控件属性表中已提前预设，仅显示有齿轮按钮的属性能够被数值限制。可设置的类型有固定值(不可更改)、数值组(允许切换数值)、区间值(允许在范围内输入)：勾选型的属性仅可设置固定值(不可更改)；影响表现与功能的数值类型的属性，需在数值组(允许切换数值)或区间值(允许在范围内输入)中选择其一进行数值限制。

可根据顶部菜单栏的模式状态，判断当前输入的数值组的增改，新增模式下输入的数值都将存入数据，修改模式下输入的数值将替换修改之前的数值。

点击图9的“制作模板”，显示图12所示的模板制作类型的选择窗口。其中：

①：模板类型，若模板结构复杂、表现趋近界面、是通用界面所需的元素，则选择界面模板，反之选择控件模板；

②：模板储存路径，此路径非自定义，是规则制定者根据模板类型预先编辑好的工作路径，也是制定基础样式索引表储存的工作路径；

③：模板名称，若模板为新建，则需为模板命名；若在选择路径时勾选了已有模板，则名称栏呈现的是已选的模板名称；

根据界面规范，已完成各基础控件的基础样式，形成控件样式库。进入制作模板模式，在模板类型栏中，可选择新建控件模板或界面模板；导入控件模板或界面模板进行再编辑。选择模板可存放的工作路径，在路径选择中，可仅选择工作路径进行新增，也可选择工作路径下的目标模板进行再编辑。若是仅选择路径，则需在模板名称栏对模板进行命名，确认后，即可使用该工作路径下的控件样式制作模板。

参见图13所示，为点击“控件模板”或“界面模板”进入的主编辑界面，其中：

①：版本号，本UI编辑器会根据迭代情况更改版本号信息，以确认工具现状；

②：基础样式选择栏，用于进行基础样式的预览与切换操作；

③：组合样式选择栏，默认为无组合样式，需要对当前各基础控件的组合进行组合样式命名，组合样式可存在一个或多个，可切换；

④：基础样式的可编辑属性，具有三角箭头的属性为数值组(允许切换数值)，未置灰的数值属性为区间值(允许在范围内输入)，置灰的勾选框与数值为不可编辑属性；

⑤：组合样式保存按钮，点击后将当前属性面板中的各项属性以组合样式名储存；

⑥：对象结构面板，用于放置模板所需的节点与其他模板节点；

⑦：模板保存按钮，点击后，保存舞台中的模板数据到工作路径下；

进入主编辑界面，确认编辑器是否为最新版本后进行模板制作。舞台的默认根节点是容器，针对根节点进行基础样式选择。选择数值组及编辑未置灰的数值。对当前已设置好的属性，进行组合样式的命名新增(组合样式为各子节点的属性通过一个名称进行节点组合，也通过这个名称进行传递切换组合样式名称可编辑修改)。可通过拖动基础控件添加新的子节点，也可通过拖动其他已制作好的模板进行模板引用(被引用模板的组合样式不受当前根节点组合样式影响)。通过上述过程，呈现最终效果若符合预期，点击顶部菜单栏的储存按钮，完成控件模板的制作。

点击图9的“制作界面”，显示如图14所示的界面类型选择窗口，其中：

①：界面操作选择，新建模式可创建新界面，导入json模式可导入已有界面进行编辑

②：界面储存路径，新建模式下无需关注此栏，导入json模式下可点击选择按钮进行导入操作

③：界面文件的名称，若新建模式，则需对界面文件命名；若导入json模式，则显示已选择的界面文件名称；

④：导入窗口，在导入json模式下，点击选择按钮后弹出的窗口；

⑤：界面文件搜索栏，用于搜索需要导入的界面文件；

⑥：界面文件列表，用于选择需要打开的界面文件；

⑦：已选文件列表，用于展示已被选择的界面文件；

⑧：是否打开此界面文件的勾选按钮，取消勾选后该界面文件本次操作不被打开；

⑨：确认操作按钮，用于确认当前窗口的操作；

进入制作界面模式，在项目类型中选择新建界面或导入界面再编辑。选择界面文件存放路径或已存在路径，若为新建界面类型，则需对新界面命名，确认后，进入如图15所示的主编辑界面进行基础控件的基础样式与模板的组合样式的应用；若为导入模式，选择路径时即可选择需要编辑的界面文件，可多选批量打开。

参见图15所示，其中：

①：控件模板库，根据模板复杂程度从左至右分为三类页签，最复杂界面模板、适中复杂控件模板、单一基础控件，使用者根据需求选择类别；

②模板页签下的细分类别目录，可通过类别目录判断模板表现与归属；

③模板栏，类别目录下的模板展示列表，可通过模板描述与缩略图判断模板用途；

④节点名称，使用者可根据需求，编辑节点名称；

⑤界面保存按钮，点击后将舞台内的界面数据保存为数据到储存目录下。

由上可知，控件属性编辑的自由度，通过明确分工向下递减。其中基础样式的编辑者(UI设计师)自由度最高，拥有控件的编辑权限，可自由编辑控件属性用于生成不同的基础样式，通过工作路径约束基础样式的可选类型与数量；模板制作者(UI设计师与其他美术岗位)自由度次之，拥有基础样式的选择权限，在指定工作目录下选择基础样式进行模板制作，最终形成具有组合样式的模板；界面生产者(策划岗位)无控件属性编辑权限，仅拥有模板组合样式的选择权限(使用模板时无法更改属于模板的各控件的基础样式)和控件基础样式选择权限。通过从上至下的权限限制，达到界面的表现与控件的使用规范。

此外，为了方便使用者快速定位制作界面时需要选择的模板，将模板进行分类和可视化是有必要的。保存模板时，需要编辑者对该模板的类别进行划分，并取一个合适的名字，同时生成该模板的缩略图。使用者在选择模板时，根据模板的类别快速选择需要的分类，再根据缩略图与名字选择该分类下需要的模板，提高生成界面的效率。

进一步的，对于生成完成的UI界面，如果基础控件的基础样式或模板的组合样式发生变化时，可批量进行更新。

具体为，S104，接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以满足表现规范的灵活批量换肤。

有了样式和模板之后，更新界面的表现包括更新基础样式属性和更新模板。

当基础控件的基础样式属性更新时，引用该基础控件的控件模板、界面模板和UI界面的属性均同步更新；更新方法包括：

将所有控件模板、界面模板和UI界面的节点读取到缓存中，通过节点上记录的基础控件的基础样式名称，重新读取对应基础样式索引表中的基础样式属性刷新该基础控件，更新完缓存的节点后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

参见图16所示，基础样式属性更新时，对固定值、数值组和区间值的处理如下：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性；如果是对区间值进行更新，根据新区间上下限调整当前属性值。

更新模板时，包括更新组合样式属性、删除子模板和新增子模板；更新过程包括：

更新组合样式属性时，所有引用该组合样式的控件模板、界面模板和UI界面的属性均同步更新，处理方式与更新基础样式类似；删除子模板时，所有引用该子模板的控件模板、界面模板和UI界面对应的节点将会被删除；新增子模板时，所有引用该子模板的控件模板、界面模板和UI界面将在对应节点下新增该子模板，未被模板限制的属性取模板中的默认值；更新完每一个节点的属性后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

组合样式属性更新的方法包括：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性。

具体的，点击图14所示的“导入json”，进入如图17所示的批量更新窗口，其中：

①：批量更新页签，选择制作界面模式的导入json，路径选择按钮，切换批量更新页签进入此窗口；

②：点击确认按钮，即可更新所有目录下的界面文件；

若对基础控件进行了基础样式编辑与基础样式新增操作、模板的组合样式编辑、组合样式新增、对象结构节点新增、对象结构节点删除，需在制作界面模式下，选择导入选项，选择批量更新页签，点击确定，即可更新所有引用过该基础控件的基础样式、控件模板、界面模板的文件，达到简单改动，全局变化的效果。

参见图18所示，参见本发明的另一方面，一种UI界面的生成系统，包括：

基础样式设定模块1801，用于接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

组合样式设定模块1802，用于接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

UI界面生成模块1803，用于接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面；

UI界面更新模块1804，用于接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以满足表现规范的灵活批量换肤。

一种UI界面的生成系统与一种UI界面的生成方法的具体实现相同，此处不再重复说明。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。此外，在没有更多限制的情况下，由语句“用于”限定的要素，并不排除还包括其他的用途。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

1.一种UI界面的生成方法，其特征在于，包括：

接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。

2.根据权利要求1所述的UI界面的生成方法，其特征在于，所述基础样式属性包括第一限制属性和第一自由属性；所述第一限制属性为基础控件指定部分属性能够设定，能够设定的内容包括不可更改的固定值、允许切换数值的数值组和允许在范围内修改的区间值；所述第一自由属性为无被指定的属性。

3.根据权利要求2所述的UI界面的生成方法，其特征在于，所述组合样式属性包括第二限制属性和第二可选属性；所述第二限制属性包括基础样式属性的第一自由属性和未被设定的第一限制属性，能够设定的内容包括不可更改的固定值和允许切换数值的数值组；所述第二可选属性为在基础样式属性已设定的第一限制属性的基础上，选择需求数值组和/或在区间值范围内输入数值。

4.根据权利要求3所述的UI界面的生成方法，其特征在于，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面之后，还包括：

对已设定组合样式属性的控件模板和/或已设定组合样式属性的界面模板选择需求数值组，或者，对已设定基础样式的基础控件选择需求数值组和/或在区间值范围内输入数值。

5.根据权利要求4所述的UI界面的生成方法，其特征在于，所述方法还包括：接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以实现换肤。

6.根据权利要求5所述的UI界面的生成方法，其特征在于，UI界面更新基于基础控件的基础样式属性更新；基础控件的基础样式属性更新时，引用该基础控件的控件模板、界面模板和UI界面的属性均同步更新；更新方法包括：

将所有控件模板、界面模板和UI界面的节点读取到缓存中，通过节点上记录的基础控件的基础样式名称，重新读取对应基础样式索引表中的基础样式属性刷新该基础控件，更新完缓存的节点后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

7.根据权利要求6所述的UI界面的生成方法，其特征在于，基础样式属性更新的方法包括：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性；如果是对区间值进行更新，根据新区间上下限调整当前属性值。

8.根据权利要求5所述的UI界面的生成方法，其特征在于，UI界面更新基于模板更新；更新模板包括更新组合样式属性、删除子模板和新增子模板；更新过程包括：

更新组合样式属性时，所有引用该组合样式的控件模板、界面模板和UI界面的属性均同步更新；删除子模板时，所有引用该子模板的控件模板、界面模板和UI界面对应的节点将会被删除；新增子模板时，所有引用该子模板的控件模板、界面模板和UI界面将在对应节点下新增该子模板；更新完每一个节点的属性后，将对应节点的属性保存到原来文件中并清除缓存，完成更新。

9.根据权利要求8所述的UI界面的生成方法，其特征在于，组合样式属性更新的方法包括：

如果是对固定值进行更新，直接替换更新后的属性；如果是对数值组进行更新，根据数值组引用的下标替换属性。

10.一种UI界面的生成系统，其特征在于，包括：

基础样式设定模块，用于接收基础控件的基础样式制作请求，进入基础控件的基础样式制作模式，对指定路径下的指定基础控件进行基础样式属性设定，并在该指定路径下生成对应的基础样式索引表；

组合样式设定模块，用于接收模板的组合样式制作请求，进入控件模板或界面模板制作模式；基于指定路径下已设定基础样式属性的基础控件制作控件模板，或者，基于指定路径下已设定基础样式属性的基础控件和控件模板制作界面模板；并对所述控件模板或界面模板设定组合样式属性；

UI界面生成模块，用于接收UI界面制作请求，进入新建界面模式或导入界面模式，基于指定路径下已设定基础样式属性的基础控件、已设定组合样式属性的控件模板和已设定组合样式属性的界面模板中的一种或多种生成UI界面。

11.根据权利要求10所述的UI界面的生成方法，其特征在于，还包括：

UI界面更新模块，用于接收UI界面更新请求，进入批量更新模式，对控件模板、界面模板和UI界面进行批量更新以实现换肤。