雖說原型通常不需要做復(fù)雜的交互效果，但是有時(shí)候?yàn)榱私o客戶或開發(fā)更真實(shí)的表現(xiàn)出產(chǎn)品預(yù)期效果，比口頭或文檔描述的效果會(huì)好一些。
axure 中繼器可以幫我們做相同內(nèi)容的增刪改查處理效果，本文將實(shí)現(xiàn)自主向中繼器里添加圖文數(shù)據(jù)。
效果預(yù)覽
實(shí)現(xiàn)方法
分析，目標(biāo)是向左側(cè)信息列表里新增圖文數(shù)據(jù)。先要準(zhǔn)備一個(gè)中繼器作為為信息庫，再添加數(shù)據(jù)到中繼器里。
1）教師列表--設(shè)置中繼器
設(shè)置中繼器步驟：
-
1.添加中繼器到畫布，命名“教師庫”
a151884c-a3ed-4ea4-90c7-38d3e379f7d5.gif -
2.設(shè)置界面模型
雙擊中繼器，進(jìn)入中繼器，設(shè)置中繼器界面模型。
刪除中繼器自帶矩形元件，添加自己需要的元件，并分別對(duì)元件命名。本例如下圖，元件命名分別：頭像、姓名、級(jí)別、簡介。模版里的數(shù)據(jù)可改可不改，最終中繼器是從數(shù)據(jù)表里讀取數(shù)據(jù)。
退出（關(guān)閉）中繼器返回畫布，可以看到默認(rèn)展示里3條數(shù)據(jù)。接下來我們在樣式-數(shù)據(jù)里設(shè)置實(shí)際數(shù)據(jù)
-
3.添加中繼器數(shù)據(jù)
在樣式-數(shù)據(jù)里設(shè)置實(shí)際數(shù)據(jù)，每一行代表一條數(shù)據(jù)。每條數(shù)據(jù)有4個(gè)元件，添加4列并命名。頭像是圖片格式，需要右鍵導(dǎo)入圖片。本例添加兩條數(shù)據(jù)，如下圖
i
添加數(shù)據(jù)后，界面并未發(fā)生變化。因?yàn)榇藭r(shí)中繼器不知道你的數(shù)據(jù)表里的數(shù)據(jù)都代表什么，需要建立對(duì)應(yīng)關(guān)系，讓它知道圖片是哪個(gè)，名字是哪個(gè)。
-
4.讀取數(shù)據(jù)
設(shè)置交互-加載時(shí)的動(dòng)作：動(dòng)態(tài)讀取，因此是設(shè)置變量值
頭像-設(shè)置圖片：
姓名|級(jí)別|簡介--設(shè)置文本
image.png -
完成教師庫設(shè)置,如圖
2）添加教師區(qū)域
本例最終是想要實(shí)現(xiàn)，添加自己選擇和輸入的圖文數(shù)據(jù)到教師庫。因此，再設(shè)計(jì)一個(gè)添加教師的功能區(qū)（基礎(chǔ)元件，過程省略，注意命名），如圖
注意，添加教師頭像的元件是3個(gè)基礎(chǔ)圖片元件。（暫時(shí)未發(fā)現(xiàn)如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數(shù)據(jù)代替）
3）添加動(dòng)作
如何點(diǎn)擊「確認(rèn)添加」按鈕后，將右側(cè)的圖文信息添加到左側(cè)教師庫里并顯示？最終是向教師庫中繼器添加（行）數(shù)據(jù)，所以單機(jī)時(shí)要選擇中繼器添加行：添加中繼器頭像 為選中的圖片；添加中繼器姓名為「姓名文本框」文字；添加中繼器級(jí)別數(shù)據(jù)為「級(jí)別文本框」文字；添加中繼器簡介數(shù)據(jù)為「簡介文本框」文字；
1.添加文本
動(dòng)作：「確認(rèn)按鈕」單機(jī)時(shí)--中繼器--添加行
添加姓名（name）：
添加級(jí)別（state）、簡介（con）同添加姓名，過程略，結(jié)果如下
到這里已經(jīng)完成了添加文本數(shù)據(jù)到中繼器，預(yù)覽可實(shí)現(xiàn)。
2.添加圖片（本次案例實(shí)現(xiàn)目標(biāo)的關(guān)鍵點(diǎn)）
先把3個(gè)圖片元件右鍵導(dǎo)入圖片，作為教師頭像庫。
本例是要實(shí)現(xiàn)選擇其中的任意一張?zhí)砑?，因此點(diǎn)擊時(shí)，需要先判斷哪張圖片被選中。怎么判斷，先設(shè)置圖片在被選中時(shí)，設(shè)置相應(yīng)的全局變量，在添加時(shí)直接使用變量。
添加圖片選中交互如下圖，為了表現(xiàn)選中效果，添加了設(shè)置尺寸。
3張圖片分別需要設(shè)置不同的變量值1，2，3，另外注意設(shè)置尺寸注意互斥。
三張圖片需要選中（值）互斥，只能有一張被選中。選擇3張圖片，右鍵-選項(xiàng)組，并命名「頭像庫」，（注意不是組合哈）如下
此時(shí)，再回到確認(rèn)添加動(dòng)作：場景邏輯為，如果選中圖1，則添加圖1，即如果全局變量值mg_sel為1，則添加圖1。如果mg_sel為2，則添加圖2，如果mg_sel為3，則添加圖3。因此，這里需要添加情形，如下
設(shè)置3個(gè)情形，相應(yīng)的變量對(duì)應(yīng)在添加行里導(dǎo)入相應(yīng)的圖片，設(shè)置動(dòng)作結(jié)果如下
完成預(yù)期目標(biāo)?。?/h3>
終于走到這里，恭喜你，實(shí)現(xiàn)了預(yù)期目標(biāo)！
提醒大家，制作過程中，一定要注意命名。只要按照步驟走，一定可以實(shí)現(xiàn)預(yù)期目標(biāo)。
為什么寫這篇文章，開始在實(shí)現(xiàn)添加圖文的時(shí)候，以為同添加文字一樣，直接在添加行里設(shè)置變量就可以，結(jié)果研究很久，并未實(shí)現(xiàn)。學(xué)習(xí)了網(wǎng)上其他前輩的經(jīng)驗(yàn)，運(yùn)用這種背后的邏輯假象，一樣也可以實(shí)現(xiàn)我們的預(yù)期目標(biāo)。
不過實(shí)現(xiàn)下來，大家可以發(fā)現(xiàn)，還是比較復(fù)雜的，一般情況下，咱們的原型里不需要設(shè)計(jì)這么復(fù)雜的交互滴。當(dāng)然，多練幾次，也是分分鐘的事。
