一种原型设计工具的页面滚动交互的方法技术

本发明专利技术公开了一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，包括：根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器，控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动。本发明专利技术的有益效果是：不仅可以使得用户在设计界面中就能观察到整个导入的所述设计元素，并且会自动设置所述滚动容器，而且通过所述滚动容器，可以选择需要在所述演示界面中滚动演示的内容，使得用户能够直观地选择需要滚动演示的内容。

A Method of Page Scrolling Interaction for Prototype Design Tools

The invention discloses a method for page scrolling interaction of a prototype design tool, including a design interface and a demonstration interface, including increasing the height of the drawing area of the design interface according to user instructions, and creating a scrolling container in the design interface to control the design elements located in the scrolling container to scroll in the demonstration interface. The beneficial effect of the present invention is that not only can the user observe the whole imported design elements in the design interface, but also the rolling container is automatically set up, and through the rolling container, the content that needs to be displayed in the demonstration interface can be selected, so that the user can intuitively select the content that needs to be demonstrated by rolling.

【技术实现步骤摘要】
一种原型设计工具的页面滚动交互的方法
本专利技术涉及计算机应用领域，具体的说，是一种原型设计工具的页面滚动交互的方法。
技术介绍
在软件原型的设计中，许多页面的设计高度都超过了演示设备的高度，所以页面会产生需要滚动才能显示的区域。而且在页面的一些区域，例如页面顶部系统的状态栏、标题栏、页面底部的导航栏等，一般都是需要固定不动的。然而，在传统原型设计软件中，如果直接在设计界面中设计，整个页面都将滚动，包括底部和顶部；如果要将顶部与底部固定，那么需要将手动将页面裁剪开，然后将中间需要滚动的部分放置在一个容器中，固定的部分放置在容器之外。但是因为容器的高度一般是小于设备高度的，内部页面却高于设备高度，这样就会导致每次需要编辑滚动部分设计元素时，都需要进入到容器内部才能见到编辑的设计元素。
技术实现思路
本专利技术实施例提供一种原型设计工具的页面滚动交互的方法，主要旨在解决现有技术中对页面进行滚动处理需要将手动将页面裁剪开，然后将中间需要滚动的部分放置在一个容器中，固定的部分放置在容器之外，导致软件原型开发效率低的技术问题。本专利技术解决上述技术问题的技术方案如下：一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，包括：根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器；控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动。本专利技术的有益效果是：当用户向所述设计界面中导入超出所述设计界面的绘制区域的设计元素时，则根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器。通过增加所述设计界面的高度，不仅可以使得用户在设计界面中就能观察到整个导入的所述设计元素，并且会自动设置所述滚动容器，而且通过所述滚动容器，可以选择需要在所述演示界面中滚动演示的内容，使得用户能够直观地选择需要滚动演示的内容。在上述技术方案的基础上，本专利技术还可以做如下改进。进一步地，所述滚动容器包括上边界线以及下边界线，所述控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动处理，包括：若所述设计元素全部位于所述滚动容器内，则所述滚动容器内的设计元素在所述演示界面中直接进行滚动；或，若所述设计元素部分位于所述滚动容器内，则所述上边界线和/或所述下边界线对所述设计元素进行裁切，以使位于所述滚动容器内的设计元素在所述演示界面中进行滚动。采用上述进一步方案的有益效果是：当所述设计元素跨越所述滚动容器时，所述滚动容器从边界线处将所述设计元素进行切割，使得所述设计元素位于所述滚动容器内的部分可以在所述演示界面中滚动展示，位于所述滚动容器外的部分可以在所述演示界面中固定展示，使得用户可以在所述设计界面中就可以完成页面滚动区域的设计，不需要手动将所述设计元素裁切为滚动部分和固定部分，极大地提高了设计效率。进一步地，所述方法包括：根据用户指令调整所述上边界线和/或所述下边界线，以调整所述滚动容器的大小。采用上述进一步方案的有益效果是：通过调整所述上边界线和/或下边界线，可以调整所述滚动容器大小，使得用户能够自主选择需要滚动展示的区域。进一步地，所述根据用户指令调整所述上边界线和/或所述下边界线，具体包括：所述上边界线包括第一控件，基于用户指令移动所述第一控件，调整所述上边界线；所述下边界线包括第二控件，基于所述用户指令移动所述第二控件，调整所述下边界线。采用上述进一步方案的有益效果是：所述上边界线包括第一控件，移动所述第一控件以调整所述上边界线；所述下边界线包括第二控件，移动所述第二控件以调整所述下边界线，使得用户能够精确设计所述滚动容器的大小。进一步地，所述滚动容器包括第一滚动区域和第二滚动区域，所述控制位于所述滚动容器中的设计元素在所述演示界面中进行滚动处理，具体包括：所述第一滚动区域作为所述滚动容器中的设计元素在所述演示界面进行滚动的滚动窗口，所述滚动窗口对所述第一滚动区域以及所述第二滚动区域的内容进行滚动。进一步地，所述方法还包括：对所述第一滚动区域以及所述第二滚动区域分别进行不同的标记。采用上述进一步方案的有益效果是：对所述第一滚动区域以及所述第二滚动区域分别进行不同的标记，便于用户识别，以调整所述滚动窗口的位置及大小。进一步地，所述根据用户指令增加所述设计界面的绘制区域的高度，包括:所述设计界面包括第三控件，通过移动所述第三控件增加所述设计界面的绘制区域的高度；和/或，根据用户指令输入所述第三控件的移动数值，增加所述设计界面的绘制区域的高度。采用上述进一步方案的有益效果是：所述增加所述设计界面的绘制区域的高度，可以通过移动设置于所述设计界面上的所述第三控件和/或直接输入数值，可以快速地调整所述设计界面。同时，本专利技术还提出一种计算机设备，所述设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。同时，本专利技术还提出一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例任一项所述的原型设计工具的页面滚动交互的方法的步骤。附图说明图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内的设计元本文档来自技高网...

【技术保护点】
1.一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，其特征在于，包括：根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器(1)；控制位于所述滚动容器(1)中的设计元素在所述演示界面中进行滚动。

【技术特征摘要】
1.一种原型设计工具的页面滚动交互的方法，包括设计界面和演示界面，其特征在于，包括：根据用户指令增加所述设计界面的绘制区域的高度，并在所述设计界面中创建一个滚动容器(1)；控制位于所述滚动容器(1)中的设计元素在所述演示界面中进行滚动。2.根据权利要求1所述的原型设计工具的页面滚动交互的方法，其特征在于，所述滚动容器(1)包括上边界线(2)以及下边界线(3)，所述控制位于所述滚动容器(1)中的设计元素在所述演示界面中进行滚动处理，包括：若所述设计元素全部位于所述滚动容器(1)内，则所述滚动容器(1)内的设计元素在所述演示界面中直接进行滚动；或，若所述设计元素部分位于所述滚动容器(1)内，则所述上边界线(2)和/或所述下边界线(3)对所述设计元素进行裁切，以使位于所述滚动容器(1)内的设计元素在所述演示界面中进行滚动。3.根据权利要求2所述的原型设计工具的页面滚动交互的方法，其特征在于，所述方法包括：根据用户指令调整所述上边界线(2)和/或所述下边界线(3)，以调整所述滚动容器(1)的大小。4.根据权利要求3所述的原型设计工具的页面滚动交互的方法，其特征在于，所述根据用户指令调整所述上边界线(2)和/或所述下边界线(3)，具体包括：所述上边界线(2)包括第一控件(8)，基于用户指令移动所述第一控件(8)，调整所述上边界线(2)；所述下边界线(3)包括第二控件(9)，基于所述用户指令移动所述第二控件(9)，调整所述下边界线(3)。...

【专利技术属性】
技术研发人员：刘松，
申请(专利权)人：成都摹客科技有限公司，
类型：发明
国别省市：四川,51