利用Axure的中继器实现实时搜索
今天,我们提升一下难度,做一个复杂的效果——实时搜索并展示搜索结果。这其中利用到了中继器中的“过滤”功能。这个例子或许有那么一点点的难以理解,但事实上并不是很麻烦,麻烦之处在于你的逻辑能力,以及发现了问题如何找到应对的方式方法去处理,我想这也是产品经理需要具备的能力之一,具备了这样的能力,我想在和技术团队做沟通交流的时候,就会有一定的话语权,而不至于被牵着走,最后妥协,放弃了初衷。
中继器进阶篇实例:实时搜索并展示搜索结果
下面,我们先看看该例子是怎么样的一种效果:
展示效果
看上去有没有觉得很是高大上?!按照以往Axure的版本,要做出这样一个效果,花费的时间和精力相对于产出而言,完全不成比例,所以对于早期的产品经理(或是交互设计师)来讲,会偏向于线稿+文档来描述该功能,遇到技术大神,这不是什么难以解决的一个功能,但就怕遇到菜鸟,沟通就会成为很大的问题。之前我曾接触过一个利用动态面板来实现类似效果的原型,较为复杂,而且组件颇多,难以控制,现在有了中继器,我们可以将这个过程变得异常简单,甚至可以作为标准组件,放到自己的库中,需要用时,简单修改即可。
这次讲解,会加入App的理念,所以会多了一些操作。首先我们新建一个原型,拉入iPhone的mockup框架,并在上面拉入一个内联框架,双击该框架,将链接接入相应的页面,这样的操作,能让我们更加专注于页面内的内容创作,但在原型演示时,又具备一定的视觉效果。具体操作见下图:
事前准备工作接下来,我们开始创建基本的内容页,我们想将页面中的元素,按照需求,先搭建完善:
内容页的搭建1、对于每一个App,尤其是IOS来讲,导航栏一般是必备;
2、接着,我们创建一个搜索框,在这里,我们通过矩形+素材图片+一个文本框构建这个部件:
输入框的构建在这里,我们需要对文本框做一下属性的调整:
对文本框的调整3、我们利用之前所讲,搭建一个简单的列表,用以展示用户列表。
下一步,我们就正式开始今天的教学,如何利用中期的筛选,实现对文本框的输入,来动态显示相关的内容。在这个过程中,涉及到的技术点是如何对中继器进行筛选操作。
我们先选中“输入框”这个文本框,创建一个“文本改变时”的用例,这个用例由两部分组成:1、判断输入的文本是否大于等于1,如果是,则开始中创建好的中继器中进行筛选动作,查找输入的字是否有相关的内容,否则,则清除筛选条件,重置中继器的初始状态:
用例的创建1用例的创建2
需要特别说明的是,在这个用例中,我们为了满足需求,创建了一个临时变量,用来控制输入文本的长度,这个看起来有些复杂,事实上,我们在原型的创作中,用到这种操作的不在少数,所以建议大家多了解了解,在以后的教程中,也会穿插类似的一些简单操作。
此外,还捎带讲解了一下substr这个函数,对于有一点点程序经验的人来讲,这个不算难,对于新人则可以慢慢学习。
至此,我们所想要达到的效果便算是完成了。你可以预览自己的成果了!
如果该教程让你读的有些不知所以然,那么可以下载我做好的源文件,慢慢研究:筛选实例
如果你喜欢曹蜀黍的教程,请不吝点喜欢,你的支持,是我继续出教程的动力,么么哒!更多精彩教程,敬请关注!
有兴趣的朋友可以加我个人微信公众号(微信公众号:产品设计曹蜀黍),一起交流!
微信公众号:产品设计曹蜀黍