在工具類產(chǎn)品中，自定義編輯是一個(gè)很受歡迎的功能。但這個(gè)功能在Axure中實(shí)現(xiàn)的話會(huì)比較復(fù)雜，這篇文章，我們就來(lái)看看具體怎么操作。

自定義編輯頁(yè)面是一種非常常見的功能，因?yàn)樗试S用戶根據(jù)自己的需求和偏好來(lái)自定義頁(yè)面內(nèi)容的布局和展示。例如，在同一個(gè)頁(yè)面中，不同的用戶可能有著不同的需求和關(guān)注點(diǎn)。

一些用戶可能希望展示實(shí)時(shí)數(shù)據(jù)圖表，以便能夠快速查看關(guān)鍵業(yè)務(wù)指標(biāo)的變化趨勢(shì)，而另一些用戶可能更傾向于展示統(tǒng)計(jì)數(shù)據(jù)的報(bào)表或列表形式，方便他們獲取詳細(xì)的信息分析。自定義頁(yè)面編輯功能的核心在于提供靈活性和可擴(kuò)展性，讓用戶能夠根據(jù)自己的工作流程和偏好調(diào)整頁(yè)面的布局、內(nèi)容和交互方式。

所以今天我們就來(lái)學(xué)習(xí)怎么在Axure中制作自定義編輯頁(yè)面的效果，我們動(dòng)態(tài)編輯可視化分析頁(yè)面為案例，具體包括：

一、效果展示

1、可以拖動(dòng)左側(cè)圖片，松開鼠標(biāo)后，圖表會(huì)添加到鼠標(biāo)所在為止的方框中；

2、可以刪除不需要的方框，鼠標(biāo)移入方框后按delete鍵即可；

3、可以添加新的方框，點(diǎn)擊右上角添加按鈕添加即可；

二、制作教程

1、材料準(zhǔn)備

這里我們主要分開3部分內(nèi)容制作，分別是左側(cè)圖表選擇欄，右側(cè)方框，以及拖動(dòng)時(shí)圖表回顯的元件

1.1 左側(cè)圖表選擇欄

我們主要用中繼器來(lái)制作，在中繼器內(nèi)部添加圖片元件和文本標(biāo)簽，如下圖所示擺放

然后我們將他們組合后轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才有拖動(dòng)時(shí)的交互事件

中繼器表格我們需要增加3列內(nèi)容，分別是pic、pic1和text，pic和text分別對(duì)應(yīng)上面圖片（小圖標(biāo)）和文本標(biāo)簽，pic1對(duì)應(yīng)該圖標(biāo)所對(duì)應(yīng)的統(tǒng)計(jì)圖表的圖片。

鼠標(biāo)右鍵就可以導(dǎo)入對(duì)應(yīng)的圖片，填寫完中繼器表格后，我們要將pic列的圖片設(shè)置到圖片元件里、將text列的文本值設(shè)置到文本標(biāo)簽元件里。如果是Axure10或以上的，我們點(diǎn)擊中繼器里的鏈接按鈕，選擇對(duì)應(yīng)的元件，就自動(dòng)關(guān)聯(lián)上了；如果是axure9及以下的，我們就要在中繼器每項(xiàng)加載時(shí)用設(shè)置圖片和設(shè)置文本的交互將圖片和文本值設(shè)置到對(duì)應(yīng)元件上。

這樣左側(cè)選擇工具欄的材料就準(zhǔn)備完成了，如果中繼器里添加的元件比較多，整體高度會(huì)太長(zhǎng)，這時(shí)我們可以通過(guò)將整個(gè)中繼器轉(zhuǎn)為動(dòng)態(tài)面板，然后調(diào)出垂直滾動(dòng)條，然后調(diào)整面板顯示尺寸，這樣就可以通過(guò)鼠標(biāo)滾動(dòng)查看更多，如果不想看到滾動(dòng)條，可以再次轉(zhuǎn)為動(dòng)態(tài)面板，通過(guò)外面板遮擋內(nèi)面板的方式，隱藏滾動(dòng)條，但仍然有滾動(dòng)效果。

1.2 右側(cè)方框

右側(cè)方框我們也是用中繼器來(lái)制作，在中繼器里添加方框的素材和圖片元件，，如下圖所示擺放

中繼器表格里我們添加一列，pic列對(duì)應(yīng)方框內(nèi)顯示的圖片元件，如果默認(rèn)需要顯示圖片，我們就右鍵導(dǎo)入對(duì)應(yīng)圖片或者填寫圖片的線上鏈接地址；如果默認(rèn)不顯示圖片，就填寫空即可，需要幾個(gè)方框就填寫幾行。

然后我們要將pic列的圖片值設(shè)置到圖片元件中，這里和前面一樣，如果是Axure10或以上的，我們點(diǎn)擊中繼器里的鏈接按鈕，選擇圖片元件，就自動(dòng)關(guān)聯(lián)上了；如果是axure9及以下的，我們就要在中繼器每項(xiàng)加載時(shí)用設(shè)置圖片的交互，將pic列的值設(shè)置到圖片元件里。

在中繼器每項(xiàng)加載時(shí)，如果pic列的值為空，就是沒有圖片的情況下，我們就用隱藏的交互，將圖片隱藏，這樣就只會(huì)顯示方框。

1.3 拖動(dòng)時(shí)圖表回顯元件

這里我們只需要一個(gè)圖片元件即可，圖片大小和方框里的圖片一致，可以將圖片轉(zhuǎn)為動(dòng)態(tài)面板，面板默認(rèn)隱藏，后續(xù)作為拖動(dòng)顯示圖片的彈窗。

1.4 其他元件

最后我們還需要一個(gè)添加按鈕，用于后續(xù)增加方框。

2、交互制作

2.1 添加方框

鼠標(biāo)點(diǎn)擊添加按鈕時(shí)，我們用添加行的交互，對(duì)方框中繼器添加一行空行，這樣就會(huì)增加增加一個(gè)方框。

2.2 刪除方框

首先我們要知道需要?jiǎng)h除的是哪個(gè)方框，所以我們?cè)谑髽?biāo)移入方框組合時(shí)，用標(biāo)記行的交互，將鼠標(biāo)當(dāng)前所在的方框的所在行標(biāo)記起來(lái)，然后如果鍵盤按下delete鍵時(shí)，我們就用刪除行的交互，將已標(biāo)記的行刪除。如果鼠標(biāo)移出了方框，我們就要用取消標(biāo)記的交互，將標(biāo)記取消，不然刪除時(shí)，就會(huì)把鼠標(biāo)經(jīng)過(guò)的所有方框都刪除

2.3 拖動(dòng)工具欄的元件

拖動(dòng)工具欄里中繼器里的動(dòng)態(tài)面板，在開始拖動(dòng)時(shí)，我們先用設(shè)置圖片的交互，將拖動(dòng)動(dòng)態(tài)面板里所在行的pic1列的圖片值設(shè)置到動(dòng)態(tài)面板里對(duì)應(yīng)的圖片元件，然后用顯示的交互，將彈窗顯示，然后用移動(dòng)的交互，將彈窗的中心點(diǎn)移動(dòng)到鼠標(biāo)的指針位置，這里用cursor.x或y函數(shù)可以獲取指針的x和y坐標(biāo)值。

在拖動(dòng)的過(guò)程中，我們用移動(dòng)的交互，讓彈窗的中心點(diǎn)移動(dòng)到鼠標(biāo)的指針位置，這樣彈窗就會(huì)跟隨鼠標(biāo)移動(dòng)了，這里移動(dòng)的交互跟上面的交互是一樣的

2.4 將圖表放入指定方框

在拖動(dòng)結(jié)束松開鼠標(biāo)時(shí)，我們要做一個(gè)判斷，首先判斷判斷彈窗是否在方框中繼器里，如果不在，我們用隱藏的交互將彈窗隱藏就可以了；如果在中繼器的范圍里，我們就用更新行的交互，將左側(cè)工具欄拖動(dòng)元件對(duì)應(yīng)行的pic1列的值更新到方框中繼器對(duì)應(yīng)行的pic列值

這樣我們就完成了拖動(dòng)擺放自定義編輯頁(yè)面的制作，后續(xù)使用也很方便，默認(rèn)的元件在左側(cè)工具欄的中繼器表格里導(dǎo)入，預(yù)覽后即可自動(dòng)生交互效果。

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