请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:8| 主题:19130
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Axure实例|中继器的增删改查,来实现从商品列表页到详情页

[复制链接]
夜店、情殇 发表于 2016-10-18 23:51:40
520 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在之前的文章中,既做过了轰轰烈烈的搜索,也做过了简简单单的排序和筛选,今天想用中继器来实现一下从商品【列表页】到【详情页】的过程,还有关于“列表“到“详情”的一些思考。
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-1-产品设计-产品经理,淘宝,中继器,点击率,图片

  预览效果:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-2-产品设计-产品经理,淘宝,中继器,点击率,图片

  一、从列表到详情的数据显示

   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-3-产品设计-产品经理,淘宝,中继器,点击率,图片

  上图是淘宝wap端,从商品列表页到商品详情页的变化,很明显能看出‘详情’页的信息更多更全面,数据字段的显示也更丰富;
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-4-产品设计-产品经理,淘宝,中继器,点击率,图片

  上图是人人都是产品经理的app页面,左侧是列表页,右侧是详情页。
  不仅仅是电商和社区,包括像微信在内的产品都是从列表到详情,列表的作用是简洁地展示详情的信息,而详情是对列表信息的补充。
   淘宝wap端,就是将 商品图片、名称、价格、运费、购买价格、购买人数、发货地址 ,显示在列表。这也是淘宝经过数据分析之后,提炼出的 用户对商品最关注的信息 。我们在设计产品时,也应该精细打磨,用数据做支撑,将用户最关心的信息放到他眼前。这样既能优化产品,减少不重要的数据字段,也能增加商品的点击率。
  如果要用axure来实现的话,可能有的朋友会想到用不同的动态面板来切换,其实不必这么麻烦,只需要了解中继器的”增“,就可以将商品列表页的数据插入到商品详情页中。
  二、中继器实现

  1)数据字段分析

   还是回到最初的中继器界面,如下图,现在有一个已经做好的中继器列表,参考: 用过那么多原型软件,为什么我还是最爱Axure
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-5-产品设计-产品经理,淘宝,中继器,点击率,图片

  这个中继器的数据集:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-6-产品设计-产品经理,淘宝,中继器,点击率,图片

  可以看到这个数据集是很简单的,但是我们的目标是像淘宝wap端的商品详情页:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-7-产品设计-产品经理,淘宝,中继器,点击率,图片

  为了体现数据传递,并且不显得臃肿,所以我选择其中一部分的信息来实现。
  2)增加字段

  分析了一下之后,我决定增加图片轮播和快递费:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-8-产品设计-产品经理,淘宝,中继器,点击率,图片

  如图三列,就是在列表中继器增加的字段和数据,因为列表不显示,所以不用赋值,单纯用于数据传递。
  3)清楚商品详情页的数据

  可以从之前的淘宝wap看出,相同的数据尺寸和排列位置并不相同(比如列表页的商品图片在详情页是轮播大图),所以复制列表页中继器(list-repeater),暂时先放在他旁边:
  复制主要是不用再从新填写数据集的字段了,如果按照我之前说的用excel来存储,也可以直接复制数据集,都可以实现。
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-9-产品设计-产品经理,淘宝,中继器,点击率,图片

  再将右侧中继器改名为(info-repearter),并把他的数据里的记录(每一行)都删除,字段名不要更改:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-10-产品设计-产品经理,淘宝,中继器,点击率,图片

  4)重新排列一下info中继器的数据结构

  增加了tp这个数据
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-11-产品设计-产品经理,淘宝,中继器,点击率,图片

  5)增加一个图片轮播

  在info中继器中,用一个中继器套三张图分别是img、img2、img3
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-12-产品设计-产品经理,淘宝,中继器,点击率,图片

  在增加一个左右滑动的用例:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-13-产品设计-产品经理,淘宝,中继器,点击率,图片

  向前与此同理:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-14-产品设计-产品经理,淘宝,中继器,点击率,图片

  给info中继器赋值:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-15-产品设计-产品经理,淘宝,中继器,点击率,图片

  一切准备就绪,接下来就是中继器最精彩的部分.
  6)从列表到详情

  先在的工作区是这样的:(为了方便观看,所以将详情放到和列表同一界面)
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-16-产品设计-产品经理,淘宝,中继器,点击率,图片

  而我的目标是点击列表的某一项,右侧对应显示该商品的详情,所以对list中继器添加用例。
  在list中继器内蒙上一层动态面板(click),添加用例,鼠标单价click时,在info中添加(insert)一行数据(info中继器现在是没有数据的):
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-17-产品设计-产品经理,淘宝,中继器,点击率,图片

  因为两个中继器的字段命名都相同,所以选择相同的变量名命名:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-18-产品设计-产品经理,淘宝,中继器,点击率,图片

  可以先试试增加数据这个功能:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-19-产品设计-产品经理,淘宝,中继器,点击率,图片

  可以看到,我点击list中继器的一项,会在右侧info中继器增加一项。增加的功能确实实现了,但是我的目标是在info的一个界面里刷新,所以需要接下来的步骤:
  7)更新数据

  先标记info中继器,全部标记。——这一步可以理解为,我们要把上一步添加的数据更新为新的状态,那么要更新哪些数据呢?这就像数据库的select一样,先把要更新的数据标记出来。
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-20-产品设计-产品经理,淘宝,中继器,点击率,图片

  标记完成后,那么要把先在标记的数据更新成什么数据呢?
  所以我们就就要导入(update)新的数据:
   

Axure实例|中继器的增删改查,来实现从商品列表页到详情页

Axure实例|中继器的增删改查,来实现从商品列表页到详情页-21-产品设计-产品经理,淘宝,中继器,点击率,图片

  到这里,数据的传递,insert,select,update都用到了。
   结合上一篇文章说到的delete,刚好是对数据处理的 增删改查
  这也是中继器的用法里稍微复杂的一部分。
  最后,我的中继器基础教程就先写到这里了,点击右上角的头像可以查看这个教程之前的文章。
  以后想到什么有意思的东西再和大家分享吧~
  本文由 @浩程君 原创发布于人人都是产品经理。未经许可,禁止转载。



上一篇:MailShop: A review of The Daily Mail's revamped ecommerce site
下一篇:为什么你觉得已经说明白了,可对方还是不明白?
董泽右 发表于 2016-10-19 15:29:33
小白一个 顶一下
回复 支持 反对

使用道具 举报

pjcmsj 发表于 2016-10-19 17:20:39
不要在意我,我只是个小尾巴。
回复 支持 反对

使用道具 举报

得意的笑 发表于 2016-11-3 06:45:55
新人求罩求粉求眼熟求认识求包养
回复 支持 反对

使用道具 举报

沙弥小僧 发表于 2016-11-9 19:35:20
涨姿势
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表