CN114217794A

CN114217794A - 页面设计方法、客户端设备、可读介质及程序产品

Info

Publication number: CN114217794A
Application number: CN202111450714.9A
Authority: CN
Inventors: 孙浩波; 管磊; 黄争青; 翁晓毅
Original assignee: Perfect World Zhengqi Shanghai Multimedia Technology Co ltd
Current assignee: Perfect World Zhengqi Shanghai Multimedia Technology Co ltd
Priority date: 2021-11-30
Filing date: 2021-11-30
Publication date: 2022-03-22

Abstract

本发明公开了一种页面设计方法、客户端设备、可读介质及程序产品。方法包括：显示客户端应用的页面及至少一个变量编辑可视模块；页面上展示有目标控件，变量编辑可视化模块上具有至少一个编辑框；确定用户选择出的至少一个目标变量编辑可视模块；响应于用户触发的操作，显示用户在至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数；将目标控件与至少一个目标变量参数关联，完成目标控件的功能设计，以便服务端确定用户对所述页面上的所述目标控件触发了操作时，获取与目标控件关联的至少一个目标变量参数，使得与目标控件对应的执行程序按照至少一个目标变量参数执行，以便在客户端作相应的响应。本方案可提高页面开发效率。

Description

页面设计方法、客户端设备、可读介质及程序产品

技术领域

本发明涉及界面开发技术领域，尤其涉及一种页面设计方法、客户端设备、可读介质及程序产品。

背景技术

随着智能化科学技术的发展，各种客户端应用层出不穷，客户端应用的开发离不开可视化页面(或称为用户界面)(User Interface，UI)的编辑开发。

在UI编辑开发过程中，利用现有页面设计软件，如Qt Designer、Android Studio和XCode等应用内置的UI编辑工具，虽已能很好的处理UI的显示和布局等方面内容，但所开发出的页面仅是展示出页面的初始状态，并不具有动态运行功能，也就是说，应用运行时其页面上的各种控件(如按钮、进度条、文本等)所要表达出的运行状态仍需由开发人员通过编写程序代码实现，这无疑需要开发人员付出大量时间与精力。

发明内容

本发明提供一种解决上述问题或至少部分地解决上述问题的页面设计方法、客户端设备、可读介质及程序产品。

根据本发明的一个方面，提供了一种页面设计方法，包括：

提供设计界面；

在所述设计界面上，显示客户端应用的页面及至少一个变量编辑可视模块；其中，所述页面上展示有目标控件，所述变量编辑可视模块上具有至少一个编辑框；

响应于用户对所述至少一个变量编辑可视模块触发的选择操作，确定所述用户选择出的至少一个目标变量编辑可视模块；

响应于所述用户触发的输入操作，显示所述用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数；

将所述目标控件与所述至少一个目标变量参数关联，完成所述目标控件的功能设计，以便服务端确定用户对所述页面上的所述目标控件触发了操作时，获取与所述目标控件关联的至少一个目标变量参数，使得与所述目标控件对应的执行程序按照所述至少一个目标变量参数执行，以便在所述客户端做出相应的响应。

根据本发明的另一个方面，提供了一种客户端设备，包括存储器、处理器及存储在存储器上的计算机程序/指令，所述处理器执行所述计算机程序/指令时实现上述第一方面所述页面设计方法的步骤。

根据本发明的再一个方面，提供了一种计算机可读介质，其上存储有计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述第一方面所述页面设计方法的步骤。

根据本发明的再一个方面，提供了一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述第一方面所述页面设计方法的步骤。

本发明的有益效果为：通过提供相应的设计界面，在设计界面上，显示客户端应用的展示有目标控件的页面，及显示至少一个具有至少一个编辑框的变量编辑可视模块；并在响应于用户对至少一个变量编辑可视模块触发的选择操作，确定出用户选择的至少一个目标变量编辑可视模块后，通过响应于用户触发的输入操作，可显示用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数；执行将目标控件与至少一个目标变量参数的关联操作，即可完成目标控件的功能设计，从而以便于服务端在确定出用户触发了页面上的目标控件时，获取与目标控件关联的至少一个变量参数，使得与目标控件对应的执行程序按照至少一个变量参数执行，以便在客户端做出相应的响应。由此可见，在目标控件的功能整个设计过程中，用户只需进行一些简单操作，比如变量编辑可视模块的选择、变量参数的输入等操作，即可完成目标控件的功能设计，无需要用户通过编写程序代码来实现，这利于提高页面设计开发的效率。

附图说明

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

图1a示意性地示出了根据本发明一个实施例的页面设计方法的流程示意图；

图1b示意性地示出了根据本发明一个实施例的页面编辑界面的示意图；

图2a示意性地示出了根据本发明一个实施例的事件编辑界面的示意图；

图2b示意性地示出了根据本发明另一个实施例的页面编辑界面的示意图；

图2c示意性地示出了根据本发明又一个实施例的事件编辑界面的示意图；

图2d示意性地示出了根据本发明又一个实施例的事件编辑界面的示意图；

图3示意性地示出了根据本发明一个实施例的数据关联界面的示意图；

图4示意性地示出了根据本发明一个实施例的页面设计的原理性示意图；

图5示意性地示出了根据本发明一个实施例的页面设计装置的结构示意图；

图6示意性地示出了根据本发明一个实施例的客户端设备的结构示意图；

图7示意性地示出了根据本发明一个实施例的计算机程序产品的结构示意图。

具体实施方式

随着科学技术的发展，各种客户端应用(如各种游戏类、网购类、交友类等应用)层出不穷，丰富了人们生活。客户端应用的开发离不开可视化页面(或称为用户界面、用户交互接口)(User Interface，UI)的编辑开发设计。

页面的编辑开发设计通常是开发人员基于相应的页面设计软件，如Qt Designer、Android Studio和XCode等应用所内置的UI编辑工具来实现的。这些UI编辑工具经多年发展在处理页面的显示和布局等方面具有较好的便捷、高效性，可在一定程度上提高页面开发效率。页面作为用户与硬件系统间进行交互和信息交换的介质，其在运行全生命周期内应能按照开发人员设置的功能运行以正确表达出对应的状态信息，比如，游戏类应用其页面上的表征游戏人物剩余血量的进度条，应能动态实时显示出该游戏人物对应的剩余血量信息。然而，利用现有页面设计软件开发出的页面仅只是一个页面的初始状态，其上的各控件(如文本框控件、图片控件、按钮控件、进度条控件等)并不具有对应的功能数据，也就无法动态实时表达出运行时对应的状态信息。对于页面上各控件对应的功能开发，往往是需要开发人员通过编写程序代码方式去一一设置页面上各控件相应的功能来实现的，这无疑需要开发人员花费大量的时间与精力。

现有通过编写程序代码以为页面上各控件设置相应的功能方案，利用一些较为功能强大的程序编辑器，比如Visual C++，Android Studio等，虽可生成一些样本代码以引导开发人员在哪一位置加入对应的功能程序代码，但这也仅是在一定程度上降低了开发人员编写程度代码的难度，并无法从根本上解决需开发人员编写程序代码以为页面上各控件设置相对应的功能问题，仍然是需要开发人员付出大量的精力与时间。.

为解决上述技术问题，本发明提供了一种页面设计方法及客户端设备及服务端设备。通过本发明提供的技术方案，只需开发人员进行一些简单操作，如变量参数选择、变量参数对应的一些特征数据设置等，即可完成页面上各个控件对应的功能设置，无需开发人员编写程序代码，能够有效提高页面的开发效率。

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。

在本发明的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。而本发明中术语“或/和”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如：A或/和B，表示可以单独存在A，同时存在A和B，单独存在B这三种情况；本发明中字符“/”，一般表示前后关联对象是一种“或”关系。还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。此外，下述的各实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1a示出了本发明一实施例提供的页面设计方法的流程示意图。该页面设计方法是基于本发明提供的页面设计软件实现的，该页面设计软件具体形式可以为UI编辑器，UI编辑器提供了变量编辑可视模块等各种功能模块，使得开发人员通过这些功能模块通过变量参数选择、变量参数对应的具体特征数据设置等一些简单操作即可完成页面上各个控件对应的功能设置，从而完成页面的开发设计。有关如何利用本发明提供的页面设计软件实现页面开设设计，可参见下文本发明各实施例提供的相关内容，此处不作赘述。这里需说明的是，本发明提供的页面设计软件是安装于开发人员对应的客户端设备上的，具体实施时，客户端设备可以是个人计算机、平板电脑、智能手机、个人数据助理(Personal DigitalAssistant，PAD)、智能式穿戴设备等可移动设备，或者也可以是台式电脑、数字TV等固定设备，此处不作限定；另外，在本实施例下文中，无特别说明的情况下，所出现的用户均指的是上文所述的进行UI开发设计的开发人员，“用户”与“开发人员”仅只是站在不同角度采用的不同称谓而已。如图1a所示，该页面设计方法包括：

101、提供设计界面；

102、在所述设计界面上，显示客户端应用的页面及至少一个变量编辑可视模块；其中，所述页面上展示有目标控件，所述变量编辑可视模块上具有至少一个编辑框；

103、响应于用户对所述至少一个变量编辑可视模块触发的选择操作，确定所述用户选择出的至少一个目标变量编辑可视模块；

104、响应于所述用户触发的输入操作，显示所述用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个变量参数；

105、将所述目标控件与所述至少一个变量参数关联，完成所述目标控件的功能设计，以便服务端确定用户触发了所述页面上的所述目标控件时，获取与所述目标控件关联的至少一个变量参数，使得与所述目标控件对应的执行程序按照所述至少一个变量参数执行，以便在所述客户端做出相应的响应。

具体实施时，上述101中的设计界面是由本页面设计方法所基于的页面设计软件(如UI编辑器)提供。该页面设计软件能够提供多种功能界面，这些功能界面均可称为设计界面，比如，参见图1b示出的UI编辑器，其菜单栏中的功能模块10对应的工具栏110包含的“页面编辑”、“事件编辑”、“数据关联”、“全局数据”等各功能单元，这些功能单元各自对应的界面均可称为设计界面。图1b具体示出了“页面编辑”功能单元对应的界面100(以下简称“页面编辑”界面100)的情况。不同设计界面一般对应不同的页面开发设计功能，例如：图1b示出的“页面编辑”界面100，其上包括页面编辑区1101、控件选择区1102、控件(或页面)属性显示区1103等，用户利用控件选择区1102提供的多个控件(如基本控件模块下提供的按钮控件、图片控件、文本框控件、单选框控件等)，可以在页面编辑区1101完成客户端应用(如游戏类应用)一页面的初步布局设计；然后，再基于如控件属性显示区1103提供的各种功能单元(如事件编辑功能单元11031)进入不同的设计界面，并通过不同的设计界面提供的各种功能设计完成一控件相应的功能开发，比如，用户通过事件编辑功能单元11031可进入如图2a示出的“事件编辑”对应的界面200(以下简称“事件编辑”界面200)，并基于该“事件编辑”界面200上所提供的各种功能完成如按钮01的各种“事件”功能的开发设计，具体如何完成如按钮01的各种“事件”功能开发设计可参见下文相关内容，此处不作赘述。基于此，用户(也即上文所述的开发人员)基于页面设计软件提供的不同设计界面，针对不同设计界面所提供的各种页面开发功能，即可实现通过一些简单的操作，如变量参数选择、变量参数对应的具体特征数据设置等，完成页面开发设计。具体如何完成页面设计可参见下文相关内容。

上述102中，客户端应用可指的是安装于客户端设备(如智能手机、个人计算机、笔记本、智能穿戴设备等)上的各种应用软件，比如，游戏类软件、交友类软件、网购类软件等等，本实施例对此不作限定。用于显示客户端应用的页面的设计界面具体可指的是如图1b示出的“页面编辑”界面100，该“页面编辑”界面100上所显示出的客户端应用的页面可以是用户使用本发明中提供的页面设计软件或其它类型页面设计软件提前设计好的初始页面，或者也可以是用户当前利用本发明提供的页面设计软件，通过“页面编辑”界面100上提供的如控件选择区、页面编辑区等功能模块，在页面编辑区完成的客户端应用一页面的初步布局设计(即初始页面)，此处对客户端应用的页面具体来源并不作限定。即也就是说，所显示出的客户端应用的页面上是展示有多个控件的，用户当前仅对该多个控件进行了相应布局及相应初始显示出的基本属性(如控件名称、形状等)进行了设计，并未开发设计页面运行时各控件所需表达出的各种动态功能属性。比如，参见图1b所示，对于当前在“页面编辑”界面100上显示的页面，用户仅初步设计了按钮01的基本属性，还并未对按钮01被触发时能够激发的动作事件进行设计，具体实施时，该动作事件可指的是但不限于按钮01被触发时，执行由当前页面切换至其它页面的操作，或者执行改变另一控件上或自身上所显示出的文字内容等等。

这里需说明的是：上述控件的基本属性指的是用于决定控件外观相关的属性，比如，控件的名称、形状、显示风格、字体颜色、字体大小等等。

上述中，在所显示出的客户端应用的页面上展示出的多个控件均可视为目标控件，或者也可以将多个控件中的某一个、某两个等视为目标控件，此处不作限定。具体实施时，目标控件是由用户欲让页面运行时，其所需页面上各控件表达出的功能确定的。比如，继续参见图1b示出的客户端应用的页面，该页面上展示有按钮01，用户欲让按钮01具有在用户触发按钮01时，能够将当前页面切换至下一页面的功能，则按钮01即为目标控件；或者，用户欲让按钮01具有在用户触发按钮01时，具有改变当前页面上的一文本框(图中未示出)中显示出的文字功能，则按钮01和相应的文本框即为目标控件，此处对目标控件并不作具有限定。

上述控件的功能可指的是控件所属页面运行时，该控件对应具有的执行功能、通过“事件”引发相应程序代码运行并完成响应的功能等等，此处不作限定。其中，“事件”指的是控件对键盘、鼠标、用户手触等操作的响应。一般地，用户是根据实际需求对控件的“事件”进行开发设计，以实现对控件的功能开发设计。一旦控件的某个事件发生，即可引起相应事件过程的执行。

由于各控件对应的各种功能通常是通过对应的变量参数实现的，相应地，页面运行时各控件所表达出的状态信息往往是各控件对应关联的变量参数对应的具体特征数据，基于此，本发明提供的页面设计软件提供了至少一个变量编辑可视模块，一个变量编辑可视模块具有至少一个编辑框，通过变量编辑可视模块可完成控件与对应变量参数的关联，相关的具体实现可参见下述各实施例相关内容，此处不作赘述。

在一具体可实现技术方案中，上述102中“显示至少一个变量编辑可视模块”，可具体包括如下步骤：

1021、显示用以引导用户进入变量编辑可视模块展示区的第一引导元素；

1022、响应于用户针对所述第一引导元素的操作，以显示所述变量编辑可视模块展示区；

1023、在所述变量编辑可视模块展示区上，显示所述至少一个变量编辑可视模块。

具体实施时，参见图1b所示，第一引导元素11031可具体显示在目标控件对应的属性展示区1103上，和/或也可在工具栏110上进行显示，等等，此处不作具体限定。在用户基于页面设计软件提供的交互方式，如鼠标、键盘、手触、语音等，针对第一引导元素11031进行了触发操作后，页面设计软件将会响应于用户触发的操作，以显示出变量编辑可视模块展示区，从而在变量编辑可视模块展示区上，显示出至少一个变量编辑可视模块。图1b中示出了按钮01对应的属性展示区及工具栏110上均可显示有相应的第一引导元素11031的情况。

具体地，上述1022“响应于用户针对所述第一引导元素的操作，以显示所述变量编辑可视模块展示区”的一种可实现技术方案为：

A11、响应于用户针对所述第一引导元素的操作，显示功能列表；所述功能列表展示有至少一个事件功能；

A12、响应于用户针对所述至少一个事件功能触发的选择操作，确定所述用户选择出的至少一个目标事件功能；

A13、根据所述至少一个目标事件功能对应的程序逻辑，显示所述至少一个目标事件功能对应的所述变量编辑可视模块展示区。

举例来说，参见图1b至图2b所示，在用户触发了按钮01对应的属性展示区1103中显示出的第一引导元素11031后，页面设计软件响应用户触发的操作，会将“事件编辑”界面200(如图2a所示)进行显示。在“事件编辑”界面200上显示有“事件列表”，该“事件列表”即为页面设计软件响应于用户针对第一引导元素触发的操作后，所显示出的功能列表。功能列表上展示有至少一个事件功能，比如，“当玩家单击按钮时”、“当玩家长按按钮释放时”、“当玩家长按按钮时”等等；在用户根据实际需求确定欲为按钮01设置的功能为“当玩家单击按钮时”，并触发了对“当玩家单击按钮时”的选择操作后。UI编辑器会根据用户选择出的“当玩家单击按钮时”对应的程序逻辑，显示出“当玩家单击按钮时”对应的变量编辑可视模块展示区220(如图2b所示)。在该变量编辑可视模块展示区220上会显示有相应的至少一个变量编辑可视模块2201。

需说明的是：对于如图2a中示出的“事件列表”中的事件功能，用户是可以执行相应的添加或删除等操作的，图2a中示出的“事件列表”中的事件功能的数量仅仅是示意性的，并不代表具体“事件列表”中所包括的具体事件功能。

进一步地，上述步骤1022中还可以包括：

A111、在显示所述功能列表的同时，显示功能编辑区；以及

A131、在显示所述至少一个目标事件功能对应的所述变量编辑可视模块展示区的同时，在所述功能编辑区相应位置显示所述至少一个目标事件功能对应的事件功能可视模块。

例如，参见图2b并承接上述示例，在“事件编辑”界面200上显示有“事件列表”的同时，还会显示有相应的用于编辑事件的功能编辑区210；且在用户针对“事件列表”中的事件功能触发了选择操作后，比如，用户对“事件列表”中的“当玩家单击按钮时”这一事件功能进行了点选操作后，页面设计软件在根据“当玩家单击按钮时”这一事件功能，显示出相应的变量编辑可视模块展示区220的同时，也会在功能编辑区210上显示出与“当玩家单击按钮时”这一事件功能相对应的事件功能可视模块2101a，该事件功能可视模块2101a中是集成有执行“当玩家单击按钮时”这一事件过程相应的代码程序的，以能够使得在按钮01的“当玩家单击按钮时”这一事件发生时，可引起相应的此事件过程的执行。

由上也即可得，功能列表中所展示出的每一个事件功能均会有各自相对应的事件功能可视模块2101，以便后续用户可通过将事件功能可视模块2101与相应的变量编辑可视模块2201进行简单组合，即可完成对相应控件的功能开发设计。

具体实施时，事件功能可视模块2101是具有至少一个插空位的，如如，图2b中所示出的“当玩家单击按钮时”这一事件功能对应的事件功能可视模块2101a，其具有一个插空位(即事件功能可视模块2101a中间的空白区即为插空位)。事件功能可视模块2101上的插空位是针对变量编辑可视模块留出，便于能够通过插空位实现事件功能可视模块2101与对应的变量编辑可视模块2201进行关联组合，以实现该事件功能可视模块2101对应的事件功能设计，从而完成相应的一控件的功能开发设计。

基于此，在一种可实现的技术方案中，上述103“确定所述用户选择出的至少一个目标变量编辑可视模块”，可具体包括如下步骤：

1031、响应于用户对所述变量编辑可视模块展示区所显示的至少一个变量编辑可视模块触发的拖拽操作，将用户拖拽至所述至少一个插空位上的变量编辑可视模块，作为所述目标变量编辑可视模块。

图2c中示出了用户根据实际需求，将变量编辑可视模块2201a拖拽至事件功能可视模块2101a的插空位，以将变量编辑可视模块2201a与事件功能可视模块2101a进行关联组合的情况。该情况下，承接上述所描述的与图1b至图2b相关的示例，说明用户欲为按钮01设置的功能是：当玩家触发页面上的按钮01时，将执行改变一变量参数对应的具体特征数据的操作。其中，变量参数是根据用户针对变量编辑可视模块2201a触发的操作确定。具体实施时，用户可从显示出的至少一个变量参数中选择出相应的目标变量参数以输入至变量编辑可视模块2201a的编辑框内，以建立变量编辑可视模块2201a与对应的目标变量参数间的关联关系，从而也就可建立事件功能可视模块2201a与相应的目标变量参数间的关联，实现在一用户触发按钮01时，能够使得按钮01对应的执行程序按照相应的目标变量参数执行改变目标变量参数对应的具体数值这一行为的发生。

需说明的是，在事件功能可视模块2101a与变量编辑可视模块2201a关联组合时，二者各自所集成的程序代码也将会建立逻辑关联，以形成用户为按钮01设置的功能(即玩家触发按钮01时，按钮01执行执行改变一变量参数的具体数值)对应的执行程序。

基于上述内容，上述104“响应于用户触发的输入操作，显示所述用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个变量参数”，可至少包括如下步骤：

1041、响应于用户触发的输入操作，显示可供选择的至少一个变量参数；

1042、确定用户选择出的至少一个目标变量参数，并将所述至少一个目标变量参数输入至所述至少一个目标变量编辑可视模块上的相应编辑框内并进行显示。

具体实施时，上述“输入”并不仅指的是键盘打字输入，而是一个广义概念，可以是用户通过点击相应元素等输入方式。基于此，对于上述步骤1041和1042，具体实现过程可以为：如参见图2b及图2c所示，变量编辑可视模块上的编辑框上可显示有用以引导用户进入变量参数选择界面的第三引导元素S1，用户在触发了对第三引导元素S1的点击操作后，页面设计软件响应于用户针对第三引导元素S1的操作，即可为用户显示出如图2d中示出的变量参数显示界面300，该变量参数选择界面300上会显示有多个变量参数(如变量1、变量2等)以供用户选择。如参见图2d所示，在用户针对变量编辑可视模块2201a触发了对变量参数显示界面300显示出的多个变量参数中的变量1的选择操作后，页面设计软件将会把与变量1相应的内容，如“001：变量1，初始值“Button””输入至变量编辑可视模块2201a的编辑框K1内，以建立按钮01与变量1间的关联；其中，“001”表征变量1所属的全局容器(即全局变量)。同时，用户还可以根据实际情况将欲使变量1发生变更后所对应的具体特征数据输入至编辑框K2内。至此，为按钮01所设置的“当玩家触发按钮01时，按钮01执行改变一变量参数的具体特征数据)”功能即开发完成。

需说明的是，上述变量选择界面300上显示出的变量参数，可以全是由用户基于自身所需变量参数，通过变量选择界面300提供的自定义变量添加功能自主添加的，也可以是其中的一部分变量参数由用户自主添加，另一部分变量参数为页面设计软件预先内置的，等等，此处不作限定。页面设计软件除了可通过响应于用户对第三引导元素S1的操作，显示出变量选择界面300之外，也还可以通过响应于用户对工具栏110上的“全局数据”功能单元(如图1b至图2b所示)触发的操作，以显示出变量选择界面300，此处不作限定。

上文，主要介绍说明了如何对控件的“事件”功能进行编辑，以便控件相应的事件被触发时，可执行相应的事件功能。在一些实施例中，用户除了需控件具有一些事件功能外，可能还需控件具有一些其它功能，比如需控件在运行时具有显示一些如文本数据、图片数据等的功能，具体地，如参见图1b所示，用户需按钮01在初步运行时，具有其上显示出文字“Button”的功能。对于此类功能，用户只需为控件直接配置相应的变量参数，以建立控件与变量参数的关联即可。针对上述所描述的为控件设置除“事件”功能之外的其它功能的设置，本实施例提供的UI编辑器，在控件对应的属性展示区1103还显示有直接引导用户进入变量参数显示界面300的第四引导元素11032(如图1b所示)，以便可直接建立控件与变量参数间的关联关系。

例如，参见图1b所示，假设用户欲使按钮01在运行时，可以在其自身上显示出文字“Button”，则用户在设置按钮01的这一功能时，可以对按钮01的属性展示区1103上显示的第四引导元素11032进行触发操作，页面设计软件响应于用户对第四引导元素11032触发的操作后，将会显示出变量参数选择界面300(如图2d所示)，之后响应于用户针对变量参数选择界面上所显示出的至少一个变量参数选择操作，即可为按钮01与用户选择出的目标变量参数(如图2d示出的变量1)建立关联关系。结合上文为按钮01设置的“事件”功能，则综上为按钮01设置的功能为：在按钮01初始运行时，按钮01上会显示出文字“Button”；当玩家触发按钮01时，按钮01将会执行将其上所显示的文字“Button”改变为“Date1”的操作。综上即可见，以上对按钮01功能的设置，只需用户进行一些简单的选择或设置操作，比如变量编辑可视模块及变量参数等的选择、变量参数对应的具体特征数据的设置，即能够完成为按钮01设置相应的变量参数；之后，基于页面设计软件提供的“数据关联”功能单元11033(如图1b、图2a至图2b所示)，即能够建立控件与相应的变量参数关联，以最终完成目标控件的功能设计。即，本实施例提供的所述方法还包括：在设计界面上，还显示有用于引导用户进行数据关联的第二引导元素；以及

上述105中“将所述目标控件与所述至少一个变量参数关联”的一种可实现技术方案为：

1051、响应于用户对所述第二引导元素触发的操作，将所述目标控件与所述至少一个变量参数的关联。

具体实施时，参见图1b、图2a至图2b所示，上述第二引导元素即为图1b、图2a至图2b中示出的工具栏110提供的“数据关联”功能单元11033，用户通过上述步骤101至105为目标控件设置好相应的目标变量参数后，对“数据关联”功能单元11033进行触发操作后，页面设计软件响应于用户对“数据关联”功能单元的操作，即可完成目标控件与相应的目标变量参数间的关联，从而完成目标控件的功能设计。

综上，本实施例提供的技术方案，通过提供相应的设计界面，在设计界面上，显示客户端应用的展示有目标控件的页面，及显示至少一个具有至少一个编辑框的变量编辑可视模块；并在响应于用户对至少一个变量编辑可视模块触发的选择操作，确定出用户选择的至少一个目标变量编辑可视模块后，通过响应于用户触发的操作，可显示用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数；执行将目标控件与至少一个目标变量参数的关联操作，即可完成目标控件的功能设计，从而以便于服务端在确定出用户触发了页面上的目标控件时，获取与目标控件关联的至少一个变量参数，使得与目标控件对应的执行程序按照至少一个变量参数执行，以便在客户端做出相应的响应。由此可见，在目标控件的功能整个设计过程中，用户只需进行一些简单操作，比如变量编辑可视模块的选择、变量参数的输入等操作，即可完成目标控件的功能设计，并不需要用户通过编写程序代码来实现，这利于提高页面设计开发的效率。

在完成目标控件与相应的至少一个变量参数关联后，为使用户能够从直观上清晰地的明确自己为页面上的各控件与对应的变量参数所建立的关联关系，并在用户发现关联关系存在错误时，能够通过更较为简单的方式进行修改。进一步地，本实施例提供的所述方法，还包括如下步骤：

106、所述目标控件与所述至少一个目标变量参数关联完成后，显示所述目标控件与所述至少一个目标变量参数的关联连接图；

107、响应于用户触发的针对所述关联连接图的操作，更新所述关联连接图，以更新所述目标控件与所述至少一个目标变量参数的关联；

其中，所述关联连接图包括目标控件信息项、至少一个目标变量参数信息项及目标控件与至少一个目标变量参数的关联关系；针对所述关联连接图的操作包括如下中的至少一种：向目标控件信息项中添加新的目标控件的操作、添加新的目标控件与至少一个目标变量参数的关联关系的操作、删除或修改已有的目标控件与至少一个目标变量参数的关联关系的操作。

在实际应用中，关联连接图(又可称为关系图)，是用来分析事物之间“原因与结果”、“目的与手段”等复杂关系的一种图表。关联连接图中通常包括至少一个连接组，一个连接组由两个连接项及用于连接两个连接项的连接线构成，换句话也就是说，连接组中的连接线用来表征两个连接项间的关联逻辑。通过关联连接图，能够大量表征出多个不同连接项间的关联逻辑，便于用户对多个不同连接项间的关联逻辑的分析。基于此，

本实施例中，在将目标控件与至少一个目标变量参数关联完成后，还会基于目标变量与至少一个目标变量参数的关联结果生成相对应的关联连接图(如图3所示)，并显示关联连接图，以在关联连接图中直观展示出目标控件与至少一个目标变量参数的关联关系。具体实施时，所生成的关联连接图可包括但不限于目标控件信息项、至少一个目标变量参数信息项以及用于表征目标控件与至少一个目标变量参数的关联关系的连接线。其中，目标控件信息项具体可包括但不限于目标控件所属页面、目标控件对应的如显示功能(如显示文本、图片等)及事件功能(如玩家触发目标控件、玩家长按目标控件)，等等；目标变量参数信息项可包括但不限于目标变量所属容器、目标变量参数名称等。目标变量参数通常用于表示目标控件的功能逻辑，为此，关联连接图中示出的目标控件与至少一个目标变量参数间的连接线，也即为目标控件对应的功能与相应的目标变量参数的连接线，以此来示出所建立的目标控件对应的功能与目标变量参数间的对应关系，从而使得用户基于显示出的目标控件与至少一个目标变量参数的关联连接图，能够从直观上来了解自己在为页面上的各控件设置各种功能时，为各控件的各种功能所配置的变量参数，便于用户的查错分析处理。且进一步地，关联连接图中的目标控件信息项、目标变量参数信息项及连接线均是可操作的，这便于用户诸如在通过关联连接图中发现存在目标控件与目标变量参数间的关联关系存在错误时，可直接通过对关联连接图进行操作以实现错误关联的快速修正。

基于上述内容，举一具体示例：承接上述105中的示例，参见图3所示，在用户触发了对“数据关联”模块11033(参见图1b、图2a至图2b所示)的操作后，可在“数据关联”模块对应的界面300上展示出按钮01与至少一个目标变量参数(即图中示出的变量1)的关联关系图310。在该关联关系图310中显示有如按钮01对应的按钮01信息项3101、按钮01所关联的变量1对应的变量1信息项3102，以及按钮01与变量1的关联关系。具体地，如图3所示，按钮01信息项3101中可包括但不限于按钮01所属界面、按钮01对应的显示功能31011(如显示文本)、按钮01对应的事件功能31012(如玩家触发按钮)等，变量1信息项3102中可包括但不限于变量1所属容器(如变量1归属于全局变量001)等；图3中示出的虚线

即用于表征按钮01与变量1的关联关系，比如：按钮01对应的显示文本31011与变量1间的虚线

表示按钮01对应的显示文本31011与变量1关联，即在按钮01初始运行时其上将显示有变量1对应的初始参数值(如“Button”)；按钮01对应的事件功能31012与变量1间的虚线

按钮01对应的事件功能31012是与变量1关联的，即换句话也就是说，在按钮01对应的事件功能31012发生时，按钮01将针对变量1执行所设置的一相应行为发生，比如改变自身上所显示出的文本内容。

由此可见，用户基于图3示出的按钮01与变量1的关联关系图，可从直观上明确自己对按钮01的功能开发设计。另外，若用户基于该关联关系图发现自己对按钮01的功能设计存在错误时，还可以通过对虚线

”执行诸如删除或修改操作以修正错误，比如：用户发现按钮01对应的显示文本31011与变量1间存在错误的关联关系，则用户可直接通过删除按钮01对应的显示文本31011与变量1间的虚线方式，解除显示文本31011与变量1间的关联以修正错误关联；之后，若用户欲为显示文本31011与其他变量建立新关联，也可以直接在图3中示出方式的变量信息项3102中触发“添加变量”功能(图中未示出)，直接添加一新变量，并通过诸如划线方式，直接在显示文本31011与所添加的新变量参数(图中未示出)间画一虚线以建立显示文本31011与新变量参数的关联关系；当然也可以直接通过对原有的显示文本31011与变量1间的虚线进行操作，将显示文本31011与变量1间的连接虚线变更为显示文本31011与新变量参数间的连接虚线，等等，此处并不作限定。进一步地，用户也还可以直接通过触发按钮01信息项31012中的“添加控件”功能，以为按钮01所属页面1添加新控件，同时还可以针对该新控件通过如划线方式，建立新控件与相应变量参数间的关联等等，此处不作限定。

这里需补充说明的是：图3示出的目标控件与至少一个目标变量参数的关联连接图中仅示出了目标控件及目标变量参数这两层级关联架构，在实际应用中，关联连接图的层级架构还可以进一步深化，比如，还可以在关联连接图中加入目标变量参数对应的特征数据这一层级，以在关联连接图中同时示出目标变量参数与对应的特征数据间的关联关系，等等。图3中示出的关联连接图中的层级仅仅是示意性地，对实际关联连接图中的层级并不作限定。另外，在不同应用场景中，变量参数具体可指代的内容也将存在部分不同，比如，在对游戏类应用对应的页面上的目标控件功能进行开发设计时，一个变量参数通常可代表如角色、道具或技能等对象，相应地，变量参数对应的特征数据可以为如攻击、血量、商品价格等。具体变量参数可根据实际应用场景进行确定，此处不作限定。

进一步地，本实施例提供的所述方法还包括如下步骤：

108、响应于用户触发的操作，基于所述目标控件与所述至少一个目标变量参数的关联结果，生成所述目标控件与所述至少一个目标变量参数的关联关系信息；

109、将所述关联关系信息发送至所述服务端，以便所述服务端基于所述关联关系信息作相应的处理，以基于处理结果能够在确定用户对所述页面上的目标控件触发了操作时，做出相应的响应。

具体实施时，在目标控件与至少一个目标变量参数关联完成后，用户可以通过触发设计界面上相应的功能模块，比如“发布”、“本地测试”、“手机测试”等功能模块，完成基于目标控件与至少一个目标变量参数的关联结果，生成目标控件与至少一个目标变量参数的关联关系信息，并将关联关系信息发送至服务端，以便服务端基于所述关系信息作相应的处理，以在后续中基于处理结果，能够在确定用户对应页面上的目标控件触发了操作时，做出相应的响应。关于服务端如何基于收到的关联关系信息作相应的处理，以及如何基于处理结果在确定用于对页面上的目标控件触发了操作时，做出相应的响应，可参见下述各实施例相关内容，此处不作赘述。

这里需说明的是，在实际应用中，不仅需要在服务端保存目标控件与至少一个目标变量参数对应的关联关系信息，页面设计软件同样也需要在本地保存关联关系信息，以便于用户再次重新打开页面设计软件以继续对同一页面进行开发设计时，以前所编辑的数据内容仍能够恢复出原貌。

一般地，关联关系信息在不同设备上进行保存，所对应的保存格式也将存在差异，相应地，关联关系信息在不同设备上所起到的具体作用也存在有不同。具体实施时，页面设计软件在保存页面上各目标控件与对应的至少一个目标变量参数信息时，可采用但不限于如Json(JavaScript Object Notation)数据交互格式。具体地，基于目标控件与至少一个目标变量参数的关联结果，生成相应Json格式的关联关系信息以在页面设计软件中进行保存，相对应的关联关系信息所包括的内容如下：

目标控件信息，其可与目标控件与至少一个目标变量参数对应的关联连接图中的目标控件信息项(如图3中示出的按钮01控件信息项3101)相对应。具体地，参见如下示出的Json格式下关联关系信息中所包括的与目标控件信息相关的部分内容，目标控件信息中可包含有但不限于控件所属页面标识(uiDialogId)、控件所属列表标识(uiListControlId)、控件标识(uiControlId)、控件功能标识(uiControlPropertyIndex)、坐标信息(未示出)等等。其中，若uiListControlId的值不为空，则表示该目标控件为列表控件中的一个子控件，反之若uiListControlId的值为空则表示该目标控件为页面设计软件(如UI编辑器)中的基础控件，其中，如参见图1b所示，基础控件包括图1b中示出的文本控件、按钮控件、单选框控件、图片控件，以及还可以为图1b中未示出的进度条控件、滑动条控件、图片控件、输入框控件等；uiControlId为控件标识，其所指示的目标控件均与相应的变量参数存在有关联关系；uiControlPropertyIndex用于指示控件的功能，如假设图1b示出的按钮01使其具有在自身上显示出文本数据以及图片数据两个功能，则上述两种功能即可通过uiControlPropertyIndex来进行区分，比如：uiControlPropertyIndex为0，可表示按钮01对应的显示文本数据的功能；uiControlPropertyIndex为1，可表示按钮01对应的显示图片数据的功能，等等，此处并不作限定。目标控件信息中所含有的坐标信息可表示出目标控件在如图3示出的关联连接图中的位置，以包括下次针对同一页面触发“数据关联”功能单元时，目标控件信息项仍可以在以前原位置进行显示。

{"uiControlId"："cd###553f"，

"uiControlPropertyIndex"：1，

"uiDialogId"："d####087d9"，

"uiListControlId"：""，}

{"uiControlId":

[{"uiControlId":"cd###553f","uiControlPropertyIndex":0},

{"uiControlId":"cd###553f","uiControlPropertyIndex":1},]}

目标变量参数信息，其可与目标控件与至少一个目标变量参数对应的关联连接图中的目标变量参数信息项(如图3中示出的按钮01对应的目标变量参数信息项3102)相对应。具体地，参见如下示出的Json格式下关联关系信息中所包括的与目标变量参数信息相关的部分内容：

{"variantId":"73###6e8f",

"variantIndex":-1,

"variantParam":"s8##15"}

目标变量参数信息可包含有但不限于：变量参数标识(variantId)，变量参数在所属变量参数列表中的序号(variantIndex)，变量参数的额外信息(variantParam)和坐标等信息(未示出)等等。其中，若variantIndex对应的值为-1，则表示该目标变量参数所归属的变量参数列表中的所有变量参数对应的值，对于此情况，若应用于与列表控件相关联的场景中，则表示该目标变量参数所归属的变量参数列表中的每一个变量参数与相应的控件列表中的每一个自控件具有一一对应关联关系；variantParam，表示变量参数的额外信息，对于简单变量(如类似于图2d中示出的变量1、变量2)来说此字段无效，对于复杂变量(如游戏类中的存储角色，道具和技能等的变量参数)来说，这个值表示这些复杂变量参数的具体特征数据；另外，目标变量参数信息中所含有的坐标信息可表示出目标变量在如图3示出的关联连接图中的位置，以包括下次针对同一页面触发“数据关联”功能单元时，目标变量参数信息项仍可以在以前原位置进行显示。

关联信息(或称为连接信息)，其在如图3示出的关联连接图中可表示一目标控件与对应的一个目标变量参数间的连线。关联信息中包括可目标控件对应的标识及相应的目标变量参数对应的标识，通过建立目标控件对应的标识与目标变量参数对应的标识间的对应关系，以此来建立目标控件与相应的至少一个目标变量参数间的关联关系。具体实施时，一个目标控件对应的标识是由uiDialogId、uiListControlId、uiControlId、uiControlPropertyIndex构成，一个目标变量参数的标识则有variantId、variantIndex及variantParam构成。

对于服务端所存储的关联关系信息格式及关联关系信息中所可包括的具体内容，可参见上述介绍的存储于页面设计软件中的关联关系信息内容及格式，此处不作具体赘述。需说明的是：服务端中所存储的关联关系信息中可不包含如目标控件、目标变量参数等的坐标信息内容。

进一步地，在一些实施例中，页面设计软件还需基于目标控件与至少一个目标变量参数的关联结果，生成符合客户端存储格式的关联关系信息，以使得客户端能够基于关联关系信息，建立诸如目标控件与至少一个目标变量参数对应的索引信息，从而在接收到服务端发送的所作出的响应结果时，能够基于索引信息及所述响应结果，在所述客户端上做出相应的响应处理，以实现页面设计软件、服务端及客户端三者之间的交互。

上述所述的客户端可以指的是当前进行页面开发设计的用户对应的客户端，也可以指的是其他用户对应的客户端，此处不作限定。比如，当前进行页面开发设计的用户，在完成页面上的目标控件的功能开发设计时，其在本地客户端进行功能测试时，则在该应用场景下，上述客户端即指的是进行页面开发设计的用户所对应的客户端。再比如，进行页面开发设计的用户完成一页面上的目标控件的功能开发设计后，进行了向其他用户客户端发布，则上述客户端即指的是其他用户对应的客户端。

有关客户端如何基于关联关系信息，建立相应的索引信息等的具体实现，可参见下文示例性介绍的在完成页面上的目标控件的功能开发设计后，如何使服务端与客户端进行信息交互，以使得应用页面上的各控件可以实时表达出开发设计者欲其达到出的状态信息的一具体实例中的相关内容，此处不作具体赘述。

上文内容，主要介绍了用户如何通过本发明提供的页面设计软件完成页面上各目标控件的功能设计的。页面上的各目标控件的功能设计完成后，通常是需应用到实际应用中的，也就是说，需保证应用页面在运行过程中，通过客户端与服务端间的信息交互，能使得应用页面上的各控件可以实时表达出开发人员欲其达到出的状态信息，以此才能够最终完成页面开发设计。针对此，下面结合图4，具体介绍一种服务端与客户端进行信息交互，以使得应用页面上的各控件可以实时表达出开发设计者欲其达到出的状态信息的一具体示例。具体地，

参见图4所示，第二用户在通过第二用户客户端410上的页面设计软件完成应用页面上各目标控件的功能设计，并将所生成应用页面上的各个目标控件与至少一个目标变量参见的关联关系信息分别发送至服务端420及第一用户客户端430后，服务端420基于收到的目标控件及至少一个目标变量参数的关联关系信息，可确定出至少一个目标变量参数对应的标识，并建立至少一个目标变量参数对应的特征数据的数据集；将数据集及至少一个目标变量参数对应的标识同步至第一用户客户端430，使得第一用户客户端430基于数据集、关联关系信息及目标变量参数对应的标识，建立索引信息。具体地，第一用户客户端430基于数据集、关联关系信息及目标变量参数对应的标识，建立索引信息的过程为：

第一用户客户端430基于接收到服务端420发送的至少一个目标变量参数对应的标识，可先从所保存的关联关系信息中查找出与该至少一个目标变量参数对应关联的目标控件，然后在从服务端420发送过来的数据集中查找到至少一个目标变量参数对应的特征数据；之后，为便于查询，可基于查找到的至少一个目标变量参数对应的特征数据、目标变量参数对应的标识、以及与至少一个目标变量参数具有关联关系的目标控件对应的标识，来建立相应的索引信息。其中，索引信息中包括至少一组数据对，每一个数据对包括第一数据和第二数据；第一数据是由一个目标变量参数对应的标识及该目标变量参数对应的特征数据构成的，第二数据则由与该目标变量参数关联的目标控件对应的标识构成。具体地，第一数据(记为IndexKey)及第二数据(记为IndexValue)对应的格式可以为但不限于如下示出的格式：

IndexKey＝VariantId_VariantIndex_VariantParam；

IndexValue＝uiDialogId_uiListControlId_uiControlId_uiControlPropertyIndex；

相应地，建立的索引信息(IndexTable)的格式可以如下：

IndexTable＝{[IndexKey1,IndexValue1]，

[IndexKey2,IndexValue2]，…}

有关上述示出的第一数据及第二数据对应的格式内容中，VariantId、VariantInde、VariantParam、uiDialogId、uiListControlId、uiControlId、uiControlPropertyIndex等各字符段对应的具体含义，可参见上述相关内容。

当服务端420在监测到一目标变量参数发生变动后，其还可执行相应的处理操作，将得到发变动的目标变量参数对应的标识及该目标变量参数发生变动后对应的特征数据(即如图4中示出的具体值)发展至第一用户客户端430。第一用户客户端430则基于收到的目标变量参数对应的标识，从索引信息中反查找出用于表达出相应具体值的控件，然后再执行将收到的特征数据通过该控件进行表达出的操作。

这里需说明的是：图4中示出第一用户客户端410及第二用户客户端430各自对应的使用用户分别第一用户、第二用户。这里，第一用户可指的是应用使用者，第二用户可指的是应用页面的开发设计者，比如应用页面的开发设计者完成页面上的目标控件的功能设计后，将应用页面向外发布以供其他用户使用的场景下，此时第一用户则指的是应用使用者，第二用户指的是应用开发设计者。当然，在其他一些实施例中，第一用户和第二用户也均可指的是应用页面开发设计者，比如，在开发设计者完成页面上的目标控件的功能设计后，针对所设计的目标控件功能在本地进行功能测试时，此种场景下，第一用户和第二用户均指的是应用页面的开发设计者。图4中的第一用户和第二用户各自对应的具体指代用户类型是根据实际情况进行确定的，在此对第一用户和第二用户对应的具体用户类型并不作限定。在第一用户和第二用户均指的是应用页面开发设计者的情况下，第一用户客户端410和第二用户客户端430，可为同一个客户端设备，客户端设备可以为但不限于个人计算机、智能手机、平板电脑等等。图4中的服务端420可以为但不限于单个服务器、服务器集群、云服务器等。

以上本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面设计方法中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置的程序/指令(例如，计算机程序/指令和计算机程序产品)。这样的实现本发明的程序/指令可以存储在计算机可读介质上，或者可以一个或者多个信号的形式存在，这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带、磁盘存储、量子存储器、基于石墨烯的存储介质或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

图5示意性地示出了可以实现根据本发明的页面设计方法的页面设计装置。具体地，该页面设置装置包括：提供模块510、显示模块520、响应模块530及关联模块540；其中，

提供模块510，用于提供设计界面；

显示模块520，用于在所述设计界面上，显示客户端应用的页面及至少一个变量编辑可视模块；其中，所述页面上展示有目标控件，所述变量编辑可视模块上具有至少一个编辑框；

响应模块530，用于响应于用户对所述至少一个变量编辑可视模块触发的选择操作，确定所述用户选择出的至少一个目标变量编辑可视模块；以及，响应于所述用户触发的输入操作，显示所述用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数；

关联模块540，用于将所述目标控件与所述至少一个目标变量参数关联，完成所述目标控件的功能设计，以便服务端确定用户对所述页面上的所述目标控件触发了操作时，获取与所述目标控件关联的至少一个目标变量参数，使得与所述目标控件对应的执行程序按照所述至少一个目标变量参数执行，以便在所述客户端做出相应的响应。

这里需要说明的是：本实施例提供的所述装置中各步骤未尽详述的内容可参见上述各实施例中的相应内容，此处不再作赘述。此外，本实施例提供的所述信息装置中除了上述各步骤以外，还可包括上述各实施例中其他部分或全部步骤，具体可参见上述各实施例相应内容，在此不再赘述。

图6示意性地示出了可以实现根据本发明的页面设计方法的客户端设置设备，该客户端设备/系统包括处理器610和以存储器620形式的计算机可读介质。存储器620是计算机可读介质的一个示例，其具有用于存储计算机程序/指令631的存储空间630。当所述计算机程序/指令631由处理器610执行时，可实现上文所描述的页面设计方法中的各个步骤。

相应地，本发明实施例还提供了一种计算机可读介质，该计算机可读存储介质上存储有计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述各实施例提供的页面设计方法步骤或功能。

图7示意性地示出了实现根据本发明的方法的计算机程序产品的框图。所述计算机程序产品包括计算机程序/指令710，当所述计算机程序/指令710被诸如图6所示的处理器610之类的处理器执行时，可实现上文所描述的页面设计方法中的各个步骤。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims

1.一种页面设计方法，包括：

提供设计界面；

2.如权利要求1所述的方法，显示至少一个变量编辑可视模块，包括：

显示用以引导用户进入变量编辑可视模块展示区的第一引导元素；

响应于用户针对所述第一引导元素的操作，以显示所述变量编辑可视模块展示区；

在所述变量编辑可视模块展示区上，显示所述至少一个变量编辑可视模块。

3.如权利要求2所述的方法，响应于用户针对所述第一引导元素的操作，以显示所述变量编辑可视模块展示区，包括：

响应于用户针对所述第一引导元素的操作，显示功能列表；所述功能列表展示有至少一个事件功能；

响应于用户针对所述至少一个事件功能触发的选择操作，确定所述用户选择出的至少一个目标事件功能；

根据所述至少一个目标事件功能对应的程序逻辑，显示所述至少一个目标事件功能对应的所述变量编辑可视模块展示区。

4.如权利要求3所述的方法，还包括：

在显示所述功能列表的同时，显示功能编辑区；以及

在显示所述至少一个目标事件功能对应的所述变量编辑可视模板展示区的同时，在所述功能编辑区相应位置显示所述至少一个目标事件功能对应的事件功能可视模块。

5.如权利要求4所述的方法，所述事件功能可视模块具有针对变量编辑可视模块留出的至少一个插空位；以及，

确定所述用户选择出的至少一个目标变量编辑可视模块，包括：

响应于用户对所述至少一个变量编辑可视模块触发的拖拽操作，将用户拖拽至所述至少一个插空位上的变量编辑可视模块，作为所述目标变量编辑可视模块。

6.如权利要求2至5中任一项所述的方法，响应于所述用户触发的输入操作，显示所述用户在所述至少一个目标变量编辑可视模块上的编辑框内输入的至少一个目标变量参数，至少包括：

响应于用户触发的输入操作，显示可供选择的至少一个变量参数；

确定用户选择出的至少一个目标变量参数，并将所述至少一个目标变量参数输入至所述至少一个目标变量编辑可视模块上相应的编辑框内并进行显示。

7.如权利要求6所述的方法，还包括：在所述设计界面上，还显示有用以引导用户进行数据关联的第二引导元素；以及

将所述目标控件与所述至少一个目标变量参数关联，包括：

响应于用户对所述第二引导元素触发的操作，将所述目标控件与所述至少一个目标变量参数的关联。

8.如权利要求7所述的方法，还包括：

所述目标控件与所述至少一个目标变量参数关联完成后，显示所述目标控件与所述至少一个目标变量参数的关联连接图；

响应于用户触发的针对所述关联连接图的操作，更新所述关联连接图，以更新所述目标控件与所述至少一个目标变量参数的关联；

9.如权利要求7或8所述的方法，还包括：

基于所述目标控件与所述至少一个目标变量参数的关联结果，生成所述目标控件与所述至少一个目标变量参数的关联关系信息；

将所述关联关系信息发送至所述服务端，以便所述服务端基于所述关联关系信息作相应的处理，以基于处理结果在确定用户对所述页面上的目标控件触发了操作时，做出相应的响应。

10.如权利要求9所述的方法，还包括：

将所述关联关系信息发送至客户端，以便客户端基于所述关联关系信息，建立所述目标控件与至少一个目标变量参数对应的索引信息，以在接收到服务端发送的所作出的响应结果时，基于所述索引信息及所述响应结果，在所述客户端上做出相应的响应处理。

11.一种客户端设备，包括存储器、处理器及存储在存储器上的计算机程序/指令，所述处理器执行所述计算机程序/指令时实现根据权利要求1-10中任一项所述的页面设计方法的步骤。

12.一种计算机可读介质，其上存储有计算机程序/指令，所述计算机程序/指令被处理器执行时实现根据权利要求1-10中任一项所述的页面设计方法的步骤。

13.一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现根据权利要求1-10中任一项所述的页面设计方法的步骤。