雖說原型通常不需要做復(fù)雜的交互效果，但是有時候為了給客戶或開發(fā)更真實的表現(xiàn)出產(chǎn)品預(yù)期效果，比口頭或文檔描述的效果會好一些。axure 中繼器可以幫我們做相同內(nèi)容的增刪改查處理效果，本文將實現(xiàn)自主向中繼器里添加圖文數(shù)據(jù)。

效果預(yù)覽

預(yù)覽效果.gif

實現(xiàn)方法

分析，目標(biāo)是向左側(cè)信息列表里新增圖文數(shù)據(jù)。先要準備一個中繼器作為為信息庫，再添加數(shù)據(jù)到中繼器里。

第一步：教師列表–設(shè)置中繼器

設(shè)置中繼器步驟：

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

（2）設(shè)置界面模型

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

退出（關(guān)閉）中繼器返回畫布，可以看到默認展示里3條數(shù)據(jù)，接下來我們在樣式-數(shù)據(jù)里設(shè)置實際數(shù)據(jù)。

（3）添加中繼器數(shù)據(jù)

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

添加數(shù)據(jù)后，界面并未發(fā)生變化。因為此時中繼器不知道你的數(shù)據(jù)表里的數(shù)據(jù)都代表什么，需要建立對應(yīng)關(guān)系，讓它知道圖片是哪個，名字是哪個。

（4）讀取數(shù)據(jù)

設(shè)置交互-加載時的動作：動態(tài)讀取，因此是設(shè)置變量值。

頭像-設(shè)置圖片：

姓名 | 級別 ?| 簡介——設(shè)置文本：

完成教師庫設(shè)置，如圖：

第二步：添加教師區(qū)域

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

注意，添加教師頭像的元件是3個基礎(chǔ)圖片元件。（暫時未發(fā)現(xiàn)如何直接添加本地圖片到中繼器，因此本例直接用一組圖片數(shù)據(jù)代替）

第三步：添加動作

如何點擊「確認添加」按鈕后，將右側(cè)的圖文信息添加到左側(cè)教師庫里并顯示？

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

（1）添加文本

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

添加級別（state）、簡介（con）同添加姓名，過程略，結(jié)果如下：

到這里已經(jīng)完成了添加文本數(shù)據(jù)到中繼器，預(yù)覽可實現(xiàn)。

（2）添加圖片（本次案例實現(xiàn)目標(biāo)的關(guān)鍵點）

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

本例是要實現(xiàn)選擇其中的任意一張?zhí)砑?，因此點擊時，需要先判斷哪張圖片被選中。怎么判斷，先設(shè)置圖片在被選中時，設(shè)置相應(yīng)的全局變量，在添加時直接使用變量。 添加圖片選中交互如下圖，為了表現(xiàn)選中效果，添加了設(shè)置尺寸。3張圖片分別需要設(shè)置不同的變量值1，2，3，另外注意設(shè)置尺寸注意互斥。

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

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

設(shè)置3個情形，相應(yīng)的變量對應(yīng)在添加行里導(dǎo)入相應(yīng)的圖片，設(shè)置動作結(jié)果如下：

完成預(yù)期目標(biāo)！！

終于走到這里，恭喜你，實現(xiàn)了預(yù)期目標(biāo)！ 提醒大家，制作過程中，一定要注意命名。只要按照步驟走，一定可以實現(xiàn)預(yù)期目標(biāo)。

為什么寫這篇文章，一開始在實現(xiàn)添加圖文的時候，以為同添加文字一樣，直接在添加行里設(shè)置變量就可以，結(jié)果研究很久，并未實現(xiàn)。學(xué)習(xí)了網(wǎng)上其他前輩的經(jīng)驗，運用這種背后的邏輯假象，一樣也可以實現(xiàn)我們的預(yù)期目標(biāo)。

不過實現(xiàn)下來，大家可以發(fā)現(xiàn)，還是比較復(fù)雜的，一般情況下，咱們的原型里不需要設(shè)計這么復(fù)雜的交互滴。當(dāng)然，多練幾次，也是分分鐘的事。

本文由 @娟姐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議