关于我们
产品中心
新闻动态
客户留言
产品视频
服务承诺
人力资源
联系我们
 
LED行业资讯        您当前的位置:首页 > 新闻动态  

一种在网页上展示产品图片的方法与流程

时间:2019-05-02 09:21:59  来源:本站  作者:
公司

  随着计算机技术的发展和人们对于网购的热衷程度的逐渐提高,在网页上展示商家产品的相关信息和图片(或照片)已经是一件司空见惯的事情,针对现有展现方式,大多有以下两种:一是直接采用平铺展示的方式,二是采用轮播的方式展示。

  采用直接平铺的方式,展现方式偏于静态,会给用户带来视觉疲劳,对于产品的突出形式不够,整个展现方式美感也不够。

  采用轮播的方式,展现效果较直接平铺而言,更为生动一些,有动态效果,但是对于全部的产品展现不够,也就是说只能看见当前的产品,用户对于有多少产品,包括其他产品大致情况都不能在第一眼见到,只有切换当前选择,才能依次看到所有的产品。

  本发明所要解决的技术问题是:提出一种在网页上展示产品图片的方法,解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。

  展示方式为:在容器中央位置开辟一个区域,突出展示当前产品模块,将其它产品模块分布展现在当前产品模块的四周;

  当用户进行当前焦点的点击操作时,若当前焦点所处为当前产品模块,则在当前产品模块的正面显示信息和背面显示信息之间切换;若当前焦点所处为其它产品模块,则将所点击的其它产品模块切换为新的当前产品模块,将点击之前的当前产品模块切换为其它产品模块。

  作为进一步优化,所述当前产品模块在展现时,初始化展现的是其正面的图片、名称、概要信息,当对其进行点击操作时,当前产品模块翻转180°,展现其背面的详细信息,再次对其进行点击操作时,则又切换回正面展示。

  作为进一步优化,所述其它产品模块均匀分布展现在当前产品模块的四周边缘区域,其它产品模块展现时可部分叠加展现,并具有一定的偏转角度。

  作为进一步优化,该方法还包括:在容器底部布置索引,用以展现当前模块的索引位置和各个模块的排列顺序,并且将索引和具体的模块实现联动,获得点击索引和点击模块拥有相同的效果。

  本发明的有益效果是:在容器中央位置开辟一个区域,突出展示当前产品模块,将其它产品模块分布展现在当前产品模块的四周;按照该方案展示的产品,主次分明,对当前展示的突出效果非常明显;

  对于其它模块散落在容器里面,只显示主要信息,用户去查看的时候,不会出现视觉疲劳的现象,只有选中想要看到的模块将其转变为当前模块时,才能够继续查看其详细信息,十分人性化,用户学习使用的时间代价将能够大大降低;

  此外,可以随时在当前模块的正面和背面信息之间进行切换,满足用户查看产品详细信息的需求,其它模块与当前模块之间也可以进行平滑切换,使得用户的接受度友好。

  本发明旨在提出一种在网页上展示产品图片的方法,解决传统的展现方式存在的对产品的突出展示不够以及对全部的产品展现不够的问题。

  在本发明中,采用图片文字结合的方式来展示产品。对于产品想要展示的信息的集合,包含产品的图片、名称、概要信息、详细信息,我们将其封装为一个模块(model),将模块所需要的全部信息,存在数据库中,在具体展示时,从数据库中读取数据,而这些数据,是由网站的所有者或者其授权管理的管理员(admin)来添加。用以展示这些model的地方,我们称之为一个容器(container),一般来讲,container的区域由admin来约定,以适合放置适量的model为标准。而每个model都有正反面的区分,正面展示产品的图片(或照片)、名称、概要信息,背面展示产品的详细信息,初始化状态时,所有的model正面朝上,也就是只展示产品的大概信息。

  首先,在一个container中可以装有多个(一般为三个以上)model。对于这些model来说,只允许有一个置于container的中间,被称为当前模块(current model),current model由admin来设定,这样可以根据需求,在不同的时期设定不同的产品作为默认current model,展现形式更为灵活。

  而对于其他的model,以一种衬托current model的方式出现在周围,如图1所示,其情景类似于将container看成一张桌子,将其他model随意的摆放在桌面上,但也需要靠桌子的边缘一点,根据放置的顺序不同,可能会有叠加的情况,current model出现在桌子的中间,也是最表面上,不会被任何其他模块遮挡。这种展示的方式,使得当前模块的突出方式非常明显,便于将用户的关注点聚集在当前模块,而其他模块出现的叠加状态,给用户一种很真实的感觉,在查看这些model时,就像在翻真实的产品介绍的照片。

  当用户点击current model时,current model可翻转180度,出现背面的产品详细信息,主次分明,翻转过程采用css动画,用一个明显的过渡。

  当用户点击其他model时,被点击的model成为current model,之前的current model,成为其他模块,模块的切换过程也是采用css动画,所以在点击的过程中,可以看到模块之间的移动轨迹。

  因此,概括来讲,本发明就是将每个产品信息分别封装在model中,model按照排列规则放置container中,当前模块占据视觉焦点,当前模块可以进行正反面动态切换以展示其产品信息,点击其他模块可实现当前模块和其他模块的切换效果。

  在具体实现上,可以使用html布局,css修饰样式,以angular.js将读取数据放置在html上,current model定位于整个容器的中央,其他模块如一叠照片,随意的放置在容器里,均匀地分布在当前模块的四周。结合实际的物理学和美学思想,其他模块在随意均匀分布的同时,应当具有一定的偏转角度才算符合物理学,而配合审美,这个偏转角度一般取±30°才能够以更为舒服展示给用户。

  此外,本发明还可以在容器底部布置索引,可以表现出当前模块的索引位置,排列顺序,并且将索引和具体的模块实现联动,获得点击模块和点击索引拥有一样的效果。

Copyright © www.g22.com Inc. All rights reserved 版权所有:利来娱乐国际 沪ICP备07029879号
友情链接: