對(duì)于跨端產(chǎn)品，有些設(shè)計(jì)師會(huì)集中精力關(guān)注 C 端的設(shè)計(jì)，而對(duì) B 端的內(nèi)容配置部分則比較輕視。而當(dāng) C 端用戶看到配置得亂七八糟的內(nèi)容時(shí)，卻不會(huì)覺(jué)得這是 B 端用戶的鍋，只會(huì)吐槽產(chǎn)品設(shè)計(jì)本身不合理，作為跨端產(chǎn)品設(shè)計(jì)師，應(yīng)該為完整的全鏈路體驗(yàn)負(fù)責(zé)。

對(duì)于很多內(nèi)容型產(chǎn)品，C 端用戶見(jiàn)到的界面里，有相當(dāng)一部分并非直接出自設(shè)計(jì)師之手，而是 B 端的商家、運(yùn)營(yíng)們配置的結(jié)果，而如果沒(méi)有對(duì) B 端用戶的內(nèi)容配置進(jìn)行合理的規(guī)范約束、引導(dǎo)和審核，讓其自由發(fā)揮的話，最終在 C 端的呈現(xiàn)效果將完全不可控，影響到產(chǎn)品的整體視覺(jué)印象和使用體驗(yàn)。

我目前負(fù)責(zé)的一塊業(yè)務(wù)在這方面就存在比較嚴(yán)重的遺留問(wèn)題，這個(gè)業(yè)務(wù)的主要模式是商家和運(yùn)營(yíng)在 B 端發(fā)布帶薪任務(wù)，C 端用戶申領(lǐng)和完成任務(wù)來(lái)賺取薪酬。而業(yè)務(wù)的 B 端任務(wù)配置等環(huán)節(jié)目前幾乎沒(méi)有任何約束可言，比如信息展示區(qū)域，B 端用戶隨便找個(gè)第三方編輯器寫(xiě)好 HTML 內(nèi)容再往配置表單里一扔，就直接呈現(xiàn)給了 C 端用戶，于是各種千奇百怪的字號(hào)、配色、對(duì)齊等問(wèn)題紛紛出現(xiàn)。除了 C 端的展示效果失控以外，B 端編輯的代碼門(mén)檻（需要一定HTML和JSON基礎(chǔ)）、大量數(shù)據(jù)重復(fù)編輯成題目的低效等問(wèn)題，對(duì) B 端用戶本身也很不友好，影響到 B 端未來(lái)向更多外部商家開(kāi)放的可行性。

在這樣的問(wè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ù)場(chǎng)景、可靈活拼裝組合的可視化組件/模塊，并約束好最終映射到 C 端的樣式規(guī)范，達(dá)到降低 B 端配置門(mén)檻和規(guī)范 C 端呈現(xiàn)效果的兩大設(shè)計(jì)目標(biāo)。因?yàn)闃I(yè)務(wù)場(chǎng)景很多、橫跨 PC/移動(dòng)兩個(gè)平臺(tái)，涉及到的背后邏輯也很復(fù)雜，在適配業(yè)務(wù)場(chǎng)景時(shí)還要考慮到兼容性、技術(shù)可行性等，設(shè)計(jì)經(jīng)歷了一波三折的碰撞才接近定稿，以下就具體講講我對(duì)內(nèi)容配置場(chǎng)景下的進(jìn)行組件化設(shè)計(jì)過(guò)程中遇到的挑戰(zhàn)和思考。

完整用例走查與分層抽象歸納

復(fù)雜多元的業(yè)務(wù)場(chǎng)景是對(duì)于組件化設(shè)計(jì)較大的挑戰(zhàn)之一，為此我們花了一段時(shí)間體驗(yàn) C 端各種類型的線上任務(wù)、收集用戶反饋截圖等，并在前端和運(yùn)營(yíng)的幫助下整理出了相對(duì)完整的用例列表，除此之外也結(jié)合和業(yè)務(wù)方了解到的后期擴(kuò)展計(jì)劃，將還未開(kāi)發(fā)上線的潛在新業(yè)務(wù)場(chǎng)景納入一并考慮。這個(gè)過(guò)程會(huì)耗費(fèi)一定時(shí)間，但卻是組件化設(shè)計(jì)前期非常必要的步驟，直接影響到組件的覆蓋面和可擴(kuò)展性。

在業(yè)務(wù)用例收集到一定程度后，開(kāi)始對(duì)內(nèi)容維度自上而下分層進(jìn)行歸納，抽象出各類展示/題目組件，和不同組件的構(gòu)成、樣式與附加邏輯（有點(diǎn)類似HTML、CSS和JS的關(guān)系），對(duì)信息結(jié)構(gòu)逐漸形成清晰的理解。

在不同維度的內(nèi)容層級(jí)梳理清楚后，便基于此搭建 B 端配置頁(yè)面的布局框架，這個(gè)過(guò)程讓配置步驟從毫無(wú)重點(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)系也更清楚。

基于梳理出來(lái)的組件樣式類型與邏輯配置項(xiàng)，又可以進(jìn)一步定義映射到 C 端組件的視覺(jué)與交互規(guī)范，而 B 端用戶只能基于規(guī)范已有的內(nèi)容進(jìn)行有限的選擇（比如定義某段文本屬于「標(biāo)題樣式」還是「正文樣式」），不能隨心所欲地自定義控制樣式（如隨意更改文本的字號(hào)、顏色）等。

大量級(jí)數(shù)據(jù)的編輯效率提升

前面梳理內(nèi)容層級(jí)時(shí)，構(gòu)成部分我拆成了常量（手動(dòng)輸入的數(shù)據(jù)）和變量（本地上傳的數(shù)據(jù)），而變量這個(gè)概念的引入則和大量級(jí)（1K+、1W+）數(shù)據(jù)導(dǎo)入的業(yè)務(wù)場(chǎng)景緊密相關(guān)。

舉個(gè)例子，如果 1 個(gè) B 端用戶想通過(guò)任務(wù)發(fā)放收集 1000 條不同文本的語(yǔ)音朗讀數(shù)據(jù)，如果沒(méi)有變量（本地上傳的數(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)在于怎么讓選擇和插入變量的過(guò)程更直觀、易用。在產(chǎn)品之前的配置流程里，是通過(guò)讓用戶輸入 $content.image 或者 {{text}} 一類的字符串來(lái)實(shí)現(xiàn)變量的插入，這個(gè)過(guò)程存在一定的學(xué)習(xí)成本（為了區(qū)分于普通輸入文本，字符串的格式通常需要設(shè)計(jì)得比較復(fù)雜和特殊），對(duì)用戶也不夠直觀；而市場(chǎng)上其他一些競(jìng)品則是提供下拉選擇框，讓用戶從中選擇導(dǎo)入的變量名，這需要用戶記住自己導(dǎo)入的每一個(gè)變量和其對(duì)應(yīng)的值具體是什么（不能預(yù)覽變量?jī)?nèi)容），也無(wú)法滿足常量和變量靈活組合展現(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)一步配置樣式和附加邏輯。這個(gè)過(guò)程完全可視化、可以提前預(yù)覽內(nèi)容，也能滿足手動(dòng)輸入的文本常量和插入的文本變量靈活組合成段落的需求。

平衡B端/C端、PC/移動(dòng)的所見(jiàn)即得編輯模式

為了進(jìn)一步提高配置過(guò)程的直觀性，降低 B 端用戶學(xué)習(xí)配置的成本，我們?cè)谠O(shè)計(jì)配置表單時(shí)引入了所見(jiàn)即得的概念，并探索了多種不一樣的設(shè)計(jì)模式。這里的主要挑戰(zhàn)在于多端、多平臺(tái)的平衡，兼顧 B 端配置的效率和 C 端展示的直觀，并用一套方案來(lái)適應(yīng) PC/移動(dòng)任務(wù)的配置。

方案一是類似下圖這樣的預(yù)覽視圖 + 表單，也是非常常見(jiàn)的一種移動(dòng)端組件配置界面設(shè)計(jì)模式，編輯表單的過(guò)程中可以實(shí)時(shí)預(yù)覽組件在 C 端的最終呈現(xiàn)效果，兼顧了編輯效率和直觀性。

方案二是將編輯和預(yù)覽功能整合，拖拽組件到和 C 端展示效果完全一樣預(yù)覽視圖里，并在當(dāng)前視圖下直接編輯 C 端可見(jiàn)的組件字段，而在 C 端不直接可見(jiàn)的一些配置（如添加選項(xiàng)）、包括變量插入等則在側(cè)邊欄完成。方案二在直觀性上比方案一更有優(yōu)勢(shì)，但樣式配置與邏輯配置、變量插入的操作區(qū)割裂開(kāi)來(lái)（側(cè)邊欄不全是低頻操作），編輯效率上有所不及。

方案一和方案二是早期的兩版設(shè)計(jì)方案，但是它們卻都存在一個(gè)缺陷，就是我們的產(chǎn)品 C 端是跨平臺(tái)的，一部分任務(wù)是移動(dòng)視圖，另一部分任務(wù)卻要到 PC 端完成，還有一部分任務(wù)可以跨兩個(gè)平臺(tái)。對(duì)于 PC 端任務(wù)的配置，方案一這種左右分欄展示的方式就不太合適，需要重新進(jìn)行設(shè)計(jì)，方案二也需要設(shè)計(jì)兩種預(yù)覽視圖，而開(kāi)發(fā)并不愿意再額外做一套 PC 端任務(wù)的配置方案，于是重新考慮新的設(shè)計(jì)。

最終方案是在方案二的基礎(chǔ)上改進(jìn)而得，其實(shí)設(shè)計(jì)方案二的時(shí)候我們落入了一個(gè)思維陷阱，就是直觀感受組件在 C 端的展現(xiàn)效果?≠ 編輯的視圖需要做成和 C 端完全一樣，事實(shí)上，只需要讓 B 端用戶知道自己配置的內(nèi)容在 C 端展現(xiàn)的一個(gè)大概位置順序，不出現(xiàn)上面配置一段文本內(nèi)容，下面出現(xiàn)說(shuō)明「請(qǐng)朗讀以下（實(shí)際應(yīng)為以上）文字」的情況就夠了；而 C 端組件在 PC/移動(dòng)的展示雖然樣式上有差異（比如標(biāo)題居左和居中，選項(xiàng)用圓點(diǎn)和用按鈕），但結(jié)構(gòu)順序是一致的（比如選擇組件都是標(biāo)題-說(shuō)明-選項(xiàng)），在 B 端只需要設(shè)計(jì)一套結(jié)構(gòu)順序一致的表單，就可以同時(shí)映射到 PC 和移動(dòng)。

設(shè)計(jì)方案二時(shí)的第二個(gè)思維陷阱，是將 C 端可見(jiàn)信息與不可見(jiàn)信息配置的完全分離，這樣雖然能更好地讓 B 端用戶代入 C 端視角感受自己配置的內(nèi)容的展現(xiàn)效果，但卻割裂了 B 端用戶的操作區(qū)域，如果從 B 端用戶視角來(lái)看，如果要設(shè)計(jì)兩塊操作區(qū)域的話，按照高頻操作/低頻操作來(lái)劃分是更合理的做法。

意識(shí)到這一點(diǎn)后，我們將一部分?C 端不可見(jiàn)但高頻的配置項(xiàng)（比如插入數(shù)據(jù)）移到了頁(yè)面中央的編輯視圖區(qū)域，并且在編輯視圖被激活的狀態(tài)下展示，失焦則隱藏；另一部分 C 端可見(jiàn)但低頻的配置項(xiàng)（比如圖片上傳的數(shù)量限制說(shuō)明）移到了頁(yè)面右側(cè)的附加操作區(qū)域，編輯視圖下只展示高頻、關(guān)鍵信息，和最終 C 端效果存在差異，但不會(huì)因?yàn)檫@些差異影響到用戶配置的過(guò)程和結(jié)果。而如果用戶想完全預(yù)覽在 C 端的效果的話，則在之后提供額外的預(yù)覽試做入口，除了樣式也可以體驗(yàn)題目之間的跳轉(zhuǎn)邏輯等。以此來(lái)兼顧配置的效率與直觀性，最終效果類似下圖（不方便直接放設(shè)計(jì)稿，找了個(gè)類似的問(wèn)卷網(wǎng)截圖）：

考慮兼容性

最后提一下兼容性的問(wèn)題，因?yàn)閮?nèi)容展示區(qū)域之前是完全沒(méi)有組件化，通過(guò)第三方編輯器寫(xiě)好 HTML 插入的方式，在設(shè)計(jì)組件化后的方案時(shí)也要考慮到先兼容之前已有的線上任務(wù)展現(xiàn)，再逐步完成遷移。

基于兼容性的考慮，改進(jìn)了第一版相對(duì)徹底的組件化配置方案，即選擇文本/圖片/視頻等組件然后進(jìn)行拼裝，引入富文本框（當(dāng)然，可選樣式做了嚴(yán)格的限制，不能隨意調(diào)整字號(hào)顏色尺寸等），在富文本框中支持插入組件，而老版本的任務(wù)則通過(guò)富文本框的代碼模式進(jìn)行兼容。

總結(jié)

對(duì)于跨端產(chǎn)品，有些設(shè)計(jì)師會(huì)集中精力關(guān)注 C 端的設(shè)計(jì)，而對(duì) B 端的內(nèi)容配置部分則比較輕視，甚至直接讓產(chǎn)品經(jīng)理代勞完成 B 端的設(shè)計(jì)。然而，雖然?B 端的內(nèi)容配置看上去不起眼、用戶量有時(shí)也很有限，但配置的不合理卻直接影響到 C 端很多頁(yè)面的最終體驗(yàn)，我們也不能指望所有的 B 端用戶都能像自己一樣具備一定的審美和摳細(xì)節(jié)能力，或者依賴實(shí)質(zhì)約束性不大的配置規(guī)范文檔。而當(dāng) C 端用戶看到配置得亂七八糟的內(nèi)容時(shí)，卻不會(huì)覺(jué)得這是?B 端用戶的鍋，只會(huì)吐槽產(chǎn)品設(shè)計(jì)本身不合理，作為跨端產(chǎn)品設(shè)計(jì)師，應(yīng)該為完整的全鏈路體驗(yàn)負(fù)責(zé)。

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @鴻影（微信公眾號(hào)：?鴻影的設(shè)計(jì)思考錄） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可，禁止轉(zhuǎn)載。

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