百度搜索提示是如何实现的,新闻类APP频道自主增减

菲律宾申傅娱乐 1

01 准备元件

本案例中需要用到的元件有文本框、矩形按钮和中继器。文本框用于输入搜索词,这里的类型需要设置为查找;矩形按钮可以直接从元件库中拖拽至搜索框右侧,并将按钮中的文字修改为“搜索”;中继器用来显示提示词列表,即根据搜索内容索引出来的列表,这里需要注意将中继器转换为动态面板,因为动态面板可以根据内容自动扩展尺寸,默认隐藏动态面板

元件准备部分重点讲解中继器在本案例中的应用,首先为中继器数据集column0这一列预设一些内容(iphone、iphone7、iphone8、iphone8plus、iphonex、iphonex价格、iphonex配置、iphonex换屏、二手iphonex、维修iphone),共有10项数据内容;然后在为中继器的项设置一个鼠标悬停的交互样式,填充色设置为灰色;最后在将中继器项的边框颜色去掉。至此,中继器的显示效果完成了,看上去与百度的效果基本一致。

菲律宾申傅娱乐 2

02 交互设置

菲律宾申傅娱乐 3

a 中继器

这里主要有两个交互事件,第一个为中继器设置每项加载时事件(注意这里的交互设置的对象是中继器不是项),目的是为中继器的项加载内容,在文本设置中将中继器项的值设置为函数[[Item.Column0]];第二个为中继器的项设置单击事件,在文本设置中将搜索框的值设置为项的值,即函数[[this.text]],并隐藏中继器动态面板。

加载中继器的项

将项的值传递给文本搜索框

(1)将精选频道,和页面中部的图片组合

 附:中继器函数说明

Repeater 用途:中继器的对象。Item.Repeater即为Item所在的中继器对象。

visibleItemCount
用途:中继器项目列表中可见项的数量。比如:项目列表共有15项,分页显示为每页6项。当项目列表在第1、2页时,可见项数量为6;当项目列表在第3页时,可见项数量为3。

itemCount
用途:获取中继器项目列表的总数量,或者叫加载项数量。默认情况下项目列表的总数量会与中继器数据集中的数据行数量一致,但是,如果进行了筛选,项目列表的总数量则是筛选后的数量,这个数量不受分页影响。

dataCount 用途:获取中继器数据集中数据行的总数量。

pageCount 用途:获取中继器分页的总数量,即能够获取分页后共有多少页。

pageIndex 用途:获取中继器项目列表当前显示内容的页码。

Item 用途:获取数据集一行数据的集合,即数据行的对象。

TargetItem 用途:目标数据行的对象。

Item.列名 用途:获取数据行中指定列的值。

index 用途:获取数据行的索引编号,编号起始为1,由上至下每行递增1。

isFirst
用途:判断数据行是否为第1行;如果是第1行,返回值为“True”,否则为“False”。

isLast
用途:判断数据行是否为最末行;如果是最末行,返回值为“True”,否则为“False”。

isEven
用途:判断数据行是否为偶数行;如果是偶数行,返回值为“True”,否则为“False”。

isOdd
用途:判断数据行是否为奇数行;如果是奇数行,返回值为“True”,否则为“False”。

isMarked
用途:判断数据行是否为被标记;如果被标记,返回值为“True”,否则为“False”。

isVisible
用途:判断数据行是否为可见行;如果是可见行,返回值为“True”,否则为“False”。

菲律宾申傅娱乐 4


同时,我的频道中继器mychannel的频道数据中,除了第一行“要闻”,其他频道条目的左上角,都会出现关闭按钮“×”。

百度搜索

菲律宾申傅娱乐 5

b 文本框

为文本框添加一个文本改变事件,当文本框的内容改变时,我们希望达到这样的效果:显示中继器动态面板,移除之前的筛选结果,重新按照新的搜索词进行索引筛选。这里需要说明的是添加新的筛选时,需要设定一个条件,即当中继器数据集中包含搜索的内容时,执行筛选并显示出来,需要插入这样一个函数[[TargetItem.Column0.indexOf(LVAR1)>-1]]执行新的筛选。文本改变事件还需要添加另一个用例case2,用例中添加一个条件即如果文本框的内容为空,则执行的动作为隐藏中继器动态面板,记得将case2切换为if,case2通常默认为else
if。

文本框设置文本改变事件

菲律宾申傅娱乐 6

03 最后的总结

到此为止,模拟百度搜索提示的交互效果已经完成了,预览你的原型,欣赏你辛苦半天的作品吧。本案例中的重点在于中继器的综合运用,中继器是Axure7.0版本之后新增加的功能,中继器可以看做成一个本地的小型数据库。熟练应用以后,还可以实现电商列表的筛选,管理后台的条件查询或是在线随机抽奖等效果。

本案例的源文件链接: 密码:h3ta


菲律宾申傅娱乐 7

c 搜索按钮

首先需要想清楚,点击搜索按钮后我们希望达到的效果是怎样的。如果输入的搜索词不在中继器数据集里面,这时候我们需要在中继器数据集中添加这一条数据;再次点击按钮,首先移除之前的全部筛选,
添加新的筛选,这里的筛选规则为精确索引。梳理清楚逻辑规则后,下面我们来看下如何设置交互事件。

为搜索按钮设置单击事件,添加第一个用例,在编辑条件中编辑函数,首先将中继器设置为局部变量LAVR1,然后插入函数[[LVAR1.itemCount]](筛选结果的数量),在编辑条件中设置值等于0,添加动作数据集添加行,在添加行到中继器时,先将文本框定义为局部变量LVAR1,然后在将这个局部变量添加到行。

添加第二个用例case2,动作设置中首先移除全部筛选,然后在添加新筛选中设置筛选条件为[[TargetItem.Column0==LVAR1]]。LVAR1为文本框定义的变量,TargetItem.Column0表达的意思为中继器数据集Column0这一列数据,这里的数据包含之前筛选的结果。

搜索按钮设置单击事件

筛选结果的数量并不等于数据集项的数量,我们可以做个实验,添加两个按钮,一个显示筛选结果的数量,一个显示数据集项的数量。在中继器项的加载事件中添加两个动作,设置两个按钮的文本值分别为函数[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(设置的截图可参照上文 加载中继器的项

更新列为number2,更新为[[TargetItem.number2-1]],即将后续数据的number2都提前一位。

当我们使用搜索引擎输入关键词的时候,搜索引擎会根据搜索词模糊匹配推荐一些相关的内容在搜索框的下方显示,这里也包含了我们的搜索记录。点击搜索按钮,搜索引擎就会执行搜索,利用爬虫抓取的网页,按照一定的算法返回搜索结果列表。
那么这样的原型交互效果,是否可以通过Axure完成制作了?这就是今天为大家讲解的交互案例,借助中继器实现百度搜索提示的效果。

本文重点讲解中继器的应用场景,故上述gif图中的,页面跳转交互,比较简单,就不赘述了,下面主要讲解频道增减页的制作。

本案例的讲解适用于具有一定的Axure使用基础的人员,关于工具的操作步骤不做详细讲解。本文讲述的重点在于逻辑的梳理以及一些启发性的思路与方法,希望能够帮助大家做出更酷炫的交互效果。

第四步:两个中继器之间的数据传递交互

(6)现在,我们来做mychannel中继器中的关闭按钮“×”close的交互。

解释:

解释:

接下来在中继器jxchannel中的灰色圆角矩形jx加入交互case3。

具体制作过程

菲律宾申傅娱乐 8

菲律宾申傅娱乐 9

菲律宾申傅娱乐 10

当点击时,文字由“编辑”变为“完成”。

交互:

菲律宾申傅娱乐 11

接下来,当精选频道中的各个频道标签被点击后,在mychannel中继器中增加相应条目,而在精选频道jxchannel中继器中,要减少相应条目,需更新number2数值,且做升序排列。

菲律宾申傅娱乐 12

因为mychannel中的数据为4个一排,所以当点击关闭按钮,数据减少到为4的倍数时,中继器尺寸就会变小,所以条件设置为:if
“[[LVAR1%4]]” ==
“0”,LVAR1为yidong1文本框文字。即当mychannel数据总量能被4整除时,移动下方的原件上移55个y坐标。

  1. “我的频道”,“精选频道”的频道可以彼此互为增减;
  2. “我的频道”中,“要闻”频道,为系统固定第一位频道,不能增删改动,以蓝字凸显;
  3. “我的频道”中,长按每个频道,会激活左上角关闭按钮×;
  4. “我的频道”中,伴随频道增减,下方的元件位置,会自动下移和上调;
  5. “我的频道”中,单击左上角关闭按钮×,会将相应频道退回到下方精选频道中,并自动排在首位;
  6. “精选频道”中,点击任意频道,自动在“我的频道”添加对应频道,并且自动排至最后;
  7. 点击编辑按钮时,我的频道中的频道标签左上角会出现关闭按钮×;
  8. 当编辑按钮的文字为“编辑”时,新增到我的频道中的频道标签不显示关闭按钮×,反之,当编辑按钮文字为“完成”时,新增到我的频道中的频道标签显示关闭按钮×。

解释:

菲律宾申傅娱乐,即在mychannel中继器中,选中灰色圆角矩形channelname,在鼠标长按时,触发编辑按钮的鼠标单击时交互,即可。

菲律宾申傅娱乐 13

本文由 @bobowang 原创发布于人人都是产品经理。未经许可,禁止转载返回搜狐,查看更多

菲律宾申傅娱乐 14

菲律宾申傅娱乐 15

最后,删除本行。

菲律宾申傅娱乐 16

(2)接下来我们先添加一个全局变量mychanneldatacount,并且在我的频道中继器mychannel中添加交互:在mychannel每项数据加载时,全局变mychanneldatacount的值为[[Item.Repeater.dataCount]]即中继器数据总数。

第五步:两个中继器之间的位移

菲律宾申傅娱乐 17

菲律宾申傅娱乐 18

菲律宾申傅娱乐 19

菲律宾申傅娱乐 20

(3)为文本框yidong1赋值,在mychannel中继器中的每项加载时,设置yidong1的文字为全局变量mychanneldatacount,即mychannel的数据总量。

(5)我们再添加一个全局变量jxdatacount,并且在精选频道中继器jxchannel中添加交互:在jxchannnel每项数据加载时,全局变jxdatacount的值为[[Item.Repeater.dataCount]]即中继器数据总数。

同理因为mychannel中的数据为4个一排,所以当点击精选频道的频道标签时,mychannel的数据增加到为“4的倍数多1时”,中继器尺寸就会变大。所以条件设置为:if
“[[(LVAR1-1)%4]]” ==
“0”,LVAR1为yidong1文本框文字,即当mychannel数据总量只要减1就能被4整除时,移动下方的原件下移55个y坐标。

菲律宾申傅娱乐 21

菲律宾申傅娱乐 22

当我的频道mychannnel增加条目时,精选频道会下移;

添加close列值为0,即不显示左上角的关闭按钮“×”。

载入时:添加排序,按number列的数值升序排列;

(2)我们在页面中,拖入一个文本框yidong1,并设置为隐藏。

最后就剩一个交互效果,即长按mychannel中的频道标签,会自动切换到编辑状态,即左上角的关闭按钮×出现。

同时,我的频道中继器mychannel频道数据中,频道条目的左上角的关闭按钮“×”全部隐藏。

然后在jxchannel中添加行,并将其排在首位。

菲律宾申傅娱乐 23

当点击时,文字由“完成”变为“编辑”。

相关文章