CN110825997A - 信息流页面的显示方法、装置、终端设备及系统 - Google Patents

Abstract

本发明公开了一种信息流页面的显示方法、装置、终端设备及系统，该显示方法包括：获取信息流页面并进行显示，其中，信息流页面中包括至少一个信息流卡片，信息流卡片中包括用于显示第一图片的图片框；检测更新所述信息流卡片的事件；根据检测该事件的检测结果，将图片框内显示的第一图片切换为第二图片。通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。

Description

信息流页面的显示方法、装置、终端设备及系统

技术领域

本发明涉及互联网技术领域，更具体地，涉及一种信息流页面的显示方法、信息流页面的显示装置、终端设备、及信息流页面的显示系统。

背景技术

随着移动终端和互联网技术的普及，人们越来越多地使用移动端(例如，智能手机)来进行信息获取。出于展示信息量和移动端屏幕大小的考虑，一般采用将应用程序信息流拆分为多个信息流卡片，每一信息流卡片为一基本的信息单位，拆分的多个信息流卡片以流线型的方式在界面中呈现。信息流卡片中通常展示各条信息的标题(有时还会包括简介)和图片。

如果在一个信息流卡片里面需要多个图片区域展示多张图片的话这会占用非常多的卡片空间，可能会耗费用户较多的流量，影响用户体验。如果在一个信息流卡片中仅通过一个图片区域显示一张图片的话，可能会使得用户点击该信息流卡片的几率较低，影响信息流卡片的点击率。

针对上述问题，提出一种能够切换图片框内显示的图片的新的信息流页面的显示方案。

发明内容

本发明的一个目的是提供一种能够切换图片框内显示的图片的新的技术方案。

根据本发明的第一方面，提供了一种信息流页面的显示方法，包括：

获取信息流页面中的信息流卡片，其中所述信息流卡片包括用于显示图片的图片框；

检测更新所述信息流卡片的事件；

根据检测到所述事件的检测结果，将所述图片框内显示的第一图片切换为第二图片。

可选的是，所述更新所述信息流卡片的事件包括以下任意一项或多项：

所述信息流卡片在所述信息流页面中的显示位置发生改变；

所述信息流卡片在所述信息流页面中的移动距离超过预先设定的距离阈值；

所述信息流卡片中所述第一图片的显示时长超过预先设定的时长阈值。

可选的是，所述更新所述信息流卡片的事件包括所述信息流卡片在所述信息流页面中的显示位置发生改变；

所述根据检测到所述事件的检测结果，将所述图片框内显示的所述第一图片切换为第二图片的步骤包括：

在所述信息流卡片在所述信息流页面中的显示位置由预设的第一区域变化为预设的第二区域的情况下，将所述图片框内显示的对应所述第一区域的第一图片切换为对应所述第二区域的第二图片。

可选的是，所述显示方法还包括：

获取所述信息流页面的尺寸；

根据所述信息流页面的尺寸确定所述第一区域和所述第二区域。

可选的是，所述显示方法还包括：

获取对应所述图片框内的图片的数量；

根据所述图片的数量和所述信息流页面的尺寸确定所述第一区域和所述第二区域。

可选的是，所述显示方法还包括：

获取进行所述切换的切换方式；

其中，所述将所述图片框内显示的第一图片切换为第二图片包括：根据所述切换方式将所述图片框内显示的第一图片切换为第二图片。

可选的是，所述根据所述切换方式将所述图片框内显示的第一图片切换为第二图片的步骤包括：

根据检测到的所述事件，确定所述信息流卡片发生改变的对象；

根据所述对象的当前值计算所述第一图片的图片变化参数和所述第二图片的图片变化参数；其中，所述图片变化参数与所述切换方式对应，且所述图片变化参数至少包括显示透明度或者在所述图片框中的位置；

根据所述第一图片的图片变化参数控制所述信息流卡片取消显示所述第一图片，并根据所述第二图片的图片变化参数控制所述信息流卡片显示所述第二图片。

可选的是，所述信息流卡片发生改变的对象为所述信息流卡片在所述信息流页面中的显示位置；所述显示方法还包括：

根据所述信息流卡片在所述信息流页面中的显示位置，确定所述信息流卡片在所述信息流页面中的高度；

获取所述信息流页面的高度；以根据所述信息流页面的高度、及所述信息流卡片在所述信息流页面中的显示高度计算所述第一图片的图片变化参数和所述第二图片的图片变化参数。

可选的是，所述显示方法还包括：

获取对应所述图片框的图片的数量，以还根据所述图片的数量计算所述第一图片的图片变化参数和所述第二图片的图片变化参数。

根据本发明的第二方面，提供了一种信息流页面的显示装置，包括：

页面获取模块，用于获取信息流页面并进行显示，其中，所述信息流页面中包括至少一个信息流卡片，所述信息流卡片中包括用于显示第一图片的图片框；

事件检测模块，用于检测更新所述信息流卡片的事件；以及，

图片切换模块，用于根据检测到所述事件的检测结果，将所述图片框内显示的所述第一图片切换为第二图片。

根据本发明的第三方面，提供了一种终端设备，包括根据本发明第二方面所述的显示装置；或者，包括存储器和处理器，所述存储器用于存储指令，所述指令用于控制所述处理器执行根据本发明第一方面所述的显示方法。

根据本发明的第四方面，提供了一种信息流页面的显示系统，包括服务器和根据本发明第三方面所述的终端设备，所述服务器用于将所述信息流页面的内容下发至所述终端设备。

本发明的一个有益效果在于，通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

通过以下参照附图对本发明的示例性实施例的详细描述，本发明的其它特征及其优点将会变得清楚。

附图说明

被结合在说明书中并构成说明书的一部分的附图示出了本发明的实施例，并且连同其说明一起用于解释本发明的原理。

图1为可用于实现本发明的实施例的显示系统的硬件配置的例子的框图；

图2为现有的信息流页面的示意图；

图3为本发明的信息流页面的显示方法的一种实施方式的流程图；

图4为本发明的信息流页面的显示方法的另一种实施方式的流程图；

图5a为本发明一个实施例中信息流卡片的示意图；

图5b为本发明一个实施例中信息流卡片的示意图；

图5c为本发明一个实施例中信息流卡片的示意图；

图5d为本发明一个实施例中信息流卡片的示意图；

图6为本发明的信息流页面的显示装置的一种实施结构的方框原理图；

图7为本发明的信息流页面的显示装置的另一种实施结构的方框原理图；

图8为本发明的信息流页面的显示装置的再一种实施结构的方框原理图；

图9为本发明的终端设备的一种实施结构的方框原理图；

图10为本发明的信息流页面的显示系统的一种实施结构的方框原理图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

在这里示出和讨论的所有例子中，任何具体值应被解释为仅仅是示例性的，而不是作为限制。因此，示例性实施例的其它例子可以具有不同的值。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

<硬件配置>

如图1所示，显示系统1000包括服务器1100、终端设备1200以及网络1300。

服务器1100例如可以是刀片服务器等。在一个例子中，服务器1100可以是一台计算机。在在另一个例子中，服务器1100可以如图1所示，包括处理器1110、存储器1120、接口装置1130、通信装置1140、显示装置1150、输入装置1160。尽管服务器也可以包括扬声器、麦克风等等，但是，这些部件与本发明无关，故在此省略。其中，处理器1110例如可以是中央处理器CPU、微处理器MCU等。存储器1120例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置1130例如包括USB接口、串行接口等。通信装置1140例如能够进行有线或无线通信。显示装置1150例如是液晶显示屏。输入装置1160例如可以包括触摸屏、键盘等。

终端设备1200可以是便携式电脑(1200-1)、台式计算机(1200-2)、手机(1200-3)、平板电脑(1200-4)等。如图1所示，终端设备1200可以包括处理器1210、存储器1220、接口装置1230、通信装置1240、显示装置1250、输入装置1260、扬声器1270、麦克风1280，等等。其中，处理器1210可以是中央处理器CPU、微处理器MCU等。存储器1220例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。接口装置1230例如包括USB接口、耳机接口等。通信装置1240例如能够进行有线或无线通信。显示装置1250例如是液晶显示屏、触摸显示屏等。输入装置1260例如可以包括触摸屏、键盘等。用户可以通过扬声器1270和麦克风1280输入/输出语音信息。

通信网络1300可以是无线网络也可以网络，可以是局域网也可以是广域网。在图1所示的配置环境1000中，终端设备1200-1、1200-2、1200-3、1200-4以及服务器1100可以通过通信网络1300进行通信。

图1所示的配置环境1100仅是解释性的，并且决不是为了要限制本发明、其应用或用途。

应用于本发明的实施例中，服务器1100的存储器1120用于存储指令，所述指令用于控制处理器1110向终端设备1200下发信息流页面。

终端设备1200的存储器1220用于存储指令，所述指令用于控制处理器1210进行操作以执行本发明实施例提供的任意一项显示方法。本领域技术人员应当理解，尽管在图1中对服务器1100以及终端设备1200都示出了多个装置，但是，本发明可以仅涉及其中的部分装置，例如，服务器1100只涉及处理器1110、存储器1120、通信装置1140和显示装置1150，或者终端设备1200只涉及处理器1210、存储器1220和通信装置1240等。技术人员可以根据本发明所公开方案设计指令。指令如何控制处理器进行操作，这是本领域公知，故在此不再详细描述。

本发明实施例的总体构思，是提供一种新的显示信息流页面的技术方案。通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

<方法>

在本实施例中，提供一种信息流页面的显示方法。该显示方法可以是由终端设备实施。

该终端设备可以是具有显示功能的电子产品，例如可以是便携式电脑、台式计算机、手机、平板电脑等。在一个例子中，终端设备可以是图1所示的终端设备1200。

信息流页面的浏览逐渐成为人们获取信息的手段和入口。信息流(常被称为Feed)指的是一种用于给用户提供持续更新的内容的展现方式，目前已广泛被使用于内容聚合类的产品。呈现的信息流页面通常包括分块的多个信息流卡片，信息流卡片内可以显示文字和图片框，文字可以是标题或简介。点击信息流卡片后可以打开正文页进行阅读。图2示出了现有的信息流页面的一个实施例。

信息流页面的内容下发涉及将内容从服务端推送到客户端的过程。与上述信息流页面呈现的形态相对应，内容下发也涉及两种形态。一是在目前主流的新闻类或浏览器类应用中，响应于终端设备的请求，服务器将信息流页面的内容下发至终端设备。二是在用户订阅号(例如，微信中的订阅号)中，服务器端在一定时刻进行信息流页面的内容下发，终端设备即时接收或是在下一次打开应用时接收的方式。

图3为本发明的信息流页面的显示方法的一种实施方式的流程图。

如图3所示，该信息流页面的显示方法可以包括如下步骤S3100～S3300。

步骤S3100，获取信息流页面中的信息流卡片。

信息流页面中包括至少一个信息流卡片，且信息流卡片包括用于显示图片的图片框。

如图2所示，信息流卡片中通过图片框来显示图片。信息流卡片中可以包括一个图片框，也可以包括多个图片框。

在终端设备每次接收到服务器下发的信息流页面的内容时，信息流卡片可以是位于信息流页面中任意位置上。

在本发明的一个实施例中，从用户角度来看，在终端设备每次接收到服务器下发的信息流页面的内容时，可以是信息流卡片中的图片框内仅显示有第一图片。

该步骤S3100中的信息流页面具体可以是指要在信息流页面显示的内容。

该步骤S3100可以是由终端设备在接收外到部输入的页面获取指令(例如，用户在浏览时的下拉操作、或者点击信息流页面上方任意分类标签的操作、或者点击返回键的操作)的情况下主动触发的。具体的，可以是终端设备在接收到外部输入的页面获取指令时，会向服务器发送页面获取请求。服务器响应于该页面获取请求，向该终端设备下发信息流页面显示的内容。

该步骤S3100还可以是被动接收的。具体的，可以是服务器在一定时刻进行信息流页面的内容下发，终端设备即时获取信息流页面或是在下一次打开应用时获取信息流页面显示的内容。

步骤S3200，检测更新信息流卡片的事件。

更新信息流卡片的事件可以包括以下任意一项或多项：

信息流卡片在信息流页面中的显示位置发生改变；

信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值；

信息流卡片中第一图片的显示时长超过预先设定的时长阈值。

在一个例子中，用户针对触摸屏上信息流卡片所在位置执行按压滑动操作、用户针对终端设备执行触屏滑动操作、用户通过鼠标等外设执行滑动操作、或者用户针对终端设备显示的界面上设定位置(例如是滚动条)执行点击操作等用户操作，可以触发信息流卡片在信息流页面中的显示位置发生改变的事件，也可以触发信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值的事件。

在一个例子中，信息流卡片中第一图片的显示时长超过预先设定的时长阈值的事件可以不需要用户操作来触发。

步骤S3300，根据检测该事件的检测结果，将图片框内显示的第一图片切换为第二图片。

具体的，可以是在检测到更新信息流卡片的事件的情况下，将图片框内显示的第一图片切换为第二图片。

例如，在检测到更新信息流卡片的事件之前，图片框内显示第一图片，此时，信息流卡片可以如图5a所示。在检测到更新信息流卡片的事件的情况下，图片框内显示的第一图片切换为第二图片，此时，信息流卡片可以是如图5b所示。

在更新信息流卡片的事件为信息流卡片在信息流页面中的显示位置发生改变的实施例中，信息流卡片在信息流页面中的显示位置可以是信息流卡片上任意一点在信息流页面中的位置。例如可以但不限于是信息流卡片下边缘中心点的位置、或者信息流卡片上边缘中心点的位置、或者信息流卡片中心点的位置等。

在本发明的一个例子中，根据信息流卡片在信息流页面中的显示位置，将图片框内显示的第一图片切换为第二图片具体方式可以为：

在信息流卡片在信息流页面中的显示位置由预设的第一区域变化为预设的第二区域的情况下，将图片框内显示的对应第一区域的第一图片切换为对应第二区域的第二图片。

那么，在移动信息流卡片在信息流页面中的显示位置的过程中，如果信息流卡片在信息流页面中的显示位置从第一区域变化为第二区域，则可以将图片框内显示的第一图片切换为第二图片；如果信息流卡片在信息流页面中的显示位置从第二区域变化为第一区域，则可以将图片框内显示的第二图片切换为第一图片。

如果信息流卡片在信息流页面中的显示位置变化为第一区域和第二区域以外的其他区域，图片框内可以显示第三图片，也可以是显示信息流卡片移动之前显示的第一图片不做切换。

例如，在移动信息流卡片在信息流页面中的显示位置的过程中，如果信息流卡片在信息流页面中的显示位置从第一区域变化为其他区域，图片框内可以一直显示第一图片，无需将第一图片切换为第二图片；如果信息流卡片在信息流页面中的显示位置从第二区域变化为其他区域，图片框内可以一直显示第二图片，无需将第二图片切换为第一图片。

再例如，在移动信息流卡片在信息流页面中的显示位置的过程中，如果信息流卡片在信息流页面中的显示位置从第一区域变化为其他区域，可以将图片框内显示的第一图片切换为第三图片；如果信息流卡片在信息流页面中的显示位置从其他区域变化为第二区域，可以将图片框内显示的第三图片切换为第二图片；如果信息流卡片在信息流页面中的显示位置从第二区域变化为其他区域，可以将图片框内显示的第二图片切换为第三图片；如果信息流卡片在信息流页面中的显示位置从其他区域变化为第一区域，可以将图片框内显示的第三图片切换为第一图片。

第一区域和第二区域可以预先根据使用场景设定。例如，可以是将距信息流页面底部为10cm内的范围设定为第一区域，将距信息流页面顶部为10cm内的范围设定为第二区域。

进一步地，该显示方法还可以包括：获取信息流页面的尺寸，根据信息流页面的尺寸确定第一区域和第二区域。例如，可以是按照预先设定的比例将信息流页面划分为第一区域和第二区域，其中，预先设定的比例可以是1：N，N为任意正数。

再进一步地，该显示方法还可以包括：获取对应图片框的图片的数量；根据图片数量和信息流页面的尺寸确定第一区域和第二区域。

如果图片框内显示的第一图片可以切换为第二图片，第二图片还可以切换为第三图片，那么，第一图片、第二图片和第三图片均为对应图片框的图片。因此，对应图片框的图片的数量大于等于2。

在图片框内图片切换的过程中，从用户角度来看，图片框内可以显示一张或两张图片。在图片框内图片切换之前或之后，从用户角度来看，图片框内仅显示有一种图片。

在图片的数量为4的情况下，则表明信息流卡片在信息流页面中移动的过程中，图片框内显示图片可以切换3次，包括将第一图片切换为第二图片、将第二图片切换为第三图片、和将第三图片切换为第四图片。

那么，根据图片数量和信息流页面的尺寸确定第一区域和第二区域则可以包括：将信息流页面分割为与图片数量相同的区域，并将其中的两个区域分别作为第一区域和第二区域。

在更新信息流卡片的事件包括信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值的实施例中，如果信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值，则将图片框内的第一图片切换为第二图片。

该距离阈值可以是预先根据应用场景设定。该距离阈值例如可以但不限于是10cm。那么，可以在检测到信息流卡片在信息流页面中的移动距离超过10cm的情况下，将图片框内的第一图片切换为第二图片。

上述距离阈值可以是与第一图片相对应。还可以预先设置对应第二图片的距离阈值。在将图片框内显示的第一图片切换为第二图片之后，如果信息流卡片在信息流页面中的移动距离超过对应第二图片的距离阈值，则可以将第二图片切换为预设的其他图片。例如可以是切换为第一图片，也可以是切换为第三图片。

在更新信息流卡片的事件包括信息流卡片中第一图片的显示时长超过预先设定的时长阈值的实施例中，如果信息流卡片中第一图片的显示时长超过预先设定的时长阈值，则将图片框内显示的第一图片切换为第二图片。

该时长阈值可以是预先根据应用场景设定。该时长阈值例如可以但不限于是2s。那么，可以在检测到信息流卡片中第一图片的显示时长超过2s的情况下，将图片框内的第一图片切换为第二图片。

上述时长阈值可以是与第一图片相对应。还可以预先设置对应第二图片的时长阈值。在将图片框内显示的第一图片切换为第二图片之后，如果第二图片的显示时长超过对应第二图片的时长阈值，则可以将第二图片切换为预设的其他图片。例如可以是切换为第一图片，也可以是切换为第三图片。

在一个例子中，该显示方法还可以包括：

获取进行切换的切换方式。

具体的，该切换方式例如可以包括渐入渐出、百叶窗、擦除、覆盖、推进、飞入等切换方式。

例如，可以是随机确定切换方式。也可以是预先对所有的切换方式进行排序，按照排序顺序，轮流作为进行切换的切换方式。还可以是预先指定进行切换的切换方式。

还可以是根据步骤S3200中检测的更新信息流卡片的事件，确定与该事件对应的切换方式。例如，可以是在该事件为信息流卡片在信息流页面中的显示位置发生改变的情况下，对应的切换方式为渐入渐出。再例如，可以是在该事件为信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值的情况下，对应的切换方式为百叶窗。

那么，步骤S3300可以进一步为：

根据该切换方式将图片框内显示的第一图片切换为第二图片。

这样，根据该切换方式将图片框内显示的第一图片切换为第二图片，可以实现第一图片和第二图片的动画效果的切换。

在一个例子中，根据该切换方式将图片框内显示的第一图片切换为第二图片可以进一步包括如图4所述的步骤S3310～S3330。

步骤S3310，根据检测的更新信息流卡片的事件，确定信息流卡片发生改变的对象。

在更新信息流卡片的事件为信息流卡片在信息流页面中的显示位置发生改变的实施例中，信息流卡片发生改变的对象可以是信息流卡片在信息流页面中的显示位置。

在更新信息流卡片的事件为信息流卡片在所述信息流页面中的移动距离超过预先设定的距离阈值的实施例中，信息流卡片发生改变的对象可以是信息流卡片在信息流页面中的移动距离。

在更新信息流卡片的事件为信息流卡片中所述第一图片的显示时长超过预先设定的时长阈值的实施例中，信息流卡片发生改变的对象可以是信息流卡片中第一图片的显示时长。

步骤S3320，根据该对象的当前值，计算第一图片的图片变化参数和第二图片的图片变化参数。

具体的，图片变化参数与切换方式对应。例如，在切换方式为渐入渐出、百叶窗、擦除、覆盖的情况下，图片变化参数可以是显示透明度。在切换方式为推进、飞入的情况下，图片变化参数可以是在图片框内的位置。

本实施例中的图片变化参数至少包括显示透明度或者在图片框内的位置，且第一图片的图片变化参数类型和第二图片的图片变化参数类型相同。例如，在第一图片的图片变化参数为显示透明度的情况下，第二图片的图片变化参数也为显示透明度。在第一图片的图片变化参数为在图片框内的位置的情况下，第二图片的图片变化参数也为在图片框内的位置。

步骤S3330，根据第一图片的图片变化参数控制信息流卡片取消显示第一图片，根据第二图片的图片变化参数控制信息流卡片显示第二图片。

这样，可以实现第一图片和第二图片的动画效果的切换。例如，在图片变化参数为显示透明度的情况下，可以实现第一图片和第二图片的渐入渐出、百叶窗、擦除、覆盖等动画效果的切换。在图片变化参数为在图片框内的位置的情况下，可以实现第一图片和第二图片的推进、飞入等动画效果的切换。

在图片变化参数是显示透明度的情况下，执行步骤S3310～S3330的过程中，图片框内可以是同时显示第一图片和第二图片，此时信息流卡片可以是如图5c和图5d所示。

在信息流卡片发生改变的对象为信息流卡片在信息流页面中的显示位置的实施例中，该显示方法还可以包括：

根据信息流卡片在信息流页面中的显示位置确定信息流卡片在信息流页面中的显示高度；获取信息流页面的高度。

该信息流页面的高度可以是信息流页面中能够用于显示信息流卡片的高度。信息流页面的高度例如可以是由显示信息流页面的终端设备的型号决定的。那么，可以预先存储有反映终端设备的型号与信息流页面的高度的对照表。通过获取显示信息流页面的终端设备的型号，并根据该型号查找对照表，可以确定该终端设备显示的信息流页面的高度。

在此基础上，步骤S3320则可以为：根据信息流卡片在信息流页面中的显示高度的当前值、信息流页面的高度，计算第一图片的图片变化参数和第二图片的图片变化参数。

下面以图片变化参数为显示透明度、实现第一图片和第二图片的渐入渐出动画效果的切换为例进行说明。

可以根据下述公式一来计算第一图片的显示透明度a1.alpha和第二图片的显示透明度a2.alpha：

其中，curY为信息流卡片在信息流页面中的显示高度，height为信息流页面的高度。

随着信息流卡片在信息流页面中的显示高度增大，第一图片的显示透明度逐渐由1变为0，而第二图片的显示透明度逐渐由0变为1。这样，就可以根据第一图片的显示透明度控制信息流卡片取消显示第一图片，根据第二图片的显示透明度控制信息流卡片显示第二图片。

根据本实施例来显示第一图片和第二图片的方式中，在切换的过程中，信息流卡片的显示效果可以是如图5c所示。

在图片变化参数为在图片框内的位置、实现第一图片和第二图片的推进的切换为例的实施例中，可以根据信息流卡片在信息流页面中的显示高度的当前值，计算第一图片在图片框内的位置和第二图片在图片框内的位置。实现将第一图片切换为第二图片的效果。

具体的，信息流卡片在信息流页面中的显示高度可以是信息流卡片上边框在信息流页面中的高度，根据信息流卡片上边框在信息流页面中的高度和预先设定的比例，可以计算出第二图片的上边框在图片框内的位置，并将第二图片的上边框在图片框内的位置作为第一图片下边框在图片框内的位置。

例如，信息流卡片上边框在信息流页面中的高度为h1，预先设定的比例可以是0.1，那么，第二图片的上边框在图片框内的位置则可以是0.1*h1。同时，第一图片的下边框与第二图片的上边框的位置重合。根据本实施例来显示第一图片和第二图片的方式中，在切换的过程中，信息流卡片的显示效果可以是如图5d所示。

再进一步地，该显示方法还可以包括：获取对应图片框的图片的数量。

那么，步骤S3320则可以为：根据信息流卡片在信息流页面中的显示高度的当前值、图片的数量、及信息流页面的高度，确定第一图片的图片变化参数和第二图片的图片变化参数。

下面以图片变化参数为显示透明度、实现第一图片和第二图片的渐入渐出动画效果的切换为例进行说明。

具体的，可以预先设定用于在图片框内进行显示的所有图片的显示顺序。在信息流卡片在信息流页面中向上移动的情况下，显示的先后顺序可以为第一张图片、第二张图片、……、第N张图片。

在N＝3的情况下，第一张图片的显示透明度a1.alpha、第二张图片的显示透明度a2.alpha和第三张图片的显示透明度a3.alpha可以通过下述公式二计算得到：

其中，height为信息流页面的高度，curY为信息流卡片在信息流页面中的显示高度。

由于显示透明度的值需大于等于0且小于等于1，因此，在计算得到的第一张图片的显示透明度a1.alpha大于1时，则将第一张图片的显示透明度a1.alpha赋值为1；在计算得到的第一张图片的显示透明度a1.alpha小于0时，则将第一张图片的显示透明度a1.alpha赋值为0。在计算得到的第一张图片的显示透明度a1.alpha大于1时，则将第二张图片的显示透明度a2.alpha赋值为1；在计算得到的第二张图片的显示透明度a2.alpha小于0时，则将第一张图片的显示透明度a1.alpha赋值为0。在计算得到的第一张图片的显示透明度a1.alpha大于1时，则将第三张图片的显示透明度a3.alpha赋值为1；在计算得到的第三张图片的显示透明度a3.alpha小于0时，则将第一张图片的显示透明度a1.alpha赋值为0。

在N>3的情况下，每张图片的显示透明度还可以是根据下述公式三进行计算得到：

其中，height为信息流页面的高度，curY为信息流卡片在信息流页面中的显示高度，N为对应图片框的图片的数量，aN.alpha为第N张图片的显示透明度。

由于显示透明度的值需大于等于0且小于等于1，因此，如果计算得到的aN.alpha>1，则将aN.alpha重新赋值为0。即在计算得到的第N张图片的显示透明度大于1时，将该图片的显示透明度设置为0，从用户角度来看，图片框内不显示该图片。

随着信息流卡片在信息流页面中的显示高度增大，第一图片的显示透明度逐渐由1变为0，同时，第二图片的显示透明度逐渐由0变为1，其他图片的显示透明度持续为0。然后，第二图片的显示透明度还会逐渐由1变为0，同时，第三张图片的显示透明度会逐渐由0变为1，其他图片的显示透明度持续为0，以此类推。这样，就可以根据第一图片的显示透明度控制信息流卡片取消显示第一图片，根据第二图片的显示透明度控制信息流卡片显示第二图片。

在信息流卡片发生改变的对象为信息流卡片在信息流页面中的移动距离的实施例中，可以是根据该对象的当前值和预先设定的距离阈值来计算第一图片的图片变化参数和第二图片的图片变化参数。

例如，图片变化参数为显示透明度，预先设定的距离阈值为L，信息流卡片在信息流页面中的移动距离的当前值为l，其中，l≤L，第一图片的显示透明度可以是

第二图片的显示透明度可以是

在信息流卡片发生改变的对象为信息流卡片中第一图片的显示时长的实施例中，可以是根据该对象的当前值和预先设定的时长阈值来计算第一图片的图片变化参数和第二图片的图片变化参数。

例如，图片变化参数为显示透明度，预先设定的时长阈值为T，信息流卡片中第一图片的显示时长的当前值为t，其中，t≤T，第一图片的显示透明度可以是

第二图片的显示透明度可以是

以上已经结合附图描述了本实施例，根据本实施例，提供一种信息流页面的显示方法，通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

<例子>

在图像数量为3、图片变化参数为显示透明度的情况下，根据信息流卡片在信息流页面中的显示位置，确定第一图片的显示透明度a1.alpha、第二图片的显示透明度a2.alpha和第三图片的显示透明度a3.alpha的代码可以为：

<装置>

与上述方法相对应的，本发明还提供了一种信息流页面的显示装置。图6为本发明信息流页面的显示装置的一种实施结构的方框原理图。

根据图6所示，该显示装置包括页面获取模块6100、事件检测模块6200和图片切换模块6300。该页面获取模块6100用于获取信息流页面并进行显示，其中，信息流页面中包括至少一个信息流卡片，信息流卡片中包括用于显示第一图片的图片框；该事件检测模块6200用于检测更新所述信息流卡片的事件；该图片切换模块6300用于根据检测到所述事件的检测结果，将图片框内显示的第一图片切换为第二图片。

具体的，更新信息流卡片的事件包括以下任意一项或多项：

信息流卡片在信息流页面中的显示位置发生改变；

信息流卡片在信息流页面中的移动距离超过预先设定的距离阈值；

信息流卡片中第一图片的显示时长超过预先设定的时长阈值。

在更新信息流卡片的事件包括信息流卡片在信息流页面中的显示位置发生改变的情况下，该图片切换模块6300还可以用于：在信息流卡片在信息流页面中的显示位置由预设的第一区域变化为预设的第二区域的情况下，将图片框内显示的对应第一区域的第一图片切换为对应第二区域的第二图片。

在本发明的一个实施例中，如图7所示，该显示装置还可以包括尺寸获取模块7100和区域确定模块7200。该尺寸获取模块7100用于获取信息流页面的尺寸；该区域确定模块7200用于根据信息流页面的尺寸确定第一区域和第二区域。

进一步地，该显示装置还可以包括数量获取模块7300，用于获取对应图片框的图片的数量。区域确定模块7200还可以用于根据图片的数量和信息流页面的尺寸确定第一区域和第二区域。

在本发明的一个实施例中，该显示装置还可以包括切换方式获取模块(图中未示出)，用于获取进行切换的切换方式。图片切换模块6300还可以用于根据切换方式将图片框内显示的第一图片切换为第二图片。

在此基础上，如图8所示，该图片切换模块6300还可以包括对象确定模块6310、参数确定单元6320和显示单元6330。该对象确定模块6310用于根据检测的事件，确定信息流卡片发生改变的对象；该参数确定单元6320用于根据该对象的当前值，计算定第一图片的图片变化参数和第二图片的图片变化参数；其中，图片变化参数与切换方式对应，图片变化参数至少包括显示透明度或者在图片框中的位置；该显示单元6330用于根据第一图片的图片变化参数控制信息流卡片取消显示第一图片，根据第二图片的图片变化参数控制信息流卡片显示第二图片。

在信息流卡片发生改变的对象为信息流卡片在信息流页面中的显示位置的实施例中。该显示装置还可以包括如图8所示的高度获取模块8100，用于根据所述信息流卡片在所述信息流页面中的显示位置，确定所述信息流卡片在所述信息流页面中的高度；获取信息流页面的高度。

参数确定单元6310还可以用于：根据信息流卡片在信息流页面中的显示高度的当前值、及信息流页面的高度，计算第一图片的图片变化参数和第二图片的图片变化参数。

再进一步地，该显示装置还可以包括如图8所示的数量获取模块8200，用于获取对应图片框的图片的数量。参数确定单元6310还可以用于根据信息流卡片在信息流页面中的显示高度的当前值、图片的数量、及信息流页面的高度，计算第一图片的图片变化参数和第二图片的图片变化参数。

以上已经结合附图描述了本实施例，根据本实施例，提供一种信息流页面的显示装置，通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

<终端设备>

在本实施例中，还提供一种终端设备，在一方面，该终端设备可以包括前述的信息流页面的显示装置。

在另一方面，如图9所示，该终端设备200可以包括存储器210和处理器220。存储器210用于存储指令；该指令用于控制处理器220执行前述的信息流页面的显示方法。

该处理器220例如可以是中央处理器CPU、微处理器MCU等。该存储器210例如包括ROM(只读存储器)、RAM(随机存取存储器)、诸如硬盘的非易失性存储器等。

该终端设备200还可以包括显示装置和通信装置，通信装置用于接收服务器下发的信息流页面的内容，显示装置用于显示信息流页面。

在本实施例中，终端设备200可以是如图1所示的终端设备1200，也可以包括其他的装置或者模块。终端设备200也可以具有多种实体形式，例如，终端设备可以是手机、平板电脑、掌上电脑、台式计算机等。

本领域技术人员应当明白，可以通过各种方式来实现终端设备200。例如，可以通过指令配置处理器来实现终端设备200。例如，可以将指令存储在ROM中，并且当启动设备时，将指令从ROM读取到可编程器件中来实现终端设备200。例如，可以将终端设备200固化到专用器件(例如ASIC)中。可以将终端设备200分成相互独立的单元，或者可以将它们合并在一起实现。终端设备200可以通过上述各种实现方式中的一种来实现，或者可以通过上述各种实现方式中的两种或更多种方式的组合来实现。

以上已经结合附图描述了本实施例，根据本实施例，提供一种终端设备，通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

<系统>

在本实施例中，提供一种信息流页面的显示系统300，如图10所示，该显示系统300包括：前述的终端设备200和服务器310。该服务器310用于将信息流页面的内容下发至终端设备200。

在一个例子中，该显示系统300中的服务器310还可以是如图1所示的服务器1100。

在一个例子中，该显示系统300还可以是如图1所示的显示系统1000。

在本实施例中，可以通过切换图片的方式在图片框内显示多张图片，可以减小图片框占用信息流卡片的空间。此外，还可以使得用户可以在未点击信息流卡片的情况下浏览多张图片，提升用户对信息流卡片内容的兴趣。此外，还可以提高信息流卡片的点击率。

本发明可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。

这里参照根据本发明实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。

也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。

附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。对于本领域技术人员来说公知的是，通过硬件方式实现、通过软件方式实现以及通过软件和硬件结合的方式实现都是等价的。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。本发明的范围由所附权利要求来限定。

Claims (12)

1.一种信息流页面的显示方法，其特征在于，包括：

获取信息流页面中的信息流卡片，其中所述信息流卡片包括用于显示图片的图片框；

检测更新所述信息流卡片的事件；

根据检测到所述事件的检测结果，将所述图片框内显示的第一图片切换为第二图片。

2.根据权利要求1所述的显示方法，其特征在于，所述更新所述信息流卡片的事件包括以下任意一项或多项：

所述信息流卡片在所述信息流页面中的显示位置发生改变；

所述信息流卡片在所述信息流页面中的移动距离超过预先设定的距离阈值；

所述信息流卡片中所述第一图片的显示时长超过预先设定的时长阈值。

3.根据权利要求2所述的显示方法，其特征在于，所述更新所述信息流卡片的事件包括所述信息流卡片在所述信息流页面中的显示位置发生改变；

所述根据检测到所述事件的检测结果，将所述图片框内显示的所述第一图片切换为第二图片的步骤包括：

在所述信息流卡片在所述信息流页面中的显示位置由预设的第一区域变化为预设的第二区域的情况下，将所述图片框内显示的对应所述第一区域的第一图片切换为对应所述第二区域的第二图片。

4.根据权利要求3所述的显示方法，其特征在于，所述显示方法还包括：

获取所述信息流页面的尺寸；

根据所述信息流页面的尺寸确定所述第一区域和所述第二区域。

5.根据权利要求4所述的显示方法，其特征在于，所述显示方法还包括：

获取对应所述图片框的图片的数量；

根据所述图片的数量和所述信息流页面的尺寸确定所述第一区域和所述第二区域。

6.根据权利要求1所述的显示方法，其特征在于，所述显示方法还包括：

获取进行所述切换的切换方式；

其中，所述将所述图片框内显示的第一图片切换为第二图片包括：根据所述切换方式将所述图片框内显示的第一图片切换为第二图片。

7.根据权利要求6所述的显示方法，其特征在于，所述根据所述切换方式将所述图片框内显示的第一图片切换为第二图片的步骤包括：

根据检测的所述事件，确定所述信息流卡片发生改变的对象；

根据所述对象的当前值计算所述第一图片的图片变化参数和所述第二图片的图片变化参数；其中，所述图片变化参数与所述切换方式对应，且所述图片变化参数包括显示透明度和在所述图片框中的位置中的任意一项或者两项；

根据所述第一图片的图片变化参数控制所述信息流卡片取消显示所述第一图片，并根据所述第二图片的图片变化参数控制所述信息流卡片显示所述第二图片。

8.根据权利要求7所述的显示方法，其特征在于，所述信息流卡片发生改变的对象为所述信息流卡片在所述信息流页面中的显示位置；所述显示方法还包括：

根据所述信息流卡片在所述信息流页面中的显示位置，确定所述信息流卡片在所述信息流页面中的高度；

获取所述信息流页面的高度；以根据所述信息流页面的高度、及所述信息流卡片在所述信息流页面中的显示高度计算所述第一图片的图片变化参数和所述第二图片的图片变化参数。

9.根据权利要求8所述的显示方法，其特征在于，所述显示方法还包括：

获取对应所述图片框的图片的数量，以还根据所述图片的数量计算所述第一图片的图片变化参数和所述第二图片的图片变化参数。

10.一种信息流页面的显示装置，其特征在于，包括：

页面获取模块，用于获取信息流页面并进行显示，其中，所述信息流页面中包括至少一个信息流卡片，所述信息流卡片中包括用于显示第一图片的图片框；

事件检测模块，用于检测更新所述信息流卡片的事件；以及，

图片切换模块，用于根据检测到所述事件的检测结果，将所述图片框内显示的所述第一图片切换为第二图片。

11.一种终端设备，其特征在于，包括根据权利要求10所述的显示装置；或者，包括存储器和处理器，所述存储器用于存储指令，所述指令用于控制所述处理器执行根据权利要求1-9中任一项所述的显示方法。

12.一种信息流页面的显示系统，其特征在于，包括服务器和根据权利要求11所述的终端设备，所述服务器用于将所述信息流页面的内容下发至所述终端设备。

Images