卡片设计通过提供清晰的信息结构、可视化吸引力、易扩展性和强大的交互性，为用户界面设计带来了许多优势，使得用户能够更轻松地浏览、理解和互动。
那今天就教大家如何用中继器制作卡片的模板，以及完成多条件搜索的效果，我们会以任务信息卡片为案例案例，具体实现的效果如下：
一、效果展示可以多个条件同时进行搜索
原型地址：;p=人物卡片_多条件搜索
二、制作教程1.人物信息卡片的制作我们用中继器来制作任务信息卡片，一个是因为制作完成后复用性较强，在中继器表格里填写信息就可以自动生成卡片，二是如果要制作真实的搜索或者筛选效果，就要用到中继器。
我们新增一个中继器，中继器里放置我们需要的元件，包括图片原件（对应人物头像）、文本标签（对应姓名、部门岗位、介绍文字）、矩形（对应职责）、背景矩形，如下图所示摆放。
中继器表格里，我们要增加对应的类和填写对应的内容。
pic列：对应员工头像，右键导入图片就可以了
name列：对应员工姓名
bumen列：对应员工所在的部门
gangwei列：对应员工职位
jieshao列：对应员工的基础介绍内容
zhize1~3：对应员工的3大职责
我们可以在里面填写好，或者在excel里编辑好再复制到中继器表格里也可以。
2.搜索栏的制作搜索栏我们主要用到的元件包括文本标签（提示文字）、输入框、下拉列表、按钮和背景矩形，如下图所示摆放：
鼠标单击我们用添加筛选的交互对中继器表格进行筛选，这里需要分开模糊搜索和筛选两部分来讲。
模糊筛选的话我们用到的是indexof函数，这个函数可以在一段文本里寻找另一段文本的位置，如果的出来的值等于-1，就是没有找到，不存在；如果大于-1，就是存在，所以我们用这个函数，将中继器里name列的值对输入框里的内容进行查看，筛选出indexof函数获取的结果大于-1的行。
筛选的话，我们直接用下拉列表的选项==中继器表格对应列的内容即可。但是这里也有一个问题，因为下拉列表里的第一下是提示文字，例如请选择部门。如果用户选择这个后，理应是显示全部内容，但是按上面的条件，就会去中继器表格对应列里找请选择部门这个部门，所以自然找不到任何内容。
所以这里我们要增加情形和条件：在下拉列表选项改变时，如果备选项的文字不等于默认文字，我们就将值设置到一个新的文本，这个文本我们命名为s2（搜索2），不用于显示，只做逻辑处理；如果备选项的文字等于默认文字，我们就将他设置为空。
当然你们也可以用移除筛选的交互，移除所有筛选也行。
这样我们就完成了中继器制作卡片的模板，以及完成多条件搜索的效果的制作了，下次使用也很方便，我们只需要在中继器表格里填写内容，即可自动生成交互效果。
那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。
本文由@AI产品人原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。