axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配

2020-05-1401:47:51原型设计Comments5,438 views字数 1304阅读模式

本文分为辅助介绍和主题介绍(搜索介绍),先把动画效果呈上天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

一、辅助介绍

(1)拉取一个中继器命名为product并设置成如下图所示,中继器相当于Axure的数据库,横向是记录,纵向是字段。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

中继器–product文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(2)添加字段和记录,并分别给它命名。(一般以通俗易懂为准)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(3)设置中继器样式。标签①、②、③分别命名为Names、Prices、Sale,图片命名为Images。并分别对应中继器中相应的字段,当页面加载时显示图片及文字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(4)按品牌名称筛选,记得第三步要移除其他筛选。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-4文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(5)当客户点击“全部品牌”时,我们要展示的是所有品牌,所以我们要移除所有筛选。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-5文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(6)根据某项指标排序,以中继器中的哪个字段为维度,按照什么顺序排序。(排序类型一般是数字number)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-6文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(7)根据输入的价格区间筛选。我们要将输入的最高、最低价存放在变量中,若中继器中价格在这个区间就显示出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-7文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(8)“清除”按钮与“全部品牌”的逻辑一致,都是移除筛选,然后再设置两个输入框为空即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-8文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(9)上下页交互,当为第一页时,禁用上一页按钮;当不是最后一页时,启用下一页按钮的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

当翻到第二页时,设置选中,效果如图-10,告诉用户所处的页数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-9文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-10文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(10)使用pageindex函数,获取中继器项目列表当前显示内容的页码;下一页与上一页类似,在此不做赘述。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-11文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(11)跳转到输入的页面。在局部变量里,specify_page就是页码输入框名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-12文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

这样除了搜索功能,别的差不多都简单介绍完了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

二、搜索介绍

搜索功能分为历史记录、根据输入内容匹配常用搜索热词(简称“搜索提示”),根据输入关键词搜索显示内容三部分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

历史记录

step1:拉取一个动态面板(slider_历史记录),内嵌一个中继器用于存储搜索记录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

step2:为了使模拟更加逼真,我们先添加三条记录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-13文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

step3:设置中继器中的文本框文字为中继器的记录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-14文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

step4:当点击某一条历史记录时,自动匹配中继器中的商品(思路与下面搜索提示一样,是对的。但是结果与搜索提示却不同,很奇怪)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-15文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

搜索提示

与历史记录的原理差不多,这里不多赘述。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-16文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-17文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

重头戏来了,搜索!

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-18文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(1)当搜索框的长度大于0时,自动匹配搜索提示中的关键词文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

:这是由于我在搜索提示动态面板中的中继器中的字段名称为Column0,所以才这样显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-19文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(2)当失去焦点时,在历史记录中自动添加一行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-20文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(3)点击“搜索”按钮,其实也是实现筛选。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-21文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(4)在商品标题中匹配搜索关键词,并用红色显示关键词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-22文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(5)效果图如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

axure原型设计:天猫商品列表页+搜索+提示+历史记录+关键词匹配文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

图-23文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

至此,搜索的原型设计就简单介绍完毕。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

三、小结:

(1)涉及到的功能有:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

  1. 按关键词、品牌、价格搜索;
  2. 按人气、销量、价格等排序;
  3. 支持上下翻页、跳转指定页面;
  4. 支持热词匹配(搜索提示)功能;
  5. 支持记录搜索记录功能。

(2)涉及到的Axure知识点:动态面板+中继器+函数+排序筛选+交互用例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

(3)Axure函数参照:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

本文由 @九牧 原创发布于人人都是产品经理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18802.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/18802.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定