CN104035652B - 用户界面显示的控制方法和装置 - Google Patents

Abstract

本申请提供一种用户界面显示的控制方法和装置。该控制方法包括：接收用户在当前页面的输入区域中的输入操作；响应于该输入操作，监测当前页面是否移动；以及当监测到当前页面移动时，使当前页面的位置复原。由此通过拦截用户在输入区域中的输入操作，在页面位置发生变化之前即可启动对页面移动的监测和复原，从而确保输入区域位于当前页面中的固定位置，而不会因用户的输入操作而上下波动，从而避免用户的误操作、方便用户的使用以及提升用户的体验感受。

Description

用户界面显示的控制方法和装置

技术领域

本申请涉及移动互联网领域，尤其涉及用户界面显示的控制方法和装置。

背景技术

这里的内容尽管是在背景技术标题下阐述的，但是其中也包含了本发明人的发现和构思，所以不应被完全视为现有技术。

随着移动互联网的迅速发展，通过移动终端浏览网页已经成为一种流行趋势。由于移动终端屏幕尺寸的限制以及操作系统的多样化，面向移动终端用户的友好界面的开发越来越重要。

在通过触摸屏作为输入方式的移动终端的用户界面中，当用户需要输入信息时，响应于用户触摸或点击当前页面中的输入区域，通常在页面的底部顶出一个键盘区域以供用户输入使用，并且整个页面会上移以使该输入区域处于键盘以上区域的中心位置，从而起到提示用户输入的作用。

当在页面中存在多个输入区域并且用户在这多个输入区域之间进行切换时，页面（输入区域）会上下移动，以保证被聚焦的输入区域处于键盘以上区域的中心位置，以起到上述提示用户输入的作用。

例如，在通过苹果iPhoneOS6操作系统下的智能手机登录淘宝网时，在会员登录页面上需要用户输入会员名和密码。图1示意性地示出了在用户输入信息时用户界面的变化。图1中的左侧部分示意性地示出了当用户进入会员登录页面时的用户界面，此时用户还没有触摸或点击输入区域。图1中的中间部分示意性地示出了当用户触摸或点击会员名输入区域时的用户界面，此时在页面下方顶出一个键盘区域，并且光标聚焦在该会员名输入区域中，同时页面向上移动，使得该会员名输入区域处于键盘以上区域的中心位置。通过该键盘区域，用户可以输入会员名。接下来用户从对会员名的输入切换到对密码的输入。图1中的右侧部分示意性地示出了当用户触摸或点击位于会员名输入区域下方的密码输入区域时的用户界面，此时光标聚焦在该密码输入区域中，同时页面向上移动，使得该密码输入区域处于键盘以上区域的中心位置。而当用户再次从对密码的输入切换到对会员名的输入时，用户触摸或点击位于密码输入区域上方的会员名输入区域，此时光标再次聚焦在会员名输入区域中，同时页面向下移动，使得该会员名输入区域处于键盘以上区域的中心位置，此时的用户界面类似于图1中的中间部分所示。

可见，目前在对输入区域进行操作的过程中，页面总是呈现上下波动，输入区域也会随之上下波动，在多个输入区域之间切换时更为如此。

另外，类似地，当用户在表情输入模式和文本输入模式之间切换时，由于表情区域与键盘区域的差异，为了将输入区域置于表情或键盘以上区域的中心位置，所以也会出现页面的上下波动。

实践中发现，这种输入区域的上下波动可能会造成用户的误操作，给用户带来不便。

发明内容

因此，本申请的主要目的在于提供一种能够消除这种输入区域的上下波动的技术，从而克服上述缺陷。

根据本申请的一个方面，提供一种用户界面显示的控制方法，其特征在于，包括：接收用户在当前页面的输入区域中的输入操作；响应于该输入操作，监测当前页面是否移动；以及当监测到当前页面移动时，使当前页面的位置复原。

根据本申请的另一方面，提供一种用户界面显示的控制装置，其特征在于，包括：接收单元，用于接收用户在当前页面的输入区域中的输入操作；监测单元，用于响应于该输入操作来监测当前页面是否移动；以及复原单元，用于当监测到当前页面移动时使当前页面的位置复原。

与现有技术相比，根据本申请的技术方案，通过拦截用户在输入区域上的输入操作，使得在输入区域聚焦（页面位置发生变化）之前触发对页面移动的监测和复原，由此能够确保输入区域位于用户界面中的固定位置，而不会因用户的输入操作而上下波动，从而避免用户的误操作、方便用户的使用以及提升用户的体验感受。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1示意性地示出了在用户输入信息时用户界面的变化；

图2示出了根据本申请一个实施例的用户界面显示的控制方法的流程图；

图3示出了根据本申请另一个实施例的用户界面显示的控制方法的流程图；

图4示出了根据本申请一个实施例的用户界面显示的控制装置的框图；以及

图5示出了根据本申请另一个实施例的用户界面显示的控制装置的框图。

具体实施方式

本申请的主要思想在于，拦截用户在当前页面的输入区域中的输入操作，使得在页面位置发生变化之前触发对当前页面的位置的监控机制，使得监测当前页面的位置是否改变，并且在页面位置改变时立即复原该当前页面的位置，从而确保页面输入区域不会因用户的输入操作而上下波动。

根据该思想，在响应于用户在当前页面输入区域中的输入操作可触发的任何操作过程中，都可以适当地引入上述本申请的页面位置监控机制。例如，在输入区域聚焦和键盘呼出的过程中可以增加对当前页面的监控，使得当前页面不发生上下波动。具体而言，通过响应于用户在当前页面的输入区域中的输入操作，不仅可以启动对输入区域的聚焦和键盘的呼出，而且可以同时启动对当前页面的位置的监测和复原。另外，在其它情形中，诸如在当前页面中的输入区域之间进行切换时或者在表情输入模式和文本输入模式之间进行切换时，也可以增加对当前页面位置的监控，使得当前页面不发生上下波动。由此能够消除在这些操作过程中输入区域的上下波动，确保输入区域位于用户界面中的固定位置，从而避免用户的误操作、方便用户的使用以及提升用户的体验感受。

为使本申请的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本申请作进一步的详细说明。

根据本申请的实施例，提供了一种用户界面显示的控制方法。

图2示出了根据本申请一个实施例的用户界面显示的控制方法的流程图。

在步骤S210处，接收用户在当前页面的输入区域中的输入操作。

具体而言，当用户想要在当前页面的输入区域中输入诸如文本、表情符号之类的信息时，用户可以通过触摸、单击、双击等中的任意一种或多种方式来对输入区域（例如输入框）进行操作。

相应地，客户端设备可以接收用户在当前页面的输入区域中的输入操作。该输入操作可以包括用户的触摸操作、单击操作、双击操作中的任意一种。

在一个实施例中，通过覆盖在输入区域上方的浮动组件接收输入操作。具体而言，客户端设备可以通过在现有的输入组件（输入框，输入区域）上方覆盖一个浮动组件诸如DIV或SPAN组件来接收或拦截用户的输入操作。通过这样的方式，可以在页面位置发生变化之前即触发对页面移动的监控，并复原页面位置，由此可以确保及时监测到页面移动并对其进行复原，从而保证页面中的输入区域不会上下波动。这一点在稍后也将进行详细描述。

其中，浮动组件可以为本领域已知或未来开发的任意组件，只要其覆盖在输入区域上方能够拦截用户在输入区域中的输入操作即可。例如，浮动组件可以为透明组件或非透明组件。更具体而言，例如，浮动组件可以为DIV组件或SPAN组件。

应注意的是，接收用户在输入区域中的输入操作并不限于这里列举的实施例中的方式，也可以使用其它本领域已知或未来开发的任意合适方式来实现。

接下来，在步骤S220处，响应于该输入操作，监测当前页面是否移动。也就是，当如上所述接收到或拦截到用户在输入区域中的输入操作时，客户端设备可以启动对页面移动的监测。

这里本发明人注意到，通常在用户触摸或点击输入区域使得聚焦输入区域并呼出键盘时，页面会在键盘出现的一瞬间发生波动，之后在用户继续输入信息的过程中不会再发生页面的波动，因此可以只对这一时段的页面进行监控。

因此，在一个实施例中，可以在预定时间段内监测当前页面是否移动。具体而言，如果监测时段超过预定时间段，则客户端设备停止对页面移动的监测。这里，预定时间段例如为1秒钟。本领域技术人员可以理解到，该预定时间段并不限于该示例，而是可以为任意合适时段。

与响应于输入操作始终监测页面的情况相比，这样可以节省客户端设备资源并减轻客户端设备的负担。

关于实现上述监测的方法，在一个具体实施例中，响应于接收到该输入操作，客户端设备可以调用窗口滚动函数window.scroll()来监测当前页面是否移动。窗口滚动函数window.scroll()是本领域已知的可以用于滚动所指定的窗口区域内容的函数。

具体而言，可以通过调用窗口滚动函数window.scroll()，监测window.scroll(X,Y)的坐标是否发生变化，来判断当前页面是否移动。例如，在用户点击输入区域的情况下，当监测到纵坐标window.scroll（Y）发生变化时，可以判定当前页面发生了上下移动。同样，在其它情形中，当监测到横坐标window.scroll（X）发生变化时，也可以判定当前页面发生了左右移动。当监测到横坐标window.scroll（X）和纵坐标window.scroll（Y）都发生变化时，也可以判定当前页面既发生了左右移动又发生了上下移动。

在一个更具体实施例中，客户端设备可以按照预定时间间隔调用窗口滚动函数window.scroll()来监测当前页面是否移动。

例如，该预定时间间隔可以为20ms。但本领域技术人员可以理解到，该预定时间间隔也可以为其它任意合适时段，只要使得用户感受不到页面移动即可。与始终调用窗口滚动函数的情况相比，这样间歇性地调用窗口滚动函数也可以节省客户端设备资源并减轻客户端设备的负担。

应注意的是，监测当前页面是否移动并不限于这里在实施例中阐明的方法，而是可以使用其它本领域已知或未来开发的任意合适方法来实现。

根据上述步骤S220，如果监测到当前页面移动，则进行到步骤S230。

在步骤S230处，当监测到当前页面移动时，使当前页面的位置复原。

在一个实施例中，可以通过调用窗口滚动函数window.scroll()来使所述当前页面定位到初始位置。

具体而言，当用户进入当前页面时（对应于图1左侧部分所示的情形，也就是，在用户点击输入区域之前），客户端设备可以调用窗口滚动函数window.scroll()重新移动当前页面，使得隐藏地址栏，并且将顶部重新定位为window.scroll(0,0)。这里可以将此时的window.scroll(0,0)位置称为当前页面的初始位置。接下来在用户点击一个输入区域时，通常情况下由于需要将被聚焦的输入区域重置于键盘以上区域的中心位置，因而页面会上下移动，随之纵坐标window.scroll（Y）会发生改变。当如步骤S220处那样监测到该纵坐标window.scroll（Y）发生改变时，客户端设备可以调用窗口滚动函数windowl.scroll()来移动当前页面，使得当前页面的windowl.scroll(0,Y)恢复到初始位置window.scroll(0,0)，从而使当前页面的位置复原。

应注意的是，当监测到当前页面移动时使当前页面的位置复原的实现方式并不限于这里在实施例中所述的方式，而是可以使用其它本领域已知或未来开发的任意合适方式，只要确保用户感受不到页面的移动即可。

此外，一种可行的方案是，在页面聚焦（即focus事件）并弹出键盘时通过onfocus事件的触发来执行页面位置的监控和回调。根据在iso6操作系统中的实验数据表明，输入区域的focus事件到onfocus事件之间有33ms的时间间隔，因此，focus事件引发的页面移动到通过onfocus事件执行页面回调具有较大的时间间隔。而在本实施例中，通过浮动组件拦截用户的输入操作，使得在页面位置发生变化之前即触发对页面移动的监控，并复原页面位置。因此，本实施例对页面移动的监控和复原不受onfocus事件响应慢的困扰，可及时在页面位置发生变化时对页面进行回调。

至此，已经描述了根据本申请一个实施例的用户界面显示的控制方法，其中通过拦截用户在当前页面输入区域中的输入操作，在输入区域的聚焦触发（页面位置发生变化）之前即可启动对当前页面位置的监测和复原。由此，能够实现使得输入区域位于用户界面中的固定位置，而不会因用户的输入操作而上下波动。

图3示出了根据本申请另一个实施例的用户界面显示的控制方法的流程图。该图示出了将结合图2所描述的用户界面显示控制方法应用于输入区域聚焦和键盘呼出场景中的情况。

在步骤S310处，接收用户在当前页面的输入区域中的输入操作。在步骤S320处，响应于该输入操作，监测当前页面是否移动。在步骤S330处，当监测到当前页面移动时，使当前页面的位置复原。该步骤S310-S330与图2中的步骤S210-S230是相同的，关于其具体细节可参考前述内容，这里不再赘述。下面仅针对步骤S340进行描述。

在步骤S340处，响应于上述输入操作，对上述输入区域进行聚焦并且呼出键盘。

具体而言，输入区域的聚焦可以理解为是光标在输入区域中的聚焦或出现。在光标出现的同时，键盘也被呼出。对输入区域的聚焦使得输入区域获得接收或响应外部输入设备（例如鼠标或键盘）输入信息的能力，可以通过focus（）方法实现。

可以理解到，在本实施例中，响应于用户在当前页面输入区域中的输入操作，可以触发对当前页面位置的监测和复原，并且可以同时触发输入区域的聚焦和键盘的呼出。换言之，在本实施例中，在响应于用户的输入操作对输入区域进行聚焦和呼出键盘的过程中，可以对当前页面进行监测和复原，保证输入区域不会上下波动。

上述情况例如可以对应于图1的中间部分所示的情形，即在用户进入当前页面后触摸或点击第一个输入区域时的情形。本领域技术人员可以理解到，图2所描述的用户界面显示控制方法也可以应用于其它响应于用户在输入区域中的输入操作可触发的任何合适场景中。例如，图1的最右侧部分所示的情形，即用户在当前页面的多个输入区域之间进行切换时的情形。另外，也可以应用于用户从表情输入模式到文本输入模式的切换过程中。

类似地，根据本实施例，通过拦截用户在当前页面输入区域中的输入操作，启动对当前页面位置的监测和复原，同时启动对输入区域的聚焦和键盘的呼出。由此使得在输入区域的聚焦和键盘呼出的过程中对当前页面进行监控，从而确保输入区域不会上下波动，进而避免用户的误操作、方便用户的使用以及提升用户的体验感受。

至此，已经结合本申请的实施例描述了本申请一个方面的用户界面显示的控制方法。相应地，根据本申请的另一方面，还提供了一种用户界面显示的控制装置。

图4示出了根据本申请一个实施例的用户界面显示的控制装置400的框图。如图4所示，控制装置400可以包括接收单元410、监测单元420和复原单元430。

更具体而言，接收单元410可以用于接收用户在当前页面的输入区域中的输入操作。监测单元420可以用于响应于该输入操作来监测当前页面是否移动。复原单元430可以用于当监测到当前页面移动时使当前页面的位置复原。

在一个实施例中，接收单元410可以包括覆盖在输入区域上方的浮动组件，用于拦截或接收用户在该输入区域中的输入操作。浮动组件可以为本领域已知或未来开发的任意组件，只要其覆盖在输入区域上方能够拦截用户在输入区域中的输入操作即可。例如，浮动组件可以为透明组件或非透明组件。更具体而言，例如，浮动组件可以为DIV组件或SPAN组件。

通过该用户界面显示的控制装置，可以拦截用户在当前页面输入区域中的输入操作，使得在页面位置发生变化之前启动对当前页面位置的监测和复原，由此确保用户输入操作过程中当前页面位置不变，从而使得输入区域位于用户界面中的固定位置，而不会因用户的输入操作而上下波动。

图5示出了根据本申请另一个实施例的用户界面显示的控制装置500的框图。

如图5所示，控制装置500可以包括接收单元510、监测单元520、复原单元530以及聚焦和呼出单元540。

更具体而言，接收单元510可以用于接收用户在当前页面的输入区域中的输入操作。监测单元520可以用于响应于该输入操作来监测当前页面是否移动。复原单元530可以用于当监测到当前页面移动时使当前页面的位置复原。这些单元510-530分别与图4中的单元410-430相同。聚焦和呼出单元540可以用于响应于该输入操作来对输入区域进行聚焦并且呼出键盘。

在一个实施例中，接收单元510可以包括覆盖在输入区域上方的浮动组件，用于拦截或接收用户在该输入区域中的输入操作。浮动组件可以为本领域已知或未来开发的任意组件，只要其覆盖在输入区域上方能够拦截用户在输入区域中的输入操作即可。例如，浮动组件可以为透明组件或非透明组件。更具体而言，例如，浮动组件可以为DIV组件或SPAN组件。

根据本实施例的用户界面显示的控制装置，可以拦截用户在当前页面输入区域中的输入操作，启动对当前页面位置的监测和复原，同时启动对输入区域的聚焦和键盘的呼出，由此使得在输入区域的聚焦和键盘呼出的过程中对当前页面进行监控，从而确保输入区域不会上下波动，进而避免用户的误操作和方便用户的使用，提升用户体验。

本实施例的用户界面显示的控制装置500例如可以应用于图1的中间部分所示的情形，即在用户进入当前页面后触摸或点击第一个输入区域时的情形。本领域技术人员可以理解到，在其它实施例中，对应于其它响应于用户在输入区域中的输入操作可触发的任何合适场景，还可以存在根据其它实施例的用户界面显示的控制装置。例如，对应于图1的最右侧部分所示的情形，即用户在当前页面的多个输入区域之间进行切换时的情形，或者对应于用户从表情输入模式到文本输入模式的切换的情形，都可以存在相应的用户界面显示的控制装置。

以上描述的用户界面显示的控制装置与之前描述的用户界面显示的控制方法的处理是对应的，因此，关于其具体细节，可以参见之前描述的用户界面显示的控制方法，这里不再赘述。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请，对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (16)

1.一种用户界面显示的控制方法，其特征在于，包括：

接收用户在当前页面的输入区域中的输入操作；

响应于所述输入操作，监测所述当前页面是否移动；以及

当监测到所述当前页面移动时，使所述当前页面的位置复原。

2.根据权利要求1所述的控制方法，其特征在于，还包括：

响应于所述输入操作，对所述输入区域进行聚焦并且呼出键盘。

3.根据权利要求1所述的控制方法，其特征在于，所述接收用户在当前页面的输入区域中的输入操作包括：

通过覆盖在所述输入区域上方的浮动组件接收所述输入操作。

4.根据权利要求1所述的控制方法，其特征在于，所述监测所述当前页面是否移动的步骤包括：

在预定时间段内监测所述当前页面是否移动。

5.根据权利要求1-4中任一项所述的控制方法，其特征在于，所述监测所述当前页面是否移动的步骤包括：

调用窗口滚动函数来监测所述当前页面是否移动。

6.根据权利要求5所述的控制方法，其特征在于，按照预定时间间隔调用所述窗口滚动函数来监测所述当前页面是否移动。

7.根据权利要求1-4中任一项所述的控制方法，其特征在于，所述使所述当前页面的位置复原的步骤包括：

通过调用窗口滚动函数来使所述当前页面定位到初始位置。

8.根据权利要求1-4中任一项所述的控制方法，其特征在于，所述输入操作包括触摸操作、单击操作、双击操作中的任意一种。

9.一种用户界面显示的控制装置，其特征在于，包括：

接收单元，用于接收用户在当前页面的输入区域中的输入操作；

监测单元，用于响应于所述输入操作来监测所述当前页面是否移动；以及

复原单元，用于当监测到所述当前页面移动时使所述当前页面的位置复原。

10.根据权利要求9所述的控制装置，其特征在于，还包括：

聚焦和呼出单元，用于响应于所述输入操作来对所述输入区域进行聚焦并且呼出键盘。

11.根据权利要求9所述的控制装置，其特征在于，所述接收单元包括覆盖在所述输入区域上方的浮动组件。

12.根据权利要求9所述的控制装置，其特征在于，所述监测单元在预定时间段内监测所述当前页面是否移动。

13.根据权利要求9-12中任一项所述的控制装置，其特征在于，所述监测单元调用窗口滚动函数来监测所述当前页面是否移动。

14.根据权利要求13所述的控制装置，其特征在于，所述监测单元按照预定时间间隔调用所述窗口滚动函数来监测所述当前页面是否移动。

15.根据权利要求9-12中任一项所述的控制装置，其特征在于，所述复原单元通过调用窗口滚动函数来使所述当前页面定位到初始位置。

16.根据权利要求9-12中任一项所述的控制装置，其特征在于，所述输入操作包括触摸操作、单击操作、双击操作中的任意一种。