Axure中繼器實站應用篇——排版

在B端業務互動設計中，有大量欄位需要展示，或表格或表單或輸入框等，利用Axure RP 9 的中繼器可以實現快速設計製作排版調整等工作。具體怎麼做呢？一起來文中看看吧。

一、簡單瞭解一下中繼器

在Axure RP 9中，基本原件的最後一個原件就是中繼器。

跟其他原件一樣，拖拽到面板中使用，面板會預設展示一個三行的表格。

選中中繼器原件，在樣式列表中有一個『資料』欄目，修改資料，中繼器的表格也會隨之變化。

中繼器自帶一個互動屬性，意思是『中繼器中的（矩形）文字對應資料列表中的【Column0 】這一列的資料』。

雙擊中繼器，是個類似動態面板的介面，其操作邏輯也跟動態面板一致。

樣式頁面往下，時中繼器獨有的屬性面板，間距、佈局、背景、分頁。

小結：

以上就是中繼器的基本屬性和內容，我們下面通過幾個實戰應用，繼續深入瞭解一下中繼器在排版時的使用方法。

二、中繼器如何製作表格

在Axure RP 9中，有自帶的表格設計元件。

在一些簡單的表格設計可以使用，但是一些資料量較大時，或者排版樣式多變時就有點力不從心，所以需要用到 中繼器來輔助我們來進行表格的製作，下面舉個例子製作一個內容比較複雜的列表。

首先利用表格元件製作一個表頭。

拖拽出中繼器製作對應的內容區。

雙擊中繼器，進入編輯模式。

製作一列內容。

**注意：首行內容需要位置為-1，之後的矩形也要壓著一個畫素進行排列。

新增資料，對應表格中需要填寫的資料，在中繼器資料裡新增列。

給需要設定文字的元件命名。

新增互動。

設定變數。

最後新增資料。

這樣一個表格就製作完成了-完成效果。

小結：

利用中繼器做出的表格，便於後期調整和批次操作，配合中繼器特有的互動動作和函式可以實現更多的操作，提高效率。

三、中繼器表單快速調整

在表單製作時候，需要快速調整表單內容或者排列順序，如果逐個製作排列不但效率低，且間距樣式調整也是比較費手的事情，下面舉個例子。

製作一個表單，先思考一下這個表單如何用中繼器製作？

雙擊中繼器，放入一個文字框+一個輸入框。

然後調整一下排版-先隨便新增幾行。

然後，利用中繼器樣式中的間距和佈局功能進行版式的調整，到下面的效果。

接著開始，新增資料互動**這個值統一都有冒號，可以在雙括號後直接加個冒號同步新增。

編輯內容。

所有的框框都是輸入框，所以這步需要對特別型別進行遮擋代替。

這樣一箇中繼器製作的表單就完成了，利用中繼器製作表單在後續的

調整樣式、排列，只需要簡單的調整就很快的完成。

小結：

利用中繼器製作表單，可是實現便利的調整樣式、版式、新增刪除欄位、改變順序等操作，提高製作效率。

四、中繼器排版綜合應用

瞭解了中繼器的基本操作後，可以看到很多互動設計可以藉助中繼器來提升工作效率，我們隨便找個頁面看看。

思考一下，紅框中的這部分如何用中繼器來實現？3~2~1~

做出來的效果是這樣的，這裡用了兩個中繼器，一個是分類框，一個是標籤。

先開啟一箇中繼器，畫一個背板。

然後調整排列一下。

再新建一箇中繼器 ，去掉樣式。

匯入文字、可以直接複製文字貼上到資料中。

調整顏色、佈局、間距，我們得到一個標籤。

為什去掉標籤裡的樣式，用中繼器的填充？因為標籤樣式長度不一致的時候，自帶的樣式匯出之後不會跟隨文字長度變化，希望Axure 後邊的版本可以修復這個問題。

隨後複製幾個匯入資料、再調整一下就完成了。

小結：

透過中繼器的組合搭配，可以實現多種佈局和版式的快速製作和調整，還是為了提高效率。

五、總結近期的使用體會

最近使用中繼器一段時間了，確實能縮短互動稿的製作和調整工作時間，有考慮把之前UE，可以用到的部分都改成中繼器來製作，整整齊齊的看著也舒服。

最後希望分享能給小夥伴一點啟發，祝大家到點就下班。

作者：WOWdesign，研究設計價值最大化，涉及使用者體驗、品牌體驗、空間體驗。

本文由人人都是產品經理合作媒體 @WOWdesign 授權釋出，未經許可，禁止轉載。

題圖來自Unsplash，基於 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。