原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

2 評(píng)論 5918 瀏覽 24 收藏 9 分鐘

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

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

一、輔助介紹

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

中繼器–product

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-1

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-2

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-3

(4)按品牌名稱篩選,記得第三步要移除其他篩選。

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-4

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-5

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-6

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-7

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-8

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

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-9

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-10

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-11

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-12

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

二、搜索介紹

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

歷史記錄

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

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-13

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-14

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-15

搜索提示

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-16

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-17

重頭戲來了,搜索!

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-18

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

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-19

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-20

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-21

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

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-22

(5)效果圖如下

原型設(shè)計(jì) | 對(duì)比天貓,做個(gè)搜索功能

圖-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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問源文件可以分享出來學(xué)習(xí)嗎?

    來自廣東 回復(fù)
  2. 干貨~我覺得大部分都 懵逼- –

    來自上海 回復(fù)