中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、效果展示

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

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

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

原型地址：https://hrioua.axshare.com/#g=1&p=高級搜索案例

二、制作教程

1、材料準備

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

1.1 快速搜索

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

1.2 高級搜索

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

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

1.3表格內(nèi)容

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

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

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

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

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

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

2、交互制作

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

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

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

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

2.2 搜索按鈕的交互

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

2.2.1 輸入框模糊搜索

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

2.2.2下拉列表篩選

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

2.2.3 單選按鈕組篩選

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

2.2.4 區(qū)間篩選

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

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

2.2.5 聯(lián)合篩選

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

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

2.2.6 重置

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

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

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