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

最近看到的原型設計文章多數都是和中繼器相關，我也來湊個熱鬧，中繼器的排序的簡單介紹。這次用手機淘寶商品列表為例進行說明。對咯，之前有發過以手機淘寶購物車為例的文章，有興趣的歡迎點看（Axure教程｜購物車商品增減刪除練習）~

準備工作

先分析下手機淘寶列表頁的篩選排序功能，涉及兩塊內容，一個點開篩選項后會有子篩選項的顯示和隱藏（涉及動態面板的使用），一個是選中任意篩選項后，列表按照一定規則進行重新排序（涉及中繼器排序的使用）。

現在開始添加列表頁該有的各種元素吧，對照著手機淘寶的列表頁將商品信息以上模塊元素添加完成后，拖出一個動態面板，用來做點擊“綜合排序”后的子篩選項，商品信息模塊使用中繼器，拖出中繼器一個，雙擊后進入中繼器編輯頁，添加商品圖片，商品標題，商品價格，商品收貨人數。

注意：價格和收貨人數這里不需要填寫內容。給中繼器添加原始內容，添加4列內容，primary，price，sale，credit，分別代表初始排序，商品價格，商品銷量，信用，初始排序按照1-5填寫，價格隨便寫數字，銷量也隨便寫，信用也是瞎寫，我自己設置成10一下隨便填。

東西都添加擺放完成后，開始給各個元素命名，動態面板命名為排序，里面對應的子篩選項依序命名為排序1-4，綜合排序命名綜合排序，銷量優先命名為銷量排序，中繼器命名商品列表，里面的商品價格和收貨人數命名為price和sale（這是為了和中繼器中的內容對應上，方便理解）

動作分解實現

該準備的都完成后，接下來就是分解動作：一是篩選項選中后的自身的變化，二是對應列表頁商品的排序變化。

動作一是動態面板的內容，動作二是中繼器排序的內容。

先來分解動作一：

• 列表頁默認選中綜合排序進行排序
• 點擊綜合排序展開和隱藏子篩選項
• 點擊子篩選項任意一個，選項關閉且標題對應變成子選項名稱
• 選中任意選項，該選項顏色突出，其余選項為默認色黑色

給每一個篩選項文本添加交互樣式，即選中部件后右鍵彈出菜單，選擇“交互樣式”，在“選中”下選擇文字顏色（大致選擇橙色即可）。

接下來添加子篩選項的顯示和隱藏，以及選中后選項名稱的對應變化。

給綜合排序添加點擊用例，添加切換顯示/隱藏動態面板”排序“，即子選項。

給動態面板內的4個子選項添加點擊用例，隱藏動態面板”排序“，該子選項為選中狀態，其余子選項為非選中狀態，”綜合排序“的文字等于this（即為該子選項的文字）。

選項的動作添加到此結束，下面說下選中后，列表對應排序的變化。

準備階段中給中繼器添加4列標題，是否還記得呢？其中有兩個標題和商品價格，商品銷量的命名相同，還記得嗎？之所以相同，是為了方便理解它們的對應關系。

在中繼器編輯頁面（雙擊中繼器即可），在”項目交互“中”每項加載時“添加用例，將中繼器中的列與商品價格和商品銷量對應上。

中繼器對應的添加完成后，返回來給篩選項添加中繼器的排序用例，在點擊時用例上添加排序。綜合排序按照primary的序號1-5升序排列，價格由高到低對應價格的降序排列，價格由低到高則反之，銷量優先為收貨人的數量降序排列，信用為降序排列。

還有2點不要忘記了，動態面板默認選擇隱藏，綜合排序默認選擇選中哦~

該做的都做完了，預覽看看是不是效果實現了呢？！在此基礎上大家還可以添加商品的滑動效果，有童鞋無私分享過，大家可以嘗試下哈~

原型預覽：

http://5wtlcf.axshare.com

原型下載

作者源：http://pan.baidu.com/s/1sl3SZpV ?密碼：qikz

官方源：http://pan.baidu.com/s/1pLhC1jP 密碼: 4eqx

作者：Lprecious，成長中的產品汪

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