本期給大家?guī)淼氖歉叻沦Y訊網(wǎng)站“人人都是產(chǎn)品經(jīng)理網(wǎng)”，來看看~

一、照例先上gif

首頁部分

中繼器部分

二、制作思路

本次原型的制作主要有四個(gè)部分：

1. 浮動(dòng)導(dǎo)航
2. 右側(cè)區(qū)域
3. 版權(quán)信息
4. 信息流

三、制作方法

信息流是本次制作的重中之重，也是是本次原型的制作目的。只要這個(gè)信息流做好了，就能快速的制作其他信息流類型的網(wǎng)站，所以本文重點(diǎn)就是說明如何用中繼器做這個(gè)信息流。

（1）中繼器是什么？

“中繼器”是Axure中一個(gè)可以用來做重復(fù)樣式的控件，同時(shí)它也是一個(gè)可以當(dāng)作數(shù)據(jù)庫作用的控件。

（2）怎樣用中繼器做信息流？

利用中繼器的數(shù)據(jù)庫作用，往里面存入20篇文章，存儲(chǔ)的時(shí)候按照文章的顯示形式建立多個(gè)字段，方便展示的時(shí)候調(diào)取。

利用中繼器的重復(fù)作用，先制作列表中單條文章塊的樣式，再為每個(gè)元素綁定數(shù)據(jù)源。

（3）手把手的制作“中繼器”

首先，把“中繼器”拖到“頁面編輯區(qū)”，先給“中繼器”命名，然后設(shè)置需要展現(xiàn)的數(shù)量。

其次，雙擊打開中繼器，進(jìn)入編輯模式，這種狀態(tài)下可以對中繼器進(jìn)行設(shè)計(jì)和編輯。在這里放入10個(gè)元素，分別為：文章標(biāo)簽；縮略圖；文章標(biāo)題；摘要；作者頭像；作者名稱；發(fā)布時(shí)間；閱讀小標(biāo)和閱讀數(shù)；收藏小標(biāo)和收藏?cái)?shù)；點(diǎn)贊小標(biāo)和點(diǎn)贊數(shù)。這就完成了布局。

接下來，要為“中繼器”輸入數(shù)據(jù)。點(diǎn)擊“中繼器”后，右側(cè)菜單有個(gè)數(shù)據(jù)區(qū)域，這里就是“中繼器”的數(shù)據(jù)源，對照著“中繼器”中的元素分別設(shè)置10個(gè)字段。這里填寫的每一行數(shù)據(jù)，都會(huì)依照“中繼器”的設(shè)置進(jìn)行展示。

最后，要為“中繼器”中設(shè)計(jì)好的元素綁定上數(shù)據(jù)。點(diǎn)擊右側(cè)的“交互”選項(xiàng)卡，點(diǎn)擊“新建交互”按鈕，選擇頁面中的“中繼器”。

當(dāng)文章塊中的每個(gè)元素都綁定好數(shù)據(jù)源之后，文章列表就顯示出來了。

使用同樣的方法，就可以制作出內(nèi)容詳情頁。

用中繼器制作信息流就完成了。其他的模塊照著“人人都是產(chǎn)品網(wǎng)”進(jìn)行常規(guī)制作就可以了，當(dāng)然也可以按其他資訊類網(wǎng)站來制作，這相當(dāng)于有了一個(gè)快速制作信息流網(wǎng)站的“通用中繼器模塊”。

本文到這里就結(jié)束了，歡迎朋友們拍磚，多多指出其中的不足。

本文原型鏈接：https://wstsp5.axshare.com

擴(kuò)展閱讀

Axure教程 | 制作一個(gè)商品飛入購物車的動(dòng)效

Axure教程 | 如何使用中繼器當(dāng)數(shù)據(jù)庫，制作web端幻燈片？

Axure教程 | web端的驗(yàn)證碼（普通驗(yàn)證碼和滑塊驗(yàn)證碼）如何制作？

Axure教程 | 小白入門，制作web端注冊/登錄

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

題圖來自Unsplash，基于CC0協(xié)議。