雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出産品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同内容的增删改查處理效果，本文将實現自主向中繼器裡添加圖文數據。

效果預覽

預覽效果.gif

實現方法

分析，目标是向左側信息列表裡新增圖文數據。先要準備一個中繼器作為為信息庫，再添加數據到中繼器裡。

第一步：教師列表–設置中繼器

設置中繼器步驟：

（1）添加中繼器到畫布，命名“教師庫”

（2）設置界面模型

雙擊中繼器，進入中繼器，設置中繼器界面模型。 删除中繼器自帶矩形元件，添加自己需要的元件，并分别對元件命名。本例如下圖，元件命名分别：頭像、姓名、級别、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。

退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。

（3）添加中繼器數據

在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列并命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：

添加數據後，界面并未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關系，讓它知道圖片是哪個，名字是哪個。

（4）讀取數據

設置交互-加載時的動作：動态讀取，因此是設置變量值。

頭像-設置圖片：

姓名 | 級别 | 簡介——設置文本：

完成教師庫設置，如圖：

第二步：添加教師區域

本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：

注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）

第三步：添加動作

如何點擊「确認添加」按鈕後，将右側的圖文信息添加到左側教師庫裡并顯示？

最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級别數據為「級别文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。

（1）添加文本

動作：「确認按鈕」單機時–中繼器–添加行 添加姓名（name）：

添加級别（state）、簡介（con）同添加姓名，過程略，結果如下：

到這裡已經完成了添加文本數據到中繼器，預覽可實現。

（2）添加圖片（本次案例實現目标的關鍵點）

先把3個圖片元件右鍵導入圖片，作為教師頭像庫。

本例是要實現選擇其中的任意一張添加，因此點擊時，需要先判斷哪張圖片被選中。怎麼判斷，先設置圖片在被選中時，設置相應的全局變量，在添加時直接使用變量。 添加圖片選中交互如下圖，為了表現選中效果，添加了設置尺寸。3張圖片分别需要設置不同的變量值1，2，3，另外注意設置尺寸注意互斥。

三張圖片需要選中（值）互斥，隻能有一張被選中。選擇3張圖片，右鍵-選項組，并命名「頭像庫」，（注意不是組合哈）如下：

此時，再回到确認添加動作：場景邏輯為，如果選中圖1，則添加圖1，即如果全局變量值mg_sel為1，則添加圖1。如果mg_sel為2，則添加圖2，如果mg_sel為3，則添加圖3。因此，這裡需要添加情形，如下：

設置3個情形，相應的變量對應在添加行裡導入相應的圖片，設置動作結果如下：

完成預期目标！！

終于走到這裡，恭喜你，實現了預期目标！ 提醒大家，制作過程中，一定要注意命名。隻要按照步驟走，一定可以實現預期目标。

為什麼寫這篇文章，一開始在實現添加圖文的時候，以為同添加文字一樣，直接在添加行裡設置變量就可以，結果研究很久，并未實現。學習了網上其他前輩的經驗，運用這種背後的邏輯假象，一樣也可以實現我們的預期目标。

不過實現下來，大家可以發現，還是比較複雜的，一般情況下，咱們的原型裡不需要設計這麼複雜的交互滴。當然，多練幾次，也是分分鐘的事。

本文由 @娟姐 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!