什么是低代碼開發平臺？它的用處有多大呢 ？下面是筆者整理分享的關于低代碼平臺詳情頁設計的內容文章，其中包含頁面布局編輯器的設計討論、可視化體驗、標準組件、業務能力建設四個點的內容，想要了解的同學進來看看吧！

低代碼開發平臺是無需編碼或通過少量代碼就可以快速生成應用程序的開發平臺。通過可視化進行應用程序開發的方法。使用拖拽組件和模型驅動的邏輯來創建網頁和移動應用程序。

本文從平臺生態、用戶體驗、布局組件等方面，討論低代碼開發平臺的交互核心”頁面布局編輯器“，希望對你有所啟發。

低代碼開發平臺，通過可視化進行應用程序開發，實現任何人都可以擴展SaaS應用的范圍和功能的愿景。

低代碼開發平臺的可視化能力包含不限于：

• 列表數據可視化配置，即視圖設計，例如列表、級聯、卡片、日歷、看板、項目、GIS等。
• 詳情數據可視化配置，即頁面設計，例如頁頭、按鈕、字段、標簽頁、動態、協同等。
• 數據模型可視化配置，即建模設計，例如對象、字段、關系、數據驗證、數據表達式等。
• 數據分析可視化配置，即駕駛艙設計，例如聚合表、圖表組件、數據組件、篩選組件等。
• 業務流程可視化配置，即集成設計，例如觸發器、業務流、RPA流、數據連接器等。

一個標準的應用程序從原型定義到云端發布上線，至少需要經歷以上5個可視化配置環節。

接下來重點討論下，詳情數據可視化配置工具的產品實現，即“頁面布局編輯器”，希望對你有所幫助。

一、關于頁面布局編輯器的設計討論

一個現象，為什么現行的低代碼開發平臺，詳情頁都是表單設計驅動的？

數據的詳情頁就是表單嗎？什么樣的詳情頁可以滿足對業務數據的全覽？

表單設計與頁面設計，在用戶體驗、開發者體驗以及ISV服務協同上，都存在著較大差異。

表單設計更像Form表單頁，通過字段集提交業務數據，驅動的業務像是把Excel表的數據，按照對象模型與業務節點，業務實現上聚焦業務數據的結構化和流程化。

頁面設計更像應用詳情頁，通過多種頁面布局組件渲染業務數據，驅動的業務更像是圍繞業務數據的上下文呈現，對象模型按照布局組件分發，業務實現上更聚焦業務數據的用戶體驗。

二、頁面布局編輯器的可視化體驗

頁面布局編輯器，用于管理數據對象記錄頁面的布局。它控制按鈕、字段、自定義鏈接和用戶看到的相關記錄列表的布局和結構。

頁面布局編輯器從可視化體驗上包含：

• 配置頁面模板，包含頁面終端以及布局框架，例如有基礎、分欄、橫向、縱向等。
• 配置標準組件，包含緊湊布局、字段、選項卡、自定義按鈕和鏈接、數據動態等。
• 配置增強組件，包含文檔系統服務、數據分析服務、AI服務、RPA服務等。
• 配置自定義組件，自定義開發的布局組件或者從應用市場下載的三方布局組件。

目前市場上的低代碼開發平臺，都實現了標準組件的可視化配置，感興趣的同學可以自行配置體驗下。

三、頁面布局編輯器中的標準組件

1. 頁面緊湊布局

顯示業務對象中重要的信息字段，會在頁面頂部高亮顯示，例如顯示賬戶名稱、電話、行業、評級等。

2. 頁面信息字段

頁面布局中的數據源，大部分布局組件都需要和對象中的信息字段關聯。

通過字段組件，可以關聯業務數據對象中的所有字段，常見的字段類型有基礎字段和場景字段。

• 基礎字段類型有文本、圖片、編號、數值、日期、計算、選項、金額等。
• 場景字段類型有掃碼、簽名、拍照、3D、位置等，采集后需要有callback處理。

頁面布局時，也可以配置數據字段的顯示、數據字段的讀寫權限、級聯字段的數據關聯等。

3. 頁面選項卡

常見的頁面選項卡有關聯數據選項卡和詳情數據選項卡。

• 關聯選項卡，相關數據對象的列表數據查詢，定義列表的顯示字段和排序以及篩選規則。
• 詳情選項卡，當前數據對象的詳細數據查詢，定義詳情的顯示字段和布局排版。

通過選項卡組件，實現業務數據的上下文查詢，例如常見的主從表類型。

4、頁面流程卡

通過流程卡了解業務數據的進度狀態，例如CRM中的線索->機會->交易等。

配置時需要關聯業務對象中的狀態字段，同時定義狀態數據的時序，當發生狀態變更時，流程圖同步更新。

5、頁面自定義按鈕

頁面布局設計中的創意擔當，可以實現N多業務場景。

• 系統業務按鈕，例如新增、編輯、打印、復制、分享、導出等。
• 修改當前數據，例如同時修改2個或2個以上信息字段、變更數據狀態等。
• 寫入外部數據，例如快捷寫入其他業務對象的數據等。
• 跳轉網絡鏈接，例如跳轉工具型網站、跳轉外部應用網站等。
• 觸發事件行為，例如RPA流、發郵件、變更數據、寫入數據、IM信息等。

合理的運用自定義按鈕，是詳情頁的設計哲學，避免過度設計。

四、關于低代碼平臺的業務能力建設

低代碼開發平臺如何成為云生產力工具。

有效的業務生產力平臺，需要有可套的業務建設能力，低代碼平臺需要的三種能力：

1. 整合數據源的能力，異構數據源整合，為業務打造統一的客戶檔案。
2. 移動辦公的能力，跨終端應用，引導業務與客戶的互動是數字優先的。
3. 任務型應用的能力，任務型應用，協助業務做好客戶的關鍵交付節奏。

更多關于低代碼開發平臺的業務討論，可以參見上期 ”商業應用開發平臺“