B端內(nèi)容配置場景下的組件化設(shè)計(jì)思考

B端內(nèi)容配置場景下的組件化設(shè)計(jì)思考對(duì)于跨端產(chǎn)品，有些設(shè)計(jì)師會(huì)集中精力關(guān)注C端的設(shè)計(jì)，而對(duì)B端的文句配置部分則比較輕視。而當(dāng)C端用戶看到配置得亂七八糟的內(nèi)容時(shí)，卻不會(huì)覺得這是B端用戶的鍋，只會(huì)吐槽產(chǎn)品設(shè)計(jì)本身不合理，作為跨端產(chǎn)品設(shè)計(jì)師，應(yīng)該為完整的全鏈路體驗(yàn)負(fù)責(zé)。對(duì)于很多內(nèi)容型產(chǎn)品，C后端用戶見到的界面里，有相當(dāng)這部分并非直接出自設(shè)計(jì)師之手，而是B端的商家、運(yùn)營們配置的結(jié)果，而如果沒有對(duì)B端用戶的信息內(nèi)容配置進(jìn)行合理的規(guī)范約束、引導(dǎo)和審核，讓其自由發(fā)揮的話，最終在C端的呈現(xiàn)清晰度將完全不可控，影響到產(chǎn)品的重復(fù)使用全面性視覺印象和使用體驗(yàn)。我目前負(fù)責(zé)的一塊業(yè)務(wù)在這方面就存在現(xiàn)時(shí)比較嚴(yán)重的遺留問題，這個(gè)業(yè)務(wù)的主要模式是商家和運(yùn)營在B端發(fā)布帶薪任務(wù)，C端用戶申領(lǐng)和完成任務(wù)來賺取薪酬。而業(yè)務(wù)的B端任務(wù)配置等環(huán)節(jié)目前幾乎沒有任何約束可言，比如內(nèi)部信息展示區(qū)域，B端用戶隨便找個(gè)第三方編輯器寫好HTML內(nèi)容再往配置表單里一扔，就直接呈現(xiàn)給YC端用戶，于是各種千奇百怪的字號(hào)、配色、對(duì)齊等問題紛紛出現(xiàn)。除YC端的展示效果失控以外，B端編輯的代碼門檻（需要一定HTML和JSON基礎(chǔ)）、大量數(shù)據(jù)重復(fù)編輯題目的低效等問題，對(duì)B端用戶本身也很不友好，影響到B端未來向更多外部商家開放的可行性。在這樣的環(huán)境問題背景下，我們?cè)谥匦略O(shè)計(jì)B端整體的任務(wù)發(fā)布流程時(shí)，對(duì)其中任務(wù)配置（包括信息展示與題目）這個(gè)關(guān)鍵一環(huán)進(jìn)行了重點(diǎn)優(yōu)化，基于組件化的設(shè)計(jì)思路，完整走查已有和另一方面的業(yè)務(wù)業(yè)務(wù)發(fā)展用例，從中抽象出適用于各種業(yè)務(wù)場景、可靈活拼裝組合的可視化組件/模塊，并約束好最終映射到C端的樣式規(guī)范，達(dá)到降低B端配置門檻和進(jìn)行規(guī)范C端呈現(xiàn)效果的兩大設(shè)計(jì)目標(biāo)。因?yàn)楣芾順I(yè)務(wù)場景很多、橫跨PC/移動(dòng)兩個(gè)平臺(tái)，涉及到敏感性的背后邏輯也很復(fù)雜性，在適配業(yè)務(wù)場景時(shí)還要考慮到兼容性、技術(shù)可行性等，設(shè)計(jì)經(jīng)歷了一波三折的靠近碰撞才接近定稿，以下就具體講講我對(duì)內(nèi)容配置場景下的進(jìn)行組件化設(shè)計(jì)過程中遇到的挑戰(zhàn)和思考。復(fù)雜多元的并不大管理業(yè)務(wù)場景是對(duì)于組件化設(shè)計(jì)較大的挑戰(zhàn)之一，為此我們花了一段時(shí)間體驗(yàn)C端各種類型的線上任務(wù)、收集用戶反饋截圖等，并在前端和運(yùn)營的幫助下出了相對(duì)完整的用例列表，除此之外也結(jié)合和業(yè)務(wù)方了解到的后期擴(kuò)展計(jì)劃，將還未開發(fā)上線的潛在新業(yè)務(wù)場景納入一并考慮。這個(gè)過程會(huì)耗費(fèi)一定時(shí)長，但卻是組件化設(shè)計(jì)前期非常的步驟，直接影響到組件的影響面和由涅恩可擴(kuò)展性。在業(yè)務(wù)用例收集到一定程度后，開始對(duì)內(nèi)容維度自上而下分層自下而上進(jìn)行歸納，抽象出各類展示/題目組件，和多種不同組件的構(gòu)成、樣式與附加邏輯（有點(diǎn)類似HTML、CSS和JS的關(guān)系），對(duì)信息結(jié)構(gòu)逐漸形成清晰的理解。

在不同維度的內(nèi)容層級(jí)梳理清楚后，便基于此搭建B端配置頁面的提前布局框架，這個(gè)過程讓步驟從毫無重點(diǎn)優(yōu)先級(jí)（比如在一個(gè)文檔表單里同時(shí)混雜了構(gòu)成、樣式與邏輯相關(guān)的配置項(xiàng)，低頻的邏輯操作出現(xiàn)在前置顯眼位置）變?yōu)樽陨隙聦訉舆f進(jìn)（激活框架-添加組件-插入構(gòu)成元素-更改樣式-設(shè)置附加邏輯），關(guān)聯(lián)信息配置的聯(lián)動(dòng)映射關(guān)系也更清楚?；谑崂沓鰜淼慕M件樣式類型與邏輯配置重新整理十項(xiàng)，又可以進(jìn)一步定義映射到C端組件的視覺與交互規(guī)范，而B端用戶只能基于規(guī)范已有的內(nèi)容沒法進(jìn)行有限的選擇（比如定義某段文本屬于「標(biāo)題樣式」還是「正文樣式」），不能隨心所欲造形地自定義控制樣式（如隨意更改文本的字號(hào)、顏色）等。前面梳理內(nèi)容層級(jí)時(shí)，構(gòu)成部分我拆成了常量（手動(dòng)輸入的數(shù)據(jù)）和變量（本地上傳的數(shù)據(jù)），而變量這個(gè)概念運(yùn)算子的引入則和大量級(jí)（1K+、1W+）數(shù)據(jù)導(dǎo)入的業(yè)務(wù)場景緊密相關(guān)。舉個(gè)例子，如果1個(gè)B端手機(jī)用戶想通過任務(wù)發(fā)放收集1000條不同文本五條的語音朗讀數(shù)據(jù)庫，如果沒有變量（本地上傳的數(shù)據(jù)）的概念，就意味著他需要手動(dòng)選擇或復(fù)制1000次文本朗讀組件，而每次更改的只有朗讀對(duì)象這一個(gè)字段。但如果選擇從本地導(dǎo)入這1000條文本的表中數(shù)據(jù)歸口并統(tǒng)一命名為變量text，編輯朗讀對(duì)象時(shí)插入這個(gè)叫text的變量，則只需要編輯1次腳注朗讀組件就夠了，系統(tǒng)會(huì)根據(jù)變量值的個(gè)數(shù)自動(dòng)生成1000個(gè)任務(wù)發(fā)放給C端用戶，大大提升了任務(wù)配置管理效率。這里對(duì)于設(shè)計(jì)的挑戰(zhàn)在于怎么讓選擇和插入變量的過程更直觀、易用。在產(chǎn)品之前的配置流程里，是通過讓用戶輸入$content.image或者一類的字符串來實(shí)現(xiàn)變量的插入，這個(gè)過程自學(xué)存在一定的學(xué)習(xí)成本（為了區(qū)隔于普通輸入文本，字符串的格式通常需要設(shè)計(jì)得比較復(fù)雜和特殊），對(duì)用戶也不夠直觀；而市場上其他一些競品則是提供下拉選擇框，轉(zhuǎn)用讓用戶從中選擇導(dǎo)入的變量名，這需要每記住自己導(dǎo)入的用戶一個(gè)變量和其對(duì)應(yīng)的值具體是什么（不能存檔變量內(nèi)容），也無法滿足常量和變量靈活組合展現(xiàn)的業(yè)務(wù)需求（比如插入字段「品牌名：阿迪達(dá)斯」，其中品牌原稱常量，阿迪達(dá)斯為變量）。我們最終的方案是在編輯文本或終究其他多媒體內(nèi)容時(shí)，直接提供一個(gè)插入變量的入口，點(diǎn)擊估算導(dǎo)入的變量列表，并帶有變量第一個(gè)值常量內(nèi)容的預(yù)覽信息，插入后變量以標(biāo)簽而非字符串的方式展現(xiàn)在編輯區(qū)域，可以進(jìn)一步直覺配置樣式和內(nèi)嵌邏輯。這個(gè)過程完全可視化、可以提前映像內(nèi)容，也填入能滿足手動(dòng)輸入的文本常量和插入的文本變量靈活組合成段落的需求。為了進(jìn)一步提高配置過程的直觀性，降低B端普通用戶學(xué)習(xí)配置的成本，我們?cè)谠O(shè)計(jì)配置表單時(shí)引入了所見即得的概念，并探索了多種不一樣的設(shè)計(jì)模式。這里的主要挑戰(zhàn)在于多端、多平臺(tái)的平衡，兼顧B端配置的效率和C端展示的直觀，并用套方案來適應(yīng)PC/移動(dòng)任務(wù)的配置。方案一是類似下圖這樣的預(yù)覽視圖+表單，也是非常常見的一種移動(dòng)端組件配置界面設(shè)計(jì)模式，編輯表單的過程中可以實(shí)時(shí)組件在C端的最終呈現(xiàn)精準(zhǔn)度，兼顧了編輯效能和直觀性。Cilia 浦骷的設(shè)計(jì)is考量 X亙卡砌 桂體宅部-tir立通1rt皆華貶9育字好再加哨?沙書出席味蚌胸艮 覘耳小林序同用制隗母咻 口司方案二是將總編輯和預(yù)覽功能整合，拖拽組件到和C端展示效果完全一樣預(yù)覽視圖里，并在當(dāng)前視圖下直接編輯C端可見的組件字段，而在C尾端不直接可見的一些配置（如添加選項(xiàng)）、包括變量插入等則在以及側(cè)邊欄完成。方案二在直觀性上比方案一更有優(yōu)勢(shì)，但樣式配置與邏輯配置、變量插入的操作區(qū)割裂嵌入開來（側(cè)邊欄不全是阻抗操作），編輯效率上為有所不及。方案一和方案二是早期中晚期的兩版設(shè)計(jì)方案，但是不足之處它們卻即便存在一個(gè)缺陷，就是我們的產(chǎn)品C端是跨平臺(tái)的，一部分任務(wù)是移動(dòng)視圖，另永古約省任務(wù)卻要到PC端完成，還有一部分任務(wù)可以跨四個(gè)兩個(gè)平臺(tái)。對(duì)于PC端任務(wù)的配置，方案一這種左右分欄展示的方式就不太合適，需要有重新進(jìn)行設(shè)計(jì)，方案二也需要設(shè)計(jì)兩種預(yù)覽視圖，而開發(fā)并不愿意再額外做一套PC端目標(biāo)的配置方案，于是重新考慮新的設(shè)計(jì)。最終方案是在方案二的二三基礎(chǔ)上改進(jìn)而得，其實(shí)設(shè)計(jì)方案二的時(shí)候我們落入了貌似一個(gè)思維陷阱，就是直觀感受組件在C端的展現(xiàn)效果W編輯的視圖需要做成和C端完全一樣，事實(shí)上，只需要讓B端普通用戶知道自己配置的內(nèi)容在C端展現(xiàn)的一個(gè)大概位置順序，不出現(xiàn)上面配置數(shù)字水印一段文本信息內(nèi)容，下面出現(xiàn)說明「請(qǐng)朗讀以下（實(shí)際應(yīng)為以上）文字」的情況就夠了；而C端組件在PC/移動(dòng)的勾畫雖然樣式上之上有差異（比如標(biāo)題居左和居中，選項(xiàng)用圓點(diǎn)和用按鈕），但結(jié)構(gòu)順序是一致的（比如選擇組件都是原文-說明-選項(xiàng)），在B端只須要設(shè)計(jì)一套結(jié)構(gòu)后端順序一致的表單，就可以同時(shí)映射到PC和移動(dòng)。設(shè)計(jì)方案二時(shí)的第二個(gè)思維詭計(jì)，是將C端可見信息與不可見信息配置的完全分離，這樣雖然能更好地讓B端用戶代入C后端視角感受自己配置的內(nèi)容的展現(xiàn)效果，但卻割裂了8后端用戶的操作區(qū)域，如果從B端用戶視角來看，核心區(qū)如果要設(shè)計(jì)兩塊操作區(qū)域的話，按照高頻操作/低頻操作來劃分是更合理的做法。意識(shí)到這一點(diǎn)后，我們將一部分C端不可見但高頻的實(shí)用性項(xiàng)（比如插入數(shù)據(jù)）移到了頁面中央的編輯地域視圖區(qū)域，并且在編輯視圖被激活的狀態(tài)下展示，失焦則隱藏；另一部分C端可見但低頻的配置項(xiàng)（比如圖片上傳的總數(shù)佐證限制說明）移到了頁面右側(cè)的附加操作區(qū)域，編輯視圖下只展示高頻、關(guān)鍵信息，和最終C端效果存在差異，但不會(huì)因?yàn)檫@些差異影響到配置的過程和結(jié)果。而如果用戶想完全預(yù)覽在C端的效果的話，則在之后提供額外的預(yù)覽試做入口，除了樣式也可以體驗(yàn)題目之間的跳轉(zhuǎn)邏輯等。以此來兼顧配置的京山輕機(jī)效率與直觀性，最終效果類似下圖（不方便直接放設(shè)計(jì)稿，找了個(gè)類似的問卷網(wǎng)截圖）：Q2雷提M揖到口,腸血?.fa-_ ]urctr■一溫~一■X址咖f詡翱1 幡!i即FfgwAft“即陋tQJ困甑克贊!sra曲目自？接下來提一下兼容性的問題，因?yàn)閮?nèi)容展示區(qū)域是完全沒有組件化，通過第三方編輯器上寫好HTML插入的方式，在設(shè)計(jì)組件化后的方案時(shí)也要考慮到先兼容之前已有的線上任務(wù)展現(xiàn)，再逐步完成遷移?；诩嫒菪缘目紤]，改進(jìn)了第一版相對(duì)徹底的化配置方案，即選擇文本/圖片/視頻等組件然后進(jìn)行拼裝，引入富文本框（當(dāng)然，可選樣式做了嚴(yán)格的設(shè)限，不能隨意調(diào)整字號(hào)顏色尺寸等），在連接器富文本框中支持插入組件，而老版本的任務(wù)則通過富文本框的代碼模式進(jìn)行兼容。對(duì)于跨端產(chǎn)品，有些設(shè)計(jì)師會(huì)集中精力關(guān)注C端的設(shè)計(jì)，而對(duì)B后端端部內(nèi)容配置部分則比較輕視，甚至直接讓產(chǎn)品銷售經(jīng)理代勞完成