起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure 教程：實現自主向中繼器添加圖文數據
雖說原型通常不需要做復雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。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協議
產品小白沒看懂復雜的交互設計，想從基礎開始學，卻無從下手？
?? 可以找Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：禮物
領取原型設計大禮包，還有不定期的Axure免費視頻課程分享，老師在線答疑，多學多看多思考，你也能成為Axure原型設計大牛哦~
求源文件