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

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

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

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

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

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

一個標準的應用程序從原型定義到云端發(fā)布上線，至少需要經(jīng)歷以上5個可視化配置環(huán)節(jié)。

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

一、關(guān)于頁面布局編輯器的設(shè)計討論

一個現(xiàn)象，為什么現(xiàn)行的低代碼開發(fā)平臺，詳情頁都是表單設(shè)計驅(qū)動的？

數(shù)據(jù)的詳情頁就是表單嗎？什么樣的詳情頁可以滿足對業(yè)務數(shù)據(jù)的全覽？

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

表單設(shè)計更像Form表單頁，通過字段集提交業(yè)務數(shù)據(jù)，驅(qū)動的業(yè)務像是把Excel表的數(shù)據(jù)，按照對象模型與業(yè)務節(jié)點，業(yè)務實現(xiàn)上聚焦業(yè)務數(shù)據(jù)的結(jié)構(gòu)化和流程化。

頁面設(shè)計更像應用詳情頁，通過多種頁面布局組件渲染業(yè)務數(shù)據(jù)，驅(qū)動的業(yè)務更像是圍繞業(yè)務數(shù)據(jù)的上下文呈現(xiàn)，對象模型按照布局組件分發(fā)，業(yè)務實現(xiàn)上更聚焦業(yè)務數(shù)據(jù)的用戶體驗。

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

頁面布局編輯器，用于管理數(shù)據(jù)對象記錄頁面的布局。它控制按鈕、字段、自定義鏈接和用戶看到的相關(guān)記錄列表的布局和結(jié)構(gòu)。

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

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

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

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

1. 頁面緊湊布局

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

2. 頁面信息字段

頁面布局中的數(shù)據(jù)源，大部分布局組件都需要和對象中的信息字段關(guān)聯(lián)。

通過字段組件，可以關(guān)聯(lián)業(yè)務數(shù)據(jù)對象中的所有字段，常見的字段類型有基礎(chǔ)字段和場景字段。

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

頁面布局時，也可以配置數(shù)據(jù)字段的顯示、數(shù)據(jù)字段的讀寫權(quán)限、級聯(lián)字段的數(shù)據(jù)關(guān)聯(lián)等。

3. 頁面選項卡

常見的頁面選項卡有關(guān)聯(lián)數(shù)據(jù)選項卡和詳情數(shù)據(jù)選項卡。

• 關(guān)聯(lián)選項卡，相關(guān)數(shù)據(jù)對象的列表數(shù)據(jù)查詢，定義列表的顯示字段和排序以及篩選規(guī)則。
• 詳情選項卡，當前數(shù)據(jù)對象的詳細數(shù)據(jù)查詢，定義詳情的顯示字段和布局排版。

通過選項卡組件，實現(xiàn)業(yè)務數(shù)據(jù)的上下文查詢，例如常見的主從表類型。

4、頁面流程卡

通過流程卡了解業(yè)務數(shù)據(jù)的進度狀態(tài)，例如CRM中的線索->機會->交易等。

配置時需要關(guān)聯(lián)業(yè)務對象中的狀態(tài)字段，同時定義狀態(tài)數(shù)據(jù)的時序，當發(fā)生狀態(tài)變更時，流程圖同步更新。

5、頁面自定義按鈕

頁面布局設(shè)計中的創(chuàng)意擔當，可以實現(xiàn)N多業(yè)務場景。

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

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

四、關(guān)于低代碼平臺的業(yè)務能力建設(shè)

低代碼開發(fā)平臺如何成為云生產(chǎn)力工具。

有效的業(yè)務生產(chǎn)力平臺，需要有可套的業(yè)務建設(shè)能力，低代碼平臺需要的三種能力：

1. 整合數(shù)據(jù)源的能力，異構(gòu)數(shù)據(jù)源整合，為業(yè)務打造統(tǒng)一的客戶檔案。
2. 移動辦公的能力，跨終端應用，引導業(yè)務與客戶的互動是數(shù)字優(yōu)先的。
3. 任務型應用的能力，任務型應用，協(xié)助業(yè)務做好客戶的關(guān)鍵交付節(jié)奏。

更多關(guān)于低代碼開發(fā)平臺的業(yè)務討論，可以參見上期 ”商業(yè)應用開發(fā)平臺“

本文由 @這屆南京碼農(nóng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。