視覺化展示是什麼意思
低程式碼是一組數字技術工具平臺，基於圖形化拖拽、引數化配置等更為高效的方式，透過少量程式碼或不用程式碼實現數字化轉型中的場景應用創新，可以大大降低企業的開發成本。本文作者分享瞭如何在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 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。