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

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

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

低代碼開發(fā)平臺(tái)，通過可視化進(jìn)行應(yīng)用程序開發(fā)，實(shí)現(xiàn)任何人都可以擴(kuò)展SaaS應(yīng)用的范圍和功能的愿景。

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

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

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

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

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

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

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

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

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

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

二、頁面布局編輯器的可視化體驗(yàn)

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

頁面布局編輯器從可視化體驗(yàn)上包含：

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

目前市場(chǎng)上的低代碼開發(fā)平臺(tái)，都實(shí)現(xiàn)了標(biāo)準(zhǔn)組件的可視化配置，感興趣的同學(xué)可以自行配置體驗(yàn)下。

三、頁面布局編輯器中的標(biāo)準(zhǔn)組件

1. 頁面緊湊布局

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

2. 頁面信息字段

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

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

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

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

3. 頁面選項(xiàng)卡

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

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

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

4、頁面流程卡

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

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

5、頁面自定義按鈕

頁面布局設(shè)計(jì)中的創(chuàng)意擔(dān)當(dāng)，可以實(shí)現(xiàn)N多業(yè)務(wù)場(chǎng)景。

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

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

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

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

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

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

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

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

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

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