“ 中繼器應用的場景非常多，各類清單基本都可以通過中繼器樣式表現。”
這是《Axure9百例》系列第47篇
資料清單在各類APP、網站上都能看到，表現形式豐富多樣，标題欄、菜單欄、文章清單、作品縮略圖、新聞清單等，典型的網站頁面可浏覽CSDN、InfoQ、人人都是産品經理，APP類的可看看淘寶、微信、得到、極客時間、網易雲音樂，到處可見清單類資料。
資料清單樣式的表現方式最好的元件是中繼器。
我們看看幾種常見的清單樣式，以CSDN網站為例，裡面基本包含了各類清單。
頁面上的其它内容基本類似，幾種清單總結如下：
1、單行：同一行上有多條資料，樣式類似，上面的場景1、3、5。
2、單列：自上而下的方式，樣式類似，上面的場景7。
3、網格排布：有多行資料，每行顯示固定數目的内容後換行，像網格一樣排列，上面的場景2、4、6
01
—
界面布局
分别看一下以上7種場景的中繼器樣式的設定。
場景1：單行菜單欄
你如果說，我直接用文本标簽不行嘛。。。當然也行，這裡隻說明使用中斷器的思路。
準備好資料，中繼器預設是從上往下順序展示的：
布局樣式：
因為菜單隻有一個文字内容，布局上相對比較簡單，輕按兩下中繼器進入編輯狀态，将預設的矩形框邊框設定為0，即不需要邊框，如果經過時背景顔色為灰色。
中繼器樣式：
中繼器的樣式裡需要設定一處，方向水準：
場景2：多行菜單欄
同樣，這個菜單也隻有文本，使用預設的矩形即可，準備好預設的資料。
布局樣式：
設定菜單的樣式，滑鼠經過時的紅色文字。
中繼器樣式：
水準排列，網格排布，每行10個，适當設定行間距和列間距。
場景3：單行圖文
資料清單的内容包括圖示和文字，中繼器的字段有兩個，分别是圖檔和菜單内容。
布局樣式：
要新增個圖檔元件作為圖示，菜單名稱矩形框無邊框，滑鼠經過時的文字顔色為紅色。
中繼器樣式：
設定方向為水準，适當設定列間距。
場景4：多行圖文
和上面的單行圖文菜單類似，隻是布局是圖示在左，菜單在右，并且是兩行顯示。
布局樣式：
左圖右文的布局
中繼器樣式：
水準布局，網格排布，每行2個，行間距10，列間距20。
場景5：單行卡片
這個和單行的菜單的差別就是内容上的元件更多，樣式表現更豐富，我們隻要把布局設計好。
布局樣式：
5個元件，一個背景，可以用圖檔代替，一個主标題，一個兩行内容的副标題，檢視更多的連結和圖示
中繼器樣式：
布局方向設定為水準，設定列間距。
場景6：多行圖文清單
多行圖文在樣式上更豐富，每項内容裡包括的内容有多個圖檔和文字。
這個視訊清單裡包括了視訊封面圖檔、直播辨別、視訊标題、作者頭像和名稱，中繼器資料裡包括這幾個字段。
樣式布局：
兩張圖檔，三個标簽，兩一個矩形框（右上角直播和下方的視訊名稱的背景區域），組成了視訊資料清單。
中繼器樣式：
參考前面的設定方法，這裡的布局方向為水準，網格排布，每行顯示3個。
場景7：單行文章清單
雖然是自上而下的單個清單，每一行中的資料也是比較豐富，包括序号、标題、來源和閱讀數。
布局樣式：
三個标簽和兩個圖示，序号在前3位的顯示圖示，否則隻顯示文字。
關于中繼器的多場景設定，請檢視 【Axure9百例】46.多條件判斷
中繼器樣式：
03
—
小結
中繼器是個非常好用的元件，它的内容自定義布局的方式，可以充分發揮它的清單功能，清單内容的豐富性在于你的産品需求。并且根據多條件設定的技巧，可以在清單中顯示不同的樣式，提供更好的産品原型設計體驗。
往期回顧
【Axure9百例】45.多條件判斷
【Axure9百例】45.中繼器的不同樣式
【Axure9百例】44.百度網盤拖動按鈕樣式
【Axure9百例】43.百度網盤驗證
【Axure9百例】42.支付寶首頁樣式