CN113656026A - 商品对象信息展示方法及装置 - Google Patents
商品对象信息展示方法及装置 Download PDFInfo
- Publication number
- CN113656026A CN113656026A CN202110655412.9A CN202110655412A CN113656026A CN 113656026 A CN113656026 A CN 113656026A CN 202110655412 A CN202110655412 A CN 202110655412A CN 113656026 A CN113656026 A CN 113656026A
- Authority
- CN
- China
- Prior art keywords
- information
- page
- container
- commodity object
- rolling
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 87
- 238000005096 rolling process Methods 0.000 claims description 182
- 230000008569 process Effects 0.000 claims description 37
- 230000000694 effects Effects 0.000 claims description 29
- 230000001960 triggered effect Effects 0.000 claims description 25
- 230000009191 jumping Effects 0.000 claims description 19
- 238000012545 processing Methods 0.000 claims description 18
- 230000008520 organization Effects 0.000 claims description 8
- 238000003672 processing method Methods 0.000 claims description 3
- 238000004891 communication Methods 0.000 description 10
- 238000005516 engineering process Methods 0.000 description 8
- 238000006243 chemical reaction Methods 0.000 description 7
- 238000011156 evaluation Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 5
- 238000004422 calculation algorithm Methods 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 4
- 239000002131 composite material Substances 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 238000009877 rendering Methods 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 230000019771 cognition Effects 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000033228 biological regulation Effects 0.000 description 1
- 230000000747 cardiac effect Effects 0.000 description 1
- 230000001149 cognitive effect Effects 0.000 description 1
- 238000012790 confirmation Methods 0.000 description 1
- 238000013016 damping Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007423 decrease Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000704 physical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 230000003238 somatosensory effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9535—Search customisation based on user profiles and personalisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/06—Buying, selling or leasing transactions
- G06Q30/0601—Electronic shopping [e-shopping]
- G06Q30/0641—Shopping interfaces
- G06Q30/0643—Graphical representation of items or shoppers
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Business, Economics & Management (AREA)
- Software Systems (AREA)
- Accounting & Taxation (AREA)
- Finance (AREA)
- Human Computer Interaction (AREA)
- Development Economics (AREA)
- Economics (AREA)
- Marketing (AREA)
- Strategic Management (AREA)
- General Business, Economics & Management (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例公开了商品对象信息展示方法及装置,所述方法包括:接收针对目标商品对象的详情信息浏览请求;提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。通过本申请实施例,能够进一步提升用户的信息获取效率。
Description
技术领域
本申请涉及信息处理技术领域,特别是涉及商品对象信息展示方法及装置。
背景技术
商品对象详情信息页,是指商品对象的链接被点击后,呈现出的用于展示商品对象具体信息(包括图片、文字等等)、价格、优惠促销活动、所享受的服务、已购买者评价、关联商品推荐等信息,以便让用户全方面了解一款商品对象的承接页面。
在导购场景下,用户主要分为目标导向和随意逛逛两大类,前者有目标商品但不一定很明确,后者没有明确目的但可能内心有渴望。详情页作为商品对象信息系统中很重要的流量承接地,核心问题主要聚焦在心流体验、信息获取和操作效率等几个方面。在用户需求不明确的情况下(如模糊搜索场景),帮助用户收敛需求,提升商品的浏览效率,进而促成更多的成交转化。
传统的移动端商品对象详情信息页中,通常是在页面中提供多个标签页,分别为“商品”、“详情”、“评价”等。其中,在“商品”标签页中,主要可以展示出商品对象的主图(可以是多张图片),以及相关的商品对象名称、价格、优惠信息、参数、SKU(Stock KeepingUnit,库存进出计量的基本单元)等与“加入购物车”、“购买”等用户操作直接相关的信息。在“详情”标签页中,通常是以长图图流等形式,展示出关于商品对象的图文详情,以用于对商品对象进行更详细更完整的介绍。在“评价”标签页中主要是展示出已购买者的点评信息,包括以文字为主、图片为辅的普通点评信息,还可以包括以图片为主的“买家秀”类的点评信息,等等。此外,在一些详情页中还可能会提供相关或者相似商品对象的推荐信息,等等。
总之,商品对象详情信息页中包含的信息往往会很多,用户在浏览的过程中可能需要执行多次的标签页切换,才能浏览到各个标签页中的内容。另外,对于其中的图文详情部分,由于长图图流可能会很长,因此,还需要执行多次的滑动屏幕等操作才能浏览完整。以上各种情况的存在都导致用户的信息获取效率比较低,以至于影响最终的成交转化。
因此,如何进一步提升用户的信息获取效率,成为需要本领域技术人员解决的技术问题。
发明内容
本申请提供了商品对象信息展示方法及装置,能够进一步提升用户的信息获取效率。
本申请提供了如下方案:
一种商品对象信息展示方法,包括:
接收针对目标商品对象的详情信息浏览请求;
提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
其中,所述用目标商品对象关联的至少一个第二信息页面中的信息包括:所述目标商品对象的图文详情信息,和/或,已购买用户对所述目标商品对象发布的点评信息;
所述扩展图像元素包括:通过从所述图文详情信息中进行截取的方式生成的图像,和/或,通过对所述点评信息进行抽取并按照模板组织生成的图像。
其中,所述图文详情信息包括:所述目标商品对象的发布者用户提供的长图图流信息,和/或,根据所述目标商品对象的发布者用户提供的商品对象描述信息进行机器合图,并插入到所述图文详情信息中的图像信息。
其中,所述发布者用户提供的长图图流信息关联有结构化信息,所述结构化信息包括所述长图图流中包括的多个图片的描述信息,所述描述信息由所述发布者用户在发布所述长图图流信息进行提供,以用于根据所述图片的描述信息从所述长图图流信息中进行图片选择,以生成所述扩展图像元素。
其中,所述扩展图像元素是从所述信息中选择目标信息后,对目标信息进行截取或抽取的方式得到的,得到的多份扩展图像元素在按顺序进行组织编排后,插入到所述主图容器中;其中,对目标信息的选择和/或对扩展图像元素的组织编排方式,与所述目标商品对象所属的类目信息相关。
其中,同一所述商品对象对应多个不同的第一信息页面,其中,在不同的第一信息页面中,扩展图像元素的内容和/或组织编排方式不同,用于匹配不同用户的浏览需求。
其中,还包括:
在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示。
其中,还包括:
在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供从所述扩展图像元素从所述主图容器展开到所述第二信息页面中所述锚点位置处进行展示的联动效果。
其中,所述第二信息页面包括多种不同类型的数据;
所述跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示,包括:
在接收到所述用户对所述扩展图像元素执行的目标操作后,加载所述第二信息页面,为所述第二信息页面创建父滚动容器,并根据所述第二信息页面的页面数据创建对应的子滚动容器;
根据所述扩展图像元素对应的锚点标识信息,确定所述扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
其中,所述确定所述扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量,包括:
在所述第二信息页面加载的过程中,确定所述子滚动容器相对于所述父滚动容器的位置信息,以及所述子滚动容器的内容高度信息,并根据所述子滚动容器的内容高度信息确定所述父滚动容器的内容高度区间;
在接收到所述用户对所述扩展图像元素执行的目标操作后,确定所述扩展图像元素对应的锚点所属的目标子滚动容器,以及相对于所述目标子滚动容器的内容偏移量;
根据所述锚点相对于所述目标子滚动容器的内容偏移量,以及所述目标子滚动容器相对于所述父滚动容器的位置,确定所述锚点相对于所述父滚动容器的内容偏移量。
其中,还包括:
在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供点击感弹性微动效果。
其中,所述点击感弹性微动效果是通过基于占位图生成的动画进行实现,所述占位图包括当前被操作的扩展图像元素,或从所述第二信息页面对应的锚点位置处截取的图片。
其中,还包括:
根据所述主图容器展示的多个元素关联的文本标签,在所述第二信息页面中提供与所述文本标签对应的操作选项,以用于通过所述操作选项将所述第二信息页面滚动到所述元素对应的锚点所在的位置。
其中,所述第一信息页面中还包括非图容器,所述第一信息页面的内容通过同一屏进行承载。
一种商品对象信息页面,
所述商品对象信息页面包括第一信息页面以及至少一个第二信息页面;
所述第一信息页面包括主图容器,所述主图容器用于展示目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述至少一个第二信息页面中的信息生成的。
其中,在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置进行展示。
一种页面联动处理方法,包括:
在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
一种商品对象信息展示方法,包括:
展示源页面,所述源页面中包括至少一个商品对象的链接;
在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
其中,所述源页面包括:商品对象搜索结果页面,或者,商品对象推荐列表页面。
其中,所述目标页面中包括所述目标商品对象对应的区块,以及基于所述目标商品对象推荐的相似或相关商品对象对应的区块。
一种商品对象信息展示方法,包括:
展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,以用于对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
其中,所述商品对象信息集合包括:商品对象搜索结果组成的集合,或者,商品对象推荐结果组成的集合,或者,根据用户的选择操作生成的集合。
一种商品对象信息展示装置,包括:
浏览请求接收单元,用于接收针对目标商品对象的详情信息浏览请求;
页面提供单元,用于提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
一种页面联动处理装置,包括:
滚动容器创建单元,用于在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
内容偏移量确定单元,用于根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
虚拟滚动容器创建单元,用于将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
子容器重排单元,用于通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
一种商品对象信息展示装置,包括:
源页面展示单元,用于展示源页面,所述源页面中包括至少一个商品对象的链接;
目标页面展示单元,用于在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
一种商品对象信息展示装置,包括:
集合页面展示单元,用于展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
切换展示单元,用于通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,并通过所述区块对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前述任一项所述的方法的步骤。
一种电子设备,包括:
一个或多个处理器;以及
与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行前述任一项所述的方法的步骤。
根据本申请提供的具体实施例,本申请公开了以下技术效果:
通过本申请实施例,可以将商品对象详情信息页面分为第一信息页面以及第二信息页面,第一信息页面主要通过主图容器为用户进行商品对象信息展示,第二信息页面则可以用于承载更详细更丰富的图文详情、用户评价等更多用于帮助用户进行购买决策的信息。接收到用户查看具体商品对象详情信息的请求后,可以首先展示出上述第一信息页面,为了提升浏览效率,在本申请实施例中,可以从第二信息页面承载的信息中,截取或者抽取出扩展图像元素,并插入到第一信息页面的主图容器中。这样,使得第二信息页面中的一些重要信息可以通过第一信息页面的主图容器向用户进行透出,通过主图容器对图文详情等第二信息页面中更丰富的资料进行表达,使用户在第一信息页面的主图容器中浏览到更丰富的购买决策信息,从而放大主图区价值,提高用户信息获取效率(不需要用户从很长的图文详情资料中去进行筛选),进而帮助用户做出更正确的决策。
另外,在通过第一信息页面的主图容器展示出扩展图像元素的过程中,还为用户提供的互动方式。具体的,如果用户点击了其中某个扩展图像元素,则可以直接跳转到第二信息页面中与该元素对应的锚点位置进行展示。使得第二信息页面可以与第一信息页面中的主图容器联动,并且,在具体实现时,还可以通过一些技术处理,使得这种联动的过程中可以更流畅顺滑,提升用户体验,为用户打造“主图即详情”的体感认知。
当然,实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的系统架构的示意图;
图2是本申请实施例提供的第一方法的流程图;
图3至图7是本申请实施例提供的界面示意图;
图8是本申请实施例提供的第二方法的流程图;
图9是本申请实施例提供的第三方法的流程图;
图10是本申请实施例提供的第四方法的流程图;
图11是本申请实施例提供的第一装置的示意图;
图12是本申请实施例提供的第二装置的示意图;
图13是本申请实施例提供的第三装置的示意图;
图14是本申请实施例提供的第四装置的示意图;
图15是本申请实施例提供的电子设备的示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员所获得的所有其他实施例,都属于本申请保护的范围。
在本申请实施例中,为了提升用户在商品对象详情信息页中的信息获取效率,首先可以将商品对象详情信息页面划分为第一信息页面以及至少一个第二信息页面,其中,第一信息页面作为一级页面,可以在用户点击某商品对象的链接后,首先对该第一信息页面进行展示;在展示第一信息页面的过程中,再根据用户在第一信息页面中的操作,确定是否跳转到作为二级页面的第二信息页面中进行展示。具体的,第一信息页面可以仅对商品对象的一些摘要信息进行展示,其中可以包括主图容器,另外还可以包括非图容器,非图容器用于对商品对象的价格、优惠信息等少量的摘要信息进行展示。第二信息页面则可以对商品对象的相关参数、SKU信息、图文详情、用户评价等更详细的信息进行展示。其中,在优选的实施方式下,第一信息页面可以以单屏的形式存在,也即,主图容器以及非图容器可以在同一屏内进行展示,并且可以占满一屏(此时,该第一信息页面可以称为“OneDetail”),以此实现横向滑动查看当前商品对象更多详情信息,纵向滑动一次即可切换到其他商品对象等效果。
另外,在本申请实施例中,除了将商品对象信息页面进行上述改进之外,还对第一信息页面中主图容器进行了进一步的改进。具体的,除了在主图容器展示由商品对象发布者(例如,商家用户等)提供的主图元素之外,还可以从第二信息页面中截取或者抽取一些信息,组成扩展图像元素,并插入到该主图容器中进行展示。例如,对于某服饰类的商品对象,主图元素通常只是少数几个用于从不同角度对服饰进行展示的图片或视频,而在本申请实施例中,还可以从图文详情信息中截取出一些用于对该商品对象的颜色款式、细节、搭配方式等进行介绍的图像,并插入到主图容器中;或者,还可以从已购买该商品对象的用户发布的点评信息中抽取一些信息,合成图像之后插入到主图容器中。这样,用户在浏览第一信息页面的过程中,除了可以通过主图容器查看到普通的主图元素,还可以查看到这些扩展图像元素。而这些扩展图像元素所呈现的内容更有利于帮助用户进行购买决策,因此,通过这种方式,可以在第一信息页面的主图容器中提供更丰富的购买决策信息。
此外,在可选的实施方式中,在保证第一信息页面的主图容器中信息的丰富性的同时,还可以通过交互方面的改进,打通第一信息页面中的主图与第二信息页面(例如,图文详情页面等)中相关信息的表达。例如,在对主图容器中的某个扩展图像元素进行点击之后,可以跳转到第二信息页面中对应的锚点位置进行展示,在可选的方式下,还可以通过联动处理,包括提供被点击的扩展图像元素从主图容器展开到第二信息页面中进行展示的效果等。通过这种方式,可以打造「主图即详情」的体感认知,简化用户在浏览商品资料时的操作路径,从而提升服饰等非标类目的成交转化。
在实现主图与第二信息页面的联动的过程中,需要通过第二信息页面的滚动容器自动将页面内容滚动到被点击的元素对应的锚点位置,但是,由于第二信息页面可能包含多种不同类型数据源,需要通过多种不同的滚动容器进行渲染。此时,在页面之间进行联动的过程中,可能会在跳转的顺滑度等方面会存在一些问题。为此,在本申请实施例中,也提供了相应的解决方案,后文中会有详细介绍。
具体实现时,从系统架构角度而言,如图1所示,可以在移动端的商品对象信息系统中提供本申请实施例相关的功能,具体的,商品对象信息系统可以分为服务端以及客户端。具体从第二信息页面中进行资料截取或抽取,并插入到第一信息页面主图容器中的过程,可以在服务端提前完成。这样,在用户通过客户端请求访问某个商品对象的详情信息时,便可以首先将在这种第一信息页面展示给用户,用户可以通过第一信息页面中的主图容器查看到主图元素以及扩展图像元素。在对其中的扩展图像元素进行点击等操作时,由客户端进行一系列的数据加载、渲染、锚点计算等处理,并跳转到第二信息页面中对应的锚点位置处进行展示。
下面对本申请实施例提供的具体实现方案进行详细介绍。
实施例一
该实施例一首先从前述商品对象信息系统客户端的角度,提供了一种商品对象信息页面展示方法,参见图2,该方法可以包括:
S201:接收针对目标商品对象的详情信息浏览请求。
具体实现时,用户可以通过客户端首页、类目导航页面、搜索结果页面、活动会场页面等多种页面中,获得商品对象的链接信息。例如,客户端首页中通常可以为用户提供一些推荐信息,其中包括多个商品对象的链接,链接中可以包括商品对象的代表图片、标题、价格等信息。用户在对这种链接进行浏览的过程中,如果对其中某个商品对象感兴趣,则可以通过对链接执行点击等操作,以发起对对应的商品对象进行详情信息浏览的请求。相应的,客户端便可以接收到对应的详情信息浏览请求。
S202:提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
在接收到对目标商品对象的详情浏览请求后,便可以将请求提交到服务端,从服务端获取到相关的页面数据,以用于进行展示。其中,在本申请实施例中,由于对商品对象详情信息页面的结构进行了改进,因此,首先可以将目标商品对象关联的第一信息页面进行展示。
其中,在该第一信息页面中,可以包括主图容器,该主图容器在第一信息页面中占据比较大的面积,主要通过图片或者视频等方式,为用户提供关于商品对象的直观的视觉信息。另外,该第一信息页面中还可以包括少量的非图内容,通过非图容器进行展示。也就是说,该第一信息页面中呈现的信息量,位于商品对象的链接信息与第二信息页面(用于对具体的图文详情、用户点评等信息进行展示的页面)之间,会比链接中呈现的信息更丰富一些,但是又不会丰富到第二信息页面的程度。另外,在优选的实施方式下,该第一信息页面可以以单屏的形式存在,也即,可以在同一屏内进行展示,用户可以通过在第一信息页面基础上进行点击或者左右横向滑动等方式,实现对该商品对象更多信息的查看(如果在主图容器处进行左右滑动,首先可以触发主图容器中的元素切换展示,在所有元素展示完成后,如果继续向右滑动,则可以触发进入到第二信息页面;如果是在非图容器所在区域进行向右滑动,则可以直接触发进入到第二信息页面),通过上下滑动,则可以切换到其他商品对象的第一信息页面进行展示,等等。
通过这种方式,可以通过第一信息页面为用户提供一些摘要式的信息,帮助用户明确是否需要进一步了解该商品对象的更详细的信息,如果需要,再进入到第二信息页面中继续进行浏览,否则,可以直接切换到其他商品对象。这样,由于不必在用户点击链接之后就直接进入到很长的图文详情页面,因此,有利于节省资源,提升浏览效率。
通过以上所述可以看出,在这种方式下,第一信息页面中的主图容器中所呈现的内容是很关键的,直接影响用户的下一步操作。但是,普通的主图容器中通常仅用于呈现商家用户发布的普通主图元素,例如,服装类的商品对象,其主图通常是从多个不同角度进行拍摄的照片等。其他的关于商品对象的一些细节特征、搭配信息、用户点评情况等等,都是需要进入到第二信息页面才能查看到。这可能会导致两种情况:第一,有些用户可能会忽略第一信息页面中展示的内容,直接点击跳转到第二信息页面进行更详细信息的查看,对于这类用户而言,第一信息页面的存在反而增加了用户的操作成本;第二种情况可能是,用户对第一信息页面进行了浏览,但是,由于其中展示的内容比较有限,真正可能会打动该用户的信息并未在该第一信息页面中呈现,以至于该用户会误认为该商品对象不符合其需求,以至于放弃对更详细信息的浏览。对于这类用户而言,第一信息页面的存在反而可能会造成用户的流失,在提升浏览-购买转化率方面所起到的作用比较有限。
基于上述情况,在本申请实施例中,主图容器中不仅仅可以对商家用户提供的普通的主图元素进行展示,还可以对扩展图像元素进行展示,这种扩展图像元素就是从第二信息页面中进行截取,或者进行信息抽取并按照一定的模板等生成的图像。由于第二信息页面中包含了能够帮助用户进行购物决策的更丰富的信息,因此,将这些信息通过第一信息页面的主图容器向用户进行透出,通过主图容器对图文详情等第二信息页面中更丰富资料进行表达,使用户在第一信息页面的主图容器中浏览到更丰富的购买决策信息,从而放大主图区价值,提高用户信息获取效率(不需要用户从很长的图文详情资料中去进行筛选),进而帮助用户做出更正确的决策。
具体的,第二信息页面中用于帮助用户进行购买决策的信息可以包括:所述目标商品对象的图文详情信息,和/或,已购买用户对所述目标商品对象发布的点评信息,等等。此时,具体的扩展图像元素可以包括:通过从所述图文详情信息中进行截取的方式生成的图像,和/或,通过对所述点评信息进行抽取并按照模板组织生成的图像。这里需要说明的是,关于图文详情信息以及点评信息,可以位于同一第二信息页面中,也可以通过不同的第二信息页面进行呈现。也就是说,同一商品对象可以关联多个不同的第二信息页面,分别用于呈现多种不同类型的信息。
其中,具体的图文详情信息一方面可以包括目标商品对象的发布者用户(例如商家用户等)提供的长图图流信息。或者,另一种方式下,还可以根据目标商品对象的发布者用户提供的商品对象描述信息进行机器合图,并插入到图文详情信息中的图像信息。也就是还是,对于一些商品对象,商家用户可能并没有为其提供照片等,而只是提供了一些相关的参数等文本描述信息,但是,对于买家用户而言,图像类的信息具有更直观的优势,因此,也可以由服务端通过机器合图的方式,生成具体的图像,并插入到图文详情的图流中,等等。
其中,在从具体图文详细的长图图流中进行图像截取时,可以通过算法模型的方式来自动进行。并且,这种截取过程并不是盲目进行的,而是通常需要根据图流的内容,从中筛选出更能帮助用户进行购物决策的内容,然后再截取出来插入到第一信息页面的主图容器中。但是,商品对象发布者提供的图文详情通常是以长图的形式存在,对于算法而言,比较难以从中进行信息的识别。为此,在本申请实施例中,还可以为商家用户等提供后台的商品对象上线打标工具,在提供图文详情长图时,可以对其中的每张图片进行打标,添加图片的作用等描述信息。系统则可以根据打标结果,保存为结构化信息。这样,具体在通过算法模型从长图图流进行图像截取时,便可以根据这种结构化信息中保存的图片标签,进行信息的筛选识别,以截取出更能够帮助用户进行购买决策的内容。
关于具体的用户点评信息,具体可以包括以文字为主普通点评信息(有些用户可能也会上传相关的图片),还可以包括以图片为主的“买家秀”类的点评信息,等等。在本申请实施例中,由于是需要插入到主图容器中进行展示,因此,主要可以从包含有图片内容的点评信息中进行信息抽取,然后,再利用预先设计的模板等,合成为图片等,以用于插入到第一信息页面的主图容器中。
在完成扩展图像元素的生成之后,还可以按照一定的顺序进行组织编排,之后再依次插入到主图容器中。也就是说,由于主图容器在同一时刻通常只能对一个元素进行展示,需要通过用户执行左右滑动等操作才会切换到下一个元素进行展示,或者加入轮播组件对各元素进行轮流展示。因此,对于用户而言,各个元素是按照先后顺序呈现出现,而通常越是能吸引用户注意的内容,越应该排在前面。因此,在对各元素进行组织编排时,可以根据各元素的内容类型标签等,确定出元素的顺序,再依次插入到主图容器中。并且,在信息的选择和/或对扩展图像元素的组织编排方式等方面,还可以与所述目标商品对象所属的类目信息相关。也就是说,对于不同类目的商品对象而言,用户通常所关心的问题可能会有所不同,因此,可以按照不同的规则进行信息的筛选以及组织编排。
例如,对于服饰类的商品对象,用户普遍比较关心的信息包括:价格是否符合预期、更多的商品细节(效果/材质/尺码)、实际上身效果、用户评价/衣服质量、退款服务、近似款推荐,等等。因此,对于这类的商品对象,如图3所示,可以在第一信息页面的主图容器中的首帧视频(通常是普通的主图元素)之后,插入关于“看颜色款式”、“更多商品细节”、“穿搭推荐”、“实际上身效果”等扩展图像元素。而关于3C数码类的商品对象,具体的用户可能会分为两者,一种是对产品本身比较了解的用户,一种是不了解的用户。对于前者,用户可能更多关心的是价格是否符合预期、优惠力度、用户评价、点评是否可靠、是否正品、后续服务保障,等等。对于后者,用户更多关心的可能是价格是否符合预期、场景卖点、功能参数、用户评价等。因此,对于这类的商品对象,还可以根据用户的不同情况,进行差异化处理。包括对于不同的用户,筛选出不同的扩展图像元素,生成不同的第一信息页面,等等。例如,对于第二类用户,第一信息页面中的主图容器中的元素可以如图4所示,包括“首帧视频”、“看颜色款式”、“了解关键配置参数”、“可选配件”、“卖点故事”,等等。对于同一商品对象对应多个不同第一信息页面的情况,可以在接收到具体用户的浏览请求后,根据具体用户的实际情况进行确定与之匹配的第一信息页面并进行展示。例如,某用户在需要访问一款数码类的商品对象时,可以首先通过一些方式确定该用户对该商品对象的了解程度(例如,可以根据用户的历史浏览记录等进行确定),之后,再提供与之匹配的第一信息页面,等等。
以上对第一信息页面中具体主图容器的扩展展示进行了介绍,在实际应用中,用户除了可以通过在主图容器区域进行左右滑动等方式对容器内多个不同的图像元素进行切换浏览之外,还可以通过对主图容器中显示的图像元素进行点击的方式进行互动。具体的,在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则可以跳转到所述第二信息页面进行展示。例如,可以跳转到图文详情页,用户可以从图文详情页中获取到更丰富详细的信息。或者,如果被点击的扩展图像元素是从用户点评信息中进行抽取后生成的,则可以跳转到用户评价页,引导用户消费更多UGC(User Generated Content,用户生产内容,或称用户原创内容)内容,促进购买转化。
或者,在更为优选的实现方式中,在主图容器中的某个扩展图像元素被点击之后,还可以直接跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示。也就是说,由于扩展图像元素是从第二信息页面中进行截取或者抽取的,因此,第二信息页面中实际上存在与这种扩展图像元素对应的数据源内容,该数据源内容在第二信息页面中的位置,便是该扩展图像元素的锚点位置。在用户浏览第一信息页面中的主图容器的过程中,如果对其中某个扩展图像元素进行了点击,则通常是证明用户对该扩展图像元素的内容比较感兴趣,因此,可以直接跳转到第二信息页面中与该扩展图像元素对应的内容的位置,否则如果是普通的跳转,则通常是从第二信息页面的顶端开始展示,用户还需要通过向下滑动等方式去找到自己实际需要关心的内容。因此,通过这种直接跳转到被点击的扩展图像元素对应的锚点位置的方式,可以进一步提升用户的浏览效率。例如,如图5所示,假设某商品对象第一信息页面的主图容器中展示的图5(A)所示的扩展图像元素进行了点击,则可以直接跳转到如图5(B)所示的第二信息页面中,与该扩展图像元素对应的位置处进行展示。为了进行对比,可以参见图6,如果第一信息页面的主图容器中,图6(A)所示的图像元素已经是最后一个元素,则如果用户继续向左滑动,则可以触发对第二信息页面的展示。此时,由于用户没有对主图容器中的任何图像元素执行点击操作,则如图6(B)所示,可以从第二信息页面的顶部开始进行展示。此外,如果用户直接在第一信息页面的非图区域执行向左滑动等操作,也可以触发从顶部开始对第二信息页面的展示,等等。这种从顶部开始对第二信息页面进行展示的情况下,就需要用户自行从比较长的信息中筛选有用的信息,以进行购物决策。
另外,在可选的实施方式中,还可以在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供具体的扩展图像元素从所述第一信息页面的主图容器展开到所述第二信息页面中所述锚点位置处进行展示的联动效果。也就是说,不仅可以直接跳转到锚点的位置,还可以使得跳转的过程更流畅顺滑,从而提升页面转换过程中的视觉效果,打造“主图即详情”的体感认知。
但是,在上述进行主图容器与第二信息页面之间的联动的过程中,如果要达到上述流畅顺滑的目的,则涉及到第二信息页面的内容滚动控制问题。也就是说,在普通的场景中,一个页面的内容滚动过程通常是由用户的滑动等操作触发的,而在本申请实施例的场景中,是由用户在第一信息页面中执行的点击操作,触发第二信息页面的内容滚动到锚点位置,在此过程中,需要由第二信息页面的滚动容器进行自动的内容滚动以及渲染处理。但是,在本申请实施例的场景中,第二信息页面的内容可能会比较多,并且,甚至可能存在多种不同类型的数据源。例如,如图6(B)所示,在第二信息页面中,就包括了两种不同类型的数据,第一种类型是页面顶部的关于SKU信息、库存信息、费用信息、服务保障信息等数据,第二种类型是具体的图文详情,包括长图的图流等。而对于上述不同类型的数据,由于在渲染方式上会存在比较明显的不同,因此,通常需要使用复合滚动容器来实现。也就是说第二信息页面中可以包括一个父滚动容器,以及两个子滚动容器,两个子滚动容器分别用于渲染不同类型的数据。
在上述第二信息页面中存在复合滚动容器的情况下,要想在主图容器与该第二信息页面之间进行联动,并实现无缝的流畅顺滑效果,则是不容易实现的。例如,现有技术中的一种方案是,将所有类型的数据源在客户端处理合并成一套数据源,使用单个滚动容器渲染,然后锚点滚动到该位置。也就是说,放弃了复合滚动容器的方案,把多个不同的子滚动容器,转换成一个滚动容器。此时,由于不再存在读个滚动容器,因此,在联动过程中可以达到流畅顺滑的目的,但是,这种方式的缺陷在于,需要等所有数据到达端上,才能跳转到锚点的位置,因此,首次加载时锚点等待时间较久。并且,较复杂的服务端数据源通过端上转换数据协议成本也比较高。
另一种现有技术中的方案是,按照子滚动容器中的内容高度,将每个子滚动容器展开,主滚动容器的高度等于各个子滚动容器的内容高度之和。但是这种方式的缺陷在于,父滚动容器的高度过高,以至于视窗中的区块组件无法得到复用,每个区块组件只能用于展示一份数据,这样会导致端上的内存使用增加,容易造成内存不足的情况发生。
再一种现有技术的方案中,考虑了复用特性,将每个子滚动容器视窗的大小设置为相同,在触发内容滚动之后,首先由父滚动容器对第一个子滚动容器的内容进行滚动,第一个子滚动窗口滚动完成之后,触发父滚动容器把第二个子滚动容器的视窗卡在最上面,继续滚动之后就会对第二个子滚动容器的内容进行展示。这种方式下,由于在触发的时候,需要不断地监听滚动事件,会容易造成中间有些滚动的不连贯,容易造成滚动卡顿,原生阻尼效果、惯性滑动丢失、不同子滚动容器之间滚动断层等问题,损失用户体验。
针对上述情况,本申请实施例还针对第二信息页面关联有复合滚动容器的情况,提供了相应的渲染方案,以便在第一信息页面的主图容器与第二信息页面之间进行联动的过程中,能够实现更流畅顺滑的效果的同时,避免造成对内存的过多占用,避免增加端侧的处理成本。在该方案中,由于父滚动容器中存在用来管理所有子滚动容器的面板(通常称为contentView),该contentView具有对父滚动容器中的所有子滚动容器进行线性排列的功能。该方案就是利用contentView的上述特性,将contentView转换为虚拟容器,并使之与父滚动容器同步滚动。在滚动的过程中,还可以通过所述虚拟容器不断地对子滚动容器重新进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。以此实现更流畅更顺滑的联动效果。
具体的,客户端在接收到所述用户对所述扩展图像元素执行的目标操作后,加载所述第二信息页面,为第二信息页面创建父滚动容器,并且还可以根据所述第二信息页面的页面数据创建对应的子滚动容器。之后,可以根据当前被点击的扩展图像元素对应的锚点标识信息(可以在向主图容器中插入扩展图像元素时,为其关联锚点标识),确定出该扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发父滚动容器将页面内容滚动到所述锚点的位置处进行展示。之后,为了获得顺滑的联动效果,可以将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;再通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
其中,具体在确定扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量时,可以有多种方式。例如,在一种方式下,可以在所述第二信息页面加载的过程中,确定所述子滚动容器相对于所述父滚动容器的位置信息,以及所述子滚动容器的内容高度信息,并根据所述子滚动容器的内容高度信息确定所述父滚动容器的内容高度区间。在接收到所述用户对所述扩展图像元素执行的目标操作后,可以首先确定所述扩展图像元素对应的锚点所属的目标子滚动容器,以及相对于所述目标子滚动容器中的内容偏移量;之后,再根据所述锚点相对于所述目标子滚动容器中的内容偏移量,以及所述目标子滚动容器相对于所述父滚动容器的位置,确定所述锚点相对于所述父滚动容器的内容偏移量。
具体而言,在本申请实施例提供的上述实现方案中,滚动容器算法工作原理是:当父滚动容器(containerScrollView)向下滚动时,可以持续设置第一个子滚动容器(subScrollView)的内容偏移量(contentoffset)直到该subScrollView的内容全部展示完全。
第一个subScrollView滚动到底部后,第二个subScrollView开始移动到containerScrollView窗口区域,其frame(相对于containerScrollView的位置)从containerScrollView窗口底部增长到完整充满整个containerScrollView窗口区域,同时第一个subScrollView.frame相应从containerScrollView窗口顶部减小到frame高为0并离开containerScrollView窗口区域。
为了达到上述效果,就可以通过前文所述的将contentView设置为虚拟容器,并使之与containerScrollView同步滚动,并在滚动过程中,不断重新对各个subScrollView进行线性排列。具体的,首先可以转换containerScrollView的bounds(该view在本地坐标系统中的位置和大小)为contentView的frame(该view在父view坐标系统中的位置和大小),使得contentView窗口区域一直和containerScrollView窗口对齐,并且转换containerScrollView的contentOffset为contentView的bounds,意味着将父滚动容器的内容偏移量传递给虚拟容器contentView,contentView保持和containerScrollView滚动联动特性。
之后,迭代所有subScrollView,保持每一个subScrollView的yOffsetOfCurrentSubview(相对于当前子滚动容器的y轴偏移量)值。迭代所有subScrollView,根据当前containerScrollView.contentOffset和subScrollView.yOffsetOfCurrentSubview,计算subScrollView.contentOffset和frame,并进行设置。
具体的时序关系可以为:
如果subScrollView没有到达containerScrollView窗口顶端,保持subScrollView.contentOffset.y始终为0,使得内容滚动跟随containerScrollView的滚动。
否则始终固定subScrollView.frame相对containerScrollView窗口顶部,同时调整subScrollView.contentOffset.y展示当前滚动内容。
保持subScrollView frame不超出containerScrollView窗口底部,当页面滚动足够远出现subScrollView剩余内容高度小于在containerScrollView窗口高度,调整其frame大小。
通过上述方式,可以实现从第一信息页面的主图容器到第二信息页面之间的更流畅顺滑的联动,达到无缝联动的效果。
这里需要说明的是,由于本申请实施例中,在用户点击了第一信息页面中主图容器中的某个扩展图像元素之和,需要进行一系列的计算处理,包括第二信息页面的创建、数据请求、锚点计算等等,之后才能够跳转到第二信息页面中锚点所在的位置;尤其是在用户首次点击主图容器中的一个扩展图像元素时,还需要对第二信息页面的页面数据进行加载,因此,可能需要耗费一些时间。也就是说,用户点击了主图容器中的某个元素之和,可能需要延迟一定时间(例如,通常是在零点几秒的量级),才能够完成锚点的跳转。虽然延迟的时间比较短,但是也是可能被用户感知到的,从而影响用户的体验。为此,在优选的实施方式中,还可以在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供点击感弹性微动效果。也即,虽然用户是通过在触摸屏上进行点击的方式进行操作,但是,可以从视觉上让用户获得点击了一个弹性的实体按钮的感觉,由于这种弹性微动效果需要经历一小段时间,因此,刚好可以用来抵消具体的计算处理过程给用户造成的延时感。
其中,具体实现时,在提供上述弹性微动效果时,可以看作是创建并播放一个动画的过程。具体的,在创建动画时,可以首先确定一张占位图,其中,如果是首次加载第二信息页面,则可以将主图容器中当前被点击的元素作为占位图,该占位图可以贴在屏幕上作为动画承接者;如果不是首次加载(例如,之前已经有主图容器中的其他元素被点击过,触发了第二信息页面的记载,并将数据缓存在了本地),则为达到更好的动画效果,可以将第二信息页面中对应位置的截图贴在屏幕上作动画承载者,超过原始被点击元素范围的内容可以进行截断隐藏。之和,可以计算动画初始位置与动画结束位置,然后在原始元素区域作放大、改变位置的动画;关于第二信息页面中的截断区域,可以在占位图完全显示后同步进行拉伸动画。动画完毕后将占位图贴在第二信息页面的子容器上,锚点完成后可以移除该占位图。
以上对第一信息页面的主图容器与第二信息页面进行联动的实现方案进行了详细介绍。这里需要说明的是,在具体实现时,还可以将主图容器中普通的主图元素也插入到第二信息页面中,这样,用户在主图容器中点击主图元素时也可以跳转到第二信息页面与该主图元素对应的位置,等等。
完成上述联动过程中,可以展示出具体的第二信息页面。在具体实现时,由于主图容器中展示的各个元素的作用等通常是比较明确的,并且这些元素也在第二信息页面中存在对应的元素。因此,还可以预先为各个元素提供文本标签,例如,具体可以包括“主图”、“细节”、“面料”等等;在对第二信息页面进行展示的过程中,可以根据所述主图容器展示的多个元素关联的文本标签,在所述第二信息页面中提供与所述文本标签对应的操作选项,以用于通过所述操作选项将所述第二信息页面滚动到所述元素对应的锚点所在的位置。例如,如图7所示,可以在第二信息页面的顶端等位置通过浮层等形式提供上述各种操作选项,使得用户可以通过点击这种具体的操作选项的方式,快速跳转到对应的内容所在的位置进行展示,等等。
另外,需要说明的是,具体的第一信息页面中还可以包括非图容器,在一种实现方式下,具体的第一信息页面可以在同一屏内进行展示。并且,在接收到所述主图容器所在区域内的第一方向(例如,左右滑动)的滑动操作后,对所述主图容器中的元素进行切换展示;在所述非图容器接收到第一方向的滑动操作后,跳转到所述第二信息页面进行展示;接收到第二方向(例如,上下滑动)的滑动操作后,则可以切换到其他商品对象关联的第一信息页面进行展示。
总之,通过本申请实施例,可以将商品对象详情信息页面分为第一信息页面以及第二信息页面,第一信息页面主要通过主图容器为用户进行商品对象信息展示,第二信息页面则可以用于承载更详细更丰富的图文详情、用户评价等更多用于帮助用户进行购买决策的信息。接收到用户查看具体商品对象详情信息的请求后,可以首先展示出上述第一信息页面,为了提升浏览效率,在本申请实施例中,可以从第二信息页面承载的信息中,截取或者抽取出扩展图像元素,并插入到第一信息页面的主图容器中。这样,使得第二信息页面中的一些重要信息可以通过第一信息页面的主图容器向用户进行透出,通过主图容器对图文详情等第二信息页面中更丰富的资料进行表达,使用户在第一信息页面的主图容器中浏览到更丰富的购买决策信息,从而放大主图区价值,提高用户信息获取效率(不需要用户从很长的图文详情资料中去进行筛选),进而帮助用户做出更正确的决策。
另外,在通过第一信息页面的主图容器展示出扩展图像元素的过程中,还为用户提供的互动方式。具体的,如果用户点击了其中某个扩展图像元素,则可以直接跳转到第二信息页面中与该元素对应的锚点位置进行展示。使得第二信息页面可以与第一信息页面中的主图容器联动,并且,在具体实现时,还可以通过一些技术处理,使得这种联动的过程中可以更流畅顺滑,提升用户体验,为用户打造“主图即详情”的体感认知。
实施例二
该实施例二提供了一种商品对象信息页面,其中,所述商品对象信息页面包括第一信息页面以及至少一个第二信息页面;
所述第一信息页面包括主图容器,所述主图容器用于展示目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述至少一个第二信息页面中的信息生成的。
其中,在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置进行展示。
实施例三
在前述实施例一、二中,提供了第二信息页面与第一信息页面中的主图容器操作联动的相关实现方案,在联动交互上给用户提供了场景式体验。在实际应用中,只要在前后页面具有相关信息联动场景下都可以使用该方案。为此,本申请实施例三提供了一种页面联动处理方法,参见图8,该方法可以包括:
S801:在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
S802:根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
S803:将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
S804:通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
实施例四
在前述实施例中,是将商品对象的详情页面拆分为第一信息页面以及第二信息页面,用户发起对商品对象详情信息的浏览请求后,可以首先展示出第一信息页面(具体可以是对详情信息中的部分摘要信息进行展示),并通过该第一详情信息页面中的主图容器,对第二信息页面中可以帮助用户进行购买决策的关键信息进行透出。而在该实施例四中,关于具体的详情摘要还可以以信息卡片(卡片样式的区块)的形式存在,并且可以在将多个商品对象的信息卡片聚合在同一个目标页面中进行展示。例如,用户在搜索结果页面或者推荐页面中点击某商品对象的链接之后,可以触发打开该目标页面,该目标页面中可以展示出多个商品对象的信息卡片“瀑布流”。其中,每个信息卡片可以用于对一个商品对象的详情摘要信息进行展示,此外,每个信息卡片中都可以包括主图容器,并且,具体的主图容器中除了可以对商家用户指定的商品对象主图元素进行展示之外,还可以展示出一些扩展图像元素。这种扩展图像元素可以是从具体商品对象的详情信息页面中进行截取或者抽取等方式生成的。
具体的,参见图9,该实施例四提供了一种商品对象信息展示方法,该方法可以包括:
S901:展示源页面,所述源页面中包括至少一个商品对象的链接;
具体的,源页面具体可以包括:商品对象搜索结果页面,或者,商品对象推荐列表页面,等等。
S902:在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
具体的,由于是通过对源页面中的其中一个商品对象进行点击等操作触发对目标页面的展示,因此,该目标页面中首先可以包括该目标商品对象的信息卡片。关于其他信息卡片,可以对应源页面中的其他商品对象,或者,还可以对应基于所述目标商品对象推荐的相似或相关商品对象。例如,源页面中包括商品对象A、B、C等等,用户对其中的B进行了点击,则在目标页面中展示的卡片瀑布流中,可以包括关于该商品对象B的信息卡片,关于其他的信息卡片,可以对应上述商品对象A、C等。或者,由于用户在点击该商品对象B时,通常是证明该用户对该商品对象B比较感兴趣,因此,还可以在该商品对象B的基础上推荐更多相似或者相关的商品对象,并将对应的详情摘要信息展示在目标页面中的其他信息卡片中,等等。
实施例五
在该实施例五中,还可以在通过传统的列表形式展示一些商品对象信息集合页面(例如,可以包括搜索结果集合页面,推荐结果集合页面,或者还可以包括用户的“收藏夹”、“购物车”页面,等等)时,提供“一键式”切换到卡片式展示模式的操作选项。在切换之后,可以在上述集合页面中提供多个卡片样式的区块,每个区块中同样可以包括主图容器,并且主图容器可以用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素。
具体的,该实施例五提供了一种商品对象信息展示方法,参见图10,该方法可以包括:
S1001:展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
S1002:通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,以用于对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
其中,所述商品对象信息集合包括:商品对象搜索结果组成的集合,或者,商品对象推荐结果组成的集合,或者,根据用户的选择操作生成的集合。其中,根据用户选择操作生成的集合具体可以包括收藏夹,或者,等待进行进一步的购买确认的商品对象集合(例如,俗称的“购物车”等)。
关于前述实施例二至五中的未详述部分,可以参见实施例一中的记载,这里不再赘述。
需要说明的是,本申请实施例中可能会涉及到对用户数据的使用,在实际应用中,可以在符合所在国的适用法律法规要求的情况下(例如,用户明确同意,对用户切实通知,等),在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。
与实施例一相对应,本申请实施例还提供了一种商品对象信息展示装置,参见图11,该装置可以包括:
浏览请求接收单元1101,用于接收针对目标商品对象的详情信息浏览请求;
页面提供单元1102,用于提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
其中,所述目标商品对象关联的至少一个第二信息页面中的信息包括:所述目标商品对象的图文详情信息,和/或,已购买用户对所述目标商品对象发布的点评信息;
所述扩展图像元素包括:通过从所述图文详情信息中进行截取的方式生成的图像,和/或,通过对所述点评信息进行抽取并按照模板组织生成的图像。
其中,所述图文详情信息包括:所述目标商品对象的发布者用户提供的长图图流信息,和/或,根据所述目标商品对象的发布者用户提供的商品对象描述信息进行机器合图,并插入到所述图文详情信息中的图像信息。
具体的,所述发布者用户提供的长图图流信息关联有结构化信息,所述结构化信息包括所述长图图流中包括的多个图片的描述信息,所述描述信息由所述发布者用户在发布所述长图图流信息进行提供,以用于根据所述图片的描述信息从所述长图图流信息中进行图片选择,以生成所述扩展图像元素。
其中,所述扩展图像元素具体可以是从所述信息中选择目标信息后,对目标信息进行截取或抽取的方式得到的,得到的多份扩展图像元素在按顺序进行组织编排后,插入到所述主图容器中;其中,对目标信息的选择和/或对扩展图像元素的组织编排方式,与所述目标商品对象所属的类目信息相关。
其中,同一所述商品对象对应多个不同的第一信息页面,其中,在不同的第一信息页面中,扩展图像元素的内容和/或组织编排方式不同,用于匹配不同用户的浏览需求。
具体实现时,该装置还可以包括:
跳转单元,用于在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示。
另外,该装置还可以包括:
联动效果提供单元,用于在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供从所述扩展图像元素从所述主图容器展开到所述第二信息页面中所述锚点位置处进行展示的联动效果。
其中,所述第二信息页面包括多种不同类型的数据;
所述跳转单元包括:
滚动容器创建子单元,用于在接收到所述用户对所述扩展图像元素执行的目标操作后,加载所述第二信息页面,为所述第二信息页面创建父滚动容器,并根据所述第二信息页面的页面数据创建对应的子滚动容器;
内容偏移量确定子单元,用于根据所述扩展图像元素对应的锚点标识信息,确定所述扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
虚拟滚动容器创建子单元,用于将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
子容器重排子单元,用于通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
具体的,所述内容偏移量确定子单元可以包括:
内容高度信息确定子单元,用于在所述第二信息页面加载的过程中,确定所述子滚动容器相对于所述父滚动容器的位置信息,以及所述子滚动容器的内容高度信息,并根据所述子滚动容器的内容高度信息确定所述父滚动容器的内容高度区间;
第一偏移量确定子单元,用于在接收到所述用户对所述扩展图像元素执行的目标操作后,确定所述扩展图像元素对应的锚点所属的目标子滚动容器,以及相对于所述目标子滚动容器的内容偏移量;
第二偏移量确定子单元,用于根据所述锚点相对于所述目标子滚动容器的内容偏移量,以及所述目标子滚动容器相对于所述父滚动容器的位置,确定所述锚点相对于所述父滚动容器的内容偏移量。
具体的,该装置还可以包括:
动效提供单元,用于在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供点击感弹性微动效果。
其中,所述点击感弹性微动效果是通过基于占位图生成的动画进行实现,所述占位图包括当前被操作的扩展图像元素,或从所述第二信息页面对应的锚点位置处截取的图片。
另外,该装置还可以包括:
文本标签选项提供单元,用于根据所述主图容器展示的多个元素关联的文本标签,在所述第二信息页面中提供与所述文本标签对应的操作选项,以用于通过所述操作选项将所述第二信息页面滚动到所述元素对应的锚点所在的位置。
其中,所述第一信息页面中还包括非图容器,所述第一信息页面的内容通过同一屏进行承载。
与实施例三相对应,本申请实施例还提供了一种页面联动处理装置,参见图12,该装置可以包括:
滚动容器创建单元1201,用于在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
内容偏移量确定单元1202,用于根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
虚拟滚动容器创建单元1203,用于将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
子容器重排单元1204,用于通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
与实施例四相对应,本申请实施例还提供了一种商品对象信息展示装置,参见图13,该装置可以包括:
源页面展示单元1301,用于展示源页面,所述源页面中包括至少一个商品对象的链接;
目标页面展示单元1302,用于在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
其中,所述源页面包括:商品对象搜索结果页面,或者,商品对象推荐列表页面。
所述目标页面中包括所述目标商品对象对应的区块,以及基于所述目标商品对象推荐的相似或相关商品对象对应的区块。
与实施例五相对应,本申请实施例还提供了一种商品对象信息展示装置,参见图14,该装置可以包括:
集合页面展示单元1401,用于展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
切换展示单元1402,用于通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,并通过所述区块对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
其中,所述商品对象信息集合包括:商品对象搜索结果组成的集合,或者,商品对象推荐结果组成的集合,或者,根据用户的选择操作生成的集合。
另外,本申请实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前述方法实施例中任一项所述的方法的步骤。
以及一种电子设备,包括:
一个或多个处理器;以及
与所述一个或多个处理器关联的存储器,所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时,执行前述方法实施例中任一项所述的方法的步骤。
其中,图15示例性的展示出了电子设备的架构,例如,设备1500可以是移动电话,计算机,数字广播终端,消息收发设备,游戏控制台,平板设备,医疗设备,健身设备,个人数字助理,飞行器等。
参照图15,设备1500可以包括以下一个或多个组件:处理组件1502,存储器1504,电源组件1506,多媒体组件1508,音频组件1510,输入/输出(I/O)的接口1512,传感器组件1514,以及通信组件1516。
处理组件1502通常控制设备1500的整体操作,诸如与显示,电话呼叫,数据通信,相机操作和记录操作相关联的操作。处理元件1502可以包括一个或多个处理器1520来执行指令,以完成本公开技术方案提供的方法的全部或部分步骤。此外,处理组件1502可以包括一个或多个模块,便于处理组件1502和其他组件之间的交互。例如,处理部件1502可以包括多媒体模块,以方便多媒体组件1508和处理组件1502之间的交互。
存储器1504被配置为存储各种类型的数据以支持在设备1500的操作。这些数据的示例包括用于在设备1500上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消息,图片,视频等。存储器1504可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。
电源组件1506为设备1500的各种组件提供电力。电源组件1506可以包括电源管理系统,一个或多个电源,及其他与为设备1500生成、管理和分配电力相关联的组件。
多媒体组件1508包括在设备1500和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中,多媒体组件1508包括一个前置摄像头和/或后置摄像头。当设备1500处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
音频组件1510被配置为输出和/或输入音频信号。例如,音频组件1510包括一个麦克风(MIC),当设备1500处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1504或经由通信组件1516发送。在一些实施例中,音频组件1510还包括一个扬声器,用于输出音频信号。
I/O接口1512为处理组件1502和外围接口模块之间提供接口,上述外围接口模块可以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件1514包括一个或多个传感器,用于为设备1500提供各个方面的状态评估。例如,传感器组件1514可以检测到设备1500的打开/关闭状态,组件的相对定位,例如所述组件为设备1500的显示器和小键盘,传感器组件1514还可以检测设备1500或设备1500一个组件的位置改变,用户与设备1500接触的存在或不存在,设备1500方位或加速/减速和设备1500的温度变化。传感器组件1514可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1514还可以包括光传感器,如CMOS或CCD图像传感器,用于在成像应用中使用。在一些实施例中,该传感器组件1514还可以包括加速度传感器,陀螺仪传感器,磁传感器,压力传感器或温度传感器。
通信组件1516被配置为便于设备1500和其他设备之间有线或无线方式的通信。设备1500可以接入基于通信标准的无线网络,如WiFi,或2G、3G、4G/LTE、5G等移动通信网络。在一个示例性实施例中,通信部件1516经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中,所述通信部件1516还包括近场通信(NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RFID)技术,红外数据协会(IrDA)技术,超宽带(UWB)技术,蓝牙(BT)技术和其他技术来实现。
在示例性实施例中,设备1500可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现,用于执行上述方法。
在示例性实施例中,还提供了一种包括指令的非临时性计算机可读存储介质,例如包括指令的存储器1504,上述指令可由设备1500的处理器1520执行以完成本公开技术方案提供的方法。例如,所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统或系统实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上对本申请所提供的商品对象信息展示方法及装置,进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的一般技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处。综上所述,本说明书内容不应理解为对本申请的限制。
Claims (15)
1.一种商品对象信息展示方法,其特征在于,包括:
接收针对目标商品对象的详情信息浏览请求;
提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
2.根据权利要求1所述的方法,其特征在于,
所述用目标商品对象关联的至少一个第二信息页面中的信息包括:所述目标商品对象的图文详情信息,和/或,已购买用户对所述目标商品对象发布的点评信息;
所述扩展图像元素包括:通过从所述图文详情信息中进行截取的方式生成的图像,和/或,通过对所述点评信息进行抽取并按照模板组织生成的图像。
3.根据权利要求1所述的方法,其特征在于,
所述扩展图像元素是从所述信息中选择目标信息后,对目标信息进行截取或抽取的方式得到的,得到的多份扩展图像元素在按顺序进行组织编排后,插入到所述主图容器中;其中,对目标信息的选择和/或对扩展图像元素的组织编排方式,与所述目标商品对象所属的类目信息相关。
4.根据权利要求1所述的方法,其特征在于,
同一所述商品对象对应多个不同的第一信息页面,其中,在不同的第一信息页面中,扩展图像元素的内容和/或组织编排方式不同,用于匹配不同用户的浏览需求。
5.根据权利要求1所述的方法,其特征在于,还包括:
在所述主图容器对所述扩展图像元素进行展示的过程中,如果接收到用户对所述扩展图像元素执行的目标操作,则跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示。
6.根据权利要求5所述的方法,其特征在于,还包括:
在跳转到所述第二信息页面中所述锚点位置处进行展示的过程中,提供从所述扩展图像元素从所述主图容器展开到所述第二信息页面中所述锚点位置处进行展示的联动效果。
7.根据权利要求6所述的方法,其特征在于,
所述第二信息页面包括多种不同类型的数据;
所述跳转到所述第二信息页面中与所述扩展图像元素对应的锚点位置处进行展示,包括:
在接收到所述用户对所述扩展图像元素执行的目标操作后,加载所述第二信息页面,为所述第二信息页面创建父滚动容器,并根据所述第二信息页面的页面数据创建对应的子滚动容器;
根据所述扩展图像元素对应的锚点标识信息,确定所述扩展图像元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
8.一种商品对象信息页面,其特征在于,
所述商品对象信息页面包括第一信息页面以及至少一个第二信息页面;
所述第一信息页面包括主图容器,所述主图容器用于展示目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述至少一个第二信息页面中的信息生成的。
9.一种页面联动处理方法,其特征在于,包括:
在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
10.一种商品对象信息展示方法,其特征在于,包括:
展示源页面,所述源页面中包括至少一个商品对象的链接;
在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
11.一种商品对象信息展示方法,其特征在于,包括:
展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,以用于对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
12.一种商品对象信息展示装置,其特征在于,包括:
浏览请求接收单元,用于接收针对目标商品对象的详情信息浏览请求;
页面提供单元,用于提供所述目标商品对象的第一信息页面,所述第一信息页面中包括主图容器,所述主图容器用于展示所述目标商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据所述目标商品对象关联的至少一个第二信息页面中的信息生成的。
13.一种页面联动处理装置,其特征在于,包括:
滚动容器创建单元,用于在第一页面中的目标元素被操作,并触发与第二页面的联动后,为所述第二页面创建父滚动容器,并根据所述第二页面的页面数据创建对应的子滚动容器;
内容偏移量确定单元,用于根据所述目标元素对应的锚点标识信息,确定所述目标元素对应的锚点相对于所述父滚动容器的内容偏移量,以用于触发所述父滚动容器将页面内容滚动到所述锚点的位置处进行展示;
虚拟滚动容器创建单元,用于将所述父滚动容器关联的用于对所述子滚动容器进行线性排列的控制视窗转换为虚拟容器,并通过将所述父滚动容器中产生的内容偏移量传递给所述虚拟容器,使得所述虚拟容器保持与所述父滚动容器同步滚动;
子容器重排单元,用于通过所述虚拟容器逐步调整所述子滚动容器相对于所述虚拟容器的位置,并重新对所述子滚动容器进行线性排列,以使得在后子滚动容器的顶部跟随在前子滚动容器的底部所在的位置。
14.一种商品对象信息展示装置,其特征在于,包括:
源页面展示单元,用于展示源页面,所述源页面中包括至少一个商品对象的链接;
目标页面展示单元,用于在其中一目标商品对象的链接被触发后,展示目标页面,所述目标页面中包括多个卡片样式的区块,所述区块用于对单个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
15.一种商品对象信息展示装置,其特征在于,包括:
集合页面展示单元,用于展示商品对象信息集合页面,所述商品对象信息集合页面中包括以列表的形式展示多个商品对象的链接,以及用于对展示模式进行切换的操作选项;
切换展示单元,用于通过所述操作选项接收到切换请求后,在所述商品对象信息集合页面中提供多个卡片样式的区块,并通过所述区块对所述集合中的多个商品对象的详情摘要信息进行展示,其中,所述区块中包括主图容器,所述主图容器用于展示对应商品对象的至少一个主图元素以及至少一个扩展图像元素,所述扩展图像元素是根据对应商品对象关联的详情信息页面中的信息生成的。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110655412.9A CN113656026A (zh) | 2021-06-11 | 2021-06-11 | 商品对象信息展示方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110655412.9A CN113656026A (zh) | 2021-06-11 | 2021-06-11 | 商品对象信息展示方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113656026A true CN113656026A (zh) | 2021-11-16 |
Family
ID=78488968
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110655412.9A Pending CN113656026A (zh) | 2021-06-11 | 2021-06-11 | 商品对象信息展示方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113656026A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114185473A (zh) * | 2021-12-17 | 2022-03-15 | 平安壹钱包电子商务有限公司 | 在页面中显示图片的方法、装置、设备及可读存储介质 |
CN114201100A (zh) * | 2021-12-09 | 2022-03-18 | 北京字节跳动网络技术有限公司 | 一种界面交互的方法、装置、计算机设备及存储介质 |
CN114371846A (zh) * | 2021-12-15 | 2022-04-19 | 阿里巴巴(中国)有限公司 | 商品详情页面展示方法及电子设备 |
WO2024066138A1 (zh) * | 2022-09-27 | 2024-04-04 | 阿里巴巴(中国)有限公司 | 对店铺内的商品信息进行展示的方法及电子设备 |
Citations (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130198614A1 (en) * | 2011-02-15 | 2013-08-01 | Adobe Systems Incorporated | Methods and Systems for Designing Documents with Inline Scrollable Elements |
US20150277741A1 (en) * | 2014-03-31 | 2015-10-01 | Microsoft Corporation | Hierarchical virtual list control |
US20150310384A1 (en) * | 2014-04-23 | 2015-10-29 | Alibaba Group Holding Limited | Method and system of processing commodity object information |
CN106610984A (zh) * | 2015-10-22 | 2017-05-03 | 阿里巴巴集团控股有限公司 | 商品对象页面信息处理方法及装置 |
CN106886538A (zh) * | 2015-12-16 | 2017-06-23 | 阿里巴巴集团控股有限公司 | 提供业务对象信息的方法及装置 |
WO2017107829A1 (zh) * | 2015-12-23 | 2017-06-29 | 阿里巴巴集团控股有限公司 | 提供商品对象信息的方法及装置 |
CN107742250A (zh) * | 2017-12-04 | 2018-02-27 | 深圳春沐源控股有限公司 | 商品浏览记录的显示方法和显示系统 |
CN107885767A (zh) * | 2017-09-26 | 2018-04-06 | 五八有限公司 | 一种页面操作方法及装置 |
US20180210725A1 (en) * | 2017-01-26 | 2018-07-26 | Nice Ltd. | Image based method and system for building object model and application states comparison and graphic-based interoperability with an application |
CN111626810A (zh) * | 2020-04-16 | 2020-09-04 | 北京城市网邻信息技术有限公司 | 一种房源信息的展示方法和装置 |
CN111626807A (zh) * | 2019-02-28 | 2020-09-04 | 阿里巴巴集团控股有限公司 | 商品对象信息处理方法、装置及电子设备 |
CN112070569A (zh) * | 2019-06-11 | 2020-12-11 | 阿里巴巴集团控股有限公司 | 商品交易处理方法及商品展示方法、装置及电子设备 |
CN112182426A (zh) * | 2019-07-05 | 2021-01-05 | 阿里巴巴集团控股有限公司 | 用户界面信息展示方法、装置及电子设备 |
CN112749322A (zh) * | 2019-10-31 | 2021-05-04 | 阿里巴巴集团控股有限公司 | 商品对象信息推荐方法、装置及电子设备 |
-
2021
- 2021-06-11 CN CN202110655412.9A patent/CN113656026A/zh active Pending
Patent Citations (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130198614A1 (en) * | 2011-02-15 | 2013-08-01 | Adobe Systems Incorporated | Methods and Systems for Designing Documents with Inline Scrollable Elements |
US20150277741A1 (en) * | 2014-03-31 | 2015-10-01 | Microsoft Corporation | Hierarchical virtual list control |
US20150310384A1 (en) * | 2014-04-23 | 2015-10-29 | Alibaba Group Holding Limited | Method and system of processing commodity object information |
CN106610984A (zh) * | 2015-10-22 | 2017-05-03 | 阿里巴巴集团控股有限公司 | 商品对象页面信息处理方法及装置 |
CN106886538A (zh) * | 2015-12-16 | 2017-06-23 | 阿里巴巴集团控股有限公司 | 提供业务对象信息的方法及装置 |
WO2017107829A1 (zh) * | 2015-12-23 | 2017-06-29 | 阿里巴巴集团控股有限公司 | 提供商品对象信息的方法及装置 |
US20180210725A1 (en) * | 2017-01-26 | 2018-07-26 | Nice Ltd. | Image based method and system for building object model and application states comparison and graphic-based interoperability with an application |
CN107885767A (zh) * | 2017-09-26 | 2018-04-06 | 五八有限公司 | 一种页面操作方法及装置 |
CN107742250A (zh) * | 2017-12-04 | 2018-02-27 | 深圳春沐源控股有限公司 | 商品浏览记录的显示方法和显示系统 |
CN111626807A (zh) * | 2019-02-28 | 2020-09-04 | 阿里巴巴集团控股有限公司 | 商品对象信息处理方法、装置及电子设备 |
CN112070569A (zh) * | 2019-06-11 | 2020-12-11 | 阿里巴巴集团控股有限公司 | 商品交易处理方法及商品展示方法、装置及电子设备 |
CN112182426A (zh) * | 2019-07-05 | 2021-01-05 | 阿里巴巴集团控股有限公司 | 用户界面信息展示方法、装置及电子设备 |
WO2021004311A1 (zh) * | 2019-07-05 | 2021-01-14 | 阿里巴巴集团控股有限公司 | 用户界面信息展示方法、装置及电子设备 |
CN112749322A (zh) * | 2019-10-31 | 2021-05-04 | 阿里巴巴集团控股有限公司 | 商品对象信息推荐方法、装置及电子设备 |
CN111626810A (zh) * | 2020-04-16 | 2020-09-04 | 北京城市网邻信息技术有限公司 | 一种房源信息的展示方法和装置 |
Non-Patent Citations (3)
Title |
---|
李成庆: "《数据时代高校微信公众平台和抖音平台用户接受行为研究》", 30 June 2020, 浙江工商大学出版社, pages: 163 - 165 * |
爱吃爱喝: "vue中怎么实现简单的跨⻚⾯锚点效果", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/hjj_flowers/article/details/104705> * |
豌豆荚: "2021淘宝v10.1.0老旧历史版本安装包官方免费下载", pages 1 - 4, Retrieved from the Internet <URL:https://www.wandoujia.com/apps/32267/history_v375> * |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114201100A (zh) * | 2021-12-09 | 2022-03-18 | 北京字节跳动网络技术有限公司 | 一种界面交互的方法、装置、计算机设备及存储介质 |
CN114371846A (zh) * | 2021-12-15 | 2022-04-19 | 阿里巴巴(中国)有限公司 | 商品详情页面展示方法及电子设备 |
CN114185473A (zh) * | 2021-12-17 | 2022-03-15 | 平安壹钱包电子商务有限公司 | 在页面中显示图片的方法、装置、设备及可读存储介质 |
WO2024066138A1 (zh) * | 2022-09-27 | 2024-04-04 | 阿里巴巴(中国)有限公司 | 对店铺内的商品信息进行展示的方法及电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111489219B (zh) | 商品对象信息处理方法、装置及电子设备 | |
CN113656026A (zh) | 商品对象信息展示方法及装置 | |
US11706485B2 (en) | Display device and content recommendation method | |
US20190258371A1 (en) | Picture Processing Method and Apparatus, Electronic Device, and Graphical User Interface | |
WO2019085820A1 (zh) | 处理方法、装置、设备和机器可读介质 | |
CN112749322B (zh) | 商品对象信息推荐方法、装置及电子设备 | |
CN111767487A (zh) | 页面展示方法、装置及电子设备 | |
CN113298603A (zh) | 商品对象信息展示方法、装置及电子设备 | |
CN114371846A (zh) | 商品详情页面展示方法及电子设备 | |
CN112988006A (zh) | 显示方法、装置、电子设备和存储介质 | |
CN108154416B (zh) | 网站浏览优化方法及装置 | |
CN111522614A (zh) | 图像编辑信息的展示方法、装置、计算机设备及存储介质 | |
CN114445177A (zh) | 商品详情页面展示方法及电子设备 | |
CN110321042B (zh) | 界面信息展示方法、装置及电子设备 | |
CN114363646A (zh) | 一种目标对象的展示方法、装置、电子设备及存储介质 | |
CN117008778A (zh) | 页面信息处理方法、装置、设备及存储介质 | |
CN116596611A (zh) | 商品对象信息展示方法及电子设备 | |
CN115170220A (zh) | 商品信息展示方法及电子设备 | |
CN115760265A (zh) | 商品信息处理方法及电子设备 | |
CN115578143A (zh) | 页面信息处理方法、装置、设备及存储介质 | |
CN108572857B (zh) | 提供数据对象颜色属性信息的方法、装置及电子设备 | |
CN117853161A (zh) | 信息提示方法及电子设备 | |
CN108536511B (zh) | 消息显示方法、装置、计算机设备及可读存储介质 | |
CN115756672A (zh) | 页面展示方法、装置及电子设备 | |
CN115907889A (zh) | 商品信息展示方法及电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
TA01 | Transfer of patent application right | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20240308 Address after: # 03-06, Lai Zan Da Building 1, 51 Belarusian Road, Singapore Applicant after: Alibaba Innovation Co. Country or region after: Singapore Address before: Room 01, 45th Floor, AXA Building, 8 Shanton Road, Singapore Applicant before: Alibaba Singapore Holdings Ltd. Country or region before: Singapore |