四川福彩快乐12app下载-四川快乐12app官网(彩世界)
做最好的网站
来自 科学技术 2019-11-03 00:27 的文章
当前位置: 四川福彩快乐12app下载 > 科学技术 > 正文

【原型设计】百度搜索提示是如何实现的?【四

四川福彩快乐12app下载 1

c 搜索按钮

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

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

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

搜索按钮设置单击事件

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

5.2数据添加

在以上例子的基础上添加数据,先把最后两个删掉,并添加如下表单

四川福彩快乐12app下载 2

然后给按钮添加事件,选择中继器,添加行,在右侧选中中继器,点击添加行,进入添加数据窗口

四川福彩快乐12app下载 3

第一列可以不用管,图片添加先放着,下次讲解,文本以标题为例进行添加,点击biaoti下面的fx

四川福彩快乐12app下载 4

点击预览

四川福彩快乐12app下载 5

发现已经添加进来了,图片稍等一会添加...

需要注意的是我们并不是开发人员,只需要把界面演示的效果给客户和程序员看,这时我们用以下方法进行添加图片。

首先,添加两张可供选择的图片和一个文本框(图片信息),并隐藏。并且给图片鼠标单击添加一个动作,设置文本图片信息等于在网上复制过来的图片链接(两张图片分别设置),之后添加一个(添加图片)按钮,单击使得两张图片显示,点击完毕两张图片隐藏。然后将文本框中的内容绑定到中继器中。从而实现图片的添加。

效果如图

四川福彩快乐12app下载 6

但是...但是又来了...文本框中的文字添加是有限制条件的,现在就说明一下如何限制输入的文字,比如说文字长度、类型等等。

首先验证一下标题,假设标题文字长度不能小于4个字符,小于4个字符就在文本框旁边显示“标题长度太短”,思路是在文本框旁边添加一个文本标签,设置字体颜色为红色(明显),然后给标题文本框添加一个文本改变时的动作,点击添加条件

四川福彩快乐12app下载 7

然后设置文本

四川福彩快乐12app下载 8

点击预览可以实现文字太短的时候提示用户,但是当标题长度大于等于4的时候,发现提示文字并不消失,这是只需要在复制一个条件动作,很像if...if else,然后设置文本标签为空。

四川福彩快乐12app下载 9

完成,点击预览,

四川福彩快乐12app下载 10

四川福彩快乐12app下载 11

其余的不做说明。仍然还有一个小细节,内容太短的时候就需要把提交按钮禁用掉,然后内容正常就启用按钮,这是需要注意的。

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

b 文本框

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

文本框设置文本改变事件

5.5.1排序

排序很简单,首先我们添加一个按钮按照价格切换排序,(这里就需要将之前的¥去掉,因为价格是数字排序,这个是字符),然后给按钮一个单击鼠标时的动作,

四川福彩快乐12app下载 12

然后预览,

四川福彩快乐12app下载 13

原始状态

点击按钮

四川福彩快乐12app下载 14

再次点击按钮

四川福彩快乐12app下载 15

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

03 最后的总结

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

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


5.5排序分页

四川福彩快乐12app下载 16


5.6筛选搜索

筛选搜索是很常用的,下面还是以这个例子说明一下。首先在旁边添加一个文本框,,给其添加文本改变时的事件,点击添加筛选,勾选中继器,点击fx,

四川福彩快乐12app下载 17

解释一下,第一栏中的==是全等符号,就相当于起判断的作用。这有格式例子

四川福彩快乐12app下载 18

预览,输入39

四川福彩快乐12app下载 19

当然,数字有很多比较方式,可以自己根据需求选择。

但是很多情况下需要模糊查询,所以下面以标题来说明,这里用了一个substr()函数,供选择的还有很多函数,可以通过查询手册来了解

四川福彩快乐12app下载 20

完成。

交互要点

百度搜索

5.4数据修改

点击一张图片即选中图片,然后修改其数据。在添加数据例子中在加入标记和选中矩形。

然后就是修改数据。给提交修改按钮添加鼠标单击事件,选择更新行,按照如图添加,点击确认

四川福彩快乐12app下载 21

预览

四川福彩快乐12app下载 22

点击提交修改

四川福彩快乐12app下载 23

但是...但是这样是很不符合逻辑的,一般选中一个数据后,右边各个文本框就会显示原始数据,然后用户再进行修改。这是就需要给图片的鼠标单击事件继续添加设置文本,如图

四川福彩快乐12app下载 24

之后就大功告成啦

四川福彩快乐12app下载 25

四川福彩快乐12app下载 26

02 交互设置

5.中继器

中继器也是用来实现交互的,类似于数据的集中。是Axure中最重要的模块。

我们可以把一些数据,例如表格,列表等都塞到中继器里,然后通过别的部件来操作中继器中的数据,比如增加一条记录,排序,分类,分页等等。

中继器元件布局及数据集制作:数据集一共28行,数据样式为水平排列,每排4列。

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

5.3数据删除

删除数据,必须先进行标记,然后删除动作会删除那些标记的数据。

首先,添加一个删除按钮,点击图片选中图片,所以需要给图片一个鼠标单击的事件标记行this,然后给删除按钮一个鼠标单击的事件,删除选中的元件。

四川福彩快乐12app下载 27

四川福彩快乐12app下载 28

这样完成之后会发现实现删除选中的数据,虽然可以实现这个效果,但是并不能很好的区别改数据是被选中,所以,给中继器中的数据添加一个背景比较好,这里添加一个矩形,默认情况下是置于底层的,但是当数据被选中之后矩形便会置于顶层,并将矩形设置为半透明。预览

四川福彩快乐12app下载 29

点击删除

四川福彩快乐12app下载 30

————————————到这步,编辑按钮的交互完毕———————————

 附:中继器函数说明

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”。

5.1数据绑定

以一个淘宝一个购物网页作为例子,如图

四川福彩快乐12app下载 31

步骤如下:

1.布局

先导入最上面的图片(nav),调整宽度大小为400,然后添加中继器,双击中继器,调整宽度为200,然后在中继器样式中选择水平布局,网格排布,每排2个项目数。

四川福彩快乐12app下载 32

然后在双击中继器的界面添加一张图片、标题、价格和购买人数,最后还有一个添加购物车,如图

四川福彩快乐12app下载 33

2.绑定数据

点击中继器,在属性中按照如下填写数据

四川福彩快乐12app下载 34

这样之后,数据是填上去了,但是并不会在页面上显示表中的数据。要想让中继器显示设置好的数据,先要添加设置文本或设置图片动作,添加中继器的全局函数,并要对应号相应的列表。具体做法如下

双击中继器属性的case1,以标题为例做说明,点击设置文本,勾选文本框(标题),点击fx,然后点击插入变量或函数,选择中继器下的Item.biaoti,最终结果如下

四川福彩快乐12app下载 35

四川福彩快乐12app下载 36

其余的类似,点击预览,效果如下:(最上面就不截图了,有点放不下...)

四川福彩快乐12app下载 37

我们发现其余的变过来了,但是图片并没有改变,原因是什么呢?仔细看上面截图上物品和购物车上都有文字img,这是因为之前都是设置文本,所以并没有改过来,这是需要设置图片。点击设置图片,勾选产品图片(以产品图片为例),default切换成值,然后点击fx,选择插入变量和函数,选择Item.tupian,如图

四川福彩快乐12app下载 38

点击确认,预览。

四川福彩快乐12app下载 39

—————————到这步,两个中继器之间的位移交互完毕—————————

a 中继器

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

加载中继器的项

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

5.5.2分页

首先需要将中继器分页显示

四川福彩快乐12app下载 40

然后添加两个按钮,上一页和下一页,然后添加鼠标单击事件,选择设置当前显示页面,previous和next

四川福彩快乐12app下载 41

点击预览,

四川福彩快乐12app下载 42

原始页面

点击下一页

四川福彩快乐12app下载 43

再点击上一页返回原始界面。

四川福彩快乐12app下载 44

01 准备元件

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

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

(4)让文本框yidong1的值来决定两个中继器在位置上的彼此影响。

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

原标题:中继器使用场景(四):新闻类APP频道自主增减

四川福彩快乐12app下载 45

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

四川福彩快乐12app下载 46

四川福彩快乐12app下载 47

四川福彩快乐12app下载 48

四川福彩快乐12app下载 49

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

接下来,因为mychannel中继器中即将少一个频道数据,所以要将其后续条目的number列减1。

case1中的后面的一个交互,后面会讲到,这里先不提。

(3)在精选频道中继器jxchannel中,选中圆角灰色矩形jx,添加交互。

四川福彩快乐12app下载 50

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

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

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

解释:

四川福彩快乐12app下载 51

在中继器mychannel中的关闭按钮“×”close加入交互case2。

四川福彩快乐12app下载 52

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

中继器元件布局及数据集制作:数据样式为水平排列,每排4列。

四川福彩快乐12app下载 53

鼠标单击时case2 if 文字于 This == “完成”,即如果编辑按钮的文字为“完成”时。

每项加载时:case1 设置上文提到的圆角灰色矩形channel name绑定数据集item.channel数据。

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

责任编辑:

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

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

四川福彩快乐12app下载 54

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

载入时:添加排序,按number2列的数值升序排列。

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

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

四川福彩快乐12app下载 55

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

四川福彩快乐12app下载 56

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

四川福彩快乐12app下载 57

(1)在页面的“编辑”按钮添加交互

今天我们以腾讯新闻为例,讲一下如何做出app内频道自主增减的效果。

四川福彩快乐12app下载 58

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

具体制作过程

四川福彩快乐12app下载 59

四川福彩快乐12app下载 60

第三步:jx频道中继器jxchannel制作和部分交互

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

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

四川福彩快乐12app下载 61

四川福彩快乐12app下载 62

四川福彩快乐12app下载 63

交互:

交互:

四川福彩快乐12app下载 64

四川福彩快乐12app下载 65

四川福彩快乐12app下载 66

添加number列为[[mychanneldatacount 1]]即新增的数据,number为现有数据 1,按number升序排序时,新增条目排在最后。

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

每项加载时:case1设置上文提到的圆角灰色矩形jx绑定数据集item.channel2数据。

每项加载时case2:if “[[Item.index]]” == “1”指定中继器第一行数据,本例中即指定“要闻”频道。下图中红圈部分,设定文字为富文本,在富文本对话框中,将函数选中,选择蓝色即实现“要闻”频道蓝字凸显。

新闻类app由于内容的原因,一般会分为很多的阅读频道,比如:要闻、娱乐、体育、金融等等,用户可根据自己的兴趣增减所需的频道。

解释:

四川福彩快乐12app下载 67

四川福彩快乐12app下载 68

—————————到这步,两个中继器之间的数据传递交互完毕—————————

四川福彩快乐12app下载 69

解释:

四川福彩快乐12app下载 70

具体效果看GIF图:

四川福彩快乐12app下载 71

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

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

当我的频道mychannnel减少条目时,精选频道会上移。

四川福彩快乐12app下载 72

第二步:我的频道中继器mychannel制作和部分交互

四川福彩快乐12app下载 73

解释:鼠标单击圆角灰色矩形jx时,Case1if 文字于 bianji == “编辑”,如果编辑按钮的文字形态为编辑时,点击精品频道中继器jxchannel中的频道条目,就在我的频道mychannel中就添加相应的条目。

四川福彩快乐12app下载 74

解释:当点击关闭按钮时,被关闭的频道标签要自动迁移到jxchannel中继器中,并排在首位。所以首先先将jxchannel中的现有数据的number2都 1。

最后,删除本行。

(4)接下来,按同样的方法,设置当鼠标单击圆角灰色矩形jx时,Case2 if 文字于 bianji == “完成”时的交互,交互动作和上述一样,唯一不同的在于当编辑按钮文字为“完成”时,点击jx上传到mychannnel中的新条目的左上角关闭按钮“x”都显示。

———————————到这步,中继器自身的构建基本完毕——————————

四川福彩快乐12app下载 75

四川福彩快乐12app下载 76

第一步:页面元件准备

四川福彩快乐12app下载 77

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

case1中的后面的两个交互,后面会讲到,这里先不提。

每项加载时case3、case4:if “[[Item.close]]” == “0”时,close列为0时,设置上述关闭按钮“×”close为隐藏,反之,if “[[Item.close]]” == “1”,设置上述关闭按钮“×”close为显示。

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

更新jxchannel中继器相应数据,更新条件为[[TargetItem.number2>Item.number2]]即排在该条目后面的数据行。

四川福彩快乐12app下载 78

四川福彩快乐12app下载 79

最后删除该条目。

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

四川福彩快乐12app下载 80

鼠标单击时case1 if 文字于 This == “编辑”,即如果编辑按钮的文字为“编辑”时。

四川福彩快乐12app下载 81

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

本文由四川福彩快乐12app下载发布于科学技术,转载请注明出处:【原型设计】百度搜索提示是如何实现的?【四

关键词: AR 腾讯 移动产品PM 原型设