【Axure教程】如何通過中繼器快速制作列表并進行刪除數(shù)據(jù)操作

0 評論 4880 瀏覽 16 收藏 6 分鐘
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

在使用Axure制作原型時,元件庫中的“中繼器”,可以做很多東西,但我們卻不太會使用它繪制一些高保真的原型。作者總結了如何使用中繼器制作后臺列表并進行刪除的操作方法,希望對你應用中繼器有所幫助。

很多小伙伴們在使用Axure制作原型時,經(jīng)常會看到元件庫中有一個元件【中繼器】,但是很多小伙伴不太會使用中繼器進行繪制一些高保真的原型。本期,我將帶領大家學習如何使用中繼器制作后臺列表并進行刪除的操作。

參考原型地址:https://zc9igp.axshare.com

話不多說,直接進入主題。

1、在空白面板中拖入一個空白矩形,接著從左側元件庫中選擇【中繼器】元件。

2、選中【中繼器】,在右側【樣式】中設置對應的字段名及數(shù)據(jù)內(nèi)容,如下圖所示(其中字段名及數(shù)據(jù)內(nèi)容均可根據(jù)實際需求進行調(diào)整)

3、在【中繼器】內(nèi)部拖入【矩形】元件,將每個矩形分別命名設置如下樣式,使其【矩形】元件對應中繼器中所設置的列名,其中第一個【矩形】和最后一個【矩形】可以不進行命名(此處可以先進行無腦模仿操作)。

4、選中【中繼器】,在左側交互中分別設置對應的【矩形】名稱,其中操作【值】時,選擇【Fx】–【插入變量或函數(shù)】,選擇【中繼器】中對應的列名。

5、分別設置完成之后,我們再針對【設備編號】這個文本設置特殊一點的值,如下圖右側交互所示,TG_[[Item.id+1000]]表示在每一行id數(shù)字的前面加上TG_,在id后面加(+10000),此時,列表中的設備編號則會生成如下圖【中繼器】的列展示。

6、接著我們對【中繼器】的列表上方拖拽【矩形】元件,編輯對應的列名并進行相應的美化,其中,中繼器的行與行之間的交替可以參考下圖所。操作到目前,【中繼器】的第一步基礎數(shù)據(jù)才剛設置完成,接著我們再繼續(xù)往下看。

7、在【中繼器】的最后一個矩形框內(nèi)加入文本“修改”、“刪除“,對【刪除】設置交互狀態(tài)【單擊時–刪除行–當前行】,此時,我們的中繼器的直接刪除效果就完成了。

8、接著,如果我們想要做一個點擊【刪除】時,做提醒彈窗,確認是否刪除,我們先添加一個彈窗設置,如下圖。

9、接著我們對彈窗進行隱藏設置,點擊【刪除】設置交互數(shù)據(jù)(由下圖右側數(shù)據(jù))。此時,已經(jīng)點擊刪除已經(jīng)可以調(diào)出刪除彈窗了。

10、接著,我們再對彈窗上的【刪除】做交互,使其刪除【中繼器】中的行信息。

11、最后,我們對刪除彈窗上的【取消】做交互(如下圖右側數(shù)據(jù)),這樣一個中繼器的刪除流程就已經(jīng)完成了

12、希望以上的【中繼器】的【刪除】操作可以幫助到大家,如有疑問,可以在下方留言喲,我會第一時間為大家解答,下一期,我將帶大家學習如何在【中繼器】中【新增】一條新的數(shù)據(jù)。

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

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
17454人已学习14篇文章
MVP是指开发团队通过提供最小化可行产品获取用户反馈,并在这个最小化可行产品上持续快速迭代,直到产品到达一个相对稳定的阶段。本专题的文章分享了如何做MVP产品。
专题
18207人已学习14篇文章
智能客服类产品,最根本的价值在于以低成本取代人工客服工作中大量重复性的部分。本专题的文章分享了如何搭建一个智能客服。
专题
142639人已学习32篇文章
做一个好运营,技术和意识都得过硬。
专题
15715人已学习12篇文章
本专题的文章分享了如何从0到1搭建结算平台
专题
35276人已学习18篇文章
借用别人家的经典案例,来扒一扒社交电商。
专题
12294人已学习13篇文章
本专题的文章分享了产品升级迭代应该怎么做,以及其中遇到的问题和思考。