"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
到這裡已經完成了添加文本數據到中繼器，預覽可實現。
（2）添加圖片（本次案例實現目標的關鍵點）
先把3個圖片元件右鍵導入圖片，作為教師頭像庫。
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
到這裡已經完成了添加文本數據到中繼器，預覽可實現。
（2）添加圖片（本次案例實現目標的關鍵點）
先把3個圖片元件右鍵導入圖片，作為教師頭像庫。
雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
到這裡已經完成了添加文本數據到中繼器，預覽可實現。
（2）添加圖片（本次案例實現目標的關鍵點）
先把3個圖片元件右鍵導入圖片，作為教師頭像庫。
本例是要實現選擇其中的任意一張添加，因此點擊時，需要先判斷哪張圖片被選中。怎麼判斷，先設置圖片在被選中時，設置相應的全局變量，在添加時直接使用變量。 添加圖片選中交互如下圖，為了表現選中效果，添加了設置尺寸。3張圖片分別需要設置不同的變量值1，2，3，另外注意設置尺寸注意互斥。
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內容的增刪改查處理效果，本文將實現自主向中繼器裡添加圖文數據。
效果預覽
預覽效果.gif
實現方法
分析，目標是向左側信息列表裡新增圖文數據。先要準備一箇中繼器作為為信息庫，再添加數據到中繼器裡。
第一步：教師列表–設置中繼器
設置中繼器步驟：
（1）添加中繼器到畫布，命名“教師庫”
（2）設置界面模型
雙擊中繼器，進入中繼器，設置中繼器界面模型。 刪除中繼器自帶矩形元件，添加自己需要的元件，並分別對元件命名。本例如下圖，元件命名分別：頭像、姓名、級別、簡介。模版裡的數據可改可不改，最終中繼器是從數據表裡讀取數據。
退出中繼器返回畫布，可以看到默認展示裡3條數據，接下來我們在樣式-數據裡設置實際數據。
（3）添加中繼器數據
在樣式-數據裡設置實際數據，每一行代表一條數據，每條數據有4個元件，添加4列並命名。頭像是圖片格式，需要右鍵導入圖片。本例添加兩條數據，如下圖：
添加數據後，界面並未發生變化。因為此時中繼器不知道你的數據表裡的數據都代表什麼，需要建立對應關係，讓它知道圖片是哪個，名字是哪個。
（4）讀取數據
設置交互-加載時的動作：動態讀取，因此是設置變量值。
頭像-設置圖片：
姓名 | 級別 | 簡介——設置文本：
完成教師庫設置，如圖：
第二步：添加教師區域
本例最終是想要實現，添加自己選擇和輸入的圖文數據到教師庫。因此，再設計一個添加教師的功能區（基礎元件，過程省略，注意命名），如圖：
注意，添加教師頭像的元件是3個基礎圖片元件。（暫時未發現如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數據代替）
第三步：添加動作
如何點擊「確認添加」按鈕後，將右側的圖文信息添加到左側教師庫裡並顯示？
最終是向教師庫中繼器添加（行）數據，所以單機時要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級別數據為「級別文本框」文字；添加中繼器簡介數據為「簡介文本框」文字。
（1）添加文本
動作：「確認按鈕」單機時–中繼器–添加行 添加姓名（name）：
添加級別（state）、簡介（con）同添加姓名，過程略，結果如下：
到這裡已經完成了添加文本數據到中繼器，預覽可實現。
（2）添加圖片（本次案例實現目標的關鍵點）
先把3個圖片元件右鍵導入圖片，作為教師頭像庫。
本例是要實現選擇其中的任意一張添加，因此點擊時，需要先判斷哪張圖片被選中。怎麼判斷，先設置圖片在被選中時，設置相應的全局變量，在添加時直接使用變量。 添加圖片選中交互如下圖，為了表現選中效果，添加了設置尺寸。3張圖片分別需要設置不同的變量值1，2，3，另外注意設置尺寸注意互斥。
三張圖片需要選中（值）互斥，只能有一張被選中。選擇3張圖片，右鍵-選項組，並命名「頭像庫」，（注意不是組合哈）如下：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。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。因此，這裡需要添加情形，如下：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。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個情形，相應的變量對應在添加行裡導入相應的圖片，設置動作結果如下：
"雖說原型通常不需要做複雜的交互效果，但是有時候為了給客戶或開發更真實的表現出產品預期效果，比口頭或文檔描述的效果會好一些。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協議
"