在之前的文章中，既做過了轟轟烈烈的搜索，也做過了簡簡單單的排序和篩選，今天想用中繼器來實現(xiàn)一下從商品【列表頁】到【詳情頁】的過程，還有關(guān)于“列表“到“詳情”的一些思考。

預(yù)覽效果：

一、從列表到詳情的數(shù)據(jù)顯示

上圖是淘寶wap端，從商品列表頁到商品詳情頁的變化，很明顯能看出‘詳情’頁的信息更多更全面，數(shù)據(jù)字段的顯示也更豐富；

上圖是人人都是產(chǎn)品經(jīng)理的app頁面，左側(cè)是列表頁，右側(cè)是詳情頁。

不僅僅是電商和社區(qū)，包括像微信在內(nèi)的產(chǎn)品都是從列表到詳情，列表的作用是簡潔地展示詳情的信息，而詳情是對列表信息的補充。

淘寶wap端，就是將商品圖片、名稱、價格、運費、購買價格、購買人數(shù)、發(fā)貨地址，顯示在列表。這也是淘寶經(jīng)過數(shù)據(jù)分析之后，提煉出的用戶對商品最關(guān)注的信息。我們在設(shè)計產(chǎn)品時，也應(yīng)該精細打磨，用數(shù)據(jù)做支撐，將用戶最關(guān)心的信息放到他眼前。這樣既能優(yōu)化產(chǎn)品，減少不重要的數(shù)據(jù)字段，也能增加商品的點擊率。

如果要用axure來實現(xiàn)的話，可能有的朋友會想到用不同的動態(tài)面板來切換，其實不必這么麻煩，只需要了解中繼器的”增“，就可以將商品列表頁的數(shù)據(jù)插入到商品詳情頁中。

二、中繼器實現(xiàn)

1）數(shù)據(jù)字段分析

還是回到最初的中繼器界面，如下圖，現(xiàn)在有一個已經(jīng)做好的中繼器列表，參考：用過那么多原型軟件，為什么我還是最愛Axure

這個中繼器的數(shù)據(jù)集：

可以看到這個數(shù)據(jù)集是很簡單的，但是我們的目標(biāo)是像淘寶wap端的商品詳情頁：

為了體現(xiàn)數(shù)據(jù)傳遞，并且不顯得臃腫，所以我選擇其中一部分的信息來實現(xiàn)。

2）增加字段

分析了一下之后，我決定增加圖片輪播和快遞費：

如圖三列，就是在列表中繼器增加的字段和數(shù)據(jù)，因為列表不顯示，所以不用賦值，單純用于數(shù)據(jù)傳遞。

3）清楚商品詳情頁的數(shù)據(jù)

可以從之前的淘寶wap看出，相同的數(shù)據(jù)尺寸和排列位置并不相同（比如列表頁的商品圖片在詳情頁是輪播大圖），所以復(fù)制列表頁中繼器（list-repeater），暫時先放在他旁邊：

復(fù)制主要是不用再從新填寫數(shù)據(jù)集的字段了，如果按照我之前說的用excel來存儲，也可以直接復(fù)制數(shù)據(jù)集，都可以實現(xiàn)。

再將右側(cè)中繼器改名為（info-repearter），并把他的數(shù)據(jù)里的記錄（每一行）都刪除，字段名不要更改：

4）重新排列一下info中繼器的數(shù)據(jù)結(jié)構(gòu)

增加了tp這個數(shù)據(jù)

5）增加一個圖片輪播

在info中繼器中，用一個中繼器套三張圖分別是img、img2、img3

在增加一個左右滑動的用例：

向前與此同理：

給info中繼器賦值：

一切準(zhǔn)備就緒，接下來就是中繼器最精彩的部分.

6）從列表到詳情

先在的工作區(qū)是這樣的：（為了方便觀看，所以將詳情放到和列表同一界面）

而我的目標(biāo)是點擊列表的某一項，右側(cè)對應(yīng)顯示該商品的詳情，所以對list中繼器添加用例。

在list中繼器內(nèi)蒙上一層動態(tài)面板（click），添加用例，鼠標(biāo)單價click時，在info中添加（insert）一行數(shù)據(jù)（info中繼器現(xiàn)在是沒有數(shù)據(jù)的）：

因為兩個中繼器的字段命名都相同，所以選擇相同的變量名命名：

可以先試試增加數(shù)據(jù)這個功能：

可以看到，我點擊list中繼器的一項，會在右側(cè)info中繼器增加一項。增加的功能確實實現(xiàn)了，但是我的目標(biāo)是在info的一個界面里刷新，所以需要接下來的步驟：

7）更新數(shù)據(jù)

先標(biāo)記info中繼器，全部標(biāo)記。——這一步可以理解為，我們要把上一步添加的數(shù)據(jù)更新為新的狀態(tài)，那么要更新哪些數(shù)據(jù)呢？這就像數(shù)據(jù)庫的select一樣，先把要更新的數(shù)據(jù)標(biāo)記出來。

標(biāo)記完成后，那么要把先在標(biāo)記的數(shù)據(jù)更新成什么數(shù)據(jù)呢？

所以我們就就要導(dǎo)入（update）新的數(shù)據(jù)：

到這里，數(shù)據(jù)的傳遞，insert，select，update都用到了。

結(jié)合上一篇文章說到的delete，剛好是對數(shù)據(jù)處理的增刪改查。

這也是中繼器的用法里稍微復(fù)雜的一部分。

最后，我的中繼器基礎(chǔ)教程就先寫到這里了，點擊右上角的頭像可以查看這個教程之前的文章。

以后想到什么有意思的東西再和大家分享吧~

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