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

本文承接之前的Axure中繼器教程，繼續(xù)用理論+Axure原型實現(xiàn)。思考產(chǎn)品設計背后的是需求。

此案例主要實現(xiàn)以下內(nèi)容：

1、根據(jù)搜索框的關(guān)鍵詞，‘篩選’包含該關(guān)鍵字的商品，跳轉(zhuǎn)商品列表頁
2、搜索時顯示‘搜索提示’，可以點擊搜索提示直接跳轉(zhuǎn)該提示詞的商品列表頁
3、在搜索頁記錄‘搜索歷史’，在搜索列表頁可以刪除對應的‘搜索歷史’
4、熱搜詞的記錄和跳轉(zhuǎn)；

效果演示如下：

一、搜索是什么？
電商商城里的搜索功能本質(zhì)上是篩選，不同的篩選其實就是不同字段的查詢。例如，選擇價格區(qū)間，其實就是“price”這個字段增加一個上下區(qū)間范圍的條件，再將滿足條件的展示出來。而搜索也是字符之間的匹配，將滿足【已輸入】的【字符串】和商城內(nèi)所有商品的商品名稱【goodsName】進行匹配，然后將滿足條件的展現(xiàn)出來。

搜索的作用就是讓用戶可以精確（包括模糊）地找到所想的商品。

下圖是氧氣和淘寶的搜索結(jié)果界面（一般也是【商品列表頁】）。

二、范圍搜索
除了搜索的條件外，還有搜索的范圍。隨著商城的體量越來越大，搜索不僅僅是局限于商品的搜索，還有店鋪、用戶、文章、活動等。

下圖為聚美優(yōu)品和蘑菇街的搜索界面，將搜索范圍的選項放置在搜索框上方：

古典一些的就像淘寶wap，需要點擊搜索范圍。

而淘寶wap端還是需要點擊“寶貝”來選擇搜索范圍。

小結(jié)：搜索本是一個復雜的過程，能讓用戶點擊，滑動等手勢完成就盡量不要使用輸入。在搜索范圍的分類較少時（如聚美和蘑菇街），可在搜索框上方或下放添加選項卡，這樣可以比淘寶wap少一次點擊，而且對于搜索的分類展現(xiàn)得更為充分。當搜索范圍較多時，可以參考淘寶，在搜索框下放設置橫向滑動的模塊，供用戶選擇。

三、中繼器+動態(tài)面板+函數(shù)實現(xiàn)搜索

之前寫了中繼器的一些簡單用法，這次做一點復雜的功能吧。其實我工作中也不常用到中繼器，快速原型繪制唄。但是，用不用和你會不會，是兩碼事。

OK，廢話不多說，看此文需要有一些Axure和中繼器的基礎(chǔ)知識，重要的不是做出了一個效果，而是通過一段思考來完善產(chǎn)品里的需求。（之前的文章鏈接會放到文末。）

兩個頁面，用了六個中繼器。所以我說這是轟轟烈烈的搜索。╮(╯_╰)╭

建議點開上方的原型鏈接，對應著看。

1、點擊搜索框跳轉(zhuǎn)

關(guān)于頁面的命名：

商品列表頁：GoodsTable

搜索頁：Seach

商品列表頁的搜索框：seachText-goodslistpage

搜索頁的搜索框：SeachText-seachpage

搜索提示：prompt-repeater（輸入文本時，下面彈出的列表項，因為是中繼器，所以用了repeater）

搜索歷史：seachHistory（記錄搜素歷史）

解釋：1、在點擊商品列表頁的搜索框時，設置頁面跳轉(zhuǎn)到搜索頁（設置sight為Search）

2、進入搜索頁時隱藏搜索提示（搜索提示只有輸入文本時才提示）

2、搜索頁的樣式設置

這是搜索頁的樣式，【搜索發(fā)現(xiàn)】和【歷史搜索】分別是兩個動態(tài)面板套著中繼器。

1）搜索發(fā)現(xiàn)（請自動忽略圖中文字….）

這是中繼器的基礎(chǔ)用法，熟練一點的話比一個一個copy要快。而且裝逼能裝圓一點。這個是固定不動的項，需要修改的話，可以直接在中繼器的數(shù)據(jù)集里修改。

熱搜詞（搜索發(fā)現(xiàn)）是計算商城內(nèi)的所有被搜詞，然后顯示出來。減少用戶手動輸入小號的時間，提醒用戶當下流行的元素。

2）歷史搜索

歷史搜索的字段賦值和之前的一樣，這里為了展示，默認添加了“男裝”和“女裝”。

用動態(tài)面板套起來，記得給動態(tài)面板設置【自動調(diào)整為內(nèi)容尺寸】，因為在后面的搜索中會不斷產(chǎn)生新的【歷史搜索】，會逐漸把動態(tài)面板撐大。（為了insert，即是增）

這是【歷史搜索】中繼器中給【刪除】icon增加的操作，單機【垃圾桶】時，刪除【歷史搜索】中繼器中的這一行（This）。（為了delete，即是刪）

歷史搜索：是為了記錄用戶的關(guān)注習慣，減少用戶下一次搜索時需要的時間。也是商城搜索數(shù)據(jù)的一個途徑，即商城內(nèi)的熱搜詞，來源于歷史記錄的匯總。

3）搜索提示

在搜索頁有隱藏的中繼器，這就是搜索提示。為了讓大家看清楚，所以我把這個中繼器內(nèi)的樣式做得很特別?？梢栽谏厦娴逆溄永飮L試輸入數(shù)據(jù)集中的文字，試試搜索提示的快感。

還是一個從數(shù)據(jù)集給頁面賦值的過程。

搜索提示是在用戶輸入時，補全用戶可能將會輸入的詞匯，減少用戶的輸入操作。

四、搜索提示的顯示

上面幾步主要是把需要的頁面樣式和數(shù)據(jù)補充齊全，也就是我之前說過的Axure的狹義MVC理論（哈哈哈），到了這一步，V和M都有了，需要一個C。

1）顯示搜索提示

這是給搜索框的用例，涉及到兩個函數(shù)：substr（）和length。

x.substr（start，length），釋義：從start開始截取字符串x，截取的長度為length長。

x.length：返回字符串的長度。詳情可以參看W3C。

解釋一下這句話：加入我現(xiàn)在輸入【潮】字，那么就給搜索提示這個中繼器添加了一個篩選條件，這個條件很長：

如上圖的局部變量所示：我在搜索框（saechText-seachpage）中輸入了【潮】，那么局部變量LVAR1就等于【潮】。上面這一坨：[[Item.promptText.substr(0,LVAR1.length)==LVAR1]]

我來分段解釋一下：LVAR1.length就是現(xiàn)在LVAR1這個局部變量的長度，現(xiàn)在它的值是【潮】，長度就是【1】；substr(0,LVAR1.length)，就是截取字符串從0到【1】（分號前計算出來的）；那么截誰呢？就是寫在它前面的Item.promptText；截下來呢，那就對比一下是不是等于【LVAR1】（潮）。

哎喲喂。好麻煩。

換一種說法：

現(xiàn)在，我輸入了【潮】，就比較一下搜索提示的數(shù)據(jù)集里面第一個字是【潮】的，然后顯示出來。

現(xiàn)在，我輸入【潮來】，那么就比較數(shù)據(jù)集中前兩個字是【潮來】的數(shù)據(jù)并顯示。只有【潮來了】

（PS：最好再加一個點擊提示文字，直接跳轉(zhuǎn)該關(guān)鍵詞的搜索頁，看完你就會了）

再加上一個輸入的字符串為空，或不為空的判斷。

五、轟轟烈烈的搜索按鈕

大家都知道，輸入關(guān)鍵字后，需要點擊【搜索】，才能跳轉(zhuǎn)，所以接下來就是最后一步了。

用例那邊很多東西，而且一個不能少，而且順序不能改，很孤獨。

挨著解釋一下：

點擊搜索后，需要給商品列表頁添加篩選條件，而這個篩選和之前的搜索提示不一樣：

1）搜索提示是按順序，一個字對應一個字，就像上面一樣，【潮來】就只有一個匹配的，加入搜索【潮來了】中的【來了】就搜索不到了。

這里的商品搜索是檢索，效果就是，當我輸入【來了】可以搜索到【潮來了】。

所以這里用到了一個函數(shù)IndexOF，用法如下：

X.indexOf(‘value’），在X里搜索（value），返回值是第一次檢索到value的位置。

例如在【潮來沒來】中搜索【沒來】，則返回2；搜索【潮】則返回0。

所以：

再解釋一下：還是一個局部變量，然后就是這[[Item.name.indexOf(LVAR1)>0]]一坨。

大于零就是存在的意思。OK。

2）一次解釋一下右邊這一坨：

第一個：添加篩選（篩選出符合條件的項）

第二個：設置頁面返回商品列表頁（沒有這個就看不到效果了）

第三個：跳轉(zhuǎn)之后，將你搜索的內(nèi)容添加到【搜索歷史】中（沒有這個就沒有數(shù)據(jù)記錄了，數(shù)據(jù)就是錢?。?/p>

第四個：將你搜素的文本填充到商品列表頁（不然看不出來你‘搜’了啊~）

第五個：把搜索頁的搜索框內(nèi)的文本清零（不然你搜了個【潮】，下次進來就會有殘留的【潮】）

OK~完成了。

最后總結(jié)一下：

1、用到了三個函數(shù)，有興趣的可以查一查，都是JS相同的函數(shù)。哦，微信小程序來的時候，你說你要學前端，學了？

2、文件中的icon都是取自iconfont的淘寶手機端，部分結(jié)構(gòu)為了方便展示作了修改，但不影響整體，希望見諒

3、一點小體會吧，只是一個小小的搜索功能，不管做沒做出來，其實都不重要。在這個案例中，我們用了兩種字符串的匹配方式（截取和檢索），搜索提示，搜索歷史，熱門搜索，中繼器的增（歷史記錄）刪（垃圾桶）和篩選，重要的是對搜索的認知有更進了一步。

4、為什么叫轟轟烈類？因為這是我寫得最長最累的一篇了。

5、祝大家國慶節(jié)玩得開心。

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