CN110209318A - 显示页面内容的方法、装置及移动终端 - Google Patents

Abstract

本发明公开了一种显示页面内容的方法、装置及移动终端，该方法包括：该方法包括：当接收到触发时间节点菜单的操作，获取该时间节点菜单对应的时间节点；在显示区域动态显示该时间节点对应的多个视频和/或图片。本发明的移动终端显示页面内容时，通过采用在一个时间节点显示多个视频或图片，且该多个视频或图片以一定的速率，一定的比例动态展示每个视频或图片，克服现有技术中页面内容显示常规化，导致无法给用户良好体验的技术问题，能够给用户带来良好的用户体验，增加用户该应用程序的喜爱程度。本发明广泛应用于移动终端的页面内容显示。

Description

显示页面内容的方法、装置及移动终端

技术领域

本发明涉及移动终端技术领域，尤其是涉及一种显示页面内容的方法、装置及移动终端。

背景技术

随着手机、平板电脑等移动终端的普及，人们越来越多地使用移动终端进行个人信息互动。如何提高用户对应用程序的粘性，一直困扰着各应用程序商家。

例如，已有的母婴类应用程序通常按照时间节点来展示宝宝在每个时间节点的发育状况。如图1所示，该应用程序的显示界面为时间表盘式，滑动时间表盘到一定的角度，显示某个时间节点，例如孕期第100天对应的宝宝发育状况，以及提醒妈妈在该时间节点应注意哪些事项。这类应用程序中大多是一个时间节点对应一张图片或一段文字，并且，显示形式单一，无法在用户浏览移动终端的页面内容时，给用户带来体验乐趣。

发明内容

本发明实施例旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本发明实施例的一个目的是提供一种显示页面内容的方法、装置及移动终端，以给用户带来更多的使用乐趣。

本发明实施例所采用的技术方案是：

第一方面，本发明提供一种移动终端显示页面内容的方法，该方法包括：当接收到触发时间节点菜单的操作，获取该时间节点菜单对应的时间节点；在显示区域动态显示该时间节点对应的多个视频和/或图片。

其中，在显示区域动态显示该时间节点对应的多个视频和/或图片，包括以下步骤：S42、从该时间节点对应的队列结构中依次获取预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构；S43、完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分；S44、隐藏置顶图片，并将该置顶图片存入队列结构队尾，使该叠加图片的下一张置顶；同时从队列结构中取出一个图片，与该叠加图片叠加，并置底；S45、判断该时间节点对应的所有图片是否都已经置顶显示，如果是，执行步骤S46；否则，执行步骤S42；S46、结束该时间节点的图片显示。

其中，该显示区域包括一个或多个子显示区域；每个子显示区域显示该时间节点的一个内容；每个内容包含多个视频和/或图片。

其中，在显示区域动态显示该时间节点对应的多个视频和/或图片，包括：在该多个子显示区域分别显示该时间节点对应的多个内容；当接收到在任意一个子显示区域的特定滑动操作时，该时间节点菜单相应切换为该特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

其中，在显示区域动态显示该时间节点对应的多个视频和/或图片，包括：依次显示该时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

第二方面，本发明提供一种移动终端显示页面内容的装置，该装置包括：时间节点获取模块，用于当接收到触发时间节点菜单的操作时，获取该时间节点菜单对应的时间节点；和显示模块，用于在显示区域动态显示该时间节点对应的多个视频和/或图片。

其中，该显示模块包括：图片获取单元，用于从该时间节点对应的队列结构中依次获取预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构；图片叠加单元，用于完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分；图片替换单元，用于隐藏置顶图片，并将该置顶图片存入队列结构队尾，使该叠加图片的下一张置顶；同时从队列结构中取出一个图片，与该叠加图片叠加，并置底；图片显示判断单元，用于判断该时间节点对应的所有图片是否都已经置顶显示，如果是，结束该时间节点的图片显示；否则，调用该图片叠加单元进行叠加图片；以及图片显示结束单元，用于结束该时间节点的图片显示。

其中，该显示区域包括一个或多个子显示区域；每个子显示区域显示该时间节点的一个内容；每个内容包含多个视频和/或图片；该显示模块包括：子区域显示单元，用于在该多个子显示区域分别显示该时间节点对应的多个内容；和联动显示单元，用于当接收到在任意一个子显示区域的特定滑动操作时，该时间节点菜单相应切换为该特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

其中，该显示模块包括：图片展示单元，用于依次显示该时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

第三方面，本发明提供一种移动终端，该移动终端包括如上述的装置。

本发明实施例的技术方案在移动终端显示页面内容时，通过采用在一个时间节点动态显示多个视频或图片，克服现有技术中页面内容显示常规化，导致无法给用户良好体验的技术问题，能够给用户带来良好的用户体验，从而使用户增加对使用该应用程序的喜爱程度。

进一步地，显示某个时间节点的每个图片时，先以第一速度、第一比例逐渐显示该图片，然后以第二速度渐隐该图片，方便用户区分图片和清晰地观看图片，提供给用户良好的视觉体验。

进一步地，在显示某个时间节点的多张图片时，还可以叠加和替换显示，给用户提供更丰富的用户体验。

另外，本发明的显示区域还具有多个子显示区域，对应一个时间节点可同时显示多个子显示区域的内容，且在任一子显示区域滑动，其他子显示区域可联动显示。给用户提供更多的显示和使用体验乐趣。

本发明广泛应用于移动终端的页面内容显示。

附图说明

图1是现有的移动终端显示页面内容方法的一实施例的结构示意图；

图2是本发明移动终端显示页面内容方法的第一实施例的流程示意图；

图3是本发明移动终端显示页面内容方法的第二实施例的流程示意图；

图4是本发明移动终端显示页面内容方法的第三实施例的流程示意图；

图5是图4的步骤S43的一应用实施例的结构示意图；

图6是图5的一变化状态的结构示意图；

图7是图5的另一变化状态的结构示意图；

图8是图5的又一变化状态的结构示意图；

图9是本发明移动终端显示页面内容方法的第四实施例的流程示意图；

图10是图9的步骤S91的一应用实施例的结构示意图；

图11是本发明移动终端显示页面内容装置的第一实施例的结构示意图；

图12是本发明移动终端显示页面内容装置的第二实施例的结构示意图；

图13是本发明移动终端显示页面内容装置的第三实施例的结构示意图；

图14是本发明移动终端显示页面内容装置的第四实施例的结构示意图。

具体实施方式

下面结合说明书附图和具体实施方式对本发明做出详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下文所述的“多个”包括两个、三个及三个以上。

实施例一：

请参阅图2，图2是本发明移动终端显示页面内容方法的第一实施例的流程示意图。如图2所示，该流程示意图包括步骤：

S21：当接收到触发时间节点菜单的操作时，获取该时间节点菜单对应的时间节点；

在步骤S21中，该触发时间节点菜单的操作包括如下形式中的一种或多种的组合：

(1)点击时间菜单的操作；

(2)向左或向右滑动时间节点菜单的操作；

(3)向左或向右滑动显示区域的操作。

在本实施例中，上述多种操作均可实现触发时间节点菜单的操作，方便用户操作和浏览。以下具体讲述第(3)种形式的实现方法：接收到向左或向右滑动显示区域的操作时，时间节点菜单上的显示时间会对应显示成上一个或下一个时间节点的时间。与此同时，显示区域的内容，比如文字和/或背景图片，也随着一起向左或向右移动。也就是说，当前时间节点的显示内容逐渐减少，下一个时间节点的显示内容逐渐增多；当显示区域的下一个时间节点的显示内容沿横向方向超过显示区域的宽度的1/2时，显示区域显示下一个时间节点的显示内容。

S22：在显示区域动态显示该时间节点对应的多个视频和/或图片；

其中，也可以在显示视频或图片的同时，显示文字。例如，采用卡片形式显示页面内容，在卡片中显示时间节点(如孕期或宝宝天数)菜单、文字内容(如孕期或宝宝天数对应的提示信息)，嵌入多个视频或图片作为卡片的背景，提高用户浏览的体验。

其中，按照视频或图片被上传至该应用程序的时间顺序，在显示区域显示该多个视频和/或图片。例如，在某个时间节点，例如孕期第100天，妈妈上传了记录当天心情的三张图片或照片和一个视频，则根据视频或图片上传至该应用程序的时间顺序，在显示区域依次显示该上传视频或图片。因此用户可按照自己上传视频或图片的先后顺序，逐个观看视频或图片，方便用户观看视频或图片。

其中，为提供给客户图片或视频在切换图片或视频时的动态效果，可以以特定的速度和尺寸比例显示该视频或图片。

在本实施例中，通过采用在一个时间节点显示多个视频或图片，且该多个视频或图片以一定的速率，一定的比例展示该视频或图片，克服现有技术中显示页面内容的形式单一，无法给用户良好体验的技术问题，能够提升用户体验。该多个视频或图片可以直接作为主要显示内容，也可以作为辅助背景，根据页面的实际应用场景需要而定。

实施例二：

请参阅图3，图3是本发明移动终端显示页面内容方法的第二实施例的流程示意图。如图3所示，该流程示意图包括如下步骤：

S31：当接收到触发时间节点菜单的操作时，获取该时间节点菜单对应的时间节点；

其中，步骤S31同步骤S21，在此不作赘述。

S32：依次显示该时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

在步骤S32中，例如，在3000ms内，第一比例采用原比例的1.1，即以逐渐放大10％的方式显示第一个图片(或照片)，接着在500ms内渐隐该第一个图片，第一个图片的显示过程结束。然后，采用同样的方法显示第二个图片、第三个图片，直到所有图片显示完成。

在本实施例中，移动终端显示某个时间节点的每个图片时，先以第一速度、第一比例逐渐显示该图片，然后以第二速度渐隐该图片，方便用户区分图片和清晰地观看图片，提供给用户良好的视觉体验。

实施例三：

请参阅图4，图4是本发明移动终端显示页面内容方法的第三实施例的流程示意图。如图4所示，该流程示意图包括如下步骤：

S41：当接收到触发时间节点菜单的操作时，获取该时间节点菜单对应的时间节点；

其中，步骤S41同步骤S21，在此不作赘述。

S42：从该时间节点对应的队列结构中依次取出预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构，该队列结构具有先进先出的特性；

在步骤S42中，如果该时间节点菜单对应的所有图片的数量为9张，比如宝宝在1岁生日当天上传了9张照片，则该队列结构中存入9张图片，设定在页面上叠加显示3张图片。

S43：完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分；

在步骤S43中，如图5举例所示，滑动时间节点菜单到“宝宝1岁”时间节点时，在显示区域叠加显示3张图片，其余6张图片隐藏。其中，置顶图片51完全显示，图片52和图片53仅显示未被覆盖部分。在其他实施例中，也可以设置图片51、图片52及图片53采用其他的叠加方式，比如完全叠加或不重合叠加。

可选地，置顶图片51的显示效果为：在3000ms内逐渐放大10％显示如图5所示的置顶图片51，置顶图片51在3000ms显示完成后，在500ms内渐隐该置顶图片51。

S44：隐藏置顶图片，并将该置顶图片存入队列结构队尾，使该叠加图片的下一张置顶；同时从队列结构队头取出一个图片，与该叠加图片叠加，并置底；在本实施例中，完全显示叠加图片中置顶的图片时，以第一速度、第一比例逐渐显示，以第一速度渐隐；

在步骤S44中，如图6所示，图片51显示完成后隐藏，图片52取代图片51的位置，置顶显示，图片53取代图片52的位置，图片54取代图片53的位置置底。

S45：判断该时间节点对应的所有图片是否都已经置顶显示，如果是，执行步骤S46；否则，执行步骤S43；

S46：结束该时间节点的图片显示。

重复执行步骤S42至步骤S46，逐个加载该时间节点(宝宝1岁)上传的剩余图片，如图7和图8所示，当显示图片为图片57、图片58及图片59时，在3000ms内逐渐放大10％显示图片57，然后在500ms内渐隐该图片57。图片57显示完成后隐藏，图片58取代图片57的位置，即置顶，图片59取代图片58的位置，图片51取代图片59的位置，即置底。

继续加载剩余图片，直到该时间节点(宝宝1岁)对应的所有的图片置顶显示，即第一个图片至第九个图片都置顶显示。

在实施例三中，可以进行图片叠加和替换显示，给用户提供更多的观看体验乐趣。

实施例四：

在本实施例中，显示区域包括一个或多个子显示区域，每个子显示区域显示当前时间节点的一个内容(子显示区域数量可以与当前时间节点对应的内容数量相同，也可为固定值，等于时间节点菜单的时间节点对应的最多内容数量)，每个子显示区域对应的内容包含多个视频和/或图片；图9是本发明实施例四的流程示意图，如图9所示，当一个时间节点菜单被激活(如点击对应时间菜单)后，本实施例提供的移动终端的显示页面内容的方法包括如下步骤：

S91：在该多个子显示区域分别显示该时间节点对应的多个内容；

其中，如图10所示，显示区域包括两个子显示区域：第一子显示区域和第二子显示区域，第一子显示区域为宝宝状态显示区域；第二子显示区域为妈妈状态显示区域。

当第一时间节点菜单的显示条件触发，则宝宝状态显示区域和妈妈状态显示区域分别显示该第一时间节点对应的宝宝状态和妈妈状态。当第二时间节点菜单的显示条件触发，则宝宝状态显示区域和妈妈状态显示分别显示的第二时间节点对应的宝宝状态和妈妈状态。

S92：当接收到在任意一个子显示区域的特定滑动操作时，该时间节点菜单相应切换为该特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

其中，如图10所示，假如，当前激活的时间节点菜单为第一时间节点菜单，在宝宝显示区域向左滑动到沿横向方向超过宝宝显示区域的宽度的1/2时，宝宝显示区域显示为第二时间节点对应的宝宝的内容，与此同时，妈妈显示区域同步显示为第二时间节点对应的妈妈的内容。同样地，假如，当前激活的时间节点菜单为第一时间节点菜单，在妈妈显示区域向左滑动到沿横向方向超过妈妈显示区域的宽度的1/2时，妈妈显示区域显示为第二时间节点对应的妈妈的内容，与此同时，宝宝显示区域同步显示为第二时间节点对应的宝宝的内容。

在本实施例中，任一子显示区域显示视频或图片的方法可以与实施例一的步骤S22、实施例二的步骤S32及实施例三的步骤S42～S46相同，在此不作赘述。

在本实施例中，本发明的显示区域还具有多个子显示区域，在一个时间节点可同时显示多个子显示区域的内容，且在任一子显示区域滑动，其他子显示区域可联动显示，给用户提供更多的显示和使用体验乐趣。在其他实施例中，显示区域的子显示区域的数量不作限定，可以包括三个或三个以上。

实施例五：

请参阅图11，图11是本发明移动终端显示页面内容装置的第一实施例的结构示意图。如图11所示，该装置包括时间节点获取模块111和显示模块112。

时间节点获取模块111，用于当接收到触发时间节点菜单的操作时，获取该时间节点菜单对应的时间节点。其中，时间节点获取模块111包括：点击操作获取单元(图未示)，用于获取触发该时间节点菜单的点击动作；和/或滑动时间节点菜单操作获取单元(图未示)，用于获取触发该时间节点菜单的滑动时间节点菜单动作；和/或滑动显示区域操作获取单元(图未示)，用于获取触发该时间节点菜单的滑动显示区域动作。

显示模块112，用于动态显示该时间节点对应的多个视频和/或图片。优选地，显示模块112还用于按照视频或图片被上传至该应用程序的时间顺序，在该显示区域显示该多个视频和/或图片。

具体地，时间节点获取模块111和显示模块112的工作方法与实施例一所述的显示方法相同，在此不再赘述。

实施例六：

请参阅图12，图12是本发明移动终端显示页面内容装置的第二实施例的结构示意图。如图12所示，显示模块112包括图片展示单元1121，图片展示单元1121用于依次显示该时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

具体地，图片展示单元1121的显示方法与实施例二所述的显示方法相同，在此不再赘述。

实施例七：

请参阅图13，图13是本发明移动终端显示页面内容装置的第三实施例的结构示意图。如图13所示，该装置的显示模块212包括图片获取单元2121、图片叠加单元2122、图片替换单元2123、图片显示判断单元2124以及图片显示结束单元2125。

图片获取单元2121，用于从该时间节点对应的队列结构中依次获取预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构。

图片叠加单元2122，用于完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分。

图片替换单元2123，用于隐藏置顶图片，并将该置顶图片存入队列结构队尾，使该叠加图片的下一张置顶；同时从队列结构中取出一个图片，与该叠加图片叠加，并置底。

图片显示判断单元2124，用于判断该时间节点对应的所有图片是否都已经置顶显示，如果是，调用图片显示结束单元2125结束该时间节点的图片显示；否则，调用图片叠加单元2122进行叠加图片。

图片显示结束单元2125，用于结束该时间节点的图片显示。

具体地，显示模块212的显示方法与实施例三所述的显示方法相同，在此不再赘述。

实施例八：

请参阅图14，图14是本发明移动终端显示页面内容装置的第四实施例的结构示意图。如图14所示，该装置的显示模块包括312包括多个子区域显示单元3121和联动显示单元3122。

多个子区域显示单元3121，用于在该多个子显示区域分别显示该时间节点对应的多个内容。

联动显示单元3122，用于当接收到在任意一个子显示区域的特定滑动操作时，该时间节点菜单相应切换为该特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

具体地，显示模块312的显示方法与实施例四所述的显示方法相同，在此不再赘述。

实施例九：

本发明还提供一种移动终端，该移动终端包括如实施例五或实施例六或实施例七或实施例八所述的装置。

以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (10)

1.一种移动终端显示页面内容的方法，其特征在于，包括：

当接收到触发时间节点菜单的操作，获取所述时间节点菜单对应的时间节点；

在显示区域动态显示所述时间节点对应的多个视频和/或图片。

2.根据权利要求1所述的方法，其特征在于，在显示区域动态显示所述时间节点对应的多个视频和/或图片，包括以下步骤：

S42、从该时间节点对应的队列结构中依次获取预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构；

S43、完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分；

S44、隐藏置顶图片，并将所述置顶图片存入队列结构队尾，使所述叠加图片的下一张置顶；同时从所述队列结构中取出一个图片，与所述叠加图片叠加，并置底；

S45、判断所述时间节点对应的所有图片是否都已经置顶显示，如果是，执行步骤S46；否则，执行步骤S43；

S46、结束所述时间节点的图片显示。

3.根据权利要求1所述的方法，其特征在于，所述显示区域包括一个或多个子显示区域；

每个子显示区域显示所述时间节点的一个内容；每个内容包含多个视频和/或图片。

4.根据权利要求3所述的方法，其特征在于，在显示区域动态显示所述时间节点对应的多个视频和/或图片，包括：

在所述多个子显示区域分别显示所述时间节点对应的多个内容；

当接收到在任意一个子显示区域的特定滑动操作时，所述时间节点菜单相应切换为所述特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

5.根据权利要求1至4任一项所述的方法，其特征在于，在显示区域动态显示所述时间节点对应的多个视频和/或图片，包括：

依次显示所述时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

6.一种移动终端显示页面内容的装置，其特征在于，包括：

时间节点获取模块，用于当接收到触发时间节点菜单的操作时，获取所述时间节点菜单对应的时间节点；和

显示模块，用于在显示区域动态显示所述时间节点对应的多个视频和/或图片。

7.根据权利要求6所述的装置，其特征在于，所述显示模块包括：

图片获取单元，用于从该时间节点对应的队列结构中依次获取预设数量的图片进行叠加；其中，该时间节点的所有图片按照图片显示先后顺序依次存入该队列结构；

图片叠加单元，用于完全显示叠加图片中置顶的图片，其它图片仅显示未被覆盖部分；

图片替换单元，用于隐藏置顶图片，并将所述置顶图片存入队列结构队尾，使所述叠加图片的下一张置顶；同时从队列结构中取出一个图片，与所述叠加图片叠加，并置底；

图片显示判断单元，用于判断所述时间节点对应的所有图片是否都已经置顶显示，如果是，结束所述时间节点的图片显示；否则，调用所述图片叠加单元进行叠加图片；以及

图片显示结束单元，用于结束所述时间节点的图片显示。

8.根据权利要求6所述的装置，其特征在于，所述显示区域包括一个或多个子显示区域；每个子显示区域显示所述时间节点的一个内容；每个内容包含多个视频和/或图片；所述显示模块包括：

多个子区域显示单元，用于在所述多个子显示区域分别显示所述时间节点对应的多个内容；和

联动显示单元，用于当接收到在任意一个子显示区域的特定滑动操作时，所述时间节点菜单相应切换为所述特定滑动操作对应的时间节点，同时其他子显示区域联动显示新时间节点对应的内容。

9.根据权利要求6至8任意一项所述的装置，其特征在于，所述显示模块包括：

图片展示单元，用于依次显示所述时间节点对应的所有图片，且每张图片以第一速度、第一比例逐渐显示，以第二速度渐隐。

10.一种移动终端，其特征在于，包括如权利要求6至9任意一项所述的装置。