CN114936337A - 一种页面的交互方法、电子设备及计算机可读介质 - Google Patents

Abstract

本申请提供一种页面的交互方法，其中，所述页面包括用于显示商品的图片的第一区域和用于显示商品属性选项的第二区域，所述交互方法包括：根据用户对所述第二区域中的滑动操作，计算所述第二区域至所述页面的顶部的第一距离；在所述第一距离大于或等于所述图片的最大设定高度的情况下，以最大尺寸模式显示所述图片；在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度的情况下，动态缩放所述第一区域和所述图片的尺寸。在用户滑动第二选项区域进行商品属性浏览的过程中，动态缩放页面中显示的商品图片，始终为用户展示商品图片信息，从而优化用户购物的体验感，提升用户转化率。

Description

一种页面的交互方法、电子设备及计算机可读介质

技术领域

本申请涉及互联网技术领域，具体涉及一种页面的交互方法、电子设备及计算机可读介质，用于电商购物类APP。

背景技术

目前，用户在通过电商购物类APP进行电子购物的过程中，进入商品详情后，可以通过APP提供的页面，对商品属性选项进行选择，最终进入下单页面。商品属性是用于描述商品的信息，可以包括基本属性(例如颜色、尺寸、价格等信息)，也可以包括影响商品价格的销售属性(例如，规格、服务等信息)。

如图1所示，现有的APP端的商品页面包括第一区域100、第二区域200和第三区域300。其中，第一区域100用于显示商品的图片，可以位于页面的顶部或头部。第二区域200可以位于页面的中部，可以根据用户的操作进行拖动。第二区域200中展示了价格信息、地址信息、颜色属性、购买数量属性等商品属性选项；用户可以上下滑动第二区域进而对更多的商品第二选项区进行选择；在第二区域上滑的过程中，头部的商品图片被第二区域遮盖。第三区域300可以位于页面的底部，为用户提供购买选项。用户通过商品页面的交互操作，完成商品的选择后可下单购买。

发明内容

为了解决用户在页面的交互过程中，头部的商品图片被遮盖的问题，本申请提供了一种页面的交互方法，在用户进行商品属性选择的过程中，始终在第一区域为用户展示商品的图片信息，从而提升用户的购物体验。

根据本申请的第一方面，提供一种页面的交互方法，其中，所述页面包括用于显示商品的图片的第一区域和用于显示商品属性选项的第二区域，所述交互方法，包括：

根据用户对所述第二区域的滑动操作，计算所述第二区域至所述页面的顶部的第一距离；

在所述第一距离大于或等于所述图片的最大设定高度的情况下，以设定的最大尺寸模式显示所述图片；

在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度的情况下，动态缩放所述第一区域和所述图片的尺寸。

根据本申请的一些实施例，所述交互方法还包括：

在所述第一距离等于或小于所述图片的最小设定高度的情况下，以设定的最小尺寸模式显示所述图片。

根据本申请的一些实施例，在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度的情况下，所述动态缩放所述第一区域和所述图片的尺寸，包括：

计算所述商品属性选项的顶部至所述页面的底部的第二距离；

在所述第二距离大于或等于设定值的情况下，动态缩放所述第一区域和所述图片的尺寸，并滑动显示所述第二区域；

在所述第二距离小于所述设定值的情况下，滚动显示所述商品属性选项。

根据本申请的一些实施例，所述交互方法还包括：

在所述第一距离小于所述图片的最小设定高度的情况下，滚动显示所述商品属性选项。

根据本申请的一些实施例，所述商品属性选项包括颜色属性；所述交互方法还包括：

根据用户对所述颜色属性选项的选择操作，切换所述图片。

根据本申请的一些实施例，所述动态缩放包括等比例缩放。

根据本申请的一些实施例，所述交互方法还包括：

根据用户对所述第一区域的滑动操作，切换所述图片。

根据本申请的一些实施例，所述交互方法还包括：

根据用户对所述第一区域的点击操作，显示所述图片的浏览页面。

根据本申请的第一方面，一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个处理程序；

当所述一个或多个处理程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述交互方法。

根据本申请的第一方面，提供一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述交互方法。

本申请提供的品页面的交互方法中，在第二区域位于中间位置以下时，以最大尺寸模式在第一区域显示商品图片；在第二区域位于中间位置且属性区域到底部的距离小于设定距离时，仍以最大尺寸模式在第一区域显示商品图片，从而使得用户优先浏览商品的大图。在第二区域位于中间位置至展开位置之间，且第二区域到底部的距离大于或等于设定距离时，动态缩放商品图片，使得用户浏览商品图片的同时又能够浏览到更多的商品属性选项。在第二区域位于展开位置时，始终以最小尺寸模式显示商品图片，并且根据用户对第二区域的滑动操作，滚动显示商品属性选项，使得用户在始终浏览到商品的同时，扩大显示商品属性区域的面积，从而提升屏效，进而提升用户在交互过程中的体验感。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图，而并不超出本申请要求保护的范围。

图1示出了现有的APP端的页面示意图；

图2A示出了根据本申请示例实施例的页面组成示意图；

图2B示出了根据本申请示例实施例的页面中间态示意图；

图2C示出了根据本申请示例实施例的页面展开态示意图；

图3示出了根据本申请第一示例实施例的交互方法流程图；

图4示出了根据本申请示例实施例的动态缩放过程示意图；

图5示出了根据本申请第二示例实施例的交互方法流程图；

图6示出了根据本申请第三示例实施例的交互方法流程图；

图7示出了根据本申请第四示例实施例的交互方法流程图；

图8示出了根据本申请示例实施例的电子设备组成框图。

具体实施方式

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

本申请的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本发明人发现，在现有的电商购物类APP端，页面交互过程中，参见图1，当用户向上滑动第二区域200从而浏览更多的商品属性选项时，第二区域200向上拖动并逐渐覆盖第一区域100中的商品图片，导致用户在选择过程中无法看到完整的商品图片，无法提供良好的用户体验。

为了解决用户在页面交互过程中，头部的商品图片被遮盖的问题，本申请提供了一种页面的交互方法，在用户进行商品属性选择的过程中，始终在第一区域为用户展示商品的图片信息并对商品图片进行动态缩放，在保证用户浏览到所有商品属性选项的同时，能够始终展示完整的商品图片，从而提升用户的购物体验。下面将结合具体实施例，来详细介绍本申请的技术方案。

图2A示出了根据本申请示例实施例的页面组成示意图；图2B示出了根据本申请示例实施例的页面中间态示意图；图2C示出了根据本申请示例实施例的页面展开态示意图。

如图2A-2C所示，根据本申请示例实施例的页面包括第一区域100、第二区域200和第三区域300。第一区域100、第二区域200、第三区域300在页面中的位置可以是自顶而下依次排布，本申请对此不作限制。其中，第一区域100用于显示商品的图片。第二区域200用于显示商品属性选项；第二区域200包括第一选项区210和第二选项区220；第一选项区210用于显示价格、地址等属性；第二选项区220用于显示颜色、尺寸、数量、特殊服务、备注信息、付款方式等属性。第三区域300用于显示购买选项，例如加入购物车、立即购买等选项。

根据本申请的示例实施例，整个页面可以是一个抽屉容器；第一区域100可以实施为头部容器；第二区域200可以为拖动面板，能够上下滑动；第二选项区220可以为滚动容器，能够内部滚动进行浏览；第二选项区220与第一区域100进行联动，例如用户在第二选项区220选择不同的颜色属性，第一区域100中显示的图片进行联动切换。

根据本申请的示例实施例，第一区域100中显示的图片以设定的最大尺寸模式、设定的最小尺寸模式以及动态缩放模式进行显示。例如，对于大尺寸显示屏设备而言，最大尺寸模式的图片宽度和高度均可以为屏幕宽度；对于小尺寸显示屏设备而言，最大尺寸模式的图片宽度可以为屏幕宽度，高度可以为0.46倍的屏幕宽度。最小尺寸模式的图片宽度可以为屏幕宽度，高度可以为0.4倍的最大尺寸模式的图片宽度，本申请对最大尺寸模式和最小尺寸模式的图片高度和宽度不作限制。根据本申请的示例实施例，最大尺寸模式的图片高度为图片的最大设定高度；最小尺寸模式的图片高度为图片的最小设定高度。

如图2B所示，第二区域200距离页面顶部的距离等于最大尺寸模式的图片高度时，第二区域200处于上下滑动过程中的中间态位置。如图2C所示，第二区域200距离页面顶部的距离等于最小尺寸模式的图片高度时，第二区域200处于上下滑动过程中的展开态位置。第二区域200从中间态位置滑动至展开态位置的过程中，第一区域100的高度逐渐缩小，第一区域100中显示的图片尺寸从最大尺寸模式动态缩小至最小尺寸模式。第二区域200出于展开态位置后，为了能够向用户展示更多的属性选项，同时又展示完整的商品图片，第二区域200的位置不变，第二选项区220内部滚动，从而使得用户能够浏览更多的商品属性选项。

图3示出了根据本申请第一示例实施例的交互方法流程图。

参见图3，根据本申请第一示例实施例，提供的交互方法包括以下步骤：

步骤S310，根据用户对所述第二区域的滑动操作，计算所述第二区域至所述页面的顶部的第一距离。

用户在使用电商购物APP浏览商品时，在商品详情页面中通过“加入购物车”或“立即购买”选项，进入上述页面。在交互过程中，用户在第二区域的滑动操作被监听，并且根据用户对所述第二区域的滑动操作，计算第二区域的滑动偏移量，进而可以计算出按照用户的滑动操作指令运行后，所述第二区域至所述页面的顶部的第一距离D₁。

步骤S320，在所述第一距离大于或等于所述图片的最大设定高度的情况下，以设定的最大尺寸模式显示所述图片。

当第一距离D₁大于图片的最大设定高度，即最大尺寸模式的图片高度时，参见图2A，第二区域200处于中间态位置以下，此时在第一区域100中以最大尺寸模式显示商品的图片。

当第一距离D₁等于图片的最大设定高度，即最大尺寸模式的图片高度时，参见图2B，第二区域200处于中间态位置，此时在第一区域100中仍以最大尺寸模式显示商品的图片。

步骤S330，在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度时，动态缩放所述第一区域和所述图片的尺寸。

当第一距离D₁小于图片的最大设定高度且大于图片的最小设定高度时，第二区域200处于从中间态向展开态过渡的位置，此时，动态缩放第一区域100和图片的尺寸。例如，根据第一距离D₁缩放第一区域100的高度，保持第一区域100的宽度不变；根据第一距离D₁等比例缩放图片的高度和宽度。由此，可以在用户浏览第二区域中的商品属性选项时，动态的缩放第一区域的图片，从而在用户浏览第二区域中下方的其他属性选项时，完整的显示商品的图片，使得交互界面更加友好，进一步提升用户的体验感。

如上所述，在第二区域中显示了商品属性选项。商品属性选项中包括了多项可供用户进行交互操作的属性选型，例如颜色属性选项等。根据本申请的一些实施例，根据用户对所述颜色属性选项的选择操作，切换所述图片。例如，用户通过颜色属性选择了红色的商品，在第一区域显示红色的商品图；如果用户通过颜色属性选择了黄色的商品，在第一区域显示黄色的商品图。

根据本申请的一些实施例，当所述第一距离D₁小于图片的最大设定高度且大于图片的最小设定高度时，即，第二区域已经处于中间态，当监听到用户的上滑操作且第二区域未达到展开态位置时，动态缩放所述第一区域和所述图片的尺寸包括以下步骤(参见图4)：

步骤S331，计算所述商品属性选项的顶部至所述页面的底部的第二距离D₂。例如，可以计算颜色属性距离页面底部的距离。

步骤S332，在所述第二距离D₂大于或等于设定值的情况下，动态缩放所述第一区域和所述图片的尺寸，滑动显示所述第二区域。例如，当用户的上滑操作使得属性选项中的颜色属性距离页面底部的距离达到0.27倍的屏幕高度时，对第一区域和图片进行缩小，第二区域上滑。

步骤S333，在所述第二距离D₂小于所述设定值的情况下，滚动显示所述商品属性选项。例如，当用户的上滑操作使得属性选项中的颜色属性距离页面底部的距离小于0.27倍的屏幕高度时，仍以最大尺寸模式显示商品图片，仅滚动显示属性选项。

在第二区域处于中间态之后，并且商品属性选项距离底部达到设定距离时，才开始缩小商品图片，从而用户在交互过程能够优先浏览到商品的大图。

图5示出了根据本申请第二示例实施例的交互方法流程图。

根据本申请的第二示例实施例，提供的交互方法还包括以下步骤：

步骤S340，在所述第一距离等于或小于所述图片的最小设定高度的情况下，以设定的最小尺寸模式显示所述图片。

当第一距离D₁等于图片的最小设定高度，即等于最小尺寸模式的图片高度时，参见图2C，第二区域200达到展开态位置，此时在第一区域100中以最小尺寸模式显示商品的图片。

当第一距离D₁小于图片的最小设定高度，即，第二区域200将达到展开态位置以上，此时在第一区域100中仍以最小尺寸模式显示商品的图片，第二区域200被限制在展开位置。

通过对第二区域在展开位置的限制并以最小尺寸模式显示商品图片，从而保证用户在交互过程中能够始终浏览到商品图片。

根据本申请的一些实施例，当第一距离D₁小于图片的最小设定高度时，滚动显示所述商品属性选项。例如，当第二区域已经达到展开位置，而用户继续上滑来浏览更多的属性选项时，第二选项区进行内部滚动，从而滚动显示属性选项。

通过以最小尺寸模式显示商品图片以及滚动第二选项区的交互方式，使得用户在交互过程中能够始终浏览到商品图片的同时扩大第二选项区的展示面积，提升屏效，为用户提供更多的浏览信息。

图6示出了根据本申请第三示例实施例的交互方法流程图。

根据本申请的第三示例实施例，提供的交互方法还包括以下步骤：

步骤S350，根据用户对所述第一区域的滑动操作，切换所述图片。例如，第一区域可以显示多张商品图片，包括不同视角、不同搭配场景的图片。无论图片是以最大尺寸模式显示、最小尺寸模式显示还是中间缩放状态显示时，用户在第一区域左右滑动的过程中，都能够是用户浏览到不同的视角的商品图片，为客户提供更多的商品直观信息。

图7示出了根据本申请第四示例实施例的交互方法流程图。

根据本申请的第四示例实施例，提供的交互方法还包括以下步骤：

步骤S360，根据用户对所述第一区域的点击操作，显示所述图片的浏览页面。例如，无论图片是以最大尺寸模式显示、最小尺寸模式显示还是中间缩放状态显示时，当用户在第一区域进行点击操作时，显示该图片的浏览页面，从而为客户提供该图片的详细信息。

图8示出了根据本申请示例实施例的电子设备组成框图。

下面参照图8来描述根据本申请的这种实施方式的电子设备800。图8显示的电子设备800仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图8所示，电子设备800以通用计算设备的形式表现。电子设备800的组件可以包括但不限于：至少一个处理单元810、至少一个存储单元820、连接不同系统组件(包括存储单元820和处理单元810)的总线830等。

存储单元820存储有程序代码，程序代码可以被处理单元810执行，使得处理单元810执行本说明书描述的根据本申请各实施例的交互方法。

存储单元820可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)8201和/或高速缓存存储单元8202，还可以进一步包括只读存储单元(ROM)8203。

存储单元820还可以包括具有一组(至少一个)程序模块8205的程序/实用工具8204，这样的程序模块8205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线830可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备800也可以与一个或多个外部设备8001(例如触摸屏、键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备800交互的设备通信，和/或与使得该电子设备800能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口850进行。并且，电子设备800还可以通过网络适配器860与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器860可以通过总线830与电子设备800的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备800使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述交互方法的步骤。

本申请提供的页面的交互方法中，在第二区域位于中间位置以下时，以最大尺寸模式在第一区域显示商品图片；在第二区域位于中间位置且属性区域到底部的距离小于设定距离时，仍以最大尺寸模式在第一区域显示商品图片，从而使得用户优先浏览商品的大图。当第二区域位于中间位置至展开位置之间，且第二区域到底部的距离大于或等于设定距离时，动态缩放商品图片，使得用户浏览商品图片的同时又能够浏览到更多的属性选项。当第二区域位于展开位置时，始终以最小尺寸模式显示商品图片，并且根据用户对第二区域的滑动操作，滚动显示商品属性选项，使得用户在始终浏览到商品的同时，扩大显示商品属性区域的面积，从而提升屏效，进而提升用户在交互过程中的体验感。

以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明仅用于帮助理解本申请的方法及其核心思想。同时，本领域技术人员依据本申请的思想，基于本申请的具体实施方式及应用范围上做出的改变或变形之处，都属于本申请保护的范围。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种页面的交互方法，其中，所述页面包括用于显示商品的图片的第一区域和用于显示商品属性选项的第二区域，其特征在于，所述交互方法包括：

根据用户对所述第二区域的滑动操作，计算所述第二区域至所述页面的顶部的第一距离；

在所述第一距离大于或等于所述图片的最大设定高度的情况下，以设定的最大尺寸模式显示所述图片；

在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度的情况下，动态缩放所述第一区域和所述图片的尺寸。

2.根据权利要求1所述的交互方法，其特征在于，所述交互方法还包括：

在所述第一距离等于或小于所述图片的最小设定高度的情况下，以设定的最小尺寸模式显示所述图片。

3.根据权利要求2所述的交互方法，其特征在于，在所述第一距离小于所述图片的最大设定高度且大于所述图片的最小设定高度的情况下，所述动态缩放所述第一区域和所述图片的尺寸，包括：

计算所述商品属性选项的顶部至所述页面的底部的第二距离；

在所述第二距离大于或等于设定值的情况下，动态缩放所述第一区域和所述图片的尺寸，并滑动显示所述第二区域；

在所述第二距离小于所述设定值的情况下，滚动显示所述商品属性选项。

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

在所述第一距离小于所述图片的最小设定高度时，滚动显示所述商品属性选项。

5.根据权利要求1所述的交互方法，其特征在于，所述商品属性选项包括颜色属性选项，所述交互方法还包括：

根据用户对所述颜色属性选项的选择操作，切换所述图片。

6.根据权利要求1所述的交互方法，其特征在于，所述动态缩放包括等比例缩放。

7.根据权利要求1-6中任一项所述的交互方法，其特征在于，还包括：

根据用户对所述第一区域的滑动操作，切换所述图片。

8.根据权利要求1-6中任一项所述的交互方法，其特征在于，还包括：

根据用户对所述第一区域的点击操作，显示所述图片的浏览页面。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个处理程序；

当所述一个或多个处理程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现权利要求1-8中任一项所述的交互方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-8中任一项所述的交互方法。

Images