一种原型设计工具的页面滚动交互的方法与流程

本发明涉及计算机应用领域，具体的说，是一种原型设计工具的页面滚动交互的方法。

背景技术：

在软件原型的设计中，许多页面的设计高度都超过了演示设备的高度，所以页面会产生需要滚动才能显示的区域。而且在页面的一些区域，例如页面顶部系统的状态栏、标题栏、页面底部的导航栏等，一般都是需要固定不动的。

然而，在传统原型设计软件中，如果直接在设计界面中设计，整个页面都将滚动，包括底部和顶部；如果要将顶部与底部固定，那么需要将手动将页面裁剪开，然后将中间需要滚动的部分放置在一个容器中，固定的部分放置在容器之外。但是因为容器的高度一般是小于设备高度的，内部页面却高于设备高度，这样就会导致每次需要编辑滚动部分设计元素时，都需要进入到容器内部才能见到编辑的设计元素。

技术实现要素：

本发明实施例提供一种原型设计工具的页面滚动交互的方法，主要旨在解决现有技术中对页面进行滚动处理需要将手动将页面裁剪开，然后将中间需要滚动的部分放置在一个容器中，固定的部分放置在容器之外，导致软件原型开发效率低的技术问题。

本发明解决上述技术问题的技术方案如下：

一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，包括：

根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器；

控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动。

本发明的有益效果是：当用户向所述设计界面中导入超出所述设计界面的绘制区域的设计元素时，则根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器。通过增加所述设计界面的高度，不仅可以使得用户在设计界面中就能观察到整个导入的所述设计元素，并且会自动设置所述滚动容器，而且通过所述滚动容器，可以选择需要在所述演示界面中滚动演示的内容，使得用户能够直观地选择需要滚动演示的内容。

在上述技术方案的基础上，本发明还可以做如下改进。

进一步地，所述滚动容器包括上边界线以及下边界线，

所述控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动处理，包括：

若所述设计元素全部位于所述滚动容器内，则所述滚动容器内的设计元素在所述演示界面中直接进行滚动；

或，

若所述设计元素部分位于所述滚动容器内，则所述上边界线和/或所述下边界线对所述设计元素进行裁切，以使位于所述滚动容器内的设计元素在所述演示界面中进行滚动。

采用上述进一步方案的有益效果是：当所述设计元素跨越所述滚动容器时，所述滚动容器从边界线处将所述设计元素进行切割，使得所述设计元素位于所述滚动容器内的部分可以在所述演示界面中滚动展示，位于所述滚动容器外的部分可以在所述演示界面中固定展示，使得用户可以在所述设计界面中就可以完成页面滚动区域的设计，不需要手动将所述设计元素裁切为滚动部分和固定部分，极大地提高了设计效率。

进一步地，所述方法包括：

根据用户指令调整所述上边界线和/或所述下边界线，以调整所述滚动容器的大小。

采用上述进一步方案的有益效果是：通过调整所述上边界线和/或下边界线，可以调整所述滚动容器大小，使得用户能够自主选择需要滚动展示的区域。

进一步地，所述根据用户指令调整所述上边界线和/或所述下边界线，具体包括：

所述上边界线包括第一控件，基于用户指令移动所述第一控件，调整所述上边界线；所述下边界线包括第二控件，基于所述用户指令移动所述第二控件，调整所述下边界线。

采用上述进一步方案的有益效果是：所述上边界线包括第一控件，移动所述第一控件以调整所述上边界线；所述下边界线包括第二控件，移动所述第二控件以调整所述下边界线，使得用户能够精确设计所述滚动容器的大小。

进一步地，所述滚动容器包括第一滚动区域和第二滚动区域，

所述控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动处理，具体包括：

所述第一滚动区域作为所述滚动容器中的设计元素在所述演示界面进行滚动的滚动窗口，所述滚动窗口对所述第一滚动区域以及所述第二滚动区域的内容进行滚动。

进一步地，所述方法还包括：

对所述第一滚动区域以及所述第二滚动区域分别进行不同的标记。

采用上述进一步方案的有益效果是：对所述第一滚动区域以及所述第二滚动区域分别进行不同的标记，便于用户识别，以调整所述滚动窗口的位置及大小。

进一步地，所述根据用户指令增加所述设计界面的绘制区域的高度，包括:

所述设计界面包括第三控件，通过移动所述第三控件增加所述设计界面的绘制区域的高度；

和/或，

根据用户指令输入所述第三控件的移动数值，增加所述设计界面的绘制区域的高度。

采用上述进一步方案的有益效果是：所述增加所述设计界面的绘制区域的高度，可以通过移动设置于所述设计界面上的所述第三控件和/或直接输入数值，可以快速地调整所述设计界面。

同时，本发明还提出一种计算机设备，所述设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。

同时，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。

附图说明

图1为本发明一种原型设计工具的页面滚动交互的方法的流程示意图；

图2为本发明一种原型设计工具的页面滚动交互的方法的设计界面的示意图；

图3为本发明一种原型设计工具的页面滚动交互的方法的演示界面的示意图；

附图中，各标号所代表的部件列表如下：

1、滚动容器，2、上边界线，3、下边界线，4、第一滚动区域，5、第二滚动区域，6、第一固定区域，7、第二固定区域，8、第一控件，9、第二控件，10、滚动窗口。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

如图1所示，一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，包括：

110，根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器1；

120，控制位于所述滚动容器1中的设计元素在所述演示界面中进行滚动。

需要说明的是，用户在进行软件原型设计过程中，需要导入大于原始设置的尺寸的图片或其他元素；根据用户指示消息增加所述设计界面的绘制高度，使得调整后的所述设计界面能够容纳所述设计元素，让用户在设计的中能够直观地看到所述设计元素。同时，在根据用户指令增加所述设计界面的绘制区域的高度时，在所述设计界面中会出现一个所述滚动容器1，所述滚动容器1用于在所述演示界面中对位于所述滚动容器1内的设计元素进行滚动展示。这一过程是指在判断导入的所述设计元素大于所述设计界面的原始尺寸，即认定在所述设计界面中存在需要滚动展示的内容，所以在根据用户指令增加所述设计界面的绘制区域的高度时，自动生成一个滚动容器1以容纳需要滚动演示的内容。

如图2至图3所示，所述滚动容器1包括上边界线2以及下边界线3，

所述控制位于所述滚动容器1中的设计元素在所述演示界面中进行滚动，包括：

若所述设计元素全部位于所述滚动容器1内，则所述滚动容器1内的设计元素在所述演示界面中直接进行滚动；

或，

若所述设计元素部分位于所述滚动容器1内，则所述上边界线2和/或所述下边界线3对所述设计元素进行裁切，以使位于所述滚动容器1内的设计元素在所述演示界面中进行滚动。

具体地，所述方法包括：

根据用户指令调整所述上边界线2和/或所述下边界线3，以调整所述滚动容器1的大小。

需要说明的是，所述滚动容器1包括上边界线2、下边界线3以及所述设计界面的左、右边界线，由于在交互设计中，大部分的滚动展示都是上下滚动的，所以本发明的所述滚动容器1设置为所述上边界线2、所述下边界线3可调整，通过调整所述上边界线2和/或下边界线3，可以选择需要滚动展示的内容。

另外，当所述设计元素全部处于所述滚动容器1内，在所述演示界面中则直接对所述设计元素进行滚动演示；若所述设计元素只有部分位于所述滚动容器1内，另一部分位于所述滚动容器1外，即所述设计元素跨越所述上边界线2和/或所述下边界线3，在所述演示界面中对所述设计元素进行滚动演示时，所述上边界线2和/或所述下边界线3对所述设计元素进行裁切，使得仅所述滚动容器1内的所述设计元素的部分在所述演示界面中进行滚动演示，对位于所述滚动容器1外的所述设计元素的另一部分则固定不动。

具体地，所述根据用户指令调整所述上边界线2和/或所述下边界线3，具体包括：

所述上边界线2包括第一控件8，基于用户指令移动所述第一控件8，调整所述上边界线2；所述下边界线3包括第二控件9，基于所述用户指令移动所述第二控件9，调整所述下边界线3。

需要说明的是，本发明的也可以通过输入移动数值来调整所述上边界线和/或下边界线。

具体地，所述滚动容器1包括第一滚动区域4和第二滚动区域5，

所述控制位于所述滚动容器1中的设计元素在所述演示界面中进行滚动，具体包括：

所述第一滚动区域4作为所述滚动容器1中的设计元素在所述演示界面进行滚动的滚动窗口10，所述滚动窗口10对所述第一滚动区域4以及所述第二滚动区域5的内容进行滚动。

需要说明的是，所述滚动容器1包括第一滚动区域4和第二滚动区域5，所述第一滚动区域4是在所述演示界面中直接进行展示的内容，所述第二滚动区域5的内容则需要进行滚动的时候才会展示出来；另外，所述第一滚动区域4为所述演示界面中的所述滚动窗口10的大小，所述滚动窗口10的尺寸不超过所述设计界面调整前的尺寸，所述设计界面是根据用户指令设置的，例如当软件的原型是为iphone4设计的，那么根据用户指令设置所述设计界面的尺寸就是iphone4的尺寸，所以所述滚动容器1的大小最大就是iphone4屏幕操作区域的大小。

需要说明的是，通过调整所述上边界线2，可以调整所述第一滚动区域4的大小，通过调整所述下边界线3可以调整所述第一滚动区域4和/或所述第二滚动区域5的大小，例如向下移动所述上边界线2，则所述第一滚动区域4变小，第一固定区域6增加；向下拉动所述下边界线3，则所述第一滚动区域4变大，所述第二固定区域7变小，但当所述第一滚动区域4超出未调整前所述设计界面的绘制区域后，向下调整所述下边界线3时，所述第一滚动区域4不再增加，则所述第二滚动区域5增加；向上调整所述下边界线3时，所述第二固定区域7变大，所述第一滚动区域4以及所述第二滚动区域5变小。另外，所述第一滚动区域4的高度、所述第一固定区域6的高度以及所述第二固定区域7的高度相加等于未调整前的所述设计界面的高度，即所述第一滚动区域4的高度、所述第一固定区域6的高度以及所述第二固定区域7的高度相加等于所述演示界面的高度，即演示样机的高度，所述演示样机可以是手机、平板、电脑等演示设备。

具体地，所述方法还包括：

对所述第一滚动区域4以及所述第二滚动区域5分别进行不同的标记。

需要说明的是，对所述第一滚动区域4以及所述第二滚动区域5分别进行不同的标记，是因为所述第一滚动区域4是在所述演示界面中进行滚动演示的所述滚动窗口10的大小，所以对所述第一滚动区域4以及所述第二滚动区域5分别进行不同的标记，便于用户识别，以调整所述滚动窗口10的位置及大小；另外，所述标记可以是不同的颜色标记，也可以是不同的图形标记。

具体地，所述根据用户指令增加所述设计界面的绘制区域的高度，包括:

所述设计界面包括第三控件，通过移动所述第三控件增加所述设计界面的绘制区域的高度；

和/或，

根据用户指令输入所述第三控件的移动数值，增加所述设计界面的绘制区域的高度。

需要说明的是，所述根据用户指令增加所述设计界面的绘制区域可以是移动设置于所述设计界面上的所述第三控件，或者直接输入数值来调整所述设计界面的高度。

在实际应用场景中，向所述设计界面中导入大于所述设计界面尺寸的设计元素，例如图片，则根据用户指令调整所述设计界面的高度，以使得所述设计界面能够全部展示所述设计元素，并在所述设计界面上设置所述滚动容器1，以使位于所述滚动容器1中的设计元素在所述演示界面中进行滚动处理；根据用户指令调整所述上边界线2和/或所述下边界线3，选择需要滚动演示的内容以及需要固定演示的内容，例如在软件原型设计中，例如页面顶部系统的状态栏、标题栏、页面底部的导航栏等，一般都是需要固定不动的，而其他部分的内容则是需要滚动演示的，由于增加了所述设计界面绘制区域的高度，所以所述滚动容器1能够对位于所述滚动容器1中的内容进行直观地展示，用户通过调整所述滚动容器1可以直观地选择需要滚动的区域。

同时，本发明还提出一种计算机设备，所述设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。

同时，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。