阅读卡片的制作模板

卡片设计通过提供清晰的信息结构、可视化吸引力、易扩展性和强大的交互性，为用户界面设计带来了许多优势，使得用户能够更轻松地浏览、理解和互动。

那今天就教大家如何用中继器制作卡片的模板，以及完成多条件搜索的效果，我们会以任务信息卡片为案例案例，具体实现的效果如下：

一、效果展示

• 可以在姓名输入框里输入员工姓名，点击查询按钮后可对输入内容进行模糊搜索
• 可以选择部门和职位，点击查询按钮后可以筛选中对应的卡片
• 可以多个条件同时进行搜索

原型地址：https://zdtwcn.axshare.com/#g=1&p=人物卡片_多条件搜索

二、制作教程

我们用中继器来制作任务信息卡片，一个是因为制作完成后复用性较强，在中继器表格里填写信息就可以自动生成卡片，二是如果要制作真实的搜索或者筛选效果，就要用到中继器。

我们新增一个中继器，中继器里放置我们需要的元件，包括图片原件（对应人物头像）、文本标签（对应姓名、部门岗位、介绍文字）、矩形（对应职责）、背景矩形，如下图所示摆放。

中继器表格里，我们要增加对应的类和填写对应的内容。

• pic列：对应员工头像，右键导入图片就可以了
• name列：对应员工姓名
• bumen列：对应员工所在的部门
• gangwei列：对应员工职位
• jieshao列：对应员工的基础介绍内容
• zhize1~3：对应员工的3大职责

我们可以在里面填写好，或者在excel里编辑好再复制到中继器表格里也可以。

然后我们将表格里的值设置到对应的元件就可以了，如果是Axure10的话，可以点击所在列，表头有个连接按钮，选择对应的元件就可以了，如果是Axure8、9的话，就要写交互实现：在中继器每项加载时，我们用设置文本和设置图片的交互，将对应列的值设置到对应的元件中。

搜索栏我们主要用到的元件包括文本标签（提示文字）、输入框、下拉列表、按钮和背景矩形，如下图所示摆放：

鼠标单击我们用添加筛选的交互对中继器表格进行筛选，这里需要分开模糊搜索和筛选两部分来讲。

模糊筛选的话我们用到的是indexof函数，这个函数可以在一段文本里寻找另一段文本的位置，如果的出来的值等于-1，就是没有找到，不存在；如果大于-1，就是存在，所以我们用这个函数，将中继器里name列的值对输入框里的内容进行查看，筛选出indexof函数获取的结果大于-1的行。

筛选的话，我们直接用下拉列表的选项==中继器表格对应列的内容即可。但是这里也有一个问题，因为下拉列表里的第一下是提示文字，例如请选择部门。如果用户选择这个后，理应是显示全部内容，但是按上面的条件，就会去中继器表格对应列里找请选择部门这个部门，所以自然找不到任何内容。

所以这里我们要增加情形和条件：在下拉列表选项改变时，如果备选项的文字不等于默认文字，我们就将值设置到一个新的文本，这个文本我们命名为s2（搜索2），不用于显示，只做逻辑处理；如果备选项的文字等于默认文字，我们就将他设置为空。

点击查询按钮的时候，触发这个筛选的交互，如果s2的文字不等于空，我们就用筛选的交互，条件为记录的选项文字==中继器对应列的文字；如果s2的文字为空，就不需要进行筛选，两个下拉列表的筛选都是这样处理。

重置按钮点击时，我们首先要用设置文本的交互，将输入框的内容设置为空，然后用设置列表选中项，将列表选项设置为默认选项。最后我们用触发事件触发查询按钮鼠标单击时，就可以移除筛选了，这是因为相当于对输入框里的空值进行模糊搜索，相当于所有行的内容都包含空值，所以全部都是显示出来。

当然你们也可以用移除筛选的交互，移除所有筛选也行。

这样我们就完成了中继器制作卡片的模板，以及完成多条件搜索的效果的制作了，下次使用也很方便，我们只需要在中继器表格里填写内容，即可自动生成交互效果。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

巴雯咐3121如何做论语读书卡啊?? 老师说格式是:子曰........什么什么 注释..........什么什么 怎么做? -
郜蓉哀19429385033 ______ 先有格式,在写子日........,写完了,写注释..........,就好了

巴雯咐3121自做英语26个字母的卡片怎么做 -
郜蓉哀19429385033 ______ 首先拿白色的卡纸或者画纸裁成合适大小的卡片,然后再按照这个方法继续做26张卡片,画上四线格,用油性笔写上小写字母,元音字母用红色油性笔写,辅音字母用黑色油性笔写.这样有利于孩子的学习,能够记得非常牢. 扩展资料 英语...

巴雯咐3121word电子贺卡制作步骤? -
郜蓉哀19429385033 ______ (1)示范操作:设计制作一张生日卡片 ①插入一张图片作为背景 ②插入与节日有关的艺术字、自选图形 ③进行整体的格式、布局的排版 (2)教学提高:如何搜集素材资料?如何插入多的文字、彩色边框?如何进行格式的排版?(教师演示...

巴雯咐3121怎么做英语知识卡片的形?怎么做英语知识卡片的形状
郜蓉哀19429385033 ______ 方法很多哦.可以自行准备好白底色的卡片纸,然后用彩色笔描绘上去.也可以用剪刀剪出字母的形状.然后涂上颜色,这个会更好些.

巴雯咐3121怎么用WORD制作答案?怎么用WORD制作答案卡
郜蓉哀19429385033 ______ 用word制作卡片, 有一个问题就是要考虑如何在打印输出时候正好打到合适的位置,所以文字可以放在文本框里.

巴雯咐3121制作立体贺卡的方法和具体的步骤是怎样的?
郜蓉哀19429385033 ______ 1首先准备好要用到的卡纸材料以及相应的装饰品,同时准备好剪刀、双面胶、彩笔等制作工具. 2在剪纸之前设想一下自己想要做的图案类型,然后在白色卡纸上面进行...

巴雯咐3121如何制作手工贺卡?
郜蓉哀19429385033 ______ 手工贺卡的制作方法如下: 步骤一: 首先在制作手工贺卡之前要准备的材料有几张大一些的纸片,彩色笔或者彩色签字笔,小刀,小剪刀,胶水和胶带,还有一些在贺卡...

巴雯咐3121怎样用word做卡片 -
郜蓉哀19429385033 ______ office官网上就有大量贺卡的模板,挑些喜欢的合适的修改一下就可以了. http://office.microsoft.com/zh-cn/templates/CT010104322.aspx

巴雯咐3121如何制作名片? -
郜蓉哀19429385033 ______ 名片已经成为我们日常商务活动不可却少的一部分,小小的一张卡片,表达了一个公司的精华所在.关于名片制作的方法我们在这里做一个详细的介绍,其中包含了几个部分,在这里先大概介绍下:1、准备资料,也就是名片上面想印刷的信息...

巴雯咐3121《怎样填写读书卡》教学设计之一 -
郜蓉哀19429385033 ______[答案] 养成写读书卡片,自觉积累语文素材的良好习惯. 教学重点:学会清楚,明白地填写读书卡片. 教学难点:适当丰富读书卡片的内容. 教学流程一、谈话导入 二、自读提示 引导学生自由读提示,明确本次写话的内容与要求. 三、交流讨论 1、与小组同...