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

預覽效果:

一、從列表到詳情的數據显示

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

上圖是人人都是產品經理的app頁面,左側是列表頁,右側是詳情頁。

不僅僅是電商和社區,包括像微信在內的產品都是從列表到詳情,列表的作用是簡潔地展示詳情的信息,而詳情是對列表信息的補充。

淘寶wap端,就是將商品圖片、名稱、價格、運費、購買價格、購買人數、發貨地址,显示在列表。這也是淘寶經過數據分析之後,提煉出的用戶對商品最關注的信息。我們在設計產品時,也應該精細打磨,用數據做支撐,將用戶最關心的信息放到他眼前。這樣既能優化產品,減少不重要的數據字段,也能增加商品的點擊率。

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

二、中繼器實現

1)數據字段分析

還是回到最初的中繼器界面,如下圖,現在有一個已經做好的中繼器列表,參考:用過那麼多原型軟件,為什麼我還是最愛Axure

這个中繼器的數據集:

可以看到這個數據集是很簡單的,但是我們的目標是像淘寶wap端的商品詳情頁:

為了體現數據傳遞,並且不顯得臃腫,所以我選擇其中一部分的信息來實現。

2)增加字段

分析了一下之後,我決定增加圖片輪播和快遞費:

如圖三列,就是在列表中繼器增加的字段和數據,因為列表不显示,所以不用賦值,單純用於數據傳遞。

3)清楚商品詳情頁的數據

可以從之前的淘寶wap看出,相同的數據尺寸和排列位置並不相同(比如列表頁的商品圖片在詳情頁是輪播大圖),所以複製列表頁中繼器(list-repeater),暫時先放在他旁邊:

複製主要是不用再從新填寫數據集的字段了,如果按照我之前說的用excel來存儲,也可以直接複製數據集,都可以實現。

再將右側中繼器改名為(info-repearter),並把他的數據里的記錄(每一行)都刪除,字段名不要更改:

4)重新排列一下info中繼器的數據結構

增加了tp這個數據

5)增加一個圖片輪播

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

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

向前與此同理:

給info中繼器賦值:

一切準備就緒,接下來就是中繼器最精彩的部分.

6)從列表到詳情

先在的工作區是這樣的:(為了方便觀看,所以將詳情放到和列表同一界面)

而我的目標是點擊列表的某一項,右側對應显示該商品的詳情,所以對list中繼器添加用例。

在list中繼器內蒙上一層動態面板(click),添加用例,鼠標單價click時,在info中添加(insert)一行數據(info中繼器現在是沒有數據的):

因為兩个中繼器的字段命名都相同,所以選擇相同的變量名命名:

可以先試試增加數據這個功能:

可以看到,我點擊list中繼器的一項,會在右側info中繼器增加一項。增加的功能確實實現了,但是我的目標是在info的一個界面里刷新,所以需要接下來的步驟:

7)更新數據

先標記info中繼器,全部標記。——這一步可以理解為,我們要把上一步添加的數據更新為新的狀態,那麼要更新哪些數據呢?這就像數據庫的select一樣,先把要更新的數據標記出來。

標記完成后,那麼要把先在標記的數據更新成什麼數據呢?

所以我們就就要導入(update)新的數據:

到這裏,數據的傳遞,insert,select,update都用到了。

結合上一篇文章說到的delete,剛好是對數據處理的增刪改查

這也是中繼器的用法里稍微複雜的一部分。

最後,我的中繼器基礎教程就先寫到這裏了,點擊右上角的頭像可以查看這個教程之前的文章。

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

 

本文由 @浩程君 原創發佈於人人都是產品經理。未經許可,禁止轉載。