Axure中繼器實戰應用篇——排版
在B端業務交互設計中,有大量字段需要展示,或表格或表單或輸入框等,利用Axure RP 9 的中繼器可以實現快速設計制作排版調整等工作。具體怎么做呢?一起來文中看看吧。
一、簡單了解一下中繼器
在Axure RP 9中,基本原件的最后一個原件就是中繼器。
跟其他原件一樣,拖拽到面板中使用,面板會默認展示一個三行的表格。
選中中繼器原件,在樣式列表中有一個『數據』欄目,修改數據,中繼器的表格也會隨之變化。
中繼器自帶一個交互屬性,意思是『中繼器中的(矩形)文本對應數據列表中的【Column0 】這一列的數據』。
雙擊中繼器,是個類似動態面板的界面,其操作邏輯也跟動態面板一致。
樣式頁面往下,時中繼器獨有的屬性面板,間距、布局、背景、分頁。
小結:
以上就是中繼器的基本屬性和內容,我們下面通過幾個實戰應用,繼續深入了解一下中繼器在排版時的使用方法。
二、中繼器如何制作表格
在Axure RP 9中,有自帶的表格設計組件。
在一些簡單的表格設計可以使用,但是一些數據量較大時,或者排版樣式多變時就有點力不從心,所以需要用到 中繼器來輔助我們來進行表格的制作,下面舉個例子制作一個內容比較復雜的列表。
首先利用表格元件制作一個表頭。
拖拽出中繼器制作對應的內容區。
雙擊中繼器,進入編輯模式。
制作一列內容。
**注意:首行內容需要位置為-1,之后的矩形也要壓著一個像素進行排列。
添加數據,對應表格中需要填寫的數據,在中繼器數據里添加列。
給需要設置文本的元件命名。
添加交互。
設置變量。
最后添加數據。
這樣一個表格就制作完成了-完成效果。
小結:
利用中繼器做出的表格,便于后期調整和批量操作,配合中繼器特有的交互動作和函數可以實現更多的操作,提高效率。
三、中繼器表單快速調整
在表單制作時候,需要快速調整表單內容或者排列順序,如果逐個制作排列不但效率低,且間距樣式調整也是比較費手的事情,下面舉個例子。
制作一個表單,先思考一下這個表單如何用中繼器制作?
雙擊中繼器,放入一個文本框+一個輸入框。
然后調整一下排版-先隨便添加幾行。
然后,利用中繼器樣式中的間距和布局功能進行版式的調整,到下面的效果。
接著開始,添加數據交互**這個值統一都有冒號,可以在雙括號后直接加個冒號同步添加。
編輯內容。
所有的框框都是輸入框,所以這步需要對特別類型進行遮擋代替。
這樣一個中繼器制作的表單就完成了,利用中繼器制作表單在后續的調整樣式、排列,只需要簡單的調整就很快的完成。
小結:
利用中繼器制作表單,可是實現便利的調整樣式、版式、添加刪除字段、改變順序等操作,提高制作效率。
四、中繼器排版綜合應用
了解了中繼器的基本操作后,可以看到很多交互設計可以借助中繼器來提升工作效率,我們隨便找個頁面看看。
思考一下,紅框中的這部分如何用中繼器來實現?3~2~1~
做出來的效果是這樣的,這里用了兩個中繼器,一個是分類框,一個是標簽。
先打開一個中繼器,畫一個背板。
然后調整排列一下。
再新建一個中繼器 ,去掉樣式。
導入文本、可以直接復制文本粘貼到數據中。
調整顏色、布局、間距,我們得到一個標簽。
為什去掉標簽里的樣式,用中繼器的填充?因為標簽樣式長度不一致的時候,自帶的樣式導出之后不會跟隨文字長度變化,希望Axure 后邊的版本可以修復這個問題。
隨后復制幾個導入數據、再調整一下就完成了。
小結:
通過中繼器的組合搭配,可以實現多種布局和版式的快速制作和調整,還是為了提高效率。
五、總結近期的使用體會
最近使用中繼器一段時間了,確實能縮短交互稿的制作和調整工作時間,有考慮把之前UE,可以用到的部分都改成中繼器來制作,整整齊齊的看著也舒服。
最后希望分享能給小伙伴一點啟發,祝大家到點就下班。
作者:WOWdesign,研究設計價值最大化,涉及用戶體驗、品牌體驗、空間體驗。
本文由人人都是產品經理合作媒體 @WOWdesign 授權發布,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
這個還蠻有意思