零代碼搭建系統(tǒng),教你拓寬B端設(shè)計新邊界

0 評論 5437 瀏覽 12 收藏 12 分鐘

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

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

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

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

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

一、云搭:零代碼平臺

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

二、痛點分析

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

1. 協(xié)同成本高

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

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

2. 研發(fā)效率低

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

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

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

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

三、目標與定位

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

具體實踐的核心原則是:

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

四、如何設(shè)計

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

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

1. 流程管理

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

場景標準化沉淀(模版):模版是將業(yè)務(wù)、設(shè)計、工程較好連接的重要方式。

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

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

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

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

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

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

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

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

2. 畫布編輯

簡化組件、模塊配置項,通過對設(shè)計變量與常量的絕對約束,實現(xiàn)界面表達的一致性

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

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

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

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

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

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

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

3. 數(shù)據(jù)標準化

研發(fā)圍繞場景搭建,數(shù)據(jù)基于場景框架自動化填充,一鍵發(fā)布更簡單。

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

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

五、成果驗證

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

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

角色分別為產(chǎn)品、運營、設(shè)計以及后端開發(fā)。

2. 案例展示

  • 官網(wǎng)類:58交易門戶、新營銷平臺首頁、58公益基金門戶……
  • 管理類:招聘簡歷獵狐平臺、英才運營后臺、Koala配置平臺、品牌廣告配置管理……
  • 文檔類:易銷頁面規(guī)范平臺……

六、寫在最后

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

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

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

如有思考不全的地方,歡迎評論區(qū)進行交流學習。

作者:劉學輝,楊哲,崔秉鑒,蘇梓希

來源公眾號:58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗設(shè)計中心。

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

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!