從0到1,讀懂低代碼平臺(tái)詳情頁設(shè)計(jì)

3 評(píng)論 2238 瀏覽 10 收藏 9 分鐘

什么是低代碼開發(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)用市場下載的三方布局組件。

目前市場上的低代碼開發(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ǔ)字段類型有文本、圖片、編號(hào)、數(shù)值、日期、計(jì)算、選項(xià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ù)場景。

  • 系統(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ù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. mark 總結(jié)的很不錯(cuò)

    來自山東 回復(fù)
    1. 3Q~

      來自江蘇 回復(fù)
  2. 通過低代碼開發(fā)平臺(tái),驅(qū)動(dòng)數(shù)字優(yōu)先的客戶互動(dòng)。

    來自江蘇 回復(fù)