CN108170498B - 页面内容展示方法及装置 - Google Patents

Abstract

本申请实施例公开了页面内容展示方法及装置，其中，所述方法包括：客户端展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；确定进入终端设备屏幕可视区域内的目标展示模型；根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。通过本申请实施例，可以在实现3D页面的同时，保证信息的曝光度，提高页面效果。

Description

页面内容展示方法及装置

技术领域

本申请涉及页面内容展示处理技术领域，特别是涉及页面内容展示方法及装置。

背景技术

电子商务交易平台发展到今天，除了在交易流程、库存管理、支付流程等方面进行了各种完善之外，在网页设计环节也在不断的开创新的模式。尤其是在“双十一”等大型促销活动的预热期，通常会需要发布汇集众多品牌信息的页面，以更好的进行导流，提高商家页面的访问量。

现有技术中，为了达到提升页面访问量等目的，通常会从页面的版头(banner)、页面内展示的数据内容、页面布局等角度进行改造。但是，实际的效果可能并不明显，因为仅仅从上述方面对页面进行改造时，最终生成的页面，对于用户而言，可能仍然会有“千篇一律”的感觉，用户可能无法从页面中获得新鲜感，这样也就很难起到吸引用户查看、提高用户在页面中的驻留时间等目的，进而也难以提高页面的转化率。

发明内容

本申请提供了页面内容展示方法及装置，可以在实现3D页面的同时，保证信息的曝光度，提高页面效果。

本申请提供了如下方案：

一种页面内容展示方法，包括：

客户端展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

确定进入终端设备屏幕可视区域内的目标展示模型；

根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

一种页面内容展示方法，包括：

服务器接收客户端的访问数据对象页面的请求；

提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

一种页面内容展示装置，应用于客户端，包括：

页面展示单元，用于展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

展示模型确定单元，用于确定进入终端设备屏幕可视区域内的目标展示模型；

角度调整单元，用于根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

一种页面内容展示装置，应用于服务器，包括：

访问请求接收单元，用于接收客户端的访问数据对象页面的请求；

页面数据提供单元，用于提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，通过创建曲面形式的3D场景，并在3D场景中放置具体展示模型的方式，可以实现数据对象信息的3D展示，另外，还可以在展示的过程中，确定进入页面中终端设备屏幕可视区域内的目标展示模型，并对展示模型与所述曲面的第一角度进行调整，以此来改变目标展示模型与用户观察方向所成的第二角度。这样，可以使得在页面运动过程中，或者展示模型运动过程中，都可以尽可能的使展示模型的正面面向用户的观察方向，从而可以在实现3D页面的同时，保证信息的曝光度，提高页面效果。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的系统架构的示意图；

图2是本申请实施例提供的第一方法的流程图；

图3是本申请实施例提供的第一界面示意图；

图4是本申请实施例提供的摄像机对象示意图；

图5-1至5-3是本申请实施例提供的第一页面运动过程示意图；

图6-1、6-2是本申请实施例提供的第二页面运动过程示意图；

图7是本申请实施例提供的第二界面示意图；

图8是本申请实施例提供的第二方法的流程图；

图9是本申请实施例提供的第一装置的示意图；

图10是本申请实施例提供的第二装置的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

在本申请实施例中，突破了传统的数据对象页面的展现形式，不再采用二维平面的页面设计方式，而是实现具有3D效果的页面。也就是说，页面中的展示对象不再是展示在二维的平面中，而是具有三维立体的展示效果。显然，如果将销售平台中的一些页面设计为3D形式，则可以使得页面获得更酷炫的展示效果，并且，也使得用户获得更接近于线下逛实体店进行购物的体验，因此有利于提升页面转化率。

在本申请实施例中，为了能够将数据对象信息在3D页面中进行展示，并且获得较好的展示效果，本申请发明人在实现本申请的过程中，做了很多尝试。例如，首先在场景设备方面，本申请发明人最初尝试的是3D巡航场景，与多数第一人称游戏类似，使用第一人称的视角在场景中“边逛边玩”，但这种方式在数据对象(包括商品对象、品牌对象等)信息透出以及系统性能等方面存在着挑战。

为此，本申请发明人进行了场景简化，保留展示模型，提出一种“曲面”化场景方案，例如，其中一种曲面的实现方式，可以是在具有一定宽度的环状曲面，这种环状曲面是一种近似“滚筒”的场景方案。在“滚筒”上进行数据对象展示模型的摆放。其中，所述旋转面的宽度(也即环状曲面的宽度)可以与屏幕展示范围的宽度相同，在所述3D场景运动的过程中，所述环状的曲面结构以其旋转轴为轴进行旋转运动(通常，具体在展示时，可以使得旋转轴的轴向与终端设备的放置方向平行，这样，用户可以通过上下滑动屏幕的方式，来触发场景的滚动)，且同一时刻进入到终端设备屏幕内可视区域的曲面为所述旋转面在旋转方向上的一部分，用户通过在终端设备屏幕上进行滑动等方式，可以触发曲面的滚动，以查看曲面其他部分放置的数据对象信息。

另外，关于展示模型，可以是具有3D效果的展示模型，并且与具体的数据对象关联，例如，可以是根据某品牌的名称、logo(图形标志)、代表图片等制作而成的三维立体展示模型。具体实现时，可以将这种展示模型分布于曲面上，采用直立于曲面的方式进行放置，并与曲面成一定的角度，例如，可以与曲面的切线成90度角，从而使得整个场景中的曲面为“地面”、展示模型放置在“地面”上的视觉效果。

通过上述方式，可以实现最基本的3D页面，但是，在实际展示过程中，本申请实施例还可以进行进一步的优化。具体的，本申请发明人发现，在实际展示页面的过程中，通常无论在任何状态下，总会有多个展示模型进入到终端设备屏幕可视区域(可以用摄像机对象的可见区域来表示，所谓的摄像机对象是3D页面设计中的概念，也即，在生成3D页面的过程中，通常都会执行创建场景、创建摄像机的操作，其中，摄像机的观察方向可以代表用户的视线方向，通常，摄像机的位置可以是不变的)，这就会导致出现以下情况：3D场景中仅有一个或者少数几个展示模型大致正对着用户视线，其他的展示模型则由于与用户观察方向之间的夹角过大或者过小，而使得展示模型无法正对用户视线，以至于信息的曝光度不够，展示效果变差，甚至会出现信息展示不全、或者相邻的展示模型之间相互遮挡等情况。而在页面展示过程中，如果同一屏中展示了多个数据对象的展示模型，但是不同的展示模型之间在信息的曝光度方面存在差异，影响展示效果，则显然会影响页面的信息展示效率，并且，对应的商家通常也不能接受这种情况的出现。

为此，在本申请实施例中，主要针对如何提高3D场景中具体展示模型的曝光度的问题，提供了相应的解决方案。在进行具体的方案介绍之前，首先需要说明的是，从具体的产品架构角度而言，参见图1，本申请实施例可以分为客户端以及服务器端两部分，其中，客户端可以是指移动终端设备上的应用客户端，或者，还可以是通过浏览器浏览的网页等，服务器就可以是指销售平台的服务器。其中服务器主要用于页面的生成，并在接收到客户端的访问请求时，提供相应的页面数据给客户端，客户端则主要根据服务器提供的页面数据进行具体的页面展示，在本申请实施例中，客户端还可以在页面展示过程中，对具体的展示效果等进行控制。下面对具体的实现方案进行详细介绍。

实施例一

在该实施例一中，首先从客户端的角度，提供了一种页面内容展示方法，具体的，参见图2，该方法可以包括以下步骤：

S201：客户端展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

如前文所述，具体的数据对象信息页面可以是利用3D网页技术实现的3D页面，具体实现时，可以首先创建3D场景，然后，在3D场景中放置具体的数据对象展示模型。

关于具体的展示模型，可以有多种实现方式，从系统性能角度，考虑到实际展示过程中的性能往往受限于单个展示模型的面数(对于3D模型而言，模型越精细3D效果越明显，展示的面数通常会越多)，本申请发明人在某移动终端设备上做了测试，当面数在3万个左右(当展示模型为30个时)的时候，帧率已经掉到20多fps(当然面数不是决定性能唯一指标，但是帮助发明人做了一些方案选择依据)。而在实际应用中，需要对至少60个数据对象做展示模型，因此，涉及到的面数会更多，此时，前端性能上可能还是会存在问题。

为此，在展示模型的设计方面，本申请实施例还可以进行进一步的优化，具体的，可以使用纸片风格的画板制作具有3D展示效果的展示模型，即“广告牌”方案。所谓的纸片风格画板，实际上可以看作是对三维展示模型的扁平化处理，最终的展示模型“薄”如纸片，这样，可以减少展示模型的面数。同时，这种纸片风格的画板也可以自带一些3D感，这是因为，实际上很多2D图案因为有透视效果，当观察的角度与设计师设计的视角吻合时，会感觉具有3D的效果。通过这种纸片风格画板来生成展示模型，可以使得展示模型在具有3D效果的同时，减少需要展示的面数，因此，可以进一步提升系统性能。另外，由于“广告牌”在现实生活里也比较常见，比如大型购物地带、繁华路段等等，因此，通过纸片风格的画板生成的展示模型，也可以使得用户获得更接近与线下“逛街”的体验。

在实际应用中，具体需要在上述3D场景中展示哪些数据对象的展示模型，可以是通过招商等方式来实现。例如，页面中的展示对象是关于商家具体店铺或者品牌等推荐信息，此时，交易平台服务器可以预先向多个商家用户发送招商邀请，商家如果具有相应的需求，则可以报名参加。相应的，交易平台服务器就可以根据该商家的名称、品牌logo、代表图片等，生成具体的展示模型。其中，关于具体的展示模型，可以是由商家自行提供，或者，也可以由交易平台服务器根据商家的信息来生成具体的展示模型，当然，在交易平台服务器生成展示模型后，还可以发给商家进行确认，在商家确认无误后，再将其放置到页面内具体的3D场景中。另外，在实际应用中，展示模型的制作还可以由设计能力更强的第三方来完成，也即交易平台服务器可以将相关商家的信息提供给第三方设计公司，由第三方设计公司设计出纸片风格的展示模型，最后，交易平台服务器同样可以将设计公司设计完成的展示模型发送给对应的商家进行确认，等等。

需要说明的是，在本申请实施例中，同一个页面中展示的数据对象的数量是有限的，例如，通常可以设置为60个左右，等等，当然，在实际应用中，也可以根据具体的需求展示更多或者更少的数据对象信息。另外，在确定具体的展示数量时，还可以结合创建的3D场景的面积进行考虑，因为，3D场景在创建完成后，其面积就是固定的，此时，如果在场景中展示过多数据对象的展示模型，则会由于展示模型过于密集，而使得信息的辨识度降低。

在确定出3D场景中各个待展示的数据对象关联的展示模型后，就可以将具体的展示模型放置到3D场景对应的曲面上。具体实现时，可以提供地图编辑器，该编辑器可以用于编辑各个展示模型在曲面上的放置位置、角度等。其中，这里所述的角度，可以是指展示模型正面与所述曲面在对应位置的切面所成的角度，通常，在默认状态下，该角度可以为90度左右，也就是说，当用户的视线刚好与曲面的某个位置处的切面平行，则可以该位置上展示的展示模型的正面则刚好正对着用户视线，使得该展示模型展示的信息能够获得最佳的曝光角度。

总之，在终端设备性能支持的情况下，具体的展示模型可以是三维模型，或者，也可以采用纸片风格画板的方式，生成具有3D展示效果的展示模型，所述画板的正面面向所述用户观察方向，各个数据对象的展示模型可以分布与旋转面的各个位置。

其中，具体的3D场景可以是曲面形状。具体的曲面可以包括多种实现形式，例如，在其中一种方式下，可以是将旋转面结构作为3D场景的曲面，所述数据对象的展示信息可以分布在所述旋转面的外表面上，当然，在实际应用中，也可以分布在内表面，等等。在一种更具体的实现方式下，该旋转面结构可以是具有预置宽度的环状旋转面。所述旋转面的宽度(也即滚筒的高度)可以与屏幕展示范围的宽度相同，在垂直方向上，可以在所述3D场景的上方预留有部分空白区域。各个数据对象的展示模型可以分布与旋转面的各个位置，在所述3D场景运动的过程中，所述环状旋转面结构可以以其旋转轴为轴进行旋转运动(通常，具体在展示时，可以使得旋转轴的轴向与终端设备的放置方向平行，这样，用户可以通过上下滑动屏幕的方式，来触发场景的滚动)，且同一时刻进入到屏幕内可见区域的曲面为所述旋转面在旋转方向上的一部分。也就是说，假设取旋转面的横截面，则可以得到一个圆形结构，同一时刻进入到屏幕可见区域的是该圆形的一部分弧面，并且终端设备中每一屏展示出的部分曲面的弧长，为所述旋转面旋转周长的整数分之一。例如，可以是四分之一弧面，也就是说，一屏可以仅展示四分之一的数据对象展示模型，用户可以通过在屏幕内滑动等方式来触发曲面的滚动，滚动四屏后，环状结构完成滚动一周，此时，将可以浏览完全部的数据对象信息。当然，还可以设置为“一周八屏”，也即，每屏展示八分之一的内容，等等。但是，为了保证页面具有3D展示效果的同时，还保证每一屏中具有一定的数据对象透出数量，在本申请的优选实施例中，可以采用“一周四屏”的方案，也就是说，每一屏展示的曲面的弧长为所述旋转面旋转周长的四分之一。

例如，如图3所示，其为一个具体实现的例子中，页面在某时刻的展示状态图(为了便于观察，该图2将屏幕宽度进行了放大处理，在实际应用中，曲面的宽度可以是占满屏幕的，但在屏幕上方会留有一定的空间，也即，曲面在纵向上并不会占满屏幕，因为展示模型在曲面上具有“直立”放置的特点，需要预留出展示空间)，可见，其中展示出了滚动结构的部分弧面，其中展示有多个数据对象的展示模型。每个数据对象的展示模型采用“直立”的方式放置在3D场景中，以增强页面的3D展示效果。其中，展示模型通常开采用独立展示的方式，例如，某品牌对应的展示模型，可以独立放置在3D场景中。或者，为了使得页面内容更加丰富，也更模拟现实生活中的场景，在具体数据对象的展示模型为纸片风格的画板时，还可以在3D场景中设置一些三维的展示模型，例如，对一些建筑物等进行模拟，这种三维的展示模型中通常会有比较多的面数，此时，可以使得一些数据对象的展示模型依附于这种三维展示模型来进行展示，例如，可以将纸片风格的画板放置在这种三维展示模型的某个面上进行展示，这样，使得用户获得在某建筑物等处查看到关于某数据对象相关信息的体验。另外，由于三维展示模型具有多个面数的特点，因此，还可以利用多个面达到尽可能大的曝光。例如，某数据对象的展示模型可以被部分切割，放到某三维展示模型的两个面上，等等。

需要说明的是，在实际应用中，除了通过上述滚筒状结构或称环形的带状结果来生成上述3D场景外，还可以通过其他方式生成，例如，还可以创建球形的3D场景，此时，具体数据对象的展示模型可以分布与球面上，一屏展示球面的一部分内容，用户可以从任意方向对球面进行旋转，以查看其他部分的展示内容，等等。或者，在另一种方式下，3D场景还可以是采用弧面的方式进行创建，甚至还可以创建为多棱柱结构(多边形沿铅垂线方向平移形成)，等等，这里不进行限定。

另外需要说明的是，在技术实现上，生成上述页面的方式可以有多种，例如，其中一种方式下，可以使用CSS3(Cascading Style Sheet 3，层叠样式表技术的升级版)来模拟实现上述效果。但是，本申请发明人发现，CSS3在处理这种大场景时存在一些无法回避的问题。例如，在构建滚筒状场景的情况下，如果使用CSS3技术，则需要先把旋转面场景切成一个个dom的面片，贴图工作量巨大，而且效果不好，并且，切割后的形状拼接成一个大形状后，边缘会有“黑边”问题，另外，交互阶段，在旋转面旋转做翻译的过程中，可能会引起黑屏、白屏和闪烁等问题。

总之，CSS3实际上更适合一些小场景。另外，在3D表达上，物体的形状和纹理是最能直接感受的两个特征，形状就是最终显示出的样子，纹理就是表面的附着。除了这些，光照，环境(雾、雨)，反射，材质都能通过对材质表面的颜色做若干次运算获得，最终通过算出来的RGBA来使物体呈现丰富的外观。但是，在构建3D物件形状上，CSS3会显得捉襟见肘。因此，在优选的实施例中，可以选择WebGL技术来实现上述3D页面的设计。

为了更好的与展示模型制作部门沟通，还可以单独为3D页面提供编辑器。编辑器的编写可以遵循组件化的思路，可以进行动态插拔，降低与主场景渲染的耦合度。编辑器最终目的是产出符合美术预期的场景数据。此外，业务数据会和场景数据之间可以建立映射，这样方便检索。比如，场景品牌的命名就可以以店铺id命名，方便两种数据做串联。

S202：确定进入终端设备屏幕可视区域内的目标展示模型；

如前文所述，在本申请实施例中，每一屏展示的内容只是曲面的一部分，相应的，展示出的数据对象信息也是页面中全部数据对象的一部分。为此，在该步骤中，可以首先确定出进入终端设备屏幕可视区域内的目标展示模型，并且通常为多个。

从技术实现角度而言，在3D页面中，除了创建3D场景之外，为使得整个3D场景看上去更加有3D的效果，还可以创建摄像机对象，摄像机对象从技术层面而言通常也可以称为观察的视景体或者视锥体View frustum。如图4所示，其参数至少可以包括：

Field of view，视角，指定视景体的视野的角度，以度数为单位，y轴的上下方向；

Viewport(near clipping plane)沿z轴方向的两裁面之间的距离的近处，用于指定观察者到视景体的最近的裁剪面的距离；

Viewport(far clipping plane)，沿z轴方向的两裁面之间的距离的远处，用于指定观察者到视景体的最远的裁剪面的距离。

通过合理设定摄像机对象的各个参数，即可使得3D场景中的各个展示模型呈现出3D的展示效果，在本申请实施例中，实现的3D场景即可如图4下面所示，当然，其仅示出了滚筒结构的一部分。其中，摄像机对象的可见区域，通常与人眼能够在页面中观察到的3D场景区域是相同的，摄像机对象的观察方向在一定程度上能够代表人眼的观察方向。

关于摄像机的位置，可以通过预置函数的方式来设定，例如，camera.position.set(0,1,1)，观察方向可以指向z轴的反方向，如果摄像机位置就是(0,1,1)，那么lookAt就是(0,1,0)。

S203：根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

在具体实现时，进入到终端设备屏幕可视区域内的目标展示模型，在默认状态下，每个展示模型与曲面之间的夹角可以为90度等预置第一角度，但是，每个展示模型实际所述用户观察方向所成的夹角可能会是不同的，并且，随着曲面的滚动，每个展示模型与用户观察方向之间的夹角都可能在不断发生变化。因此，本申请实施例中，就可以通过跟踪这种变化，并且对这种夹角进行调整，来使得展示模型的正面始终保持正对着用户的观察视线。

具体的，3D场景中的展示模型可能会包括两类，其中第一类展示模型是在每一帧都要展示的模型，也就是说始终位于终端设备屏幕可视区域内，例如，场景中虚拟出的“人物形象”，“喷泉”等，这些展示对象通常在展示的每一帧中都可能出现，并且，即使在页面静止的状态下，这种第一类展示对象可能也是在按照预定的程序不断运动的。例如，“人物形象”可能会不断的左右移动或者前后移动等等，模拟出场景中有人在“逛”的景象，或者，“喷泉”可能在不断的“喷水”，等等。因此，该步骤中在确定目标展示模型的正面与用户观察方向所成的夹角时，具体可以包括，在所述页面3D场景静止的状态下，确定所述第一类展示模型的正面与所述用户观察方向所成的夹角。

或者，3D场景中更多包括的是第二类展示模型，这类展示模型是具体的数据对象对应的展示模型，用于提供店铺、品牌的展示信息等，其特点是随着所述3D场景的运动而进入到所述终端设备屏幕可视区域，并且，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变。对于这种第二类展示模型，可以是在所述3D场景运动的过程中，确定所述第二类展示模型的正面与所述用户观察方向所成的夹角。也就是说，第二类展示模型在进入到终端设备屏幕可视区域时，其具有默认的展示状态，包括在曲面中的位置、与曲面所成的角度等，而根据这种默认数值，以及当前用户观察方向，即可计算出展示模型的正面与用户观察方向的夹角。并且，随着3D场景的运动，同一个展示模型的正面与用户观察方向的夹角还会发生变化，该步骤的作用就是可以跟踪这种变化。

其中，3D场景的运动可以是在用户的触发下执行的，例如，用户在终端设备屏幕上执行上下滑动操作，相应的，3D场景可以随之进行向上或者向下的滚动，也就是说，3D场景随着用户在屏幕内执行的滑动操作而运动。例如，参见图5-1，其为某t1时刻，3D场景在页面中的展示状态，当用户在屏幕上执行向下滑动的操作时，曲面沿着顺时针方向滚动，在某t2时刻，3D场景在页面中的展示状态如图5-2所示，可见，“ZARA”等相关的展示模型已经随着曲面向屏幕下方运动，“全棉时代”、“周大福”等相关的展示模型已经逐渐进入到可见区域。当用户继续滑动屏幕时，在t3时刻，3D场景在页面中的展示状态如图5-3所示，“ZARA”等相关的展示模型已经移出可见区域，相应的，“全棉时代”、“周大福”等相关的展示模型进入到可见区域的中央位置，等等。

或者，在另一种情况下，还可以为用户提供“随机逛”的操作选项，通过触发该选项，3D场景首先可以自行向某个方向滚动，之后在某个目标展示模型处可以停止，也即，将该目标展示模型的相关信息推荐给当前用户。具体实现时，在到达目标展示模型处停止运动后，还可以将所述3D场景放大，并在所述摄像机对象可见区域内提供关于所述目标展示模型的特写展示。例如，如图5-3中所示，在界面最下方中央位置处展示有“随机逛”的操作选项，用户可以通过该操作选项触发曲面的随机滚动，之后，曲面可以以比较快速的速度进行滚动，直到到达某随机的位置停止运动，例如，停止的位置如图6-1所示，此时，需要向当前用户推荐的目标展示模型，是关于“魅族手机”的相关展示模型，则可以将3D场景进行局部放大，也即“镜头拉近”，并将目标展示模型展示在屏幕的中央位置，例如，可以展示出如图6-2所示的状态，此时，在可见区域内以展示该目标展示模型的信息为主，可以提高用户对该展示模型的关注度。

其中，关于上述“随机逛”功能中目标展示模型的确定，可以有多种方式，例如，可以采用完全随机的方式来进行，或者，还可以结合关联用户的个性化偏好信息进行确定。例如，假设根据某用户的历史行为记录发现，该用户比较对电子数码类产品感兴趣，则可以优先提供该类的信息给该用户，从而更好的实现导流。

需要说明的是，在前述例子中提供的各个状态下的截图，都是已经按照本申请实施例的方式，随着曲面的运动，将展示模型的角度进行了调整，因此，从最终的展示效果来看，各种状态下，曲面上的各个展示模型基本都是正对着用户实现，不会出现展示比例失调等情况。而如果不按照本申请实施例中的方式进行处理，则当曲面运动到某状态时，展示出的展示模型可能会出现如图7所示的情况，也即，视觉上会感觉展示模型是“平贴”在曲面上，不再有“直立”的3D展示效果，甚至会导致一些文字或者图片等信息无法清晰展示，等等。

在确定出目标展示模型的正面与所述用户观察方向所成的第二角度后，就可以对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。当然，具体实现时，在调整的过程中，还可以对该第二角度的大小进行判断，确定其是否超出预置的数值范围时，如果超出，再对第一角度进行调整，否则，可以认为其不影响用户观察，因此可以不必调整。这样可以节省系统资源。具体在对第一角度进行调整时，可以按照预置的旋转轴对所述展示模型执行旋转操作，这样就可以将所述第二角度调整到所述预置的数值范围内，以便所述展示模型正面向于所述摄像机对象的观察方向。也就是说，假设预置的上述数值范围为[80度，100度]，则如果发现某展示模型与用户观察方向之间的夹角小于了80度，或者大于100度，则可以对展示模型执行旋转操作，以使得其正面与摄像机对象的观察方向之间的第二角度进入到[80度，100度]的范围内，最好是90度。

其中，具体在对展示模型执行旋转操作时，可以是以展示模型正面的底部为轴进行旋转，例如，当展示模型为纸片风格的画板时，该画板与曲面接触的部分为画板底部，在对所述画板执行旋转操作时，以所述画板底部为轴进行旋转，使得画板正面与曲面的第一角度发生变化，进而，画板正面与用户观察方向之间的第二角度也会发生变化。

当然，在用户浏览上述3D页面的过程中，还可以对页面中的展示模型进行操作，例如，展示模型如果是与某品牌或者店铺对象关联，则当某目标店铺对应的展示模型被操作时，则可以跳转到该目标店铺的店铺页面进行展示，从而实现向该店铺页面的导流。

总之，通过本申请实施例，通过创建曲面形式的3D场景，并在3D场景中放置具体展示模型的方式，可以实现数据对象信息的3D展示，另外，还可以在展示的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并且可以根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。这样，可以使得在页面运动过程中，或者展示模型运动过程中，都可以尽可能的使展示模型的正面面向用户的观察方向，从而可以在实现3D页面的同时，保证信息的曝光度，提高页面效果。

实施例二

该实施例二是与实施例一相对应的，从服务器的角度，提供了一种页面内容展示方法，参见图8，该方法可以包括以下步骤：

S801：服务器接收客户端的访问数据对象页面的请求；

S802：提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

关于该实施例二的具体实现可以参见前述实施例一中的介绍，这里不再赘述。

与实施例一相对应，本申请实施例还提供了一种页面内容展示装置，参见图9，该装置应用于客户端，包括：

页面展示单元901，用于展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

展示模型确定单元902，用于确定进入终端设备屏幕可视区域内的目标展示模型；

角度调整单元903，用于根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

其中，所述曲面包括旋转面结构，所述数据对象的展示信息分布在所述旋转面的外表面上。

其中，所述旋转面结果包括具有预置宽度的环状旋转面，所述旋转周长为终端设备中每一屏展示出的部分曲面的弧长的整数倍。

具体的，所述旋转周长可以为终端设备中每一屏展示出的部分曲面的弧长的四倍。

其中，所述旋转面的宽度与终端设备屏幕在水平方向上展示范围的宽度相同，在垂直方向上，在所述3D场景的上方预留有部分空白区域。

在所述3D场景运动的过程中，所述旋转面结构以其旋转轴为轴进行旋转运动。

另外，所述曲面也可以包括球面或弧面。

具体实现时，所述角度调整单元具体可以用于：

当所述第二角度超出预置的数值范围时，对所述第一角度进行调整，以便将所述第二角度调整到所述预置的数值范围内。

从操作方式角度，所述角度调整单元具体可以用于：

按照预置的旋转轴对所述展示模型执行旋转操作，以便对所述第一角度进行调整。

其中，所述展示模型包括：纸片风格的画板，所述画板的正面面向所述用户观察方向，所述画板与所述曲面接触的部分为画板底部，在对所述画板执行旋转操作时，以所述画板底部为轴进行旋转。

在实际应用中，所述展示模型包括位于终端设备屏幕可视区域内第一类展示模型，且在所述页面3D场景静止的状态下，所述第一类展示模型按照预置的方式在所述3D场景中运动；

此时，所述角度调整单元具体可以用于：

在所述页面3D场景静止的状态下，根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

或者，所述展示模型包括随着所述3D场景的运动而进入到所述终端设备屏幕可视区域的第二类展示模型，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变：

所述角度调整单元具体可以用于

在所述3D场景运动的过程中，根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

其中，所述3D场景随着用户在屏幕内执行的滑动操作而运动。

或者，所述3D场景在随机浏览功能被触发后产生运动，并在目标展示模型所在的位置处停止运动。

在上述第二种方式下，该装置还可以包括：

特写展示单元，用于在所述3D场景停止运动后，将所述3D场景放大，并在所述摄像机对象可见区域内提供关于所述目标展示模型的特写展示。

其中，所述目标中展示模型根据关联用户的个性化偏好信息确定。

所述数据对象包括店铺对象，所述展示模型与所述店铺对象的店铺页面关联，所述装置还可以包括：

在目标店铺对象的展示模型被操作时，跳转到所述目标店铺的店铺页面进行展示。

与实施例二相对应，本申请实施例还提供了一种页面内容展示装置，参见图10，该装置应用于服务器，包括：

访问请求接收单元1001，用于接收客户端的访问数据对象页面的请求；

页面数据提供单元1002，用于提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的页面内容展示方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (20)

1.一种页面内容展示方法，其特征在于，包括：

客户端展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

确定进入终端设备屏幕可视区域内的目标展示模型；所述展示模型包括随着所述3D场景的运动而进入到所述终端设备屏幕可视区域的第二类展示模型，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变；

根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

2.根据权利要求1所述的方法，其特征在于，所述曲面包括旋转面结构，所述数据对象的展示信息分布在所述旋转面的外表面上。

3.根据权利要求2所述的方法，其特征在于，所述旋转面结果包括具有预置宽度的环状旋转面，所述旋转周长为终端设备中每一屏展示出的部分曲面的弧长的整数倍。

4.根据权利要求3所述的方法，其特征在于，所述旋转周长为终端设备中每一屏展示出的部分曲面的弧长的四倍。

5.根据权利要求3所述的方法，其特征在于，所述旋转面的宽度与终端设备屏幕在水平方向上展示范围的宽度相同，在垂直方向上，在所述3D场景的上方预留有部分空白区域。

6.根据权利要求3所述的方法，其特征在于，在所述3D场景运动的过程中，所述旋转面结构以其旋转轴为轴进行旋转运动。

7.根据权利要求1所述的方法，其特征在于，所述曲面包括球面或弧面。

8.根据权利要求1至7任一项所述的方法，其特征在于，所述对所述目标展示模型与所述曲面的第一角度进行调整，包括：

当所述第二角度超出预置的数值范围时，对所述第一角度进行调整，以便将所述第二角度调整到所述预置的数值范围内。

9.根据权利要求8所述的方法，其特征在于，所述对所述第一角度进行调整，包括：

按照预置的旋转轴对所述展示模型执行旋转操作，以便对所述第一角度进行调整。

10.根据权利要求9所述的方法，其特征在于，所述展示模型包括：纸片风格的画板，所述画板的正面面向所述用户观察方向，所述画板与所述曲面接触的部分为画板底部，在对所述画板执行旋转操作时，以所述画板底部为轴进行旋转。

11.根据权利要求1至7任一项所述的方法，其特征在于，所述展示模型包括位于终端设备屏幕可视区域内第一类展示模型，且在所述页面3D场景静止的状态下，所述第一类展示模型按照预置的方式在所述3D场景中运动；

所述对所述目标展示模型与所述曲面的第一角度进行调整，包括：

在所述页面3D场景静止的状态下，根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

12.根据权利要求1至7任一项所述的方法，其特征在于，所述对所述目标展示模型与所述曲面的第一角度进行调整，包括：

在所述3D场景运动的过程中，根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整。

13.根据权利要求12所述的方法，其特征在于，所述3D场景随着用户在屏幕内执行的滑动操作而运动。

14.根据权利要求12所述的方法，其特征在于，所述3D场景在随机浏览功能被触发后产生运动，并在目标展示模型所在的位置处停止运动。

15.根据权利要求14所述的方法，其特征在于，还包括：

在所述3D场景停止运动后，将所述3D场景放大，并在摄像机对象可见区域内提供关于所述目标展示模型的特写展示。

16.根据权利要求14所述的方法，其特征在于，所述目标中展示模型根据关联用户的个性化偏好信息确定。

17.根据权利要求1至7任一项所述的方法，其特征在于，所述数据对象包括店铺对象，所述展示模型与所述店铺对象的店铺页面关联，所述方法还包括：

在目标店铺对象的展示模型被操作时，跳转到所述目标店铺的店铺页面进行展示。

18.一种页面内容展示方法，其特征在于，包括：

服务器接收客户端的访问数据对象页面的请求；

提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整；所述展示模型包括随着所述3D场景的运动而进入到所述终端设备屏幕可视区域的第二类展示模型，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变。

19.一种页面内容展示装置，其特征在于，应用于客户端，包括：

页面展示单元，用于展示数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度；

展示模型确定单元，用于确定进入终端设备屏幕可视区域内的目标展示模型；所述展示模型包括随着所述3D场景的运动而进入到所述终端设备屏幕可视区域的第二类展示模型，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变；

角度调整单元，用于根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整，以改变所述第二角度。

20.一种页面内容展示装置，其特征在于，应用于服务器，包括：

访问请求接收单元，用于接收客户端的访问数据对象页面的请求；

页面数据提供单元，用于提供数据对象信息页面，所述页面中包括3D场景，所述3D场景为曲面结构，所述曲面的预置位置处展示有数据对象的展示信息，所述展示信息为具有3D展示效果的展示模型，且与所述曲面成第一角度，以便所述客户端在展示所述页面的过程中，确定进入终端设备屏幕可视区域内的目标展示模型，并根据所述目标展示模型与用户观察方向所成的第二角度，对所述目标展示模型与所述曲面的第一角度进行调整；所述展示模型包括随着所述3D场景的运动而进入到所述终端设备屏幕可视区域的第二类展示模型，所述第二类展示模型随着所述3D场景的运动而运动，且与所述3D场景的相对位置保持不变。

Images