低代碼是一組數字技術工具平台，基于圖形化拖拽、參數化配置等更為高效的方式，通過少量代碼或不用代碼實現數字化轉型中的場景應用創新，可以大大降低企業的開發成本。本文作者分享了如何在Axure中制作一個低代碼可視化編輯器的原型模闆的教程，一起來學習一下吧。

　　低代碼是一組數字技術工具平台，基于圖形化拖拽、參數化配置等更為高效的方式，通過少量代碼或不用代碼實現數字化轉型中的場景應用創新。例如在業務系統中，如果企業新增了一項業務，以往往往需要對系統繼續開發和升級，但是有了低代碼可視化開發的方法後，就可以由業務人員在系統中增加新業務的流程、審批、配置。大大降低了企業的開發成本。

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

　　一、效果展示 1、添加控件——點擊對應控件，可以在主頁内容中增加對應的控件；

　　2、修改内容——添加控件後，點擊控件，可以在控件屬性中修改不同控件的内容；

　　3、删除内容——如果添加錯誤控件，可以點擊該控件的關閉按鈕，就可以删除該控件。

　　二、制作教程 低代碼可視化編輯器主要分成3部分的内容，左側是添加控件，中部是頁面内容，右側是控件屬性。

　　1. 添加控件

　　左側添加控件欄，相當于一個菜單欄，我們可以在裡面選擇添加需要的控件。因為左側控件基本都是由文字和圖标組成，我們用中繼器制作會比較方便。

　　1）制作材料

　　中繼器，圖片和文本标簽。

　　将圖片和文本标簽組合在一起，然後放置在中繼器裡，文字顔色和填充顔色根據實際需要設置，也可以适當增加移入變色的樣式。

　　中繼器表格裡需要兩列，type就是元件的類型，對應文本标簽，pic就是圖标，對應圖片元件。

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

　　2）交互設置

　　在中繼器每項加載時，我們要用設置文本和設置圖片的交互，将type和pic列的值設置圖片和文本标簽的元件裡。Axure10以下的要用這兩個交互設置，如果是Axure10版本的，可以直接點擊中繼器裡的連接，選擇對應的元件即可。

　　鼠标單擊文本标簽和圖片的組合時，即點擊選擇了該元件，我們用添加行的交互，将當前行元件的信息傳遞到頁面内容中部的中繼器。這裡你們也可以用拖動事件，增加判斷條件，當拖動到指定位置時才增加，這裡作者為了方便就做在鼠标單擊時。你們可以根據自己需要的效果來設置。

　　2. 頁面内容

　　前面鼠标點擊元件時，對應元件的組合就會在該區域顯示出來，所以我們這一塊的内容要用中繼器來制作

　　1）制作材料

　　中繼器、文本标簽、關閉按鈕、對應的元件、背景矩形。

　　這裡我們要把文本标簽和對應的元件放在動态面闆裡，有多少個元件就複制多少個動态面闆，動态面闆裡每個狀态的名稱和中繼器type裡的名稱一緻，并且在裡面放置對應的元件，案例中包括了13種常用的元件，分别為單行輸入框、多行輸入框、數字輸入框、密碼輸入框、月份選擇器、日期選擇器、時間選擇器、單選按鈕組、多選按鈕組、下拉列表、文件上傳、評分控件、滑動滑塊，所以我們要動态面闆裡應該要有13個對應的狀态。

　　中繼器表格裡隻需要有type一列，對應左側元件中繼器的type，上面提到鼠标單擊左側元件組合時，通過新增行的交互，将type列的值傳遞過來。後續我們通過交互，就可以顯示對應的元件。

　　一般默認内容為空的話，我們中繼器表格裡就不填寫數據。

　　注意，考慮到如果添加的元件太多，就會有一個長頁面，所以我們可以通過把中繼器轉為動态面闆增加滾動條，同時可以用設置錨點的交互，這樣可以在新增元件的時候，将頁面滾動到最下方，就是最新的位置。

　　2）交互設置

　　中繼器沒每項加載時，我們用設置面闆狀态的交互，将動态面闆設置到狀态面和type列的值對應的頁面。

　　鼠标單擊關閉按鈕時，我們用删除行的交互，将當前行的内容删除。然後再用隐藏的交互，将右側的元件屬性的組合隐藏。

　　鼠标單擊中繼器内組合時，我們做一個高亮變色的效果，這樣就知道選中了該行内容，所以我們要先把背景矩形設置選中樣式，設置單選組，因為在中繼器内部，所以記得要勾選隔離列表質檢的選項組。設置完成後，在鼠标單擊中繼器内組合添加設置選中的交互，将背景矩形選中，這樣就可以完成變色效果了。

　　當背景矩形被選中時，我們先用顯示的交互，将右側元件屬性的組合顯示，并且用設置面闆狀态的交互，讓右側元件屬性顯示對應頁面的内容。

　　3. 元件屬性

　　元件屬性分成兩部分内容，統一必填的内容，已經各個元件獨立的内容，必填的内容包括想标題文字，是否為必填項。

　　獨立的内容就要根據各個元件的屬性，例如輸入框就包括提示文字，下拉列表就包括了選項信息，上傳控件就包括了限制上傳的數量和文件大小……

　　大家根據不同的元件的獨立屬性，将他們放在同一個面闆裡不同的狀态頁面裡，這裡狀态名也是要和type列裡每行的值一一對應，有多少個元件類型就增加多少個狀态頁面，案例中包括了13種常用的元件，分别為單行輸入框、多行輸入框、數字輸入框、密碼輸入框、月份選擇器、日期選擇器、時間選擇器、單選按鈕組、多選按鈕組、下拉列表、文件上傳、評分控件、滑動滑塊，你們也可以根據實際需要增加或删除。

　　上面頁面内容中講到了鼠标單擊元件背景就會被選中，高亮變色，所以右側元件屬性就會顯示出來，并且根據type的值來設置顯示對應的面闆狀态，我們就可以在裡面填寫該元件對應的信息。那麼填寫完成後，考慮到下一個元件的使用，就是說一個頁面會同時存在幾個相同的元件，例如有一個愛好的下拉列表，也有一個性别的下拉列表。因為右邊元件屬性是通用的，所以我們要做一個重置的操作，不然就會影響到其他元件屬性的編輯。

　　所以這裡我們用簡單暴力的方式來解決，我們用設置文本的交互，将元件屬性裡的内容設置為初始值。

　　這個是最快捷的方式，更好的方式是，在頁面内容中繼器表格裡增加對應的列，将元件的屬性記錄到中繼器表格裡，這樣點擊選中的時候，将對應的值傳遞到對應的元件即可，這樣會更加高保真和實際。由于我做的時候時間優先，所以就用了第一種方法，設置為初始值，感興趣的同學也可以用第二種方法來制作。

　　以上就是本期教程的全部内容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。

　　本文由 @AI産品人 原創發布于人人都是産品經理，未經許可，禁止轉載

　　題圖來自 Unsplash，基于 CC0 協議

　　該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

　　,