對于B端設計師來說，極緻産品體驗是非常重要的。本篇文章中作者以“雲搭”在線系統生成平台設計為例進行說明，如何設計零代碼工具，感興趣的小夥伴們快來一起看看吧~

随着大環境正在發生的數字化轉型驅動生産方式的變革，“降本增效”變得異常尖銳。

作為B端設計師，在面對大量産品需求時，一方面需要通過精細化設計打造極緻産品體驗，另一方面也需要能将新興技術與設計結合，将自身設計能力系統化、工具化、最終智能化、降低設計專業門檻，去規模化解決産品的設計問題。

雲搭平台的建立意在助力集團産業化進程，解決企業級産品設計交付一緻性與效率的問題。

以“雲搭”在線系統生成平台設計為例進行說明，如何設計零代碼工具。

一、雲搭：零代碼平台

雲搭支持中後台系統、産品官網、文檔系統、可視化數據圖表等在線生成，節約産品、技術、設計資源，賦能B端産品應用搭建，提供一站式解決方案。

二、痛點分析

公司内部現行B端産品設計開發普遍存在的問題有以下三類分别是：

1. 協同成本高

産品、設計、技術、測試、針對産品最終上線需要反複溝通對焦及轉譯，接口溝通約定調試，前後端協同成本占整體研發成本的50%。

多角色，多流程，多團隊成本會成倍增加。

2. 研發效率低

B端系統頁面形式主要為表格、表單、數據、圖表、彈窗、抽屜等多種不同的組合構成。

頁面形式單一，導緻技術技術同學需要處理大量重複性代碼，效率低，質量參差不齊，維護成本高。傳統的低代碼開發平台專業性強，上手成本高。效率提升有限。

3. 交付産物不一緻

往往設計稿還原度較低，視覺效果不一緻，導緻體驗不一緻。同時頁面交付質量得不到保障，相同的視覺樣式不同的頁面邏輯可能出現不同的bug。

三、目标與定位

基于以上痛點雲搭設計之初緻力于打造面向産品、運營、設計、開發等多角色的系統在線生成平台，同時集成産品應用創建、配置、發布鍊路一體化的零代碼平台。

具體實踐的核心原則是：

• 以場景為中心：産品圍繞場景設計、研發圍繞場景搭建、API（API概念解釋）數據基于場景框架填充
• 以流水線式為出發點搭建全局最優生産模式：多角色一體化鍊路，非關鍵環節簡化，關鍵環節升級

四、如何設計

傳統低代碼平台主要的服務人群是專業技術人員，專業性強，有明顯的技術壁壘，雲搭零代碼平台主要想通過技術升級，降低使用門檻，擴大使用人群範圍，如産品、設計、後端研發以及普通小白用戶都可以輕松完成自己的需求。

這就要求我們在産品設計過程中，充分考慮界面表達的通用性，在流程上易上手，在文案上減少專業詞彙的出現，多用白話，減少歧義。

1. 流程管理

簡化流程/以場景為中心，産品圍繞場景設計，多角色一體化鍊路。

場景标準化沉澱（模版）：模版是将業務、設計、工程較好連接的重要方式。

模版需從設計系統化的原子理論出發，通過将原子級的組件按一定規則性組合成的大顆粒度物料。

我們按照頁面結構從組件-容器-區塊-頁面-場景進行依次拼裝最終形成産品設計方案。然後提取共性的布局及結構形成最終可以複用的模版。

模版強調的是按用戶浏覽行為、操作行為、業務語義将原子級組件進行拼裝組合。

日常系統頁面上線效果主要由設計師和前端開發共同完成。通過行業及業務積累，對标準場景/模版物料進行界面及代碼層沉澱，形成标準的場景/模版物料庫。

在B端業務中常見的頁面場景為：篩選列表頁、表單頁、圖表頁、詳情頁以及産品官網、文檔說明等場景。

以上場景中，除詳情頁因系統和業務不同差異性較大，其他場景都可以形成較為标準頁面結構進行視覺展現。

在創建應用後新建頁面過程中給予使用者不同的場景入口，使用者根據實際需要進行類别選擇，直接到達不同的畫布編輯界面進行界面編輯。入口如下圖

标準場景物料（模版）工具可讓一些例如産品經理及工程師等非專業設計從業者可以在模版基礎上，做一些文案、順序、圖形、圖片等内容調整就可以完成客戶研發訴求。

2. 畫布編輯

簡化組件、模塊配置項，通過對設計變量與常量的絕對約束，實現界面表達的一緻性

在這個過程中畫布的“拖拉拽”為使用者的核心場景。系統根據不同的場景入口，帶入不同的組件數據。通過對對應場景的可變量進行配置選擇，進行頁面搭建。

不同的場景匹配不同的模塊或組件

以篩選列表畫布模塊配置為例：

預設篩選列表所需的構成模塊，分别為篩選模塊、按鈕模塊、表格模塊、分頁器模塊，使用者可根據實際需要選擇保留哪些模塊，不同的模塊對應給出最簡單，最易理解配置項，供用戶簡單選擇即可完成頁面搭建。

以及官網模塊配置也是同理，相較于篩選列表場景，産品官網場景中的模塊視覺元素要更豐富，這裡需要設計師系統規劃其展現形式、可配置元素及配置元素的可适配性等。

這個過程需要充分考慮非本行業的從業者使用的體驗。降低各個環節的使用難度，才能真正提升産品使用體驗，才能更好的實現多角色鍊路一體化的目标。

将設計系統的理念與低代碼搭建技術融合，将元子組件物料變為可搭建組件庫，将設計語言變為搭建工具設置項，即可實現界面内容的可搭建。通過技術層可以基本實現對設計變量及常量的絕對約束，進而實現界面表達的一緻性。

3. 數據标準化

研發圍繞場景搭建，數據基于場景框架自動化填充，一鍵發布更簡單。

在數據層面，基于标準化的場景庫物料，搭配不同場景業務的數據源，進行數據标準化定制，即可實現相同場景适配不同業務的需求。極大的提升研發效率。

在應用發布環節，發布環節經過技術手段進行标準化黑盒化處理，無需任何數據配置，一鍵即可發布上線。使用者再也不用為排不到設計開發資源而煩惱了~

五、成果驗證

1. 業務覆蓋

使用方涵蓋公司内部的EIC、HRG、TEG、UXD、HBG等。

角色分别為産品、運營、設計以及後端開發。

2. 案例展示

• 官網類：58交易門戶、新營銷平台首頁、58公益基金門戶……
• 管理類：招聘簡曆獵狐平台、英才運營後台、Koala配置平台、品牌廣告配置管理……
• 文檔類：易銷頁面規範平台……

六、寫在最後

現如今設計已經進入工具化階段，工具開發客觀存在的設計理解門檻，需要自身積極融入産品開發的視角，了解業務，拓寬能力邊界，需要設計師更多思考和提升。

作為B端設計師我們需要思考設計如何讓工具和企業級産品交付流程結合起來。

以開放的心态迎接更多挑戰。以上内容結合自身工作經驗，以及部分資料文章參考。

如有思考不全的地方，歡迎評論區進行交流學習。

作者：劉學輝，楊哲，崔秉鑒，蘇梓希

來源公衆号：58UXD（ID：i58UXD），58UXD，全稱58同城用戶體驗設計中心。

本文由人人都是産品經理合作媒體 @58UXD 授權發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部