低代碼是一組數(shù)字技術(shù)工具平臺(tái)，基于圖形化拖拽、參數(shù)化配置等更為高效的方式，通過(guò)少量代碼或不用代碼實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型中的場(chǎng)景應(yīng)用創(chuàng)新，可以大大降低企業(yè)的開(kāi)發(fā)成本。本文作者分享了如何在Axure中制作一個(gè)低代碼可視化編輯器的原型模板的教程，一起來(lái)學(xué)習(xí)一下吧。

低代碼是一組數(shù)字技術(shù)工具平臺(tái)，基于圖形化拖拽、參數(shù)化配置等更為高效的方式，通過(guò)少量代碼或不用代碼實(shí)現(xiàn)數(shù)字化轉(zhuǎn)型中的場(chǎng)景應(yīng)用創(chuàng)新。例如在業(yè)務(wù)系統(tǒng)中，如果企業(yè)新增了一項(xiàng)業(yè)務(wù)，以往往往需要對(duì)系統(tǒng)繼續(xù)開(kāi)發(fā)和升級(jí)，但是有了低代碼可視化開(kāi)發(fā)的方法后，就可以由業(yè)務(wù)人員在系統(tǒng)中增加新業(yè)務(wù)的流程、審批、配置。大大降低了企業(yè)的開(kāi)發(fā)成本。

所以今天作者就教大家在Axure中制作一個(gè)低代碼可視化編輯器的原型模板。

一、效果展示

1、添加控件——點(diǎn)擊對(duì)應(yīng)控件，可以在主頁(yè)內(nèi)容中增加對(duì)應(yīng)的控件；

2、修改內(nèi)容——添加控件后，點(diǎn)擊控件，可以在控件屬性中修改不同控件的內(nèi)容；

3、刪除內(nèi)容——如果添加錯(cuò)誤控件，可以點(diǎn)擊該控件的關(guān)閉按鈕，就可以刪除該控件。

二、制作教程

低代碼可視化編輯器主要分成3部分的內(nèi)容，左側(cè)是添加控件，中部是頁(yè)面內(nèi)容，右側(cè)是控件屬性。

1. 添加控件

左側(cè)添加控件欄，相當(dāng)于一個(gè)菜單欄，我們可以在里面選擇添加需要的控件。因?yàn)樽髠?cè)控件基本都是由文字和圖標(biāo)組成，我們用中繼器制作會(huì)比較方便。

1）制作材料

中繼器，圖片和文本標(biāo)簽。

將圖片和文本標(biāo)簽組合在一起，然后放置在中繼器里，文字顏色和填充顏色根據(jù)實(shí)際需要設(shè)置，也可以適當(dāng)增加移入變色的樣式。

中繼器表格里需要兩列，type就是元件的類(lèi)型，對(duì)應(yīng)文本標(biāo)簽，pic就是圖標(biāo)，對(duì)應(yīng)圖片元件。

案例中增加了13種常用的元件，分別為單行輸入框、多行輸入框、數(shù)字輸入框、密碼輸入框、月份選擇器、日期選擇器、時(shí)間選擇器、單選按鈕組、多選按鈕組、下拉列表、文件上傳、評(píng)分控件、滑動(dòng)滑塊，你們也可以根據(jù)實(shí)際需要增加或刪除。

2）交互設(shè)置

在中繼器每項(xiàng)加載時(shí)，我們要用設(shè)置文本和設(shè)置圖片的交互，將type和pic列的值設(shè)置圖片和文本標(biāo)簽的元件里。Axure10以下的要用這兩個(gè)交互設(shè)置，如果是Axure10版本的，可以直接點(diǎn)擊中繼器里的連接，選擇對(duì)應(yīng)的元件即可。

鼠標(biāo)單擊文本標(biāo)簽和圖片的組合時(shí)，即點(diǎn)擊選擇了該元件，我們用添加行的交互，將當(dāng)前行元件的信息傳遞到頁(yè)面內(nèi)容中部的中繼器。這里你們也可以用拖動(dòng)事件，增加判斷條件，當(dāng)拖動(dòng)到指定位置時(shí)才增加，這里作者為了方便就做在鼠標(biāo)單擊時(shí)。你們可以根據(jù)自己需要的效果來(lái)設(shè)置。

2. 頁(yè)面內(nèi)容

前面鼠標(biāo)點(diǎn)擊元件時(shí)，對(duì)應(yīng)元件的組合就會(huì)在該區(qū)域顯示出來(lái)，所以我們這一塊的內(nèi)容要用中繼器來(lái)制作

1）制作材料

中繼器、文本標(biāo)簽、關(guān)閉按鈕、對(duì)應(yīng)的元件、背景矩形。

這里我們要把文本標(biāo)簽和對(duì)應(yīng)的元件放在動(dòng)態(tài)面板里，有多少個(gè)元件就復(fù)制多少個(gè)動(dòng)態(tài)面板，動(dòng)態(tài)面板里每個(gè)狀態(tài)的名稱(chēng)和中繼器type里的名稱(chēng)一致，并且在里面放置對(duì)應(yīng)的元件，案例中包括了13種常用的元件，分別為單行輸入框、多行輸入框、數(shù)字輸入框、密碼輸入框、月份選擇器、日期選擇器、時(shí)間選擇器、單選按鈕組、多選按鈕組、下拉列表、文件上傳、評(píng)分控件、滑動(dòng)滑塊，所以我們要?jiǎng)討B(tài)面板里應(yīng)該要有13個(gè)對(duì)應(yīng)的狀態(tài)。

中繼器表格里只需要有type一列，對(duì)應(yīng)左側(cè)元件中繼器的type，上面提到鼠標(biāo)單擊左側(cè)元件組合時(shí)，通過(guò)新增行的交互，將type列的值傳遞過(guò)來(lái)。后續(xù)我們通過(guò)交互，就可以顯示對(duì)應(yīng)的元件。

一般默認(rèn)內(nèi)容為空的話，我們中繼器表格里就不填寫(xiě)數(shù)據(jù)。

注意，考慮到如果添加的元件太多，就會(huì)有一個(gè)長(zhǎng)頁(yè)面，所以我們可以通過(guò)把中繼器轉(zhuǎn)為動(dòng)態(tài)面板增加滾動(dòng)條，同時(shí)可以用設(shè)置錨點(diǎn)的交互，這樣可以在新增元件的時(shí)候，將頁(yè)面滾動(dòng)到最下方，就是最新的位置。

2）交互設(shè)置

中繼器沒(méi)每項(xiàng)加載時(shí)，我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到狀態(tài)面和type列的值對(duì)應(yīng)的頁(yè)面。

鼠標(biāo)單擊關(guān)閉按鈕時(shí)，我們用刪除行的交互，將當(dāng)前行的內(nèi)容刪除。然后再用隱藏的交互，將右側(cè)的元件屬性的組合隱藏。

鼠標(biāo)單擊中繼器內(nèi)組合時(shí)，我們做一個(gè)高亮變色的效果，這樣就知道選中了該行內(nèi)容，所以我們要先把背景矩形設(shè)置選中樣式，設(shè)置單選組，因?yàn)樵谥欣^器內(nèi)部，所以記得要勾選隔離列表質(zhì)檢的選項(xiàng)組。設(shè)置完成后，在鼠標(biāo)單擊中繼器內(nèi)組合添加設(shè)置選中的交互，將背景矩形選中，這樣就可以完成變色效果了。

當(dāng)背景矩形被選中時(shí)，我們先用顯示的交互，將右側(cè)元件屬性的組合顯示，并且用設(shè)置面板狀態(tài)的交互，讓右側(cè)元件屬性顯示對(duì)應(yīng)頁(yè)面的內(nèi)容。

3. 元件屬性

元件屬性分成兩部分內(nèi)容，統(tǒng)一必填的內(nèi)容，已經(jīng)各個(gè)元件獨(dú)立的內(nèi)容，必填的內(nèi)容包括想標(biāo)題文字，是否為必填項(xiàng)。

獨(dú)立的內(nèi)容就要根據(jù)各個(gè)元件的屬性，例如輸入框就包括提示文字，下拉列表就包括了選項(xiàng)信息，上傳控件就包括了限制上傳的數(shù)量和文件大小……

大家根據(jù)不同的元件的獨(dú)立屬性，將他們放在同一個(gè)面板里不同的狀態(tài)頁(yè)面里，這里狀態(tài)名也是要和type列里每行的值一一對(duì)應(yīng)，有多少個(gè)元件類(lèi)型就增加多少個(gè)狀態(tài)頁(yè)面，案例中包括了13種常用的元件，分別為單行輸入框、多行輸入框、數(shù)字輸入框、密碼輸入框、月份選擇器、日期選擇器、時(shí)間選擇器、單選按鈕組、多選按鈕組、下拉列表、文件上傳、評(píng)分控件、滑動(dòng)滑塊，你們也可以根據(jù)實(shí)際需要增加或刪除。

上面頁(yè)面內(nèi)容中講到了鼠標(biāo)單擊元件背景就會(huì)被選中，高亮變色，所以右側(cè)元件屬性就會(huì)顯示出來(lái)，并且根據(jù)type的值來(lái)設(shè)置顯示對(duì)應(yīng)的面板狀態(tài)，我們就可以在里面填寫(xiě)該元件對(duì)應(yīng)的信息。那么填寫(xiě)完成后，考慮到下一個(gè)元件的使用，就是說(shuō)一個(gè)頁(yè)面會(huì)同時(shí)存在幾個(gè)相同的元件，例如有一個(gè)愛(ài)好的下拉列表，也有一個(gè)性別的下拉列表。因?yàn)橛疫呍傩允峭ㄓ玫?，所以我們要做一個(gè)重置的操作，不然就會(huì)影響到其他元件屬性的編輯。

所以這里我們用簡(jiǎn)單暴力的方式來(lái)解決，我們用設(shè)置文本的交互，將元件屬性里的內(nèi)容設(shè)置為初始值。

這個(gè)是最快捷的方式，更好的方式是，在頁(yè)面內(nèi)容中繼器表格里增加對(duì)應(yīng)的列，將元件的屬性記錄到中繼器表格里，這樣點(diǎn)擊選中的時(shí)候，將對(duì)應(yīng)的值傳遞到對(duì)應(yīng)的元件即可，這樣會(huì)更加高保真和實(shí)際。由于我做的時(shí)候時(shí)間優(yōu)先，所以就用了第一種方法，設(shè)置為初始值，感興趣的同學(xué)也可以用第二種方法來(lái)制作。

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