對(duì)于B端設(shè)計(jì)師來(lái)說(shuō)，極致產(chǎn)品體驗(yàn)是非常重要的。本篇文章中作者以“云搭”在線系統(tǒng)生成平臺(tái)設(shè)計(jì)為例進(jìn)行說(shuō)明，如何設(shè)計(jì)零代碼工具，感興趣的小伙伴們快來(lái)一起看看吧~

隨著大環(huán)境正在發(fā)生的數(shù)字化轉(zhuǎn)型驅(qū)動(dòng)生產(chǎn)方式的變革，“降本增效”變得異常尖銳。

作為B端設(shè)計(jì)師，在面對(duì)大量產(chǎn)品需求時(shí)，一方面需要通過(guò)精細(xì)化設(shè)計(jì)打造極致產(chǎn)品體驗(yàn)，另一方面也需要能將新興技術(shù)與設(shè)計(jì)結(jié)合，將自身設(shè)計(jì)能力系統(tǒng)化、工具化、最終智能化、降低設(shè)計(jì)專業(yè)門(mén)檻，去規(guī)?；鉀Q產(chǎn)品的設(shè)計(jì)問(wèn)題。

云搭平臺(tái)的建立意在助力集團(tuán)產(chǎn)業(yè)化進(jìn)程，解決企業(yè)級(jí)產(chǎn)品設(shè)計(jì)交付一致性與效率的問(wèn)題。

以“云搭”在線系統(tǒng)生成平臺(tái)設(shè)計(jì)為例進(jìn)行說(shuō)明，如何設(shè)計(jì)零代碼工具。

一、云搭：零代碼平臺(tái)

云搭支持中后臺(tái)系統(tǒng)、產(chǎn)品官網(wǎng)、文檔系統(tǒng)、可視化數(shù)據(jù)圖表等在線生成，節(jié)約產(chǎn)品、技術(shù)、設(shè)計(jì)資源，賦能B端產(chǎn)品應(yīng)用搭建，提供一站式解決方案。

二、痛點(diǎn)分析

公司內(nèi)部現(xiàn)行B端產(chǎn)品設(shè)計(jì)開(kāi)發(fā)普遍存在的問(wèn)題有以下三類分別是：

1. 協(xié)同成本高

產(chǎn)品、設(shè)計(jì)、技術(shù)、測(cè)試、針對(duì)產(chǎn)品最終上線需要反復(fù)溝通對(duì)焦及轉(zhuǎn)譯，接口溝通約定調(diào)試，前后端協(xié)同成本占整體研發(fā)成本的50%。

多角色，多流程，多團(tuán)隊(duì)成本會(huì)成倍增加。

2. 研發(fā)效率低

B端系統(tǒng)頁(yè)面形式主要為表格、表單、數(shù)據(jù)、圖表、彈窗、抽屜等多種不同的組合構(gòu)成。

頁(yè)面形式單一，導(dǎo)致技術(shù)技術(shù)同學(xué)需要處理大量重復(fù)性代碼，效率低，質(zhì)量參差不齊，維護(hù)成本高。傳統(tǒng)的低代碼開(kāi)發(fā)平臺(tái)專業(yè)性強(qiáng)，上手成本高。效率提升有限。

3. 交付產(chǎn)物不一致

往往設(shè)計(jì)稿還原度較低，視覺(jué)效果不一致，導(dǎo)致體驗(yàn)不一致。同時(shí)頁(yè)面交付質(zhì)量得不到保障，相同的視覺(jué)樣式不同的頁(yè)面邏輯可能出現(xiàn)不同的bug。

三、目標(biāo)與定位

基于以上痛點(diǎn)云搭設(shè)計(jì)之初致力于打造面向產(chǎn)品、運(yùn)營(yíng)、設(shè)計(jì)、開(kāi)發(fā)等多角色的系統(tǒng)在線生成平臺(tái)，同時(shí)集成產(chǎn)品應(yīng)用創(chuàng)建、配置、發(fā)布鏈路一體化的零代碼平臺(tái)。

具體實(shí)踐的核心原則是：

• 以場(chǎng)景為中心：產(chǎn)品圍繞場(chǎng)景設(shè)計(jì)、研發(fā)圍繞場(chǎng)景搭建、API（API概念解釋）數(shù)據(jù)基于場(chǎng)景框架填充
• 以流水線式為出發(fā)點(diǎn)搭建全局最優(yōu)生產(chǎn)模式：多角色一體化鏈路，非關(guān)鍵環(huán)節(jié)簡(jiǎn)化，關(guān)鍵環(huán)節(jié)升級(jí)

四、如何設(shè)計(jì)

傳統(tǒng)低代碼平臺(tái)主要的服務(wù)人群是專業(yè)技術(shù)人員，專業(yè)性強(qiáng)，有明顯的技術(shù)壁壘，云搭零代碼平臺(tái)主要想通過(guò)技術(shù)升級(jí)，降低使用門(mén)檻，擴(kuò)大使用人群范圍，如產(chǎn)品、設(shè)計(jì)、后端研發(fā)以及普通小白用戶都可以輕松完成自己的需求。

這就要求我們?cè)诋a(chǎn)品設(shè)計(jì)過(guò)程中，充分考慮界面表達(dá)的通用性，在流程上易上手，在文案上減少專業(yè)詞匯的出現(xiàn)，多用白話，減少歧義。

1. 流程管理

簡(jiǎn)化流程/以場(chǎng)景為中心，產(chǎn)品圍繞場(chǎng)景設(shè)計(jì)，多角色一體化鏈路。

場(chǎng)景標(biāo)準(zhǔn)化沉淀（模版）：模版是將業(yè)務(wù)、設(shè)計(jì)、工程較好連接的重要方式。

模版需從設(shè)計(jì)系統(tǒng)化的原子理論出發(fā)，通過(guò)將原子級(jí)的組件按一定規(guī)則性組合成的大顆粒度物料。

我們按照頁(yè)面結(jié)構(gòu)從組件-容器-區(qū)塊-頁(yè)面-場(chǎng)景進(jìn)行依次拼裝最終形成產(chǎn)品設(shè)計(jì)方案。然后提取共性的布局及結(jié)構(gòu)形成最終可以復(fù)用的模版。

模版強(qiáng)調(diào)的是按用戶瀏覽行為、操作行為、業(yè)務(wù)語(yǔ)義將原子級(jí)組件進(jìn)行拼裝組合。

日常系統(tǒng)頁(yè)面上線效果主要由設(shè)計(jì)師和前端開(kāi)發(fā)共同完成。通過(guò)行業(yè)及業(yè)務(wù)積累，對(duì)標(biāo)準(zhǔn)場(chǎng)景/模版物料進(jìn)行界面及代碼層沉淀，形成標(biāo)準(zhǔn)的場(chǎng)景/模版物料庫(kù)。

在B端業(yè)務(wù)中常見(jiàn)的頁(yè)面場(chǎng)景為：篩選列表頁(yè)、表單頁(yè)、圖表頁(yè)、詳情頁(yè)以及產(chǎn)品官網(wǎng)、文檔說(shuō)明等場(chǎng)景。

以上場(chǎng)景中，除詳情頁(yè)因系統(tǒng)和業(yè)務(wù)不同差異性較大，其他場(chǎng)景都可以形成較為標(biāo)準(zhǔn)頁(yè)面結(jié)構(gòu)進(jìn)行視覺(jué)展現(xiàn)。

在創(chuàng)建應(yīng)用后新建頁(yè)面過(guò)程中給予使用者不同的場(chǎng)景入口，使用者根據(jù)實(shí)際需要進(jìn)行類別選擇，直接到達(dá)不同的畫(huà)布編輯界面進(jìn)行界面編輯。入口如下圖

標(biāo)準(zhǔn)場(chǎng)景物料（模版）工具可讓一些例如產(chǎn)品經(jīng)理及工程師等非專業(yè)設(shè)計(jì)從業(yè)者可以在模版基礎(chǔ)上，做一些文案、順序、圖形、圖片等內(nèi)容調(diào)整就可以完成客戶研發(fā)訴求。

2. 畫(huà)布編輯

簡(jiǎn)化組件、模塊配置項(xiàng)，通過(guò)對(duì)設(shè)計(jì)變量與常量的絕對(duì)約束，實(shí)現(xiàn)界面表達(dá)的一致性

在這個(gè)過(guò)程中畫(huà)布的“拖拉拽”為使用者的核心場(chǎng)景。系統(tǒng)根據(jù)不同的場(chǎng)景入口，帶入不同的組件數(shù)據(jù)。通過(guò)對(duì)對(duì)應(yīng)場(chǎng)景的可變量進(jìn)行配置選擇，進(jìn)行頁(yè)面搭建。

不同的場(chǎng)景匹配不同的模塊或組件

以篩選列表畫(huà)布模塊配置為例：

預(yù)設(shè)篩選列表所需的構(gòu)成模塊，分別為篩選模塊、按鈕模塊、表格模塊、分頁(yè)器模塊，使用者可根據(jù)實(shí)際需要選擇保留哪些模塊，不同的模塊對(duì)應(yīng)給出最簡(jiǎn)單，最易理解配置項(xiàng)，供用戶簡(jiǎn)單選擇即可完成頁(yè)面搭建。

以及官網(wǎng)模塊配置也是同理，相較于篩選列表場(chǎng)景，產(chǎn)品官網(wǎng)場(chǎng)景中的模塊視覺(jué)元素要更豐富，這里需要設(shè)計(jì)師系統(tǒng)規(guī)劃其展現(xiàn)形式、可配置元素及配置元素的可適配性等。

這個(gè)過(guò)程需要充分考慮非本行業(yè)的從業(yè)者使用的體驗(yàn)。降低各個(gè)環(huán)節(jié)的使用難度，才能真正提升產(chǎn)品使用體驗(yàn)，才能更好的實(shí)現(xiàn)多角色鏈路一體化的目標(biāo)。

將設(shè)計(jì)系統(tǒng)的理念與低代碼搭建技術(shù)融合，將元子組件物料變?yōu)榭纱罱ńM件庫(kù)，將設(shè)計(jì)語(yǔ)言變?yōu)榇罱üぞ咴O(shè)置項(xiàng)，即可實(shí)現(xiàn)界面內(nèi)容的可搭建。通過(guò)技術(shù)層可以基本實(shí)現(xiàn)對(duì)設(shè)計(jì)變量及常量的絕對(duì)約束，進(jìn)而實(shí)現(xiàn)界面表達(dá)的一致性。

3. 數(shù)據(jù)標(biāo)準(zhǔn)化

研發(fā)圍繞場(chǎng)景搭建，數(shù)據(jù)基于場(chǎng)景框架自動(dòng)化填充，一鍵發(fā)布更簡(jiǎn)單。

在數(shù)據(jù)層面，基于標(biāo)準(zhǔn)化的場(chǎng)景庫(kù)物料，搭配不同場(chǎng)景業(yè)務(wù)的數(shù)據(jù)源，進(jìn)行數(shù)據(jù)標(biāo)準(zhǔn)化定制，即可實(shí)現(xiàn)相同場(chǎng)景適配不同業(yè)務(wù)的需求。極大的提升研發(fā)效率。

在應(yīng)用發(fā)布環(huán)節(jié)，發(fā)布環(huán)節(jié)經(jīng)過(guò)技術(shù)手段進(jìn)行標(biāo)準(zhǔn)化黑盒化處理，無(wú)需任何數(shù)據(jù)配置，一鍵即可發(fā)布上線。使用者再也不用為排不到設(shè)計(jì)開(kāi)發(fā)資源而煩惱了~

五、成果驗(yàn)證

1. 業(yè)務(wù)覆蓋

使用方涵蓋公司內(nèi)部的EIC、HRG、TEG、UXD、HBG等。

角色分別為產(chǎn)品、運(yùn)營(yíng)、設(shè)計(jì)以及后端開(kāi)發(fā)。

2. 案例展示

• 官網(wǎng)類：58交易門(mén)戶、新?tīng)I(yíng)銷(xiāo)平臺(tái)首頁(yè)、58公益基金門(mén)戶……
• 管理類：招聘簡(jiǎn)歷獵狐平臺(tái)、英才運(yùn)營(yíng)后臺(tái)、Koala配置平臺(tái)、品牌廣告配置管理……
• 文檔類：易銷(xiāo)頁(yè)面規(guī)范平臺(tái)……

六、寫(xiě)在最后

現(xiàn)如今設(shè)計(jì)已經(jīng)進(jìn)入工具化階段，工具開(kāi)發(fā)客觀存在的設(shè)計(jì)理解門(mén)檻，需要自身積極融入產(chǎn)品開(kāi)發(fā)的視角，了解業(yè)務(wù)，拓寬能力邊界，需要設(shè)計(jì)師更多思考和提升。

作為B端設(shè)計(jì)師我們需要思考設(shè)計(jì)如何讓工具和企業(yè)級(jí)產(chǎn)品交付流程結(jié)合起來(lái)。

以開(kāi)放的心態(tài)迎接更多挑戰(zhàn)。以上內(nèi)容結(jié)合自身工作經(jīng)驗(yàn)，以及部分資料文章參考。

如有思考不全的地方，歡迎評(píng)論區(qū)進(jìn)行交流學(xué)習(xí)。

作者：劉學(xué)輝，楊哲，崔秉鑒，蘇梓希

來(lái)源公眾號(hào)：58UXD（ID：i58UXD），58UXD，全稱58同城用戶體驗(yàn)設(shè)計(jì)中心。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @58UXD 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。

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