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

在上一篇中我用了四個(gè)中繼器加兩個(gè)函數(shù)做了一個(gè)轟轟烈烈的搜索功能，今天為了進(jìn)一步完善我的商城原型，所以就打算做一個(gè)簡簡單單的篩選和排序功能。這個(gè)功能不僅在商城中會(huì)用到，隨著產(chǎn)品的體量越來越大，包含的信息越來越多，為了幫助用戶快捷找到目標(biāo)信息，一個(gè)篩選和排序是必不可少的。

如果說【搜索】功能是精確地查找，那么篩選和排序就是為用戶提供相關(guān)【可參考】的條件，幫助用戶一步一步接近目標(biāo)信息。

效果預(yù)覽：

一、排序

下圖是淘寶、京東、蘇寧的商品列表頁的排序，較為常規(guī)的排序條件有【按照價(jià)格排列】【按照評(píng)價(jià)】【按照銷量】，可以看出這三種都是對(duì)用戶的購買有幫助的排序條件

1、價(jià)格，對(duì)應(yīng)不同用戶的購買能力和商品需求

2、評(píng)價(jià)，對(duì)應(yīng)已購買用戶對(duì)使用商品的評(píng)價(jià)

3、銷量、對(duì)應(yīng)此商品的賣出數(shù)量

加入對(duì)應(yīng)到一些UGC平臺(tái)可能就是按【點(diǎn)贊數(shù)】【發(fā)布時(shí)間】【回復(fù)數(shù)】等

無論是什么排序條件，都是需要對(duì)用戶尋找目標(biāo)信息有幫助，或者直接參照作用的。排序是針對(duì)該條件（關(guān)鍵字條件，篩選條件）下的所有商品。

二、篩選

篩選的條件多種多樣，對(duì)于較大的商城系統(tǒng)而言，還會(huì)根據(jù)用戶搜索的商品種類，提供不同的篩選條件：

例如：

左圖一：搜索【女裝】，會(huì)出現(xiàn)服裝商品對(duì)應(yīng)的【尺碼】【品牌】【材質(zhì)】等；

右圖：搜索【手機(jī)】，會(huì)出現(xiàn)手機(jī)商品對(duì)應(yīng)的【內(nèi)存】【屏幕尺寸】等；

篩選條件是根據(jù)用戶輸入的關(guān)鍵字提煉出此類關(guān)鍵字對(duì)應(yīng)的某一類商品，再綜合這一類商品所涉及的參數(shù)字段。讓用戶可以選擇對(duì)應(yīng)的參數(shù)字段，來選擇目標(biāo)商品。

相對(duì)于排序而言，篩選是將滿足篩選條件的商品展示出來，篩選和排序是可以共同存在的。

上一篇中說到【搜索】其實(shí)也是一種【篩選】，根據(jù)輸入的字符，匹配（字符、語義）含有該字符的信息。

三、Axure實(shí)現(xiàn)篩選

1、繪制篩選頁面

參考頁面是淘寶的篩選頁：

1）拖入兩個(gè)矩形，黑色：320*568，顏色#71736E，透明度80，置于底層；白色：230*568，顏色#FFFFFF，透明度100。這就是篩選頁的雛形了。

2）拖入相關(guān)原件

這里只做兩個(gè)簡單的篩選條件，價(jià)格區(qū)間和發(fā)貨地選擇。對(duì)應(yīng)的命名是最低價(jià)（min）,最高價(jià)（max），收貨地址（address），下面的發(fā)貨地選擇是用了一個(gè)中繼器（city-repeater）。

點(diǎn)擊下方中繼器內(nèi)的文字（city-repeater），就將點(diǎn)擊的城市名賦值到上方的發(fā)貨地（address）內(nèi)，如下圖：

進(jìn)入到中繼器內(nèi)，在矩形上方拖入一個(gè)等大的動(dòng)態(tài)面板，為面板添加用例，如上圖。

完成之后效果圖如下：

3）添加篩選

先添加一個(gè)價(jià)格區(qū)間的篩選，點(diǎn)擊【完成】時(shí)添加篩選：

設(shè)置一個(gè)價(jià)格區(qū)間，為商品列表頁（list-repeater）添加一個(gè)篩選條件：

[[(Item.price>LVAR1)&&Item.price<LVAR2)]]，即價(jià)格必需大于min，小于max，&&是并且的意思。

效果圖如下：（為了方便瀏覽，所以在同一頁展示）

發(fā)貨地的篩選條件與此相似：[[Item.ship==LVAR1]]

注意：篩選條件可以并存，所以記得取消勾選“移除其他篩選條件”

2）將篩選頁移入之前的原型中

將上一步繪制好的篩選頁放入動(dòng)態(tài)面板中，命名為filter。

所以完善幾個(gè)交互的用例：

1、點(diǎn)擊商品列表的【篩選】時(shí)，移動(dòng)右側(cè)的filter，到坐標(biāo)（0,0）；

2、點(diǎn)擊filter面板內(nèi)左側(cè)的灰色地帶時(shí)，移動(dòng)filter，到坐標(biāo)（320,0）；

3、點(diǎn)擊【重置】時(shí)，取消所有篩選，并移動(dòng)filter，到坐標(biāo)（320,0）；

4、點(diǎn)擊【完成】時(shí)，添加篩選，并并移動(dòng)filter，到坐標(biāo)（320,0）；

到這一步，這個(gè)簡單的篩選功能就完成了。

2、排序功能

1、原件準(zhǔn)備

排序功能主要用到axure自帶的原件中的【下拉列表框】

拖入一個(gè)，命名為sort，為它添加幾個(gè)常用的排序規(guī)則：

2、添加排序

先為他添加一個(gè)篩選條件，1234，四步：

再為它添加一個(gè)排序：為商品列表（list-repeat）添加一個(gè)排序，屬性時(shí)price（價(jià)格），排序是數(shù)字（number），順序是升序。

然后還有價(jià)格降序，銷量增序，與此相同，不贅述。

就像這樣：

要注意一點(diǎn)就是axure并不識(shí)別個(gè)十百千萬這樣的漢字?jǐn)?shù)字，所以按銷量排序時(shí)需要將1.6萬修改為16000，才能在排序中起作用。

OK，距離我的超保真商城原型又進(jìn)了一步。

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