一篇文章掌握中繼器的使用(附案例教程及原型下載)

分類:設計 時間:2016-09-24

在Axure中,中繼器可以與自建部件庫搭配著來使用,中繼器的優點是可以添加交互事件來實現想要的動效,缺點則是制作起來相對復雜。自建部件庫則能很好的解決這個缺點,因為可以將添加了交互事件的中繼器制作成自建部件,這樣就只需要復雜一次,以后在需要使用的時候就可以直接引用。

本文主要分為以下四部分,中繼器案例、中繼器是什么、中繼器的基本構成以及中繼器的案例實踐。

一.中繼器案例

中繼器是Axure中相對而言比較復雜的元件,上手難度相對較高,但是中繼器的功能也是比較強大的,除了可以直接進行復用和數據的批量操作,還可以對數據進行增加、刪除、篩選、修改等操作,掌握了中繼器之后,能夠做出很多我們常見的一些動效,先簡單的看幾個利用中繼器做出來的效果。

1. 簡單列表頁

下圖是利用中繼器做出來的一個列表頁,列表頁在App中使用的情況非常多,比如圖文列表(常見于各種App,如微信聊天列表、今日頭條列表、商品列表等)、文字列表(個人信息、地址、商品詳情)、二級列表菜單等。

ADVERTISEMENT

利用中繼器制作列表頁之后,可以將中繼器做成自建部件,這樣在進行列表頁創建的時候就能夠直接拿來復用,另外利用中繼器創建的列表頁也無需進行重復排版,直接在中繼器里修改數據即可。

2. 添加與刪除數據

下圖為一個數據列表的添加與刪除數據效果圖,在實際的使用中可能是某一列表的添加與刪除,比如用戶信息的添加與刪除、比如外賣的地址信息的添加與刪除等,除了純文本的添加與刪除,中繼器也能夠實現圖文列表的添加與刪除。

3. 排序與篩選

下圖為簡單的排序與篩選效果,Axure中繼器中支持日期、數字和文本的排序,篩選則需要使用函數,利用中繼器可以實現條件篩選的效果,比如在App中通過距離、價格、銷量等數據來進行篩選。

4. 分頁與頁面跳轉

分頁與切換是將列表頁進行分頁設置每頁顯示的數據量,然后進行上一頁、下一頁、首頁、尾頁等這些頁面之間的跳轉操作。

ADVERTISEMENT

5. 動態搜索

動態搜索在一些搜索的頁面用到的比較多,比如各種搜索框中都會通過關鍵字的匹配來實現動態的搜索,從而減少用戶的輸入,以達到更好的用戶體驗,在Axure中就可以利用中繼器實現這樣的效果。

看完中繼器的可以實現的一些動效之后,有沒有躍躍欲試,想直接嘗試的小伙伴可以直接跳到文章的中繼器案例實踐部分,接下來會先介紹一下中繼器相關的知識,最后才是中繼器案例實踐。

二.中繼器是什么

中繼器(英文名Repeater)是Axure RP 7.0推出的新功能,中繼器相當于程序開發中的小型數據庫,用于存放同種結構的數據,可對其中的數據進行刪除,增加與更新,以及根據設定好的條件對呈現的數據組進行過濾等操作,學習它的使用有助于我們快速設計一些復雜的交互界面。

ADVERTISEMENT

中繼器在Axure的默認部件庫里,拖入到操作區中之后顯示的是一個簡單3行表格,在中繼器外部無法對中繼器進行操作,雙擊后進入中繼器內部進行操作,中繼器內部的一個部件對應著外部元件的一個縱列,對單一部件進行修改,則會在中繼器外部的整個縱列產生修改。

三.中繼器的基本構成

中繼器主要分為數據集、交互、樣式三大部分

1. 數據集

數據集是中繼器的數據來源,可以通過在數據集中添加數據,然后將數據賦值給中繼器的具體元件來實現賦值的效果,如果需要在中繼器中添加圖像,點擊右鍵選擇【導入圖像】即可。如下圖所示,最上面是數據列的名稱,只支持英文命名,中間的部分是中繼器的數據,兩側分別是新增列與新增行。

一個元件的數據值會對應中繼器數據集中一列的數據,所以在命名的時候,最好將元件的名稱與中繼器數據集中的列的名稱保持一致,這樣在進行賦值的時候會比較方便,在上圖中可以看到我在對元件進行命名的時候,元件的名稱與中繼器數據集的列名稱是保持一致的。

ADVERTISEMENT

2. 交互

1)數據賦值

在中繼器的數據集中添加的數據,是不會自動填充到中繼器里的,需要在中繼器中添加交互之后,才會將數據集中數據賦值給具體的元件。具體賦值操作如下,在中繼器交互中的【每項加載時】添加用例,然后將中繼器中數據列的值,賦給具體的元件。

在【步驟1】中進行文本的設置,如果是設置圖像,則選擇設置圖像即可,如果說需要將文本進行其他的處理,比如字體、顏色等進行變更,則將【步驟4】中的值更換為富文本即可。

賦值后的結果如下圖所示,其中【刪除】操作是富文本,標題為單獨的元件,下方的紅線區域為中繼器部分。

2)添加交互

在中繼器中主要的交互分為兩大塊,一塊是針對中繼器整體的,一塊是關于數據集的,見下圖 :

可以看到在關于中繼器的部分中,有著排序、過濾、分頁這些功能,在關于中繼器中有著新增、標記、取消標記、更新、刪除行這些操作,相對來說這些操作比較簡單,稍微摸索一下就能夠掌握,就不贅述了。

3. 樣式

中繼器的樣式主要分為布局、背景、分頁、間距這些功能,布局就是選擇列表的縱向和橫向排列,以及每一列顯示幾個數據即換行,分頁功能則是將數據集中的數據進行分頁展示。例如數據集中有30行數據,設置每頁顯示3個,則能夠顯示10頁,稍微摸索一下就能夠掌握,不贅述。

四.中繼器案例實踐

1. 簡單列表頁

先在中繼器中選擇需要賦值的元件,將元件的名稱修改為自定義的名稱,然后在中繼器的數據集中添加需要的數據

添加完數據之后,將數據集中的數據賦值給相應的元件

最后實現的效果如下:

2. 添加與刪除數據

在添加與刪除數據中首先需要對中繼器進行賦值,前文已講述,不贅述,將中繼器賦值完之后,需要將個文本輸入框的值與中繼器中對應的列的數據進行綁定,然后在【添加】按鈕上添加交互事件“新增行到中繼器”,具體如下操作。

首先將輸入信息的輸入框進行命名,并且在中繼器的【每項加載時】里添加交互事件:

然后是將每個輸入框的值與中繼器中的列的值進行綁定,與中繼器的賦值非常相似,將輸入框的值賦值給中繼器的數據集:

最后在【添加】按鈕上新增交互事件,“點擊新增行至中繼器”,刪除操作需要在中繼器的內部添加交互事件,添加“刪除行從中繼器”。

3. 排序與篩選

排序與篩選都是在中繼器數據集添加好數據的基礎上的,選擇新增排序和篩選規則即可,至于重置,選擇移除排序或者篩選即可。

4. 分頁與頁面跳轉

在按鈕上添加交互事件,然后在中繼器的交互中添加分頁的設置即可實現中繼器的分頁效果,移除分頁之后,中繼器的顯示的內容就會恢復至原狀,在不同的按鈕上設置跳轉至不同的中繼器的頁數,就可以實現切換的效果。

5. 動態搜索

動態搜索相對而言會復雜一點,因為動態搜索用到了中繼器中的一些函數,首先在中繼器中填充相應的數據,然后將中繼器轉化為動態面板,并且將它進行隱藏,之后是在輸入框中添加交互事件“當文字長度改變時”觸發交互事件:

當觸發交互事件時,進行條件判斷:

如果輸入框內的文字長度大于等于1時,則新增過濾器:

新增局部變量,在數據集中截取0到輸入框內輸入的文字長度的數據,如果截取的數據值與文本輸入框中輸入的值相等,則顯示隱藏狀態下的中繼器:

如果截取的值與文本輸入框的值不相等,則隱藏中繼器。

以上就是最近關于中繼器使用的一些心得體會,還有很多中繼器的函數并不會使用,還有一些功能掌握的也不全面,望諸位不要見笑,歡迎斧正、指點、拍磚…

文中出現的案例的RP文件下載鏈接為: 點擊立刻下載!

關于我:王家郴,喜歡網球和騎行的產品汪。 公眾號(產品經理從0到1) ,每周都會在公眾號上寫點東西,歡迎關注,求指教、求分享、求交流。目前奔走在產品的道路上,漫漫產品路,與君共勉。


Tags: 設計

文章來源:http://www.chanpin100.com/article/101157



相關文章