在手机APP中，字母定位和模糊搜索是快速找到相应内容的常用方法！使用Axure原型软件，我们就可以快速的制作出来！至于怎么做呢？下面就来详细的教一教大家~如果此时你心里众多疑惑：Axure去哪学？怎么学？学多久？那不妨学习体验的Axure自学视频课！资深讲师授课，从基础的Axure软件功能到原型绘制到交互案例，综合全面的带你入门Axure产品原型设计！~
Axure制作移动端APP通讯录搜索交互原型教程：
一、人物信息列表的制作我们用到中继器，在中继西放置一个底部白色底部矩形、一个图片元件（对应人物头像）、一个文本标签（对应人物名称）摆放即可：
在中继器表格里，我们插入对应的两列，分别是name（对应人物名称）和picture（对应人物头像），我们在中继器表格里填写好名称，和导入对应的头像图片：
在中继器每项加载时设置交互，用设置文本的交互，将表格中name列的值设置到文本标签里，然后在用设置图片的交互，将表格中picture里的图片，设置到图片元件里。
二、模糊搜索效果的制作我们需要一个输入框，搜索按钮，取消按钮，背景矩形，搜索背景矩形摆放：
因为移动端一般不需要点搜索按钮，所以我们把筛选的交互写在输入框文本改变时，我们用添加筛选的交互，对中继器进行筛选，这里需要用到indexof函数，TargetItem.name.indexOf(this.text)，看看当前文本框输入的值是是否包含在中继器表格name列的值里，如果包含在里面，得出的结果就会大于-1，所以我们筛选的条件就是要筛选出大于-1的行。
上面这里是最基础的模糊搜索，如果需要考虑大小写的关系，例如名称是cat，上面的方式输入CAT是搜索不到的，如果想实现不分大小写搜索的话，toUpperCase函数，这个函数是可以将对应的值全部转为大写，我们可以用这个函数将name列的值以及输入框里的值都转化为大写，这样就可以做出不区分大小写的模糊搜索的交互了
这里考虑到没有搜索出效果的情况，所以我们在中继器第一行的位置增加文本标签（没有文字），至于底层就可以了，刚好用中继器挡住，如果一行结果都没有出现的话就会看到这个提示文字，如果有数据出现，数据就会把它挡住。
如果搜索框要至于顶层的效果的话，我们就将中继器和上面的提示文字转为动态面板，然后调出垂直滚动条，或者将搜索区域的元件转为动态面板，固定的左上角。
这样之后我们把所有元件组合转为动态面板，状态命名为搜索页，再新增一个state，放在最上面，命名为通讯录，我们在上面做字母定位的效果
所以取消按钮点击时，我们取消搜索筛选，这里用设置文本的交互，将输入框的值设置为空即可，然后用设置面板状态的交互，将这个动态面板设置到通讯录的状态。
三、通讯录页面的设置主要是锚点矩形和中继器、搜索图标以及A-Z和#号的文字摆放：
上面的通讯录、搜索图片和背景矩形可以转为动态面板固定在左上角的位置。
鼠标点击搜索按钮，我们用设置面板状态的交互，设置整个动态面板跳转到搜索页，就是上面的内容了。
下面的部分我们要先用矩形做ABCD的锚点，然后可以复制前面做好的中继器过来，将他按照内容分开，放置到对应锚点的下方。
将他们一一摆放到对应位置后，我们添加A-Z和#号，将他们转为动态面板，固定到右侧对应的位置。
鼠标单击A字母时，我们用滚动到元件的交互，设置锚点位于矩形A,增加一个线性的动画效果。
鼠标单击B字母时，我们用滚动到元件的交互，设置锚点位于矩形B，增加一个线性的动画效果。
鼠标单击C字母时，我们用滚动到元件的交互，设置锚点位于矩形C，增加一个线性的动画效果。
鼠标单击Z字母时，我们用滚动到元件的交互，设置锚点位于矩形Z，增加一个线性的动画效果。
鼠标单击#号时，我们用滚动到元件的交互，设置锚点位于矩形#，增加一个线性的动画效果。
我们就完成字母定位的效果了。
以上即是关于“Axure怎么制作移动端APP通讯录搜索交互原型？”的全部精彩内容分享了，希望能够帮助到你！学习更多Axure原型技巧，不妨阅读更多Axure相关文章学习？其实学习Axure，很简单，跟着方法学就能快速掌握其原理！来，跟着老师学Axure，保证你能快速入门进阶~