在原型中，搜索是一個常見的交互設計。但不少同學因為技能不熟悉就沒有做對應的交互效果。這篇文章，作者分享了設計搜索功能的整個流程，相信看完你也能做一個很牛逼的交互。

高級搜索可以通過使用精確的關鍵詞或短語，幫助用戶找到特定的內(nèi)容。尤其在面對大量搜索結果時，通過過濾條件縮小范圍，能夠節(jié)省時間。他允許用戶使用多個條件進行組合（例如條件匹配、模糊搜索、區(qū)間篩選等）來精準獲取相關內(nèi)容。

今天我們就來學習，怎么在Axure里使用交互，實現(xiàn)高級搜索的效果，其中包括：

一、效果展示

1、切換搜索方式——點擊右上角搜索文字可以切換高級搜索或快速搜索

2、多條件聯(lián)動搜索——包括輸入框模糊搜索、下拉列表選項搜索、數(shù)字區(qū)間篩選、單選按鈕組搜索

3、中繼器表格——表格內(nèi)容是用中繼器制作的，使用時維護中繼器表格內(nèi)容即可

二、制作教程

1、材料準備

搜索欄我們要做兩個頁面，快速搜索和高級搜索兩個頁面，分別放在同一個動態(tài)面板的兩個狀態(tài)里。

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

1.1 快速搜索

一般快速搜索是搜索常用的信息，例如工號、姓名、職位，所以我們可以在快速搜索頁面，可以通過輸入框、文本標簽、矩形、下拉列表、按鈕來制作，如下圖所示擺放

1.2 高級搜索

高級搜索的話搜索的條件會更加細致，可以精準的找到需要的數(shù)據(jù)，所以會在快速搜索的基礎上，在增加一些搜索方式、例如區(qū)間搜索、單選按鈕組搜索等。用到的元件包括輸入框、文本標簽、矩形、下拉列表、按鈕、單選按鈕等，如下圖所示擺放

完成之后我們將它放在同一個動態(tài)面板的兩個狀態(tài)頁里，后續(xù)會通過交互來切換。

1.3表格內(nèi)容

表格我們分為表頭和表格內(nèi)容

表頭的話我們用多個矩形擺放而成，每個矩形對應一列，如下圖所示

表格內(nèi)容我們用中繼器來制作，在中繼器里同樣增加和表頭一樣多的矩形，每個對應一列，寬度和對應的表頭矩形一致，如下圖所示擺放

如果需要移入對應行變色的效果，可以設置鼠標懸停樣式，將他們組合在一起，然后勾選允許觸發(fā)組合內(nèi)交互樣式。

中繼器表格我們增加對應的列數(shù)，案例中是11列，Column1~11，每列對于中繼器里1-11的矩形

如果是Axure10的話，我們點擊表格里的連接元件，選擇對應的矩形，就可以將表格內(nèi)容設置到矩形上，如果是Axure8或9，就要在中繼器每項加載時，用設置文本的交互，將對應列的值設置到對應的矩形上

2、交互制作

2.1 快速搜索和高級搜索之間的切換

鼠標單擊右上角快速搜索的文字時，就代表先切換到快速搜索里，所以我們用設置面板狀態(tài)的交互，將動態(tài)面板設置到高級搜索的頁面；

同理鼠標單擊右上角高級搜索的文字時，就代表先切換到高級搜索里，所以我們用設置面板狀態(tài)的交互，將動態(tài)面板設置到高級搜索的頁面；

在設置完頁面之后，因為快速搜索和高級搜索里有三個條件是一樣的，分別是工號、姓名和職位，所以我們要把之前輸入了的值傳到另一個頁面，輸入框里的值我們用設置文本的交互就可以設置了，下拉列表的值，我們要通過設置列表選中項的交互，將值傳到另一個頁面的下拉列表里

2.2 搜索按鈕的交互

鼠標單擊搜索按鈕時，我們應該根據(jù)填寫的內(nèi)容對中繼器表格進行篩選

2.2.1 輸入框模糊搜索

像員工號、姓名這種，我們可以用模糊搜索，例如搜索張，可以找到所有包含張的名字。這里我們需要用indexof函數(shù)，這個函數(shù)可以查看目標文字里是否含有指定的文本，如果有結果就大于-1，否則就等于-1

2.2.2下拉列表篩選

像員工崗位這種，有有限的選擇值的，我們就可以用下拉列表篩選，篩選條件是下拉列表的選項文字等于對應列里的文字。這里需要注意的是，下拉列表一般有一個選項是提示文字，例如請選擇，我們在篩選之前，要把這種情況剔除，我們可以加一個條件，如果選項文字不是默認文字，才執(zhí)行篩選的交互。

2.2.3 單選按鈕組篩選

單選按鈕組篩選也很簡單，我們在單選按鈕選中時，用設置文本的交互，將選中的值用文本記錄下來，然后用篩選的交互，條件是目標行對應列的值，等于記錄的文本值

2.2.4 區(qū)間篩選

一般像年齡、工齡這種，我們會用區(qū)間篩選的方法，篩選的條件是目標行對應列的值要大于左側(cè)輸入框的值，并且小于右側(cè)輸入框的值。

這里需要注意的是，如果輸入框文本為空，那他就默認為0，這樣如果只輸入了左側(cè)最小值是40，那他搜索的條件就是40到0，這樣明顯是不對的，所以在輸入框失去焦點時，我們要判斷他是否為空，如果為空，就在記錄文本里設置一個無限大的值，例如99999999；如果不為空，就記錄輸入框里填寫的值。篩選時不是對輸入框進行篩選，是對記錄的文字進行篩選，這樣就可以避免這個問題了

2.2.5 聯(lián)合篩選

因為各個篩選條件的關系是并的關系，所以我們一次添加篩選事件就可以了，需要注意的一點是，在篩選開始的時候，我們要先用移出篩選的交互，移除全部篩選，然后才開始新的篩選

這樣我們就可以完成搜索了，需要注意的是，在快速搜索頁面，只對前面三個條件進行篩選，高級搜索頁面，才是對全部條件進行篩選。

2.2.6 重置

鼠標單擊重置按鈕時，我們要將表格和搜索條件恢復原狀，如果是輸入框，我們用設置文本的交互，將他設置為空就可以了；如果是記錄文字，我們也是用設置文本的交互，將他設置為默認值，例如最大值是設置為99999；如果是下拉列表，就用設置列表選項的交互，將他設置為默認選項；如果是單選按鈕，我們就用取消選中的交互將他們?nèi)∠?。最后用觸發(fā)的交互，觸發(fā)搜索按鈕鼠標單擊時，相當于觸發(fā)了移出篩選，表格就自動恢復到未篩選之前的狀態(tài)。

這樣我們就完成高級搜索的原型模板了，后續(xù)使用也很方便，表格數(shù)據(jù)只需要在中繼器表格里填寫，預覽后即可自動生成對應的效果。

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