本文閱讀對象：有一定Axure基礎的人員，enjoy~

本文分為輔助介紹和主題介紹（搜索介紹），先把動畫效果呈上天貓商品列表頁+搜索+提示+歷史記錄+關鍵詞匹配

一、輔助介紹

（1）拉取一個中繼器命名為product并設置成如下圖所示，中繼器相當于Axure的數據庫，橫向是記錄，縱向是字段。

中繼器–product

（2）添加字段和記錄，并分別給它命名。（一般以通俗易懂為準）

圖-1

（3）設置中繼器樣式。標簽①、②、③分別命名為Names、Prices、Sale，圖片命名為Images。并分別對應中繼器中相應的字段，當頁面加載時顯示圖片及文字。

圖-2

圖-3

（4）按品牌名稱篩選，記得第三步要移除其他篩選。

圖-4

（5）當客戶點擊“全部品牌”時，我們要展示的是所有品牌，所以我們要移除所有篩選。

圖-5

（6）根據某項指標排序，以中繼器中的哪個字段為維度，按照什么順序排序。（排序類型一般是數字number）

圖-6

（7）根據輸入的價格區間篩選。我們要將輸入的最高、最低價存放在變量中，若中繼器中價格在這個區間就顯示出來。

圖-7

（8）“清除”按鈕與“全部品牌”的邏輯一致，都是移除篩選，然后再設置兩個輸入框為空即可。

圖-8

（9）上下頁交互，當為第一頁時，禁用上一頁按鈕；當不是最后一頁時，啟用下一頁按鈕的功能。

當翻到第二頁時，設置選中，效果如圖-10，告訴用戶所處的頁數。

圖-9

圖-10

（10）使用pageindex函數，獲取中繼器項目列表當前顯示內容的頁碼；下一頁與上一頁類似，在此不做贅述。

圖-11

（11）跳轉到輸入的頁面。在局部變量里，specify_page就是頁碼輸入框名稱。

圖-12

這樣除了搜索功能，別的差不多都簡單介紹完了。

二、搜索介紹

搜索功能分為歷史記錄、根據輸入內容匹配常用搜索熱詞（簡稱“搜索提示”），根據輸入關鍵詞搜索顯示內容三部分。

歷史記錄

step1：拉取一個動態面板（slider_歷史記錄），內嵌一個中繼器用于存儲搜索記錄。

step2：為了使模擬更加逼真，我們先添加三條記錄。

圖-13

step3：設置中繼器中的文本框文字為中繼器的記錄。

圖-14

step4：當點擊某一條歷史記錄時，自動匹配中繼器中的商品（思路與下面搜索提示一樣，是對的。但是結果與搜索提示卻不同，很奇怪）。

圖-15

搜索提示

與歷史記錄的原理差不多，這里不多贅述。

圖-16

圖-17

重頭戲來了，搜索！

圖-18

（1）當搜索框的長度大于0時，自動匹配搜索提示中的關鍵詞

TargetItem.Column0：這是由于我在搜索提示動態面板中的中繼器中的字段名稱為Column0，所以才這樣顯示。

圖-19

（2）當失去焦點時，在歷史記錄中自動添加一行。

圖-20

（3）點擊“搜索”按鈕，其實也是實現篩選。

圖-21

（4）在商品標題中匹配搜索關鍵詞，并用紅色顯示關鍵詞。

圖-22

（5）效果圖如下

圖-23

至此，搜索的原型設計就簡單介紹完畢。

三、小結：

（1）涉及到的功能有：

1. 按關鍵詞、品牌、價格搜索；
2. 按人氣、銷量、價格等排序；
3. 支持上下翻頁、跳轉指定頁面；
4. 支持熱詞匹配(搜索提示）功能；
5. 支持記錄搜索記錄功能。

（2）涉及到的Axure知識點：動態面板+中繼器+函數+排序篩選+交互用例。

（3）Axure函數參照：https://www.axure.com.cn/5068/

本文由 @九牧 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議