本文閱讀對(duì)象：有一定Axure基礎(chǔ)的人員，enjoy~

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

一、輔助介紹

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

中繼器–product

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

圖-1

（3）設(shè)置中繼器樣式。標(biāo)簽①、②、③分別命名為Names、Prices、Sale，圖片命名為Images。并分別對(duì)應(yīng)中繼器中相應(yīng)的字段，當(dāng)頁面加載時(shí)顯示圖片及文字。

圖-2

圖-3

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

圖-4

（5）當(dāng)客戶點(diǎn)擊“全部品牌”時(shí)，我們要展示的是所有品牌，所以我們要移除所有篩選。

圖-5

（6）根據(jù)某項(xiàng)指標(biāo)排序，以中繼器中的哪個(gè)字段為維度，按照什么順序排序。（排序類型一般是數(shù)字number）

圖-6

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

圖-7

（8）“清除”按鈕與“全部品牌”的邏輯一致，都是移除篩選，然后再設(shè)置兩個(gè)輸入框?yàn)榭占纯伞?/p>

圖-8

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

當(dāng)翻到第二頁時(shí)，設(shè)置選中，效果如圖-10，告訴用戶所處的頁數(shù)。

圖-9

圖-10

（10）使用pageindex函數(shù)，獲取中繼器項(xiàng)目列表當(dāng)前顯示內(nèi)容的頁碼；下一頁與上一頁類似，在此不做贅述。

圖-11

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

圖-12

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

二、搜索介紹

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

歷史記錄

step1：拉取一個(gè)動(dòng)態(tài)面板（slider_歷史記錄），內(nèi)嵌一個(gè)中繼器用于存儲(chǔ)搜索記錄。

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

圖-13

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

圖-14

step4：當(dāng)點(diǎn)擊某一條歷史記錄時(shí)，自動(dòng)匹配中繼器中的商品（思路與下面搜索提示一樣，是對(duì)的。但是結(jié)果與搜索提示卻不同，很奇怪）。

圖-15

搜索提示

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

圖-16

圖-17

重頭戲來了，搜索！

圖-18

（1）當(dāng)搜索框的長度大于0時(shí)，自動(dòng)匹配搜索提示中的關(guān)鍵詞

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

圖-19

（2）當(dāng)失去焦點(diǎn)時(shí)，在歷史記錄中自動(dòng)添加一行。

圖-20

（3）點(diǎn)擊“搜索”按鈕，其實(shí)也是實(shí)現(xiàn)篩選。

圖-21

（4）在商品標(biāo)題中匹配搜索關(guān)鍵詞，并用紅色顯示關(guān)鍵詞。

圖-22

（5）效果圖如下

圖-23

至此，搜索的原型設(shè)計(jì)就簡單介紹完畢。

三、小結(jié)：

（1）涉及到的功能有：

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

（2）涉及到的Axure知識(shí)點(diǎn)：動(dòng)態(tài)面板+中繼器+函數(shù)+排序篩選+交互用例。

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

本文由 @九牧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議