一种用户界面元素的切换展示方法和装置与流程

本申请涉及计算机技术领域，尤其涉及一种用户界面元素的切换展示方法和装置。

背景技术：

随着互联网行业的发展，越来越多的网页和应用程序以图片的形式展示一些内容。由于用户界面的尺寸有限，在展示某些尺寸较大的图片时，终端设备当前的界面中往往只能展示一张图片，为了方便用户将当前界面中展示的图片切换为其它图片，可以在当前界面中设置用于切换图片的控件，各控件与其被触发时所展示的图片相对应。

以上述控件为按钮为例，按钮中可以包含与之对应的图片的标题，为方便描述，可以将用来切换图片的按钮称为图片标题按钮。如图1所示的用户界面中，包含6个图片标题按钮，这6个图片标题按钮分别对应图片标题1～6，当显示该用户界面的终端设备(比如手机或者平板电脑等)接收到的用户针对图片标题1按钮的点击指令时，会对与图片标题1按钮对应的图片进行展示。

现有技术中，如何能够方便用户直观地感知用户界面元素切换展示方式与用户操作方式之间的关联关系，是亟待解决的问题。

比如，针对图1而言，当用户以不同的操作顺序分别对不同的图片标题按钮或图片进行操作时，比如从上至下依次点击各图片标题按钮，如何对用户界面元素进行切换展示，以便用户直观地感知用户界面元素切换展示方式与用户操作方式之间的关联关系，是亟待解决的问题。

技术实现要素：

本申请实施例提供一种用户界面元素的切换展示方法，用于解决现有技术中用户不能直观感知用户界面元素切换展示方式与用户操作方式之间的关联关系的问题。

本申请实施例还提供一种用户界面元素的切换展示装置，用于解决现有技术中用户不能直观感知用户界面元素切换展示方式与用户操作方式之间的关联关系的问题。

本申请实施例采用下述技术方案：

一种用户界面元素的切换展示方法，包括：

接收针对用户界面中用户界面元素的切换指令；

根据所述指令，确定目标元素以及与所述指令对应的操作特征相匹配的切换展示方式，所述目标元素为待切换展示的用户界面元素；

按照所述切换展示方式，对所述目标元素进行切换展示。

一种用户界面元素的切换展示装置，包括：

接收单元，用于接收针对用户界面中用户界面元素的切换指令；

确定单元，用于根据所述指令，确定目标元素以及与所述指令对应的操作特征相匹配的切换展示方式，，所述目标元素为待切换展示的用户界面元素；

展示单元，用于按照所述切换展示方式，对所述目标元素进行切换展示。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

本申请中，由于能够接收针对用户界面的用户界面元素切换指令，根据该指令，确定目标元素以及与该指令对应的操作特征相匹配的切换展示方式，其中，目标元素为待切换展示的用户界面元素，这样当接收到对应于不同操作特征的指令时，即不同的操作方式时，便可以根据该指令，确定与该指令对应的操作特征相匹配的切换展示方式，最后按照确定的切换展示方式，对目标元素进行切换展示，从而可以让用户直观地感知用户界面元素切换展示方式与用户操作方式之间的关联关系。

附图说明

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

图1为本申请实施例提供的一个用户界面的示意图；

图2为本申请实施例提供的用户界面元素的切换展示方法的实施流程示意图；

图3a为本申请实施例提供的终端设备在接收到针对用户界面的图片标题按钮的点击操作触发的切换指令后，被点击的图片标题按钮对应的图片从下至上的切换展示过程示意图；

图3b为本申请实施例提供的终端设备在接收到通过针对用户界面的图片标题按钮的点击操作触发的切换指令后，被点击的图片标题按钮对应的图片的从上至下的切换展示过程示意图；

图3c为本申请实施例提供的终端设备在接收通过针对用户界面的图片的向上滑动操作触发的切换指令后，与该方向对应的图片从下至上的切换展示过程示意图；

图3d为本申请实施例提供的终端设备在接收通过针对用户界面的图片的向下滑动操作触发的切换指令后，与该方向对应的图片从上至下的切换展示过程示意图；

图4为本申请实施例提供的用户界面元素的切换展示装置结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

用户界面是系统和用户之间进行交互和信息交换的媒介，它可以实现系统的内部信息与人类可以接受的形式之间的转换，凡是参与人类与机械的信息交流的领域都存在着用户界面。如背景技术中所描述的，现有技术中，在用户以不同的操作顺序分别对不同的图片标题按钮进行操作时，与被操作的图片标题按钮对应的图片往往只有一种切换展示方式，即从当前操作时所显示的用户界面元素跳转到待切换展示的用户界面元素，往往只有一种方式，在这种情况下，用户则不能直观感知到用户界面元素的切换展示方式与用户操作方式之间的关联关系。

为解决现有技术中用户不能直观感知用户界面元素切换展示方式与用户操作方式之间的关联关系的问题，本申请实施例提供一种用户界面元素的切换展示方法，该方法的执行主体可以是实现本申请提供的用户界面元素的切换展示方法的应用程序。为便于描述，下文以该方法的执行主体是应用程序为例，对该方法的实施方式进行介绍。可以理解，该方法的执行主体为应用程序只是一种示例性的说明，并不应理解为对该方法的限定。

本申请提供的图片展示方法的实施流程示意图如图2所示，包括下述步骤：

步骤11，接收针对用户界面中用户界面元素的切换指令；

其中，本申请中的用户界面包含图片标题按钮和图片，各图片标题按钮与各图片一一对应，比如当接收到通过针对图片标题按钮的点击操作触发的切换指令时，与该图片标题按钮对应的图片将会被切换展示出来。用户界面元素可以是该用户界面当前展示给用户时所包含的界面元素，该界面元素可以被用户操作，比如点击操作或滑动操作，本申请中该界面元素可以包括图片标题按钮和图片，比如，如图1所示的用户界面元素包括图片标题按钮1～6以及与图片标题1对应的图片。触发用户界面元素切换指令的操作包括：针对用户界面的图片标题按钮的点击操作或者针对用户界面的图片的滑动操作。

步骤12，根据接收的指令，确定目标元素以及与该指令对应的操作特征相匹配的切换展示方式，其中，目标元素为待切换展示的用户界面元素；

其中，操作特征，可以是触发切换指令的操作的特征，可以包括操作方式和操作顺序等特征，由于触发用户界面元素切换指令的操作包括针对用户界面的图片标题按钮的点击操作，或者针对用户界面的图片的滑动操作，则操作特征包括针对用户界面的图片标题按钮的点击操作的特征，或者针对用户界面的图片的滑动操作的特征，当终端设备接收到用户界面元素的切换指令后，根据该指令，确定目标元素以及与该指令对应的操作特征相匹配的切换展示方式，则可以包括如下两种情况：

第一种情况，若触发用户界面元素切换指令的操作包括针对用户界面的图片标题按钮的点击操作，由于用户界面的各图片标题按钮均包含编号，则可以：首先，确定点击操作所针对的图片标题按钮包含的第一编号；然后，比较第一编号与当前展示的用户界面元素对应的图片标题按钮包含的第二编号，以得到作为操作特征的比较结果；最后，根据比较结果，确定与操作特征相匹配的切换展示方式。

若确定比较结果为第一编号大于第二编号，则确定切换展示方式为第一切换展示方式；若确定比较结果为第一编号小于第二编号，则确定切换展示方式为第二切换展示方式。需要说明的是，第一切换展示方式的切换展示方向与第二切换展示方式的切换展示方向相反，而切换展示方向，为对目标元素进行展示时，所述目标元素进入显示屏幕时的移动方向。

在实际应用场景中，为了使用户能够有最佳的感官体验，即，使得目标元素的切换展示方式能直接与用户的操作方式有关联关系。当各图片标题按钮为如图1所示的纵向排列时，第一切换展示方式可以为目标元素从下至上的切换展示方式，第二切换展示方式可以为目标元素从上至下的切换展示方式；或者，当各图片标题按钮为横向排列时，第一切换展示方式可以为目标元素从右至左的切换展示方式，第二切换展示方式可以为目标元素从左至右的切换展示方式。只要第一切换展示方式的切换展示方向与第二切换展示方式的切换展示方向相反，均应在本申请的保护范围之内。

本申请实施例中，在确定触发用户界面元素的切换指令为针对用户界面的图片标题按钮的点击操作之后，便可以根据该点击操作，确定目标元素为与被点击的图片标题按钮对应的图片。

下面以两个具体的例子来详细介绍，终端设备或应用程序接收到通过用户界面的图片标题按钮的点击操作，所触发的用户界面元素的切换指令后，确定与该操作对应的操作特征相匹配的切换展示方式的具体实现过程。

如图3a和图3b所示，为本申请实施例提供的终端设备，在接收到通过对用户界面的图片标题按钮的点击操作所触发的用户界面元素切换指令后，所产生的界面变化状态示意图。该用户界面包含有：左侧所示的“最新比赛”、“红包赛升级”和“春季积分好礼”等图片标题按钮，右侧展示的与当前被点击的图片标题按钮对应的图片，其中“最新比赛”、“红包赛升级”和“春季积分好礼”等图片标题按钮均包含编号，依次为1，2，3，…，即以升序方式编号。

其中图3a所示的第一张用户界面图片为点击“红包赛升级”后，展示的与“红包赛升级”对应的图片的示意图，该用户界面接收到针对“春季积分好礼”的点击操作所触发的切换指令，在接收到该指令后，由于各图片标题按钮均包含编号，则可以通过判断“春季积分好礼”和“红包赛升级”这两个图片标题按钮中包含的编号大小，来确定与“春季积分好礼”对应的图片的切换展示方式。由于“春季积分好礼”包含的编号为3，“红包赛升级”包含的编号为2，显然编号3大于编号2，因此可以确定与“春季积分好礼”对应的图片的切换展示方式为第一切换展示方式，即如图3a所示与“春季积分好礼”对应的图片为由下至上的切换展示方式。

其中图3b所示的第一张用户界面图片为点击“红包赛升级”后，展示的与“红包赛升级”对应的图片的示意图，该用户界面接收到针对“最新比赛”的点击操作所触发的切换指令，在接收到该指令后，由于各图片标题按钮均包含编号，则可以通过判断“最新比赛”和“红包赛升级”这两个图片标题按钮中包含的编号大小，来确定与“最新比赛”对应的图片的切换展示方式。由于“最新比赛”包含的编号为1，“红包赛升级”包含的编号为2，显然编号1小于编号2，因此可以确定与“春季积分好礼”对应的图片的切换展示方式为第二切换展示方式，即如图3a所示与“最新比赛”对应的图片为由上至下的切换展示方式。

当接收到的指令是通过针对用户界面的图片标题按钮的点击操作触发时，由于各图片标题按钮中均包含编号，这样当用户以不同的操作顺序分别对不同的图片标题按钮进行点击操作时，便可以根据当前界面中显示的图片对应的图片标题按钮的编号与待点击的图片标题按钮的编号的比较结果，确定目标元素的切换展示方式，由于不同的比较结果对应的切换展示方式中的目标元素的切换展示方向相反，因此能够让用户直观感知用户界面元素切换展示方式与用户操作方式之间的关联关系，进而提升了用户与用户界面之间的互动趣味性。

第二种情况，若触发用户界面元素切换指令为对用户界面的图片的滑动操作时，由于该滑动操作中包含操作方向，则可以根据该操作方向，确定与该操作方向对应的切换展示方式。具体而言，若确定操作方向为第一方向，则确定切换展示方式为第一切换展示方式；若确定操作方向为第二方向，则确定切换展示方式为第二切换展示方式。需要说明的是，第一方向与第二方向相反，第一切换展示方式与第二切换展示方式中目标元素的切换展示方向相反。

本申请实施例在确定接收到通过对用户界面的图片的滑动操作触发的切换指令之后，便可以根据该滑动操作，将与当前元素相邻的用户界面元素中，与该滑动操作中包含的操作方向相对的用户界面元素作为目标元素。

在实际应用场景中，为了使用户能够有最佳的感官体验，第一方向可以为向上滑动方向，第二方向可以为向下滑动方向；或者，第一方向可以为向左滑动方向，第二方向可以为向右滑动方向。只要第一方向与第二方向相反，均应在本申请的保护范围之内。第一切换展示方式与第二切换展示方式与上文所述一致，这里将不再赘述。

需要说明的是，以图1为例，当接收的用户界面元素切换指令是由针对最后一张图片的包含第一方向的滑动操作触发时，即图1中图片标题6对应的图片，则该最后一张图片以从下至上或从右至左的展示方式展示；当接收到的用户界面元素切换指令是由针对第一张图片的包含第二方向的滑动操作触发时，即图1中图片标题1对应的图片，则该第一张图片以从上至下或从左至右的展示方式展示。

下面以两个具体的例子来详细介绍终端设备或应用程序接收到通过针对用户界面的图片的滑动操作触发的切换指令后，确定与该指令对应的操作特征相匹配的切换展示方式的具体实现过程。

如图3c和图3d所示，为本申请实施例提供的终端设备在接收的用户界面元素切换指令后，该指令是由对用户界面的图片的滑动操作触发，所产生的界面变化状态示意图。该用户界面包含有：左侧所示的“最新比赛”、“红包赛升级”和“春季积分好礼”等图片标题按钮，右侧展示的与当前被点击的图片标题按钮对应的图片，由于滑动操作中包含操作方向，因此可以根据该操作方向，确定与该操作方向对应的切换展示方式。

其中图3c所示的第一张用户界面图片为展示与“红包赛升级”图片标题按钮对应的图片的示意图，该用户界面接收到对与“红包赛升级”对应的图片的向上滑动操作所触发的切换指令，在接收到该指令后，由于该指令中包含的操作方向为向上的方向，因此可以根据该方向，将当前元素相邻的用户界面元素中，即与“红包赛升级”对应图片的相邻图片，也就是下一个图片标题按钮“春季积分好礼”对应的图片作为目标元素，并根据该方向确定其切换展示方式为第一切换展示方式，即如图3c所示的与“春季积分好礼”对应的图片为由下至上的切换展示方式。

其中图3d所示的第一张用户界面图片为展示与“红包赛升级”图片标题按钮对应的图片的示意图，该用户界面接收到对与“红包赛升级”对应的图片的向下滑动操作所触发的切换指令，在接收到该指令后，由于该指令中包含的操作方向为向下的方向，因此可以根据该方向，将当前元素相邻的用户界面元素中，即与“红包赛升级”对应图片的相邻图片，也就是上一个图片标题按钮“最新比赛”对应的图片作为目标元素，并根据该方向确定其切换展示方式为第二切换展示方式，即如图3d所示的与“红包赛升级”对应的图片为由上至下的切换展示方式。

当接收到的指令是对用户界面的图片的滑动操作所触发时，由于能够根据滑动操作中包含的操作方向来确定与操作方向对应的切换展示方式，且当操作方向相反时，与操作方向对应的切换展示方式中的目标元素的切换展示方向也相反，因此能够让用户直观感知用户界面元素切换展示方式与用户操作方向之间的关联关系，进而提升了用户与用户界面之间的互动趣味性。

步骤13，按照确定的切换展示方式，对目标元素进行切换展示。

在根据接收到的指令，确定了目标元素，以及其切换展示方式后，便可以按照确定的切换展示方式，对目标元素进行切换展示。如图3a为终端设备在接收到针对用户界面的图片标题按钮的点击操作所触发的切换指令后，被点击的图片标题按钮对应的图片从下至上的切换展示过程示意图，如图3b为终端设备在接收到针对用户界面的图片标题按钮的点击操作所触发的切换指令后，被点击的图片标题按钮对应的图片的从上至下的切换展示过程示意图，如图3c为终端设备在接收对用户界面的图片的向上滑动操作所触发的切换指令后，与该方向对应的图片从下至上的切换展示过程示意图，如图3d为终端设备在接收对用户界面的图片的向下滑动操作所触发的切换指令后，与该方向对应的图片从上至下的切换展示过程示意图。

本申请中，由于能够接收针对用户界面的用户界面元素切换指令，根据该指令，确定目标元素以及与该指令对应的操作特征相匹配的切换展示方式，其中，目标元素为待切换展示的用户界面元素，这样当接收到对应于不同操作特征的指令时，即不同的操作方式时，便可以根据该指令，确定与该指令对应的操作特征相匹配的切换展示方式，最后按照确定的切换展示方式，对目标元素进行切换展示，从而可以让用户直观地感知用户界面元素切换展示方式与用户操作方式之间的关联关系。

为解决现有技术中，用户不能直观感知用户界面元素切换展示方式与用户操作方式之间的关联关系的问题，本申请实施例还提供一种用户界面元素的切换展示装置，如图4所示，包括下述功能单元：

接收单元41，用于接收针对用户界面中用户界面元素的切换指令；

确定单元42，用于根据所述指令，确定目标元素以及与所述指令对应的操作特征相匹配的切换展示方式，其中，目标元素为待切换展示的用户界面元素；

展示单元43，用于按照所述切换展示方式，对所述目标元素进行切换展示。

在一种实施方式中，所述用户界面元素包括图片标题按钮和图片，则

触发所述指令的操作包括下述一种：

针对所述用户界面的图片标题按钮的点击操作；

针对所述用户界面的图片的滑动操作。

在一种实施方式中，若触发所述指令的操作为针对所述用户界面的图片标题按钮的点击操作；

则，确定单元42，具体包括：

确定所述点击操作所针对的图片标题按钮包含的第一编号；

比较所述第一编号与当前元素对应的图片标题按钮包含的第二编号，以得到作为所述操作特征的比较结果，所述当前元素为当前展示的用户界面元素；

根据所述比较结果，确定与所述操作特征相匹配的切换展示方式。

在一种实施方式中，所述确定单元42，用于：

若确定所述第一编号大于所述第二编号，则确定所述切换展示方式为第一切换展示方式；

若确定所述第一编号小于所述第二编号，则确定所述切换展示方式为第二切换展示方式；

所述第一切换展示方式的切换展示方向与所述第二切换展示方式切换展示方向相反，其中，所述切换展示方向，为对所述目标元素进行展示时，所述目标元素进入显示屏幕时的移动方向。

在一种实施方式中，所述确定单元42，用于：

根据所述指令，确定所述目标元素为与所述图片标题按钮对应的图片。

在一种实施方式中，若触发所述指令的操作为针对所述用户界面的图片的滑动操作，则所述滑动操作中包含所述滑动操作的操作方向；

则，所述确定单元42，具体用于：

若确定所述操作方向为第一方向，则确定所述切换展示方式为第一切换展示方式；

若确定所述操作方向为第二方向，则确定所述切换展示方式为第二切换展示方式；

所述第一方向与所述第二方向相反，所述第一切换展示方式的切换展示方向与所述第二切换展示方式的切换展示方向相反。

在一种实施方式中，所述确定单元42，用于：

根据所述指令，将与所述当前元素相邻的用户界面元素中，与所述操作方向相对的用户界面元素，作为目标元素。

所述第一切换展示方式与所述第二切换展示方式包括下述一种：

所述第一切换展示方式为所述目标元素从下至上的切换展示方式，所述第二切换展示方式为所述目标元素从上至下的切换展示方式；或

所述第一切换展示方式为所述目标元素从右至左的切换展示方式，所述第二切换展示方式为所述目标元素从左至右的切换展示方式。

所述第一方向和所述第二方向包括下述一种：

所述第一方向为向上滑动方向，所述第二方向为向下滑动方向；或

所述第一方向为向左滑动方向，所述第二方向为向右滑动方向。

本申请中，由于能够接收针对用户界面的用户界面元素切换指令，根据该指令，确定目标元素以及与该指令对应的操作特征相匹配的切换展示方式，其中，目标元素为待切换展示的用户界面元素，这样当接收到对应于不同操作特征的指令时，即不同的操作方式时，便可以根据该指令，确定与该指令对应的操作特征相匹配的切换展示方式，最后按照确定的切换展示方式，对目标元素进行切换展示，从而可以让用户直观地感知用户界面元素切换展示方式与用户操作方式之间的关联关系。

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

本申请是参照本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

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