CN105335854B - 在页面中提供商品对象图片的方法及装置 - Google Patents
在页面中提供商品对象图片的方法及装置 Download PDFInfo
- Publication number
- CN105335854B CN105335854B CN201410351855.9A CN201410351855A CN105335854B CN 105335854 B CN105335854 B CN 105335854B CN 201410351855 A CN201410351855 A CN 201410351855A CN 105335854 B CN105335854 B CN 105335854B
- Authority
- CN
- China
- Prior art keywords
- picture
- area region
- pictures
- display window
- target picture
- 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.)
- Active
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了在页面中提供商品对象图片的方法及装置，其中，所述方法包括：发送商品对象的浏览请求；接收包括有多张商品对象图片的页面信息；确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片。通过本申请，能够在减轻长时间浏览造成的眼睛疲劳的同时，还能尽量避免重点内容被错过或忽略。
Description
技术领域
本申请涉及页面展示技术领域，特别是涉及在页面中提供商品对象图片的方法及装置。
背景技术
在电子商务交易平台中，当用户需要查看某类目下的商品对象，或者需要搜索符合某条件的商品对象时，经常需要在页面内以列表的形式向用户展示各个商品对象的图片。此时，会在页面中显示多张图片，这些图片往往会按照行、列的方式进行排列。当然，由于终端设备显示屏的尺寸有限，因此，每屏显示出的图片数量也是有限的，例如，每屏显示三行，每行显示三张图片，之后随着拖动滚动条或者在终端设备的触摸屏上进行滑动，还会伴随有新的图片进入窗口显示区域，原来的图片被移出窗口显示区域。
在这样的浏览过程中，由于用户的视线需要不断地在各个图片之间进行切换，因此很容易造成眼睛疲劳；并且，在每一屏上都可以看到多张图片，再有图片不断的被移入移出，导致用户的浏览没有重点，进而可能会使得一些本应重点关注的内容却被用户错过或忽略。
现有技术中，可以通过提高单个图片的显示尺寸、减少每屏中显示的图片数量或者分页展示等手段来进行减轻长时间浏览造成的眼睛疲劳，但是，这些现有技术还是会存在重点内容容易被用户错过或忽略的缺陷。
因此，如何使得页面展示出的商品对象图片更有效地被用户利用，在减轻长时间浏览造成的眼睛疲劳的同时，还能尽量避免重点内容被错过或忽略，是迫切需要本领域技术人员解决的技术问题。
发明内容
本申请提供了在页面中提供商品对象图片的方法及装置，能够在减轻长时间浏览造成的眼睛疲劳的同时，还能尽量避免重点内容被错过或忽略。
本申请提供了如下方案：
一种在页面中提供商品对象图片的方法，包括：
发送商品对象的浏览请求；
接收包括有多张商品对象图片的页面信息；
确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片。
一种在页面中提供商品对象图片的方法，包括：
接收商品对象的浏览请求；
根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
在所述页面信息中添加预置的标识；
将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域。
一种在页面中提供商品对象图片的装置，包括：
浏览请求发送单元，用于发送商品对象的浏览请求；
页面信息接收单元，用于接收包括有多张商品对象图片的页面信息；
面积区域确定单元，用于确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
目标图片确定单元，用于在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
调整单元，用于对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片。
一种在页面中提供商品对象图片的装置，包括：
浏览请求接收单元，用于接收商品对象的浏览请求；
页面信息确定单元，用于根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
标识添加单元，用于在所述页面信息中添加预置的标识；
页面信息返回单元，用于将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域。
根据本申请提供的具体实施例，本申请公开了以下技术效果：
通过本申请实施例，可以在显示窗口中确定出一面积区域，该面积区域可以是根据人们在观看显示窗口时的视觉焦点来确定的，在每一屏显示的图片中，可以将进入到该面积区域的部分图片显示出更高的视觉显著性，这样，可以使得用户的视觉焦点保持在该区域不变，避免长时间的转移视觉焦点引起的用眼疲劳，并且注意力也更集中，避免一些重要的图片内容被错过或忽略。
当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的方法的流程图；
图2-1是本申请实施例中图片原尺寸显示示意图；
图2-2是本申请实施例中图片中心区域截取示意图；
图2-3是本申请实施例中图片中心区域缩放后显示效果示意图；
图3-1是本申请实施例中页面显示示意图；
图3-2是本申请实施例中另一页面显示示意图；
图4是本申请实施例提供的另一方法的流程图；
图5是本申请实施例提供的装置的示意图；
图6是本申请实施例提供的另一装置的示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。
本发明人在实现本申请的过程中发现，在现实世界的真实场景中，用户在观看周围的事物时，会存在一个视觉焦点范围，该焦点范围的事物一般离观察者比较近，且位于其视线的中间位置，观察者看到的这些事物会比周围其他的事物要清楚。反之，如果某些事物位于观察者的视觉焦点范围内，则更容易引起用户的注意。因此，在本申请实施例中，利用这种人类本身的视觉感知，对线上产品的设计进行优化，通过这种方式来避免长时间浏览对用户造成的用眼疲劳，并降低关键信息被错过或忽略现象的发生概率。下面对具体的实现方式进行详细地介绍。
实施例一
参见图1，本申请实施例首先提供了一种在页面中提供商品对象图片的方法，该方法主要从客户端的角度进行介绍，具体可以包括以下步骤：
S101：发送商品对象的浏览请求；
具体实现时，可以根据用户的操作指令，向服务器发送浏览商品对象的请求，具体可以是以某关键词发起的搜索请求，或者点击某商品类目之后的浏览请求等等。
S102：接收包括有多张商品对象图片的页面信息；
服务器收到浏览请求之后，可以返回符合条件的多张商品对象图片，相应的，客户端可以进行接收。
S103：确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
其中，所谓的显示窗口可以是当前显示商品对象图片的应用的显示窗口。例如，如果当前应用是某终端设备中安装的浏览器，则该显示窗口就是指浏览器的主框架窗口，如果当前应用是某手机等移动终端设备中安装的交易平台APP，则该显示窗口就是该APP的窗口。一般来说，在移动终端设备中，由于设备的显示屏尺寸比较小，因此，各种APP的显示窗口一般都等于显示屏的尺寸，并且一般是不可以调整的。对于台式机、笔记本等显示屏相对较大的终端设备而言，应用的显示窗口在最大化的状态下，也是与显示屏的尺寸相同，但是一般是允许调整窗口大小的。
所述面积区域，是本申请实施例中定义出的一个区域，该区域一般位于显示窗口的中间位置，因为该位置一般会是用户的视觉焦点所在的位置。具体在确定该面积区域时，可以有多种实现方式。例如，在其中一种实现方式下，该面积区域与显示窗口的相对位置关系可以是预先定义好的，例如，预先定义面积区域的最小横坐标以及最大横坐标与显示窗口的最小横坐标以及最大横坐标相等，面积区域的最小纵坐标在显示窗口高度的三分之一处，最大纵坐标在显示窗口高度的三分之二处，则只要确定出显示窗口各个顶点位置的坐标，就可以唯一确定出面积区域的坐标。例如，假设显示窗口的最小横坐标为x1，最大横坐标为x2，最小纵坐标为y1，最大纵坐标为y2，则面积区域的最小横坐标为x1，最大横坐标为x2，最小纵坐标为y1+(y2-y1)/3，最大纵坐标为y1+2(y2-y1)/3。
上述实现方式比较简单，需要较小的计算量，在实际应用中，对于不同显示屏尺寸的终端设备而言，每屏能够显示的图片总行数可能是不同的。例如，对于同等尺寸的图片，有的终端设备中可能每屏显示三行，有的终端设备中每屏则可以显示四行甚至更多等等。此时，如果均按照固定的相对位置关系来确定面积区域的坐标，则可能无法得到较好的显示效果。例如，仍然假设预先设置好面积区域的最小纵坐标在显示窗口高度的三分之一处，最大纵坐标在显示窗口高度的三分之二处，那么，如果某终端设备中每屏共可以显示三行图片，则可以获得较好的显示效果，也即总可以将中间一行图片确定为面积区域内的图片；但是，如果某终端设备中每屏共可以显示四行图片，那么可能会出现以下现象：显示窗口内的所有图片可能都没有完全进入面积区域，此时，就可能无法确定哪些图片进入面积区域哪些未进入，进而也无法进行后续的区分显示等操作。
为此，本申请实施例还提供了另一种确定面积区域位置的实现方式，具体的，在该方式下，可以预先获取到面积区域需显示的图片行数，这样，在确定面积区域位置时，可以首先获取显示窗口的高度，然后根据显示窗口的高度确定该显示窗口在高度方向上的中线位置，之后就可以根据中线位置以及面积区域需显示的图片行数，确定出面积区域的位置。例如，面积区域需显示的图片行数是2行，则在确定出显示窗口的中线位置之后，就可以确定出视觉焦点显示区域的最小纵坐标为中线位置减去一张图片的高度，最大纵坐标为中线位置加上一张图片的高度。
其中，显示窗口的高度可以通过调用***函数读取到，即使显示窗口的尺寸被用户调整过，该高度也是可以读取到的。关于面积区域需显示的图片行数，可以通过多种方式进行确定。例如，其中一种方式下，可以是预先设定好的，这种方式下，对于每屏显示的图片总行数固定不变的情况可以有比较好的效果，并且面积区域需显示的图片行数，可以是根据每屏显示的图片总行数来确定的。例如，每屏显示的图片总行数为4行，则可以预先设定面积区域需显示的图片行数为2行；如果每屏显示的图片总行数为5行，则可以预先设定面积区域需显示的图片行数为3行，等等。总之，优选保证非面积区域的图片总行数为偶数，这样可使得面积区域恰好处于显示窗口的中间位置。
但是如前文所述，有些情况下，每屏可显示的图片总行数可能并不是固定不变的，而是随着显示窗口的大小不同，在这种情况下，如果仍然预先设定面积区域显示的图片行数，则最终确定出的面积区域可能就无法落在显示窗口的中间位置。为此，在本申请实施例中，还可以如下进行：预先设定非面积区域的图片行数，该行数一般被设定为偶数，这样可保证上边缘和下边缘的非面积区域的尺寸是相同的；之后，可以确定出显示窗口的高度以及单张图片的高度(单张图片的高度一般是预先定义好的)，这样可以计算出每屏可显示的图片总行数，然后用总行数减去非面积区域的图片行数，就可以得到面积区域需显示的图片行数，进而再根据显示窗口的中线位置，以及该面积区域需显示的图片行数，确定出面积区域的位置。
例如，具体实现时可以如下进行：
步骤一：取到显示窗口的高度(windowHieght)及单个图片高度(imageHeight)，(此前提是所有图片大小一致)，由此可得出显示窗口可显示的图片总行数：row＝Math.floor(windowHieght/imageHeight)；
步骤二：假设边缘模糊行数(也即非面积区域的图片行数)为rowB,那么中间的面积区域需显示的图片行数为rowF＝row-rowB；此算法要保证显示窗口中可显示的图片总行数大于2行；
步骤三：计算显示窗口的中线位置，mid＝windowHieght/2；
步骤四：根据中线位置以及面积区域可显示的图片行数，可以计算出面积区域的上下纵坐标为：
upY＝mid-rowF*imageHeight/2；downY＝mid+rowF*imageHeight/2
需要说明的是，以上所述的方法中，都是将显示窗口中取出横向的中心区域作为面积区域，在实际应用中，也可以将纵向的中心区域确定为面积区域，具体的实现方法类似，这里不再详述。
总之，在本申请实施例中，确定出面积区域之后，该面积区域在现实窗口中的位置及大小就是固定不变的，不会因为用户的操作焦点的变化而发生变化。
需要说明的是，在具体实现时，可能并不是每个页面都需要按照本申请实施例提供的方法进行显示，因此，为了便于客户端进行区分，服务器在返回页面信息时，还可以在页面信息中添加某预置的标识，这样，客户端在接收到页面信息之后，可以首先判断是否带有该预置的标识，如果是，则触发该步骤S103以及后续步骤的执行，以便按照本申请实施例的方式进行特殊处理，否则，如果没有带有该预置的标识，则按照传统的方式进行显示即可。当然，在实际应用中，也可以不必按照页面的不同进行区分处理。
本申请实施例中，对步骤S103即可以在步骤S101之前或步骤S102之后进行，也可以在执行步骤S101与步骤S102之间执行。还可以是同时执行。本申请实施例中对该步骤的执行时间不具体限定。
S104：在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
在页面中显示各个图片的过程中，页面的前端代码可以确定出有哪些图片进入了显示窗口，并且可以确定出各个图片在显示窗口中的位置。因此，在本申请实施例中，在确定了面积区域的位置之后，可以确定出显示窗口中当前显示的各个图片，以及各个图片在显示窗口中的坐标，进而就可以根据面积区域的坐标以及各个图片的坐标，确定进入到面积区域内的目标图片。例如，具体可以通过以下方式实现：
通过javascript中的document.elementFromPoint(x,y)方法得到当前图片对象，取到一行图片的左右横坐标xL,xR；
这样，进入面积区域的第一张和最后一张图片可以分别表示为：
imgFirst＝document.elementFromPoint(xL,upY)
imgLast＝document.elementFromPoint(xR,downY)
S105：对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片。
在确定出哪些图片需要在面积区域内显示、哪些图片需要在面积区域外显示之后，就可以对各个图片的视觉显示性特征进行调整，以使得面积区域内的目标图片的视觉显著性高于面积区域之外的其他图片。当然，进入到面积区域内的目标图片以及在该面积区域之外的其他图片都可能有多张。这样，可以使得用户的视觉焦点主要集中在面积区域内，避免长时间的移动视觉焦点引起的用眼疲劳，也可以使得用户对该区域内的图片更重视。
具体实现时，在用户的浏览过程中，由于随着用户的拖动、滑动等操作，可能会不断的有图片被移入或移出面积区域，因此，进入面积区域的图片可能是在一组一组的不断变化。具体实现时，可以采用多次遍历的方式来确定每次进入到面积区域的图片。另外，为了便于进行数据处理，各组图片的显示样式数据可以以数组的形式进行保存。例如，遍历取得所有应该进入面积区域的图片，可在改变其显示样式之后，将数据保存到数组arr:varimg＝imgFirst.nextSibling；while(img！＝imgLast){arr.push(img)；img＝imgFirst.nextSibling；}。在下一次遍历判断时，可以先将数组arr中的图片重置成初始样式，清空数据，再推入新一组进入了面积区域的图片，以此类推。
其中，所谓的视觉显著性就是指使人在视觉环境中感知到某部分内容比较突兀，从而更加吸引其注意力的特性。在本申请实施例中，关于图片的视觉显著性特征可以有多种。例如，在其中一种实现方式下，可以将面积区域内的目标图片的清晰度置为最高，如果这些目标图片的清晰度已经是最高，则还可以将面积区域之外的其他图片的清晰度调低，这样，通过不同区域内图片清晰度的不同，使得面积区域内的图片更具有视觉显著性，用户的视线会更集中在该区域。具体实现时，可以采用“滤镜”函数等方式来实现上述对图片显示清晰度的调整，也即，可以在显示窗口上层添加一层具有模糊化效果的滤镜，并且根据面积区域的坐标，设定出滤镜的具体作用区域，以使得面积区域内的各个目标图片保持清晰状态，而区域外的其他图片在滤镜的作用下，呈现出模糊的显示效果。当然，在实际应用中，还可以通过其他方式来实现，例如，直接对图片本身的显示样式参数进行调整，来达到上述清晰化或者模糊化的显示效果。
或者，在另一种方式下，页面中可以预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，此时，为了提高进入面积区域的目标图片具有更高的视觉显著性，还可以对于面积区域内的各个目标图片，截取目标图片的主体内容部分，然后仅将该主体内容部分显示到该目标图片对应的图片显示区域，以此来提高其视觉显著性。其中，关于主体内容部分的截取，一种方式下，由于主体内容一般显示在图片的中心位置，因此，可以预先设定截取的中心位置的高度及宽度值等，然后按照该数值从目标图片中进行截取。例如，图片展示区域为300*300px，而某目标图片本身尺寸为400*400px，则，在该方式下，可以截取该目标图片中心的350*350px的区域，并缩到图片展示区域尺寸进行展示。或者，还可以通过图像识别算法等，从目标图片中识别出主体部分内容，然后进行截取，之后再仅将该截取出的主体内容部分显示到具体的图片展示区域内。也就是说，对于面积区域内的各个目标图片，可以仅展示其主体内容区域的内容。这样，在每张图片展示区域大小相同的情况下，由于面积区域内的目标图片仅展示了其主体内容部分，因此，这部分图片会显得比其他图片更大，营造出这部分图片离用户更近的感觉，这样，同样可以使得这部分目标图片的视觉显著性高于其他图片。同时，由于显示的是图片最主要表现的内容，因此，可以进一步吸引用户的视觉注意力。
其中，具体在将主体内容部分显示到该目标图片对应的图片显示区域内时，可以首先将主体部分内容放大到所述目标图片的原尺寸，然后，根据原尺寸与所述图片显示区域的尺寸之间的比例关系，将主体内容部分显示到该目标图片对应的图片显示区域内。
需要说明的是，在这种实现方式下，并不是在将面积区域内的目标图片的显示尺寸整体调大，而是在保证显示出的图片尺寸不变的情况下，仅将目标图片中最能表现图片显示内容的主体内容区域部分显示在该图片显示区域内，并进行适当的缩放。也就是说，在面积区域显示某目标图片时，该图片的边缘部分或者其他非主体内容部分将不再展示给用户，当该图片被移出面积区域时，则又可以看到完整的图片，但是在完整的图片中，其主要内容部分的尺寸，比其在面积区域内显示时要小。例如，某图片原图缩到图片显示区域之后的显示效果如图2-1所示，在该图片进入面积区域之后，就可以从该图片中截取其中心区域，如图2-2中201所示的部分，之后再将该201部分显示到图片显示区域，显示效果如图2-3所示。可见，该图片中主要展示的是一个模特人物穿着的某服装，在该图片进入面积区域后，整个图片区域的尺寸不变，但是模特人物的尺寸变大了，用户可以看得更清楚，也更容易引起用户的注意。
当然，具体实现时，还可以将上述两种方式相结合，也即，对于面积区域内的目标图片，既可以从清晰度方面来提高其视觉显著性，也可以从显示尺寸方面来提高其视觉显著性。例如，如图3-1所示，在显示窗口中共显示出三行图片，中间的第二行所在的区域为面积区域，可见，该行内显示的各个图片，相对于第一行以及第三行中显示的图片更清晰，其中心区域展现的模特人物比例也被放大。当用户向下拖动滚动条或者向下滑动触摸屏时，图3-1中的第二行被移出了面积区域，变成了图3-2中的第四行，相应的，图片的清晰度降低，图片的中心区域也不再被放大；图3-1中的第三行进入了面积区域，成为图3-2中的第五行，相应的，其清晰度得到提高，中心区域的模特人物也被放大显示，另外，第六行进入显示窗口，图3-1中的第一行被移出显示窗口，以此类推。总之，在每一屏显示的图片中，总有中心区域的部分图片在清晰度、主要内容缩放比例等方面显示出更高的视觉显著性，这样，更好的模拟了人类在真实环境中的视觉效果，并且可以使得用户的视觉焦点保持在该区域不变，并且注意力也更集中，避免一些重要的图片内容被错过或忽略。
实施例二
本申请实施例二首先提供了一种在页面中提供商品对象图片的方法，该方法主要从服务器的角度进行介绍，参见图4，该方法具体可以包括以下步骤：
S401：接收商品对象的浏览请求；
S402：根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
服务器可以根据浏览请求中携带的搜索关键词等信息，检索出匹配的多张商品对象图片，并生成页面信息。
S403：在所述页面信息中添加预置的标识；
在生成页面信息之后，服务器可以在页面信息中添加上一预置标识，以便客户端以此为依据确定是否需要按照本申请实施例提供的方法进行页面的显示。
S404：将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域。
在添加了预置标识之后，就可以将携带有该预置标识的页面信息返回给客户端，这样客户端在接收到页面信息之后，分析出其中携带有预置标识，因此，就可以按照实施例一的步骤S103至S105所示的方法进行页面的显示。
需要说明的是，该实施例二主要是从服务器的角度进行介绍，其中一些具体的实现细节，在实施例一中均已经有所介绍，因此，参见实施例一中的介绍即可，这里不再赘述。
与本申请实施例一提供的在页面中提供商品对象图片的方法相对应，本申请实施例还提供了一种在页面中提供商品对象图片的装置，参见图5，该装置具体可以包括：
浏览请求发送单元501，用于发送商品对象的浏览请求；
页面信息接收单元502，用于接收包括有多张商品对象图片的页面信息；
面积区域确定单元503，用于确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
目标图片确定单元504，用于在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
调整单元505，用于对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片。
具体实现时，可以通过多个方面对图片的视觉显著性进行调整。例如，在其中一种方式下，调整单元505具体可以包括：
第一清晰度调整子单元，用于将所述面积区域之外的其他图片的清晰度调低。
或者，在其中另一种方式下，调整单元505具体可以包括：
第二清晰度调整子单元，用于将所述视觉焦点区域内的目标图片的清晰度置为最高。
在另一种方式下，页面中预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，调整单元505具体可以包括：
截取子单元，用于对于所述面积区域内各个目标图片，截取目标图片的主体内容部分；
显示子单元，用于将所述主体内容部分显示到该目标图片对应的图片显示区域内。
所述显示子单元具体可以包括：
尺寸放大子单元，用于将所述主体部分内容放大到所述目标图片的原尺寸；
比例缩放子单元，用于根据所述原尺寸与所述图片显示区域的尺寸之间的比例关系，将所述主体内容部分显示到该目标图片对应的图片显示区域内。
具体确定面积区域的实现方式也可以有多种，其中一种方式下，所述面积区域确定单元503具体可以包括：
窗口高度确定子单元，用于获取所述显示窗口的高度；
中线位置确定子单元，用于根据显示窗口的高度确定所述显示窗口在高度方向上的中线位置；
区域确定子单元，用于根据所述中线位置以及面积区域需显示的图片行数，确定所述面积区域。
其中，面积区域需显示的图片行数可以是预先确定好的，或者，为了进一步提高通用性，该装置还可以包括：
单张图片高度确定单元，用于确定单张图片的高度；
总行数确定单元，用于根据所述显示窗口的高度以及单张图片的高度确定每屏可显示的图片总行数；
面积区域行数确定单元，用于根据所述总行数以及预置的非面积区域图片行数，确定面积区域需显示的图片行数。
其中，目标图片确定单元504具体可以包括：
坐标确定子单元，用于确定显示窗口中当前显示的各个图片，以及各个图片在显示窗口中的坐标；
图片确定子单元，用于根据所述面积区域的坐标以及所述各个图片的坐标，确定进入到所述面积区域内的目标图片。
另外，该装置还可以包括：
判断单元，用于确定显示窗口中的一面积区域之前，判断所述页面信息中是否包含有预置的标识；
触发单元，用于如果所述判断单元的判断结果为是，则触发所述确定显示窗口中的一面积区域以及后续步骤。
与本申请实施例二提供的在页面中提供商品对象图片的方法相对应，本申请实施例还提供了一种在页面中提供商品对象图片的装置，参见图6，该装置具体可以包括：
浏览请求接收单元601，用于接收商品对象的浏览请求；
页面信息确定单元602，用于根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
标识添加单元603，用于在所述页面信息中添加预置的标识；
页面信息返回单元604，用于将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域。
总之，通过本申请实施例，可以在显示窗口中确定出一面积区域，该面积区域可以是根据人们在观看显示窗口时的视觉焦点来确定的，在每一屏显示的图片中，可以将进入到该面积区域的部分图片显示出更高的视觉显著性，这样，可以使得用户的视觉焦点保持在该区域不变，避免长时间的转移视觉焦点引起的用眼疲劳，并且注意力也更集中，避免一些重要的图片内容被错过或忽略。
通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***或***实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的***及***实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
以上对本申请所提供的在页面中提供商品对象图片的方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种在页面中提供商品对象图片的方法，其特征在于，包括：
发送商品对象的浏览请求；
接收包括有多张商品对象图片的页面信息；
确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；
其中，所述多张商品对象图片按照行、列的方式排列，其中所述面积区域按行显示所述目标图片；其中，页面中预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：
对于所述面积区域内各个目标图片，截取目标图片的主体内容部分；
将所述主体内容部分放大到所述目标图片的尺寸；
将所述放大后的主体内容部分显示到该目标图片对应的图片显示区域内。
2.根据权利要求1所述的方法，其特征在于，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：
将面积区域之外的其他图片的清晰度调低。
3.根据权利要求1所述的方法，其特征在于，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：
将所述视觉焦点区域内的目标图片的清晰度调高。
4.根据权利要求1至3任一项所述的方法，其特征在于，所述确定显示窗口中的面积区域，包括：
获取所述显示窗口的高度；
根据显示窗口的高度确定所述显示窗口在高度方向上的中线位置；
根据所述中线位置以及面积区域需显示的图片行数，确定所述面积区域。
5.根据权利要求4所述的方法，其特征在于，还包括：
确定单张图片的高度；
根据所述显示窗口的高度以及单张图片的高度确定每屏可显示的图片总行数；
根据所述总行数以及预置的非面积区域的图片行数，确定面积区域需显示的图片行数。
6.根据权利要求1至3任一项所述的方法，其特征在于，所述确定进入到所述面积区域内的目标图片，包括：
确定显示窗口中当前显示的各个图片，以及各个图片在显示窗口中的坐标；
根据所述面积区域的坐标以及所述各个图片的坐标，确定进入到所述面积区域内的目标图片。
7.根据权利要求1至3任一项所述的方法，其特征在于，所述确定显示窗口中的一面积区域之前，还包括：
判断所述页面信息中是否包含有预置的标识；
如果是，则触发所述确定显示窗口中的一面积区域以及后续步骤。
8.一种在页面中提供商品对象图片的方法，其特征在于，包括：
接收商品对象的浏览请求；
根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
在所述页面信息中添加预置的标识；
将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域；其中，所述多张商品对象图片按照行、列的方式排列，其中所述面积区域按行显示所述目标图片；其中，页面中预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：对于所述面积区域内各个目标图片，截取目标图片的主体内容部分；将所述主体内容部分放大到所述目标图片的尺寸；将所述放大后的主体内容部分显示到该目标图片对应的图片显示区域内。
9.一种在页面中提供商品对象图片的装置，其特征在于，包括：
浏览请求发送单元，用于发送商品对象的浏览请求；
页面信息接收单元，用于接收包括有多张商品对象图片的页面信息；
面积区域确定单元，用于确定显示窗口中的一面积区域，所述面积区域为视觉焦点区域；
目标图片确定单元，用于在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片；
调整单元，用于对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述多张商品对象图片按照行、列的方式排列，其中所述面积区域按行显示所述目标图片；其中，页面中预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：对于所述面积区域内各个目标图片，截取目标图片的主体内容部分；将所述主体内容部分放大到所述目标图片的尺寸；将所述放大后的主体内容部分显示到该目标图片对应的图片显示区域内。
10.一种在页面中提供商品对象图片的装置，其特征在于，包括：
浏览请求接收单元，用于接收商品对象的浏览请求；
页面信息确定单元，用于根据所述浏览请求，确定包括有多张商品对象图片的页面信息；
标识添加单元，用于在所述页面信息中添加预置的标识；
页面信息返回单元，用于将所述包括有多张商品对象图片并添加有预置标识的页面信息返回，以便客户端根据所述预置标识，确定显示窗口中的一面积区域，在页面中显示所述多张商品对象图片的过程中，确定进入到所述面积区域内的目标图片，并对显示窗口内图片的视觉显著性特征进行调整，以使得所述面积区域内的目标图片的视觉显著性高于所述面积区域之外的其他图片；其中，所述面积区域为视觉焦点区域；其中，所述多张商品对象图片按照行、列的方式排列，其中所述面积区域按行显示所述目标图片；其中，页面中预先划分有多个图片显示区域，每张商品对象图片在各自对应的图片显示区域内显示，所述对显示窗口内各个图片的视觉显著性特征进行调整，包括：对于所述面积区域内各个目标图片，截取目标图片的主体内容部分；将所述主体内容部分放大到所述目标图片的尺寸；将所述放大后的主体内容部分显示到该目标图片对应的图片显示区域内。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410351855.9A CN105335854B (zh) | 2014-07-22 | 2014-07-22 | 在页面中提供商品对象图片的方法及装置 |
| HK16106575.2A HK1218586A1 (zh) | 2014-07-22 | 2016-06-08 | 在頁面中提供商品對象圖片的方法及裝置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410351855.9A CN105335854B (zh) | 2014-07-22 | 2014-07-22 | 在页面中提供商品对象图片的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105335854A CN105335854A (zh) | 2016-02-17 |
| CN105335854B true CN105335854B (zh) | 2020-06-30 |
Family
ID=55286366
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410351855.9A Active CN105335854B (zh) | 2014-07-22 | 2014-07-22 | 在页面中提供商品对象图片的方法及装置 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN105335854B (zh) |
| HK (1) | HK1218586A1 (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106855998A (zh) * | 2016-12-29 | 2017-06-16 | 广州酷狗计算机科技有限公司 | 写真图片的展示方法及装置 |
| CN107562877A (zh) * | 2017-09-01 | 2018-01-09 | 北京搜狗科技发展有限公司 | 图像数据的显示方法、装置和用于图像数据显示的装置 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102270331A (zh) * | 2011-08-14 | 2011-12-07 | 黄斌 | 基于可视化搜索的网络购物导航方法 |
| CN103154949A (zh) * | 2010-08-11 | 2013-06-12 | 耐克国际有限公司 | 用户界面中的信息的智能显示 |
| CN103617533A (zh) * | 2013-09-12 | 2014-03-05 | 上海渐石网络科技有限公司 | 商品信息的展示方法与装置 |
| CN103631493A (zh) * | 2013-10-31 | 2014-03-12 | 小米科技有限责任公司 | 图片显示方法、装置及电子设备 |
-
2014
- 2014-07-22 CN CN201410351855.9A patent/CN105335854B/zh active Active
-
2016
- 2016-06-08 HK HK16106575.2A patent/HK1218586A1/zh unknown
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103154949A (zh) * | 2010-08-11 | 2013-06-12 | 耐克国际有限公司 | 用户界面中的信息的智能显示 |
| CN102270331A (zh) * | 2011-08-14 | 2011-12-07 | 黄斌 | 基于可视化搜索的网络购物导航方法 |
| CN103617533A (zh) * | 2013-09-12 | 2014-03-05 | 上海渐石网络科技有限公司 | 商品信息的展示方法与装置 |
| CN103631493A (zh) * | 2013-10-31 | 2014-03-12 | 小米科技有限责任公司 | 图片显示方法、装置及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105335854A (zh) | 2016-02-17 |
| HK1218586A1 (zh) | 2017-02-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5324411B2 (ja) | 広告配信装置、方法及びプログラム | |
| US10540055B2 (en) | Generating interactive content items based on content displayed on a computing device | |
| EP3223272B1 (en) | Information processing device, information processing method, and information processing program | |
| CN113711175A (zh) | 呈现计算机生成现实环境的可穿戴电子设备 | |
| CN110400337B (zh) | 图像处理方法、装置、电子设备及存储介质 | |
| JP6784168B2 (ja) | 情報処理装置、プログラム、閲覧システム | |
| CN112083989A (zh) | 一种界面的调节方法和装置 | |
| US8719697B2 (en) | Object control method for displaying objects in front of link elements | |
| JP5563703B2 (ja) | コンテンツ配信装置、コンテンツ配信方法、コンテンツ配信プログラム及び端末用プログラム | |
| JP6162057B2 (ja) | 表示装置及び表示方法 | |
| CN102436342A (zh) | 图像预览及处理方法 | |
| CN105335854B (zh) | 在页面中提供商品对象图片的方法及装置 | |
| US10831338B2 (en) | Hiding regions of a shared document displayed on a screen | |
| CN113592872A (zh) | 一种图片展示的方法、装置以及计算机存储介质 | |
| JP6339550B2 (ja) | 端末用プログラム、端末装置及び端末制御方法 | |
| US8984391B2 (en) | Web page object placement with changing object size responsive to the attribute of the link element | |
| CN111913343A (zh) | 一种全景图像显示方法及装置 | |
| CN114138141A (zh) | 显示方法、装置和电子设备 | |
| US10733637B1 (en) | Dynamic placement of advertisements for presentation in an electronic device | |
| US10867445B1 (en) | Content segmentation and navigation | |
| CN111949129A (zh) | 显示内容更新方法、装置、电子设备及存储介质 | |
| JP5657041B2 (ja) | 情報処理装置、方法及びプログラム | |
| JP6559280B2 (ja) | 端末用プログラム、端末装置及び端末制御方法 | |
| JP6312901B2 (ja) | 端末用プログラム、端末装置及び端末制御方法 | |
| JP6101654B2 (ja) | 配信装置、配信方法、配信プログラム及び制御プログラム |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1218586 Country of ref document: HK |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |