賬單列表和詳情頁是用戶了解財(cái)務(wù)狀況與交易跟蹤的關(guān)鍵工具，有助于提高支付安全性、解決問題以及滿足法律和財(cái)務(wù)要求。本文教大家如何在Axure里制作一個(gè)賬單列表和詳情的原型模板，希望對(duì)你有所幫助。

賬單列表和詳情頁在支付系統(tǒng)中不僅是用戶了解財(cái)務(wù)狀況和跟蹤交易的關(guān)鍵工具，還有助于提高支付安全性、解決問題以及滿足法律和財(cái)務(wù)要求。因此，設(shè)計(jì)一個(gè)清晰、易用且功能豐富的賬單管理系統(tǒng)對(duì)于支付系統(tǒng)的成功運(yùn)營和用戶滿意度至關(guān)重要。

今天作者就教大家如何在Axure里制作一個(gè)賬單列表和詳情的原型模板，本次教程主要是通過中繼器制作伸縮賬單和詳情頁。

一、效果展示

• 伸縮列表：可以按照月份展開或收起該月份的賬單
• 自動(dòng)統(tǒng)計(jì)：根據(jù)每個(gè)月的賬單，自動(dòng)統(tǒng)計(jì)出總支出和總收入的金額
• 查看詳情：點(diǎn)擊賬單，可以查看該賬單的詳情
• 數(shù)據(jù)維護(hù)：賬單數(shù)據(jù)在中繼器表格里維護(hù)

二、制作教程

我們需要制作三個(gè)頁面，第一個(gè)是賬單列表的頁面，第二個(gè)是賬單詳情的支付頁面，第三個(gè)是賬單詳情的收款頁面。

1. 賬單列表

賬單列表我們主要是通過中繼器制作的，主要元件包括圖片（頭像）和文本標(biāo)簽（標(biāo)題、時(shí)間、金額），具體樣式可以根據(jù)個(gè)人需要設(shè)置，擺放如下圖所示

中繼器表格我們以下幾列：

ID：訂單的唯一ID，后續(xù)用于在詳細(xì)頁里顯示對(duì)應(yīng)的訂單詳情

picture：對(duì)應(yīng)中繼器里的圖片元件，右鍵導(dǎo)入圖片即可

type：對(duì)應(yīng)標(biāo)題，填了文字內(nèi)容接口，例如掃碼-給張三

price：對(duì)應(yīng)價(jià)格，如果是收入用+表示，如果是支出用-號(hào)表示

datetime：收款的具體時(shí)間

中繼器每項(xiàng)加載時(shí)，我們要把中繼器表格里的值設(shè)置到對(duì)應(yīng)的元件里，如果是axure10的話，直接點(diǎn)擊連接按鈕，選擇對(duì)應(yīng)元件即可；如果是axure8、9，就要設(shè)置文本和設(shè)置圖片的交互，將值設(shè)置到對(duì)應(yīng)的元件里。

這樣賬單列表主題的內(nèi)容我們就完成了。

接下來我們制作展開和收起效果，這里我們用到動(dòng)態(tài)面板，里面包含兩個(gè)狀態(tài)，展開和未展開。未展開包括文本標(biāo)簽、背景矩形和箭頭制作而成，這三個(gè)我們組合命名為統(tǒng)計(jì)組合。如下圖所示：

已展開狀態(tài)我們除了需要統(tǒng)計(jì)組合外，我們還要把剛剛制作好的賬單中繼器放在里面，箭頭方向調(diào)整為向上。

鼠標(biāo)點(diǎn)擊展開狀態(tài)里的統(tǒng)計(jì)組合時(shí)，我們用設(shè)置面板狀態(tài)的交互，將面板設(shè)置到未展開的狀態(tài)，如果下方有其他元件，或者多個(gè)組合組成的頁面，我們要勾選推動(dòng)或拉起下方元件。

鼠標(biāo)點(diǎn)擊未展開狀態(tài)里的統(tǒng)計(jì)組合時(shí)也是一樣，我們用設(shè)置面板狀態(tài)的交互，將面板設(shè)置到展開的狀態(tài)。

接下來我們只做統(tǒng)計(jì)支出和收入的合計(jì)數(shù)，我們先新增支出和收入兩個(gè)文本標(biāo)簽用于記錄和統(tǒng)計(jì)，默認(rèn)值為0。

中繼器每項(xiàng)加載時(shí)，如果price列的值少于0，就是只支出值，我們用設(shè)置文本的交互，將支出的文本設(shè)置為它原來的值+price列的值。

然后我們想讓列表里支出的金額變成黑色文本，我們用設(shè)置文本里富文本的交互，將他設(shè)置為黑色即可。

如果price列的值大于0，就是只收入值，我們用設(shè)置文本的交互，將收入的文本設(shè)置為它原來的值+price列的值。

在加載到最后一行的時(shí)候，我們用設(shè)置文本的交互，將收入和支出的總值設(shè)置到統(tǒng)計(jì)的文本里即可。

因?yàn)閯?dòng)態(tài)面板有兩個(gè)狀態(tài)，所以另外一個(gè)統(tǒng)計(jì)收入和支出也是一樣的方法獲取即可。

鼠標(biāo)單擊賬單時(shí)，我們要根據(jù)price值來判斷，如果price的值小于0，就是打開支付頁面，否則就打開收入頁面。在打開頁面之前，我們要把ID列的訂單號(hào)的值，設(shè)置到全局變量里保存。

完成后，我們將上面的動(dòng)態(tài)面板根據(jù)需求復(fù)制粘貼，修改中繼器表格里面的賬單數(shù)據(jù)，這樣我們就完成了伸縮賬單列表的頁面了。

2. 賬單詳情支付頁面

這個(gè)頁面我們也是用中繼器來制作，因?yàn)橹欣^器表格里能保存很多信息，主要元件包括圖片和文本標(biāo)簽，如小圖所示擺放，你們也可以根據(jù)需要增加或減少賬單詳情的信息。

中繼器表格里如下：

jiaoyidanhao：這個(gè)就是和前面賬單中繼器里的ID值對(duì)應(yīng)；

pic圖片：和前面賬單中繼器里的pic值對(duì)應(yīng)；

name：和前面賬單中繼器里的type值對(duì)應(yīng)；

price：和前面賬單中繼器里的price值對(duì)應(yīng)；

datetime：和前面賬單中繼器里的price值對(duì)應(yīng)；

前面幾列的內(nèi)容其實(shí)和賬單列表中繼器里的是一樣的，這里只填寫支出部分的數(shù)據(jù)。

后面幾列是支付狀態(tài)、類型、收款單位、收款機(jī)構(gòu)、清算機(jī)構(gòu)等內(nèi)容，填寫完成即可。

中繼器每項(xiàng)加載時(shí)，我們要把中繼器表格里的值設(shè)置到對(duì)應(yīng)的元件里，如果是axure10的話，直接點(diǎn)擊連接按鈕，選擇對(duì)應(yīng)元件即可；如果是axure8、9，就要設(shè)置文本和設(shè)置圖片的交互，將值設(shè)置到對(duì)應(yīng)的元件里。

最后我們要根據(jù)全局變量的值，就是前面?zhèn)鬟^來的訂單ID，顯示對(duì)應(yīng)行的內(nèi)容。所以在中繼器載入時(shí)，我們用篩選的交互，對(duì)中繼器進(jìn)行篩選，篩選條件為jiaoyidanhao列的值等于全局變量dingdanID。

這樣我們就完成賬單詳情支付頁面了。

3. 賬單詳情收入頁面

其實(shí)收入頁面和支付頁面的原理是一樣的，只不過顯示的內(nèi)容不同，所以我們要分開兩個(gè)頁面來制作。

主要元件包括圖片和文本標(biāo)簽，如小圖所示擺放，你們也可以根據(jù)需要增加或減少賬單詳情的信息。

中繼器表格里如下：

jiaoyidanhao：這個(gè)就是和前面賬單中繼器里的ID值對(duì)應(yīng)；

pic圖片：和前面賬單中繼器里的pic值對(duì)應(yīng)；

name：和前面賬單中繼器里的type值對(duì)應(yīng)；

price：和前面賬單中繼器里的price值對(duì)應(yīng)；

datetime：和前面賬單中繼器里的price值對(duì)應(yīng)；

前面幾列的內(nèi)容其實(shí)和賬單列表中繼器里的是一樣的，這里只填寫收入部分的數(shù)據(jù)。

后面幾列是支付狀態(tài)、支付賬號(hào)、支付機(jī)構(gòu)、清算機(jī)構(gòu)、收款時(shí)間等內(nèi)容，填寫完成即可。

中繼器每項(xiàng)加載時(shí)，我們要把中繼器表格里的值設(shè)置到對(duì)應(yīng)的元件里，如果是axure10的話，直接點(diǎn)擊連接按鈕，選擇對(duì)應(yīng)元件即可；如果是axure8、9，就要設(shè)置文本和設(shè)置圖片的交互，將值設(shè)置到對(duì)應(yīng)的元件里。

最后我們也是根據(jù)全局變量的值，就是前面?zhèn)鬟^來的訂單ID，顯示對(duì)應(yīng)行的內(nèi)容。所以在中繼器載入時(shí)，我們用篩選的交互，對(duì)中繼器進(jìn)行篩選，篩選條件為jiaoyidanhao列的值等于全局變量dingdanID。

這樣我們就完成了賬單列表和賬單詳情頁面原型模板的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫好對(duì)應(yīng)內(nèi)容，即可自動(dòng)生成交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。