卡片設計通過提供清晰的信息結構、可視化吸引力、易擴展性和強大的交互性，為用戶界面設計帶來了許多優勢，使得用戶能夠更輕松地瀏覽、理解和互動。
那今天就教大家如何用中繼器制作卡片的模板，以及完成多條件搜索的效果，我們會以任務信息卡片為案例案例，具體實現的效果如下：
一、效果展示
- 可以在姓名輸入框里輸入員工姓名，點擊查詢按鈕后可對輸入內容進行模糊搜索
- 可以選擇部門和職位，點擊查詢按鈕后可以篩選中對應的卡片
- 可以多個條件同時進行搜索
【原型預覽含下載地址】
https://axhub.im/ax9/b8494994420eef04/#g=1&p=人物卡片_多條件搜索
二、制作教程
1. 人物信息卡片的制作
我們用中繼器來制作任務信息卡片，一個是因為制作完成后復用性較強，在中繼器表格里填寫信息就可以自動生成卡片，二是如果要制作真實的搜索或者篩選效果，就要用到中繼器。我們新增一個中繼器，中繼器里放置我們需要的元件，包括圖片原件（對應人物頭像）、文本標簽（對應姓名、部門崗位、介紹文字）、矩形（對應職責）、背景矩形，如下圖所示擺放。
中繼器表格里，我們要增加對應的類和填寫對應的內容。
- pic列：對應員工頭像，右鍵導入圖片就可以了
- name列：對應員工姓名
- bumen列：對應員工所在的部門
- gangwei列：對應員工職位
- jieshao列：對應員工的基礎介紹內容
- zhize1~3：對應員工的3大職責
我們可以在里面填寫好，或者在excel里編輯好再復制到中繼器表格里也可以。
然后我們將表格里的值設置到對應的元件就可以了，如果是Axure10的話，可以點擊所在列，表頭有個連接按鈕，選擇對應的元件就可以了，如果是Axure8、9的話，就要寫交互實現：在中繼器每項加載時，我們用設置文本和設置圖片的交互，將對應列的值設置到對應的元件中。
2. 搜索欄的制作
搜索欄我們主要用到的元件包括文本標簽（提示文字）、輸入框、下拉列表、按鈕和背景矩形，如下圖所示擺放：
鼠標單擊我們用添加篩選的交互對中繼器表格進行篩選，這里需要分開模糊搜索和篩選兩部分來講。
模糊篩選的話我們用到的是indexof函數，這個函數可以在一段文本里尋找另一段文本的位置，如果的出來的值等于-1，就是沒有找到，不存在；如果大于-1，就是存在，所以我們用這個函數，將中繼器里name列的值對輸入框里的內容進行查看，篩選出indexof函數獲取的結果大于-1的行。
篩選的話，我們直接用下拉列表的選項==中繼器表格對應列的內容即可。但是這里也有一個問題，因為下拉列表里的第一下是提示文字，例如請選擇部門。如果用戶選擇這個后，理應是顯示全部內容，但是按上面的條件，就會去中繼器表格對應列里找請選擇部門這個部門，所以自然找不到任何內容。
所以這里我們要增加情形和條件：在下拉列表選項改變時，如果備選項的文字不等于默認文字，我們就將值設置到一個新的文本，這個文本我們命名為s2（搜索2），不用于顯示，只做邏輯處理；如果備選項的文字等于默認文字，我們就將他設置為空。
點擊查詢按鈕的時候，觸發這個篩選的交互，如果s2的文字不等于空，我們就用篩選的交互，條件為記錄的選項文字==中繼器對應列的文字；如果s2的文字為空，就不需要進行篩選，兩個下拉列表的篩選都是這樣處理。
重置按鈕點擊時，我們首先要用設置文本的交互，將輸入框的內容設置為空，然后用設置列表選中項，將列表選項設置為默認選項。最后我們用觸發事件觸發查詢按鈕鼠標單擊時，就可以移除篩選了，這是因為相當于對輸入框里的空值進行模糊搜索，相當于所有行的內容都包含空值，所以全部都是顯示出來。
當然你們也可以用移除篩選的交互，移除所有篩選也行。
這樣我們就完成了中繼器制作卡片的模板，以及完成多條件搜索的效果的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫內容，即可自動生成交互效果。
那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。
