卡片設(shè)計能夠使得用戶能夠更輕松地瀏覽、理解和互動，那么該如何用中繼器制作卡片多條件搜索效果？本文總結(jié)了相關(guān)步驟，希望對你有所幫助。

卡片設(shè)計通過提供清晰的信息結(jié)構(gòu)、可視化吸引力、易擴展性和強大的交互性，為用戶界面設(shè)計帶來了許多優(yōu)勢，使得用戶能夠更輕松地瀏覽、理解和互動。

那今天就教大家如何用中繼器制作卡片的模板，以及完成多條件搜索的效果，我們會以任務(wù)信息卡片為案例案例，具體實現(xiàn)的效果如下：

一、效果展示

• 可以在姓名輸入框里輸入員工姓名，點擊查詢按鈕后可對輸入內(nèi)容進(jìn)行模糊搜索
• 可以選擇部門和職位，點擊查詢按鈕后可以篩選中對應(yīng)的卡片
• 可以多個條件同時進(jìn)行搜索

二、制作教程

1. 人物信息卡片的制作

我們用中繼器來制作任務(wù)信息卡片，一個是因為制作完成后復(fù)用性較強，在中繼器表格里填寫信息就可以自動生成卡片，二是如果要制作真實的搜索或者篩選效果，就要用到中繼器。

我們新增一個中繼器，中繼器里放置我們需要的元件，包括圖片原件（對應(yīng)人物頭像）、文本標(biāo)簽（對應(yīng)姓名、部門崗位、介紹文字）、矩形（對應(yīng)職責(zé)）、背景矩形，如下圖所示擺放。

中繼器表格里，我們要增加對應(yīng)的類和填寫對應(yīng)的內(nèi)容。

• pic列：對應(yīng)員工頭像，右鍵導(dǎo)入圖片就可以了
• name列：對應(yīng)員工姓名
• bumen列：對應(yīng)員工所在的部門
• gangwei列：對應(yīng)員工職位
• jieshao列：對應(yīng)員工的基礎(chǔ)介紹內(nèi)容
• zhize1~3：對應(yīng)員工的3大職責(zé)

我們可以在里面填寫好，或者在excel里編輯好再復(fù)制到中繼器表格里也可以。

然后我們將表格里的值設(shè)置到對應(yīng)的元件就可以了，如果是Axure10的話，可以點擊所在列，表頭有個連接按鈕，選擇對應(yīng)的元件就可以了，如果是Axure8、9的話，就要寫交互實現(xiàn)：在中繼器每項加載時，我們用設(shè)置文本和設(shè)置圖片的交互，將對應(yīng)列的值設(shè)置到對應(yīng)的元件中。

2. 搜索欄的制作

搜索欄我們主要用到的元件包括文本標(biāo)簽（提示文字）、輸入框、下拉列表、按鈕和背景矩形，如下圖所示擺放：

鼠標(biāo)單擊我們用添加篩選的交互對中繼器表格進(jìn)行篩選，這里需要分開模糊搜索和篩選兩部分來講。

模糊篩選的話我們用到的是indexof函數(shù)，這個函數(shù)可以在一段文本里尋找另一段文本的位置，如果的出來的值等于-1，就是沒有找到，不存在；如果大于-1，就是存在，所以我們用這個函數(shù)，將中繼器里name列的值對輸入框里的內(nèi)容進(jìn)行查看，篩選出indexof函數(shù)獲取的結(jié)果大于-1的行。

篩選的話，我們直接用下拉列表的選項==中繼器表格對應(yīng)列的內(nèi)容即可。但是這里也有一個問題，因為下拉列表里的第一下是提示文字，例如請選擇部門。如果用戶選擇這個后，理應(yīng)是顯示全部內(nèi)容，但是按上面的條件，就會去中繼器表格對應(yīng)列里找請選擇部門這個部門，所以自然找不到任何內(nèi)容。

所以這里我們要增加情形和條件：在下拉列表選項改變時，如果備選項的文字不等于默認(rèn)文字，我們就將值設(shè)置到一個新的文本，這個文本我們命名為s2（搜索2），不用于顯示，只做邏輯處理；如果備選項的文字等于默認(rèn)文字，我們就將他設(shè)置為空。

點擊查詢按鈕的時候，觸發(fā)這個篩選的交互，如果s2的文字不等于空，我們就用篩選的交互，條件為記錄的選項文字==中繼器對應(yīng)列的文字；如果s2的文字為空，就不需要進(jìn)行篩選，兩個下拉列表的篩選都是這樣處理。

重置按鈕點擊時，我們首先要用設(shè)置文本的交互，將輸入框的內(nèi)容設(shè)置為空，然后用設(shè)置列表選中項，將列表選項設(shè)置為默認(rèn)選項。最后我們用觸發(fā)事件觸發(fā)查詢按鈕鼠標(biāo)單擊時，就可以移除篩選了，這是因為相當(dāng)于對輸入框里的空值進(jìn)行模糊搜索，相當(dāng)于所有行的內(nèi)容都包含空值，所以全部都是顯示出來。

當(dāng)然你們也可以用移除篩選的交互，移除所有篩選也行。

這樣我們就完成了中繼器制作卡片的模板，以及完成多條件搜索的效果的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫內(nèi)容，即可自動生成交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。