Axure 教程:實現(xiàn)自主向中繼器添加圖文數(shù)據(jù)
雖說原型通常不需要做復(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é)議
產(chǎn)品小白沒看懂復(fù)雜的交互設(shè)計,想從基礎(chǔ)開始學(xué),卻無從下手?
?? 可以找Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:禮物
領(lǐng)取原型設(shè)計大禮包,還有不定期的Axure免費視頻課程分享,老師在線答疑,多學(xué)多看多思考,你也能成為Axure原型設(shè)計大牛哦~
求源文件